:root {
  color-scheme: light;
}

html {
  min-height: 100%;
  background: #fafaf8;
}

body {
  min-height: 100%;
  margin: 0;
  background: #fafaf8;
  color: #0f172a;
}

#page-shell {
  overflow-x: clip;
}

::selection {
  background: rgba(180, 83, 9, 0.18);
  color: #0f172a;
}

img.emoji {
  display: inline-block;
  height: 1em;
  width: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
}

#site-header {
  position: sticky;
  top: 0;
  z-index: 46;
  background: #fafaf8;
  transition:
    background-color 220ms ease,
    box-shadow 220ms ease,
    padding-top 220ms ease;
}

#site-header::after {
  content: "";
  position: absolute;
  right: 2.5rem;
  bottom: 0;
  left: 2.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(149, 83, 19, 0.22), transparent);
  opacity: 0;
  transform: scaleX(0.72);
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

#site-header.is-header-condensed {
  padding-top: 0.65rem !important;
  background: #edeef1;
}

#site-header.is-header-condensed::after {
  opacity: 0;
  transform: scaleX(0.72);
}

#new-home-page {
  --new-home-paper: #f1ede5;
  --new-home-ink: #15262e;
  --new-home-rust: #a55b22;
  --new-home-line: #c9bda9;
  background: var(--new-home-paper);
  color: var(--new-home-ink);
}

#new-home-page #site-header {
  background: var(--new-home-paper);
}

#new-home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--new-home-ink);
  color: #f6f0e5;
  border-radius: 0 0 2rem 2rem;
}

#new-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(246, 240, 229, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 240, 229, 0.08) 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: linear-gradient(120deg, black 0%, transparent 72%);
}

#new-home-hero::after {
  content: "";
  position: absolute;
  top: -12rem;
  right: -8rem;
  z-index: -1;
  width: 34rem;
  height: 34rem;
  border: 1px solid rgba(214, 151, 86, 0.45);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(214, 151, 86, 0.05), 0 0 0 9rem rgba(214, 151, 86, 0.04);
}

#new-home-hero-kicker,
.new-home-eyebrow,
.new-home-section-index {
  color: #d99a5a;
}

#new-home-hero-title {
  max-width: 13ch;
  letter-spacing: -0.06em;
}

#new-home-hero-rule {
  width: min(22rem, 72vw);
  height: 1px;
  margin: 2rem 0 1.5rem;
  background: linear-gradient(90deg, #d99a5a, transparent);
}

#new-home-hero-note {
  color: rgba(246, 240, 229, 0.68);
}

#new-home-hero-actions {
  align-items: center;
}

.new-home-button {
  display: inline-flex;
  align-items: center;
  min-height: 2.9rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid rgba(246, 240, 229, 0.25);
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.new-home-button-primary {
  border-color: #d99a5a;
  background: #d99a5a;
  color: var(--new-home-ink);
}

.new-home-button-primary:hover {
  border-color: #f0bd80;
  background: #f0bd80;
}

.new-home-button-secondary {
  color: rgba(246, 240, 229, 0.8);
}

.new-home-button-secondary:hover {
  border-color: rgba(246, 240, 229, 0.65);
  color: #fff;
}

#new-home-hero-mark {
  position: relative;
  display: flex;
  min-height: 22rem;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  border: 1px solid rgba(246, 240, 229, 0.2);
  background: rgba(246, 240, 229, 0.04);
}

#new-home-hero-mark-top,
#new-home-hero-mark-bottom {
  position: relative;
  z-index: 1;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.26em;
}

#new-home-hero-mark-top {
  color: #d99a5a;
}

#new-home-hero-mark-bottom {
  margin-top: 1.5rem;
  color: rgba(246, 240, 229, 0.58);
}

#new-home-hero-mark-main {
  position: relative;
  z-index: 1;
  margin-left: -0.08em;
  font-size: clamp(3rem, 10vw, 8rem);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.09em;
}

#new-home-hero-mark-orbit {
  position: absolute;
  top: 50%;
  right: 8%;
  width: 9rem;
  height: 16rem;
  border: 1px solid rgba(217, 154, 90, 0.65);
  border-radius: 50%;
  transform: translateY(-50%) rotate(35deg);
}

.new-home-section-index {
  margin-bottom: 0.65rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.new-home-section-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.new-home-section-aside,
.new-home-section-link {
  color: var(--new-home-rust);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.new-home-section-link:hover,
.new-home-read-link:hover,
.new-home-latest-title a:hover,
.new-home-lead-title a:hover {
  color: #7f4013;
}

.new-home-lead {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  padding: 2rem 0 2.5rem;
  border-bottom: 1px solid var(--new-home-line);
}

.new-home-lead-copy {
  min-width: 0;
}

.new-home-eyebrow {
  margin-bottom: 1rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.new-home-lead-title {
  max-width: 18ch;
  font-size: clamp(2.2rem, 5vw, 5rem);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.065em;
}

.new-home-lead-title a,
.new-home-latest-title a {
  transition: color 180ms ease;
}

.new-home-lead-subtitle {
  max-width: 42rem;
  margin-top: 1.4rem;
  color: #5c625f;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.45;
}

.new-home-lead-abstract {
  max-width: 42rem;
  margin-top: 1rem;
  color: #626a67;
  font-size: 1rem;
  line-height: 1.7;
}

.new-home-lead-abstract > :first-child {
  margin-top: 0;
}

.new-home-lead-abstract > :last-child {
  margin-bottom: 0;
}

.new-home-lead-meta,
.new-home-latest-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.4rem;
  margin-top: 1.7rem;
  color: #8a715a;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.new-home-read-link {
  display: inline-flex;
  gap: 0.65rem;
  margin-top: 2rem;
  color: var(--new-home-rust);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 180ms ease;
}

#new-home-lead-cover {
  width: 100%;
  max-height: 32rem;
  border-radius: 0.2rem;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.04);
}

.new-home-subject-list {
  display: grid;
  margin-top: 1.5rem;
  border-top: 1px solid var(--new-home-line);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.new-home-subject-link {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-height: 4.2rem;
  border-bottom: 1px solid var(--new-home-line);
  color: var(--new-home-ink);
  transition: background-color 180ms ease, color 180ms ease, padding 180ms ease;
}

.new-home-subject-link:hover {
  padding-right: 0.7rem;
  padding-left: 0.7rem;
  background: #e5d9c9;
  color: var(--new-home-rust);
}

.new-home-subject-number,
.new-home-latest-index {
  color: #a99b87;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.new-home-subject-label {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.new-home-subject-arrow,
.new-home-latest-arrow {
  color: var(--new-home-rust);
  font-size: 1.35rem;
}

.new-home-latest-list {
  border-top: 1px solid var(--new-home-line);
}

.new-home-latest-item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--new-home-line);
}

.new-home-latest-title {
  max-width: 48rem;
  margin-top: 0.35rem;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.new-home-latest-meta {
  margin-top: 0.7rem;
  font-size: 0.62rem;
}

.new-home-latest-cover {
  display: none;
  width: 5rem;
  height: 5rem;
  border-radius: 0.15rem;
  object-fit: cover;
  filter: saturate(0.78);
}

.new-home-service-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.new-home-service-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--new-home-line);
  background: rgba(255, 252, 246, 0.42);
  color: var(--new-home-ink);
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.new-home-service-link:hover {
  border-color: var(--new-home-rust);
  background: #e5d9c9;
  color: var(--new-home-rust);
}

.new-home-service-link strong,
.new-home-service-link small {
  display: block;
}

.new-home-service-link strong {
  font-size: 1rem;
  font-weight: 850;
}

.new-home-service-link small {
  margin-top: 0.25rem;
  color: #8a715a;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (min-width: 640px) {
  .new-home-subject-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .new-home-service-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .new-home-latest-cover {
    display: block;
  }
}

@media (min-width: 1024px) {
  .new-home-lead {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.58fr);
    align-items: center;
    gap: 5rem;
  }
}

@media (max-width: 639px) {
  #new-home-hero-mark {
    min-height: 15rem;
  }

  #new-home-hero-mark-main {
    font-size: clamp(2.6rem, 17vw, 5rem);
  }

  #new-home-hero-mark-orbit {
    right: 2%;
    width: 6rem;
    height: 11rem;
  }

  .new-home-latest-item {
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    gap: 0.65rem;
  }
}

#site-header-nav-row {
  transition:
    border-color 220ms ease,
    padding-bottom 220ms ease;
}

#site-header.is-header-condensed #site-header-nav-row {
  padding-bottom: 0.65rem !important;
  border-color: transparent !important;
}

#site-primary-nav {
  --nav-indicator-left: 0px;
  --nav-indicator-top: 100%;
  --nav-indicator-width: 0px;
}

#site-primary-nav-indicator {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: var(--nav-indicator-width);
  height: 2px;
  border-radius: 9999px;
  background: #955313;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--nav-indicator-left), var(--nav-indicator-top), 0);
  transition:
    opacity 120ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    width 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

#site-primary-nav-indicator.is-ready {
  display: block;
  opacity: 1;
}

#site-primary-nav-indicator.is-positioning {
  transition: none;
}

#site-primary-nav.is-transitioning-selection [data-primary-nav-link] {
  border-color: transparent !important;
}

#site-mobile-menu-button {
  transition:
    border-color 170ms ease,
    color 170ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

#site-mobile-menu-button:hover,
#site-mobile-menu-button[aria-expanded="true"] {
  transform: translateY(-0.08rem) rotate(-2deg);
}

#site-mobile-menu-icon-line-1,
#site-mobile-menu-icon-line-2,
#site-mobile-menu-icon-line-3 {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 170ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

#site-mobile-menu-button[aria-expanded="true"] #site-mobile-menu-icon-line-1 {
  transform: translateY(5px) rotate(45deg);
}

#site-mobile-menu-button[aria-expanded="true"] #site-mobile-menu-icon-line-2 {
  opacity: 0;
  transform: scaleX(0.3);
}

#site-mobile-menu-button[aria-expanded="true"] #site-mobile-menu-icon-line-3 {
  transform: translateY(-5px) rotate(-45deg);
}

.account-menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 47;
  min-width: 12rem;
  padding: 0.4rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 0.7rem;
  background: #ffffff;
}

/* Shared flip-down + cascade animation for header/dashboard dropdowns. */
.account-menu,
.dash-pop {
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: perspective(900px) rotateX(-78deg) scale(0.98);
  transition:
    opacity 150ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0ms linear 240ms;
}

.account-menu.is-open,
.dash-pop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: perspective(900px) rotateX(0) scale(1);
  transition:
    opacity 160ms ease,
    transform 360ms cubic-bezier(0.34, 1.42, 0.5, 1),
    visibility 0ms linear 0ms;
}

/* The contents cascade in as the panel unfolds. */
.account-menu > *,
.dash-pop > * {
  opacity: 0;
  transform: translateY(-5px);
  transition:
    opacity 150ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.account-menu.is-open > *,
.dash-pop.is-open > * {
  opacity: 1;
  transform: translateY(0);
}

.account-menu.is-open > *:nth-child(1),
.dash-pop.is-open > *:nth-child(1) {
  transition-delay: 90ms;
}

.account-menu.is-open > *:nth-child(2),
.dash-pop.is-open > *:nth-child(2) {
  transition-delay: 130ms;
}

.account-menu.is-open > *:nth-child(3),
.dash-pop.is-open > *:nth-child(3) {
  transition-delay: 170ms;
}

.account-menu.is-open > *:nth-child(4),
.dash-pop.is-open > *:nth-child(4) {
  transition-delay: 210ms;
}

.account-menu.is-open > *:nth-child(5),
.dash-pop.is-open > *:nth-child(5) {
  transition-delay: 250ms;
}

.account-menu-head {
  padding: 0.4rem 0.6rem 0.6rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid #f1f5f9;
}

.account-menu-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #334155;
}

.account-menu-email {
  display: block;
  font-size: 0.74rem;
  color: #94a3b8;
}

.account-menu-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
}

.account-status-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: currentColor;
}

.account-menu-status.is-free {
  background: #f1f5f9;
  color: #64748b;
}

.account-menu-status.is-active {
  background: rgba(149, 83, 19, 0.1);
  color: #955313;
}

.account-menu-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: #475569;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    color 140ms ease;
}

.account-menu-item:hover {
  background: #faf6f0;
  color: #955313;
}

/* Currently-selected language in the language switcher. */
.account-menu-item.is-current {
  font-weight: 800;
  color: #955313;
}

.account-menu-signout {
  color: #b4530a;
}

.account-menu-signout:hover {
  background: #fdf2e8;
  color: #7f440e;
}

/* On phones the account menu becomes a bottom sheet (matching the .dash-modal
   look): it slides up from the bottom edge. When open, a huge box-shadow spread
   dims the surroundings — painted *behind* the card, so the card stays white
   (unlike a fixed overlay, which would tint the card too). box-shadow doesn't
   capture clicks, so a tap outside the card still lands on the page and the
   outside-click handler closes it. */
@media (max-width: 639px) {
  .account-menu {
    position: fixed;
    inset: auto 0 0 0;
    min-width: 0;
    max-height: 85vh;
    overflow-y: auto;
    padding: 0.7rem;
    border-bottom: 0;
    border-radius: 1.25rem 1.25rem 0 0;
    transform-origin: bottom center;
    transform: translateY(100%);
    box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0);
    transition:
      transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 300ms ease,
      opacity 200ms ease,
      visibility 0ms linear 300ms;
  }

  .account-menu.is-open {
    transform: translateY(0);
    box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.5);
    transition:
      transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 300ms ease,
      opacity 200ms ease,
      visibility 0ms linear 0ms;
  }

  /* Grab handle at the top of the sheet. */
  .account-menu::before {
    content: "";
    display: block;
    width: 2.25rem;
    height: 0.3rem;
    margin: 0 auto 0.7rem;
    border-radius: 9999px;
    background: #e2e8f0;
  }
}

/* Per-conversation options dropdown in the AI sidebar. Reuses .account-menu
   for looks, but is position:fixed (coordinates set in JS from the trigger) so
   the scrollable chat list can't clip it. */
.ai-convo-menu {
  position: fixed;
  min-width: 13rem;
  max-width: 15rem;
  z-index: 60;
}

.ai-convo-summary {
  margin-top: 0.3rem;
  padding: 0.5rem 0.6rem 0.35rem;
  border-top: 1px solid #f1f5f9;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #64748b;
  max-height: 8rem;
  overflow-y: auto;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ai-convo-summary.is-empty {
  color: #cbd5e1;
  font-style: italic;
}

#site-footer {
  background: #252525;
  color: #cbd5e1;
}

#site-footer-top {
  border-color: rgba(255, 255, 255, 0.08);
}

#site-footer-tagline,
#site-footer-indexing-text,
#site-footer-contact-grid {
  color: #a8b0bd;
}

#site-footer-address-title,
#site-footer-contact-title,
#site-footer-web-title {
  color: #f1f5f9;
}

.site-footer-link {
  color: #e2e8f0;
  text-decoration: none;
  text-underline-offset: 0.2em;
  transition: color 160ms ease;
}

.site-footer-link:hover,
.site-footer-link:focus-visible {
  color: #ffffff;
  text-decoration: underline;
}

@media (min-width: 768px) {
  #site-footer-indexing {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }

  #site-footer-ebsco-logo {
    margin-left: auto;
  }
}

.article-progress-track {
  display: block;
  flex: 1 1 auto;
  height: 6px;
  overflow: hidden;
  border-radius: 9999px;
  background: rgba(149, 83, 19, 0.12);
}

.article-progress-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 9999px;
  background: #955313;
  transition: width 120ms ease;
}

.article-toc-link.is-active {
  background: rgba(149, 83, 19, 0.08);
  color: #955313;
  font-weight: 700;
}

.article-cite-tab[aria-selected="true"] {
  border-color: #955313;
  background: #955313;
  color: #ffffff;
}

.article-body h2,
.article-body h3 {
  color: #955313;
  scroll-margin-top: 8rem;
}

.article-body h2 {
  margin-top: 2.5rem;
  font-size: 1.6rem;
}

.article-body > :first-child {
  margin-top: 0;
}

/* ── Article-wide content alignment (frontmatter "align"; default is left) ── */
.article-align-center,
.article-align-center :where(p, li, figcaption, h1, h2, h3, h4, h5, h6) {
  text-align: center;
}
.article-align-right,
.article-align-right :where(p, li, figcaption, h1, h2, h3, h4, h5, h6) {
  text-align: right;
}
/* Block figures/tables/images don't follow text-align: center them explicitly. */
.article-align-center :where(img, figure, table, .article-table) {
  margin-left: auto;
  margin-right: auto;
}
.article-align-right :where(img, figure, table, .article-table) {
  margin-left: auto;
  margin-right: 0;
}

/* ── Selection-level alignment: divs the editor toolbar wraps around text ── */
.markdown-content .md-align-center :where(p, li, figcaption, h1, h2, h3, h4, h5, h6) {
  text-align: center;
}
.markdown-content .md-align-right :where(p, li, figcaption, h1, h2, h3, h4, h5, h6) {
  text-align: right;
}
.markdown-content .md-align-left :where(p, li, figcaption, h1, h2, h3, h4, h5, h6) {
  text-align: left;
}
.markdown-content .md-align-center :where(img, figure, table, .article-table) {
  margin-left: auto;
  margin-right: auto;
}
.markdown-content .md-align-right :where(img, figure, table, .article-table) {
  margin-left: auto;
  margin-right: 0;
}
/* The md_in_html wrapper itself is block-level; no extra prose spacing. */
.markdown-content .md-align-left,
.markdown-content .md-align-center,
.markdown-content .md-align-right {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

/* Editor toolbar: active alignment button — filled like the auth tab pill so
   the selected state is unmistakable (the old white+underline was easy to
   miss, which read as "the button does nothing"). */
.editor-align-button.is-active {
  background: #955313;
  color: #ffffff;
}

/* Keep long imported URLs/identifiers from widening the document on phones. */
#article-title,
#article-subtitle,
#article-abstract-text,
#article-sidebar,
#article-related-list > li,
#article-author-bio-list > div,
.markdown-content :where(p, li, figcaption, h1, h2, h3, h4, h5, h6, a) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.article-body .article-table {
  margin: 2rem 0;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  background: #fff;
}

.article-table-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.article-table-label {
  margin-right: auto;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}

.article-table-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.4rem;
  background: #fff;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background-color 160ms ease;
}

.article-table-action:hover {
  border-color: rgba(149, 83, 19, 0.4);
  color: #955313;
}

.article-table-download {
  border-color: #955313;
  background: #955313;
  color: #ffffff;
}

.article-table-download:hover {
  border-color: #7f440e;
  background: #7f440e;
  color: #ffffff;
}

.article-table-scroll {
  overflow-x: auto;
}

@media (max-width: 639px) {
  .article-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .markdown-content .article-table table {
    width: auto;
    min-width: 600px;
    table-layout: auto;
  }

  .markdown-content .article-table th,
  .markdown-content .article-table td {
    white-space: nowrap;
    padding: 0.65rem 0.6rem;
  }
}

@media (max-width: 639px) {
  .article-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .article-table-toolbar {
    flex-wrap: wrap;
  }

  .article-table-label {
    flex: 1 0 100%;
    margin-right: 0;
  }

  .markdown-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .markdown-content table {
    width: auto;
    min-width: 600px;
    table-layout: auto;
  }

  .markdown-content th,
  .markdown-content td {
    white-space: nowrap;
    padding: 0.65rem 0.6rem;
  }
}

.article-body .article-table table {
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* Article figures: centre images and the caption line directly beneath them. */
.article-body img {
  max-width: 100%;
  height: auto;
}

.article-body p:has(> img) {
  margin: 1.75rem 0 0.4rem;
  text-align: center;
}

.article-body p:has(> img) > img {
  display: inline-block;
  border-radius: 0.5rem;
}

.article-body p:has(> img) + p:has(> em) {
  margin-top: 0;
  text-align: center;
  font-size: 0.9rem;
  color: #64748b;
}

@media (max-width: 1023px) {
  .dash-drawer {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: 17rem;
    max-width: 82vw;
    padding: 1.1rem 1rem 2rem;
    overflow-y: auto;
    background: #f6f6f4;
    border-right: 1px solid #e2e8f0;
    box-shadow: 24px 0 60px rgba(15, 23, 42, 0.12);
    transform: translateX(-100%);
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .dash-drawer.is-open {
    transform: translateX(0);
  }

  .dash-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 49;
    border: 0;
    background: rgba(15, 23, 42, 0.32);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
      opacity 200ms ease,
      visibility 0ms linear 200ms;
  }

  .dash-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition:
      opacity 200ms ease,
      visibility 0ms linear 0ms;
  }

  body.dash-drawer-lock {
    overflow: hidden;
  }
}

.dash-sidenav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 9px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b;
  transition:
    background-color 140ms ease,
    color 140ms ease;
}

.dash-sidenav-link:hover {
  background: #f1f5f9;
  color: #334155;
}

.dash-sidenav-link.is-active {
  background: rgba(149, 83, 19, 0.1);
  color: #955313;
}

.dash-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    color 140ms ease;
}

.dash-tab:hover {
  color: #334155;
}

.dash-tab.is-active {
  background: #955313;
  color: #ffffff;
}

.dash-strength-item[data-done="false"] {
  cursor: pointer;
}

.dash-strength-item[data-done="true"] [data-strength-add] {
  display: none;
}

.dash-check-full {
  display: none;
}

.dash-check.is-done .dash-check-empty {
  display: none;
}

.dash-check.is-done .dash-check-full {
  display: inline-block;
}

.dash-pop {
  z-index: 48;
  min-width: 11rem;
  padding: 0.35rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.7rem;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.dash-pop-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: #475569;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    color 140ms ease;
}

.dash-pop-item:hover {
  background: #faf6f0;
  color: #955313;
}

.dash-pop-item.is-selected {
  background: #faf6f0;
  color: #955313;
  font-weight: 700;
}

.dash-pop-danger {
  color: #b4530a;
}

.dash-pop-danger:hover {
  background: #fdf2e8;
  color: #7f440e;
}

.dash-toggle {
  position: relative;
  display: inline-flex;
  height: 1.5rem;
  width: 2.6rem;
  flex-shrink: 0;
  border: 0;
  border-radius: 9999px;
  background: #cbd5e1;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.dash-toggle.is-on {
  background: #955313;
}

.dash-toggle-knob {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  height: 1.1rem;
  width: 1.1rem;
  border-radius: 9999px;
  background: #ffffff;
  transition: transform 160ms ease;
}

.dash-toggle.is-on .dash-toggle-knob {
  transform: translateX(1.1rem);
}

.dash-toasts {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dash-toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 13rem;
  max-width: 22rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.7rem;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
  color: #334155;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-toast.is-in {
  opacity: 1;
  transform: translateY(0);
}

.dash-toast-icon {
  display: flex;
  height: 1.1rem;
  width: 1.1rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  font-size: 0.7rem;
  font-weight: 800;
}

.route-loader {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 9999;
  width: 100%;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, #9a5517, #d6b18b, #3f3f3f, #9a5517);
  background-size: 220% 100%;
  box-shadow: 0 0 18px rgba(154, 85, 23, 0.45);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition:
    opacity 120ms ease,
    transform 260ms ease;
}

.route-loader.route-loader-visible {
  opacity: 1;
  transform: scaleX(1);
  animation: route-loader-flow 900ms linear infinite;
}

.site-mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 48;
  border: 0;
  background: rgba(15, 23, 42, 0.2);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 170ms ease,
    visibility 0ms linear 170ms;
}

.site-mobile-menu-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity 170ms ease,
    visibility 0ms linear 0ms;
}

.site-mobile-menu-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 49;
  width: min(82vw, 21rem);
  padding: 1.35rem 1.5rem 2rem;
  border-right: 1px solid rgba(226, 232, 240, 0.96);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 24px 0 60px rgba(15, 23, 42, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-105%, 0, 0);
  transform-origin: top left;
  visibility: hidden;
  transition:
    opacity 190ms ease,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0ms linear 360ms;
}

.site-mobile-menu-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  visibility: visible;
  transition:
    opacity 190ms ease,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0ms linear 0ms;
}

.site-mobile-menu-panel [data-mobile-menu-link] {
  opacity: 0;
  transform: translateX(-1rem);
  transition:
    opacity 180ms ease,
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-mobile-menu-panel.is-open [data-mobile-menu-link] {
  opacity: 1;
  transform: translateX(0);
}

.site-mobile-menu-panel.is-open [data-mobile-menu-link]:nth-child(2) {
  transition-delay: 35ms;
}

.site-mobile-menu-panel.is-open [data-mobile-menu-link]:nth-child(3) {
  transition-delay: 70ms;
}

.site-mobile-menu-panel.is-open [data-mobile-menu-link]:nth-child(4) {
  transition-delay: 105ms;
}

.site-mobile-menu-panel.is-open [data-mobile-menu-link]:nth-child(5) {
  transition-delay: 140ms;
}

.site-mobile-menu-panel.is-open [data-mobile-menu-link]:nth-child(6) {
  transition-delay: 175ms;
}

@media (min-width: 1024px) {
  #site-header.is-nav-overflowing #site-mobile-toolbar {
    display: flex !important;
    justify-content: space-between;
  }

  #site-header.is-nav-overflowing #site-desktop-toolbar {
    display: none !important;
  }

  #site-header.is-nav-overflowing #site-mobile-search-form {
    flex: 0 1 24rem !important;
    width: 24rem;
    max-width: calc(100% - 3.5rem);
    margin-left: auto !important;
  }

  #site-header.is-nav-overflowing .site-mobile-menu-backdrop,
  #site-header.is-nav-overflowing .site-mobile-menu-panel {
    display: block;
  }
}

.search-widget-form {
  --search-accent: #955313;
}

.search-widget-input::-webkit-search-cancel-button,
.search-widget-input::-webkit-search-decoration {
  display: none;
}

.search-control-group {
  position: absolute;
  top: -0.25rem;
  right: 0;
  display: flex;
  align-items: center;
}

.search-control-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  transition:
    color 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

.search-control-submit:focus-visible {
  outline: 2px solid rgba(149, 83, 19, 0.38);
  outline-offset: 2px;
}

.search-control-submit {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: #64748b;
}

.search-control-submit:hover,
.search-widget-form:focus-within .search-control-submit {
  color: var(--search-accent);
  transform: translateX(1px);
}

.search-widget-form.has-search-value .search-control-submit {
  color: #3f3f3f;
}

.search-suggestions-panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 47;
}

.search-suggestions-panel:empty {
  display: none;
}

.search-suggestions-content {
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-top: 0;
  border-radius: 0 0 0.4rem 0.4rem;
  background: rgba(255, 255, 255, 0.98);
}

.search-suggestions-list {
  display: grid;
}

.search-suggestions-item + .search-suggestions-item {
  border-top: 1px solid #f1f5f9;
}

.search-suggestions-link {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  transition:
    background-color 140ms ease,
    color 140ms ease;
}

.search-suggestions-link:hover {
  background: #fafaf8;
}

.search-suggestions-category {
  color: #955313;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.search-suggestions-label {
  color: #334155;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}

.search-suggestions-all,
.search-suggestions-empty {
  display: block;
  padding: 0.8rem 1rem;
  border-top: 1px solid #f1f5f9;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 800;
}

.search-suggestions-all:hover {
  color: #955313;
}

@keyframes route-loader-flow {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 220% 0;
  }
}

.announcement-viewport {
  position: relative;
  isolation: isolate;
  touch-action: pan-y;
}

.announcement-viewport::before {
  content: "";
  position: absolute;
  inset: -1rem -0.75rem -0.5rem;
  z-index: -2;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.94);
}

.announcement-viewport::after {
  content: "";
  position: absolute;
  inset: -0.1rem;
  z-index: -1;
  border-radius: 1.35rem;
  border: 1px solid rgba(154, 85, 23, 0.12);
  box-shadow:
    0 18px 45px rgba(63, 63, 63, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.announcement-track {
  position: relative;
  min-height: 20rem;
  padding: 1.4rem 1.35rem 1.1rem;
}

.announcement-control {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(154, 85, 23, 0.16);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.92);
  color: #955313;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.9);
  transition:
    opacity 120ms ease,
    transform 170ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 160ms ease,
    color 160ms ease;
}

.announcement-control:hover {
  background: #955313;
  color: #fff;
}

.announcement-control-prev {
  left: 0.45rem;
}

.announcement-control-next {
  right: 0.45rem;
}

#home-announcement-panel:hover .announcement-control,
#home-announcement-panel:focus-within .announcement-control {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

@media (hover: none), (pointer: coarse) {
  .announcement-control {
    display: none;
  }
}

.announcement-slide {
  position: absolute;
  inset: 1.4rem 1.35rem 1.1rem;
  opacity: 0;
  transform-origin: center center;
  transform: translate3d(100%, 0, 0);
  transition:
    opacity 180ms ease,
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.announcement-slide.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.announcement-slide.is-leaving.from-forward {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.announcement-slide.is-leaving.from-backward {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.announcement-slide.is-after.from-forward {
  transform: translate3d(100%, 0, 0);
}

.announcement-slide.is-before.from-backward {
  transform: translate3d(-100%, 0, 0);
}

.announcement-slide h3,
.announcement-slide p {
  opacity: 1;
  transform: none;
}

.announcement-dot {
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.announcement-dot.is-active {
  box-shadow: 0 0 0 1px rgba(154, 85, 23, 0.22);
}

.announcement-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 55%);
  transform: translateX(-120%);
}

.announcement-dot.is-active::after {
  animation: announcement-dot-glint 900ms ease;
}

@keyframes announcement-dot-glint {
  from {
    transform: translateX(-120%);
  }

  to {
    transform: translateX(160%);
  }
}

.markdown-content {
  color: #334155;
  font-size: 1.04rem;
  line-height: 1.9;
}

.markdown-content > * + * {
  margin-top: 1.4rem;
}

.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
  color: #374151;
  font-family: Georgia, Cambria, serif;
  font-weight: 800;
  line-height: 1.18;
}

.markdown-content h2 {
  margin-top: 3rem;
  font-size: 2rem;
}

.markdown-content h3 {
  margin-top: 2.2rem;
  font-size: 1.35rem;
}

.markdown-content p a,
.markdown-content li a,
.markdown-content figcaption a {
  color: #955313;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.markdown-content strong {
  color: #1f2937;
}

.markdown-content hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid #e2e8f0;
}

.markdown-content ul,
.markdown-content ol {
  padding-left: 1.35rem;
}

.markdown-content ul {
  list-style: disc;
}

.markdown-content ol {
  list-style: decimal;
}

.markdown-content li + li {
  margin-top: 0.45rem;
}

.markdown-content blockquote,
.markdown-content .admonition {
  margin-top: 1.8rem;
  padding: 1.2rem 1.35rem;
  border-left: 4px solid #955313;
  background: #f8f4ef;
  color: #475569;
}

.markdown-content .admonition-title {
  margin-bottom: 0.45rem;
  color: #955313;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.markdown-content table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  background: #fff;
}

.markdown-content thead {
  background: #f6ede2;
}

.markdown-content th,
.markdown-content td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
}

.markdown-content tbody tr:last-child td {
  border-bottom: 0;
}

.markdown-content figure {
  margin: 2rem 0;
}

.markdown-content figure img {
  width: min(100%, 38rem);
  margin: 0 auto;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.markdown-content figcaption {
  margin-top: 0.85rem;
  color: #64748b;
  font-size: 0.9rem;
  text-align: center;
}

.markdown-content code {
  padding: 0.18rem 0.35rem;
  border-radius: 0.35rem;
  background: #f8fafc;
  color: #7c2d12;
  font-size: 0.92em;
}

.markdown-content pre {
  overflow-x: auto;
  padding: 1rem 1.1rem;
  border-radius: 0.9rem;
  background: #1f2937;
  color: #e2e8f0;
}

.markdown-content pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}

.markdown-content .md-stat-grid {
  display: grid;
  gap: 0.8rem;
  margin-top: 2rem;
}

.markdown-content .md-stat-card {
  padding: 1rem 1.05rem;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #fff;
}

.markdown-content .md-stat-label {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.markdown-content .md-stat-value {
  margin-top: 0.45rem;
  color: #1f2937;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .markdown-content .md-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .site-mobile-menu-backdrop,
  .site-mobile-menu-panel {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #site-header,
  #site-header::after,
  #site-header-nav-row,
  #site-primary-nav-indicator,
  #site-mobile-menu-button,
  #site-mobile-menu-icon-line-1,
  #site-mobile-menu-icon-line-2,
  #site-mobile-menu-icon-line-3,
  .account-menu,
  .account-menu > *,
  .dash-pop,
  .dash-pop > * {
    transition: none !important;
  }
}

@media (min-width: 1024px) and (max-width: 1535px) {
  #home-grid {
    grid-template-columns: 200px minmax(0, 1fr) !important;
    column-gap: 2rem !important;
    row-gap: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  #home-left-sidebar {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
  }

  #home-articles {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #home-right-sidebar {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3rem 2rem !important;
  }

  #home-right-sidebar > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0 !important;
  }

  #home-services-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #home-links-panel,
  #home-right-ads {
    grid-column: 1 / -1 !important;
  }

  #home-links-panel {
    padding-top: 1.5rem !important;
    border-top: 1px solid #e2e8f0 !important;
  }

  #home-links-list {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  #home-right-ads {
    margin-left: calc(-200px - 2rem) !important;
    width: calc(100% + 200px + 2rem) !important;
  }
}

/* Utilities used by interactive dashboard widgets (not in the compiled set). */
.cursor-pointer {
  cursor: pointer;
}

.hover\:bg-rose-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}

.hover\:text-rose-500:hover {
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}

/* AI assistant chat. */
#ai-tools-page {
  padding-right: 4px;
  height: 100vh;
  height: 100dvh;
}

#ai-tools-main {
  min-height: 0;
}

#ai-tools-sidebar {
  width: 300px;
  min-width: 300px;
  display: flex;
  border-right: 1px solid rgba(0, 0, 0, 0.09);
  padding: 8px 6px 0;
}

#ai-tools-topbar {
  height: 52px;
}

#ai-tools-input {
  border-color: rgba(0, 0, 0, 0.12);
}

#ai-tools-empty-mark {
  width: 120px;
  height: 120px;
}

#ai-tools-disclaimer {
  max-width: 938px;
  padding: 8px 56px;
}

/* Off-canvas drawer trigger backdrop (mobile only). */
#ai-tools-sidebar-backdrop {
  display: none;
}

@media (max-width: 900px) {
  #ai-tools-page {
    padding-right: 0;
  }

  /* The sidebar becomes a slide-in drawer under the 52px topbar. */
  #ai-tools-sidebar {
    position: fixed;
    top: 52px;
    bottom: 0;
    left: 0;
    z-index: 60;
    max-width: 84vw;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    transform: translateX(-100%);
    transition: transform 0.24s ease;
  }

  #ai-tools-page[data-sidebar-open] #ai-tools-sidebar {
    transform: translateX(0);
  }

  #ai-tools-sidebar-backdrop {
    position: fixed;
    top: 52px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 55;
    background: rgba(15, 23, 42, 0.4);
  }

  #ai-tools-page[data-sidebar-open] #ai-tools-sidebar-backdrop {
    display: block;
  }
}

@media (min-width: 901px) {
  #ai-tools-sidebar {
    position: static;
    transform: none;
  }
}

@media (min-width: 901px) and (max-width: 1079px) {
  #ai-tools-sidebar {
    width: 316px;
    min-width: 316px;
  }
}

.chat-shell {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: min(72vh, 680px);
}

.chat-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}

/* History rows live in a wrapper, so the thread's row gap doesn't reach them —
   give the wrapper the same column spacing. */
.chat-thread [data-chat-history] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chat-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.chat-row.is-user {
  flex-direction: row-reverse;
}

.chat-avatar {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}

.chat-avatar.is-assistant {
  background: rgba(149, 83, 19, 0.1);
  color: #955313;
}

.chat-avatar.is-user {
  background: #e2e8f0;
  color: #475569;
}

.chat-bubble {
  max-width: 80%;
  border-radius: 14px;
  padding: 0.7rem 0.95rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  /* normal here so stray markup whitespace (indentation/newlines in server-
     rendered history) collapses; newline preservation lives on .chat-text /
     .chat-answer instead. */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The actual message text — preserves the author's line breaks. */
.chat-text {
  white-space: pre-line;
}

.chat-bubble.is-assistant {
  background: #f6f7f9;
  color: #334155;
  border-top-left-radius: 3px;
}

.chat-bubble.is-user {
  background: #955313;
  color: #ffffff;
  border-top-right-radius: 3px;
}

.chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}

.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #cbd5e1;
  animation: chatBlink 1s ease-in-out 0s infinite;
}

.chat-typing span:nth-child(2) {
  animation: chatBlink 1s ease-in-out 0.15s infinite;
}

.chat-typing span:nth-child(3) {
  animation: chatBlink 1s ease-in-out 0.3s infinite;
}

@keyframes chatBlink {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

@keyframes chatSpin {
  to { transform: rotate(360deg); }
}

@keyframes chatStepIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* The single visible step (collapsed) swaps in with a vertical slide and a
   fading vertical (left) border. */
@keyframes chatStepSwap {
  from { opacity: 0; transform: translateY(-7px); border-left-color: transparent; }
  to { opacity: 1; transform: translateY(0); border-left-color: rgba(149, 83, 19, 0.4); }
}

@keyframes chatShimmer {
  0% { background-position: 0% center; }
  100% { background-position: -200% center; }
}

/* Animated tool-use process inside an assistant bubble. */
.chat-process-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #955313;
}

/* The title toggles between showing one step and all steps. */
.chat-process.has-steps .chat-process-title {
  cursor: pointer;
}

.chat-process-caret {
  display: none;
  flex: 0 0 auto;
  color: #b98a52;
  transition: transform 0.2s ease;
}

.chat-process.has-steps .chat-process-caret {
  display: flex;
}

.chat-process.is-expanded .chat-process-caret {
  transform: rotate(180deg);
}

/* In-progress label: a brand shimmer sweep instead of a spinner. */
.chat-process-title.is-thinking {
  background-image: linear-gradient(90deg, rgba(149, 83, 19, 0.45) 0%, #955313 25%, #e6c49a 50%, #955313 75%, rgba(149, 83, 19, 0.45) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: 0.01em;
  animation: chatShimmer 1.6s linear infinite;
}

.chat-process-check {
  display: flex;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(149, 83, 19, 0.12);
  color: #955313;
}

.chat-process-steps {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  margin-top: 0.5rem;
}

/* Collapsed (default): only the most recent step shows; it swaps in with a
   vertical slide + border fade as the activity changes. */
.chat-process:not(.is-expanded) .chat-process-steps > .chat-step:not(:last-child) {
  display: none;
}

.chat-process:not(.is-expanded) .chat-process-steps > .chat-step:last-child {
  animation: chatStepSwap 0.26s ease both;
}

.chat-step {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-size: 0.78rem;
  color: #94a3b8;
  border-left: 2px solid transparent;
  padding-left: 0.45rem;
  margin-left: -0.45rem;
  animation: chatStepIn 0.25s ease both;
}

.chat-step.is-done {
  color: #64748b;
}

/* Clickable header row: icon + label + a hint chevron. */
.chat-step-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.chat-step-label {
  flex: 1 1 auto;
  min-width: 0;
}

.chat-step-ico {
  display: flex;
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
  align-items: center;
  justify-content: center;
}

.chat-step.is-done .chat-step-ico {
  color: #16a34a;
}

.chat-step-spin {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 9999px;
  border: 2px solid #e2e8f0;
  border-top-color: #955313;
  animation: chatSpin 0.7s linear infinite;
}

.chat-step-chevron {
  flex: 0 0 auto;
  color: #cbd5e1;
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.15s ease;
}

.chat-step-head:hover .chat-step-chevron {
  opacity: 1;
}

.chat-step.is-open .chat-step-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Detail panel slides down from underneath the tool call. */
.chat-step-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.24s ease, opacity 0.2s ease;
}

.chat-step.is-open .chat-step-detail {
  grid-template-rows: 1fr;
  opacity: 1;
}

.chat-step-detail-inner {
  overflow: hidden;
  min-height: 0;
  margin-left: 1.45rem;
}

.chat-step-tool {
  margin: 0.3rem 0 0;
  font-family: var(--ds-font-family-monospace, ui-monospace, Menlo, monospace);
  font-size: 0.72rem;
  color: #64748b;
  word-break: break-word;
}

.chat-step-result {
  margin: 0.3rem 0 0.35rem;
  padding: 0.4rem 0.55rem;
  background: #f1f5f9;
  border-radius: 6px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #475569;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 12rem;
  overflow-y: auto;
}

.chat-answer {
  white-space: pre-line;
}

.chat-answer:empty {
  display: none;
}

/* Assistant errors (rate limit, transient failures) — shown in red. */
.chat-answer.is-error,
.chat-answer.is-error p {
  color: #b91c1c;
}

/* Rendered Markdown inside assistant replies (live .chat-answer + history
   .chat-md). Once rendered, the container holds block elements, so newline
   preservation no longer applies. */
.chat-answer:has(p), .chat-answer:has(ul), .chat-answer:has(pre),
.chat-md {
  white-space: normal;
}

.chat-answer p, .chat-md p {
  margin: 0 0 0.5rem;
}

.chat-answer > :last-child, .chat-md > :last-child {
  margin-bottom: 0;
}

.chat-answer ul, .chat-answer ol, .chat-md ul, .chat-md ol {
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
}

.chat-answer ul, .chat-md ul { list-style: disc; }
.chat-answer ol, .chat-md ol { list-style: decimal; }

.chat-answer li, .chat-md li {
  margin: 0.15rem 0;
}

.chat-answer h3, .chat-answer h4, .chat-answer h5, .chat-answer h6,
.chat-md h3, .chat-md h4, .chat-md h5, .chat-md h6 {
  margin: 0.5rem 0 0.25rem;
  font-size: 0.92rem;
  font-weight: 700;
}

.chat-answer code, .chat-md code {
  background: #eef2f7;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  font-size: 0.85em;
}

.chat-answer pre, .chat-md pre {
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.7rem;
  background: #f1f5f9;
  border-radius: 8px;
  overflow-x: auto;
}

.chat-answer pre code, .chat-md pre code {
  background: none;
  padding: 0;
  font-size: 0.8rem;
}

.chat-answer a, .chat-md a {
  color: #955313;
  text-decoration: underline;
}

.chat-answer blockquote, .chat-md blockquote {
  margin: 0 0 0.5rem;
  padding-left: 0.6rem;
  border-left: 3px solid #e2e8f0;
  color: #64748b;
}

/* User bubbles render plain text on a dark background — keep inline code legible. */
.chat-bubble.is-user code {
  background: rgba(255, 255, 255, 0.2);
}

.chat-process.is-complete + .chat-answer:not(:empty) {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px dashed #e8eaee;
}

.chat-answer.is-streaming::after {
  content: '▌';
  margin-left: 1px;
  color: #955313;
  animation: chatBlink 1s infinite;
}

/* Collapsed tool-activity summary that expands to the thought/tool chain. */
.chat-activity {
  margin-bottom: 0.55rem;
  border: 1px solid #eef2f7;
  border-radius: 9px;
  background: #f8fafc;
}

.chat-activity-summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  list-style: none;
  padding: 0.4rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
}

.chat-activity-summary::-webkit-details-marker {
  display: none;
}

.chat-activity-text {
  flex: 1 1 auto;
  min-width: 0;
}

.chat-activity-caret {
  flex: 0 0 auto;
  color: #94a3b8;
  transition: transform 0.15s ease;
}

.chat-activity[open] .chat-activity-caret {
  transform: rotate(180deg);
}

.chat-activity-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.15rem 0.7rem 0.55rem;
  border-top: 1px dashed #e8eaee;
}

.chat-thought {
  font-size: 0.72rem;
  line-height: 1.35;
  color: #64748b;
  font-style: italic;
}

.chat-act-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
}

.chat-suggestions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
  overflow-x: auto;
  border-top: 1px solid #f1f5f9;
  padding: 0.75rem 1rem;
}

.chat-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  background: #ffffff;
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.chat-chip:hover {
  border-color: rgba(149, 83, 19, 0.4);
  color: #955313;
}

.chat-chip-ico {
  display: flex;
  height: 1.25rem;
  width: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}

.chat-composer {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  gap: 0.5rem;
  border-top: 1px solid #e2e8f0;
  padding: 0.75rem;
}

.chat-input {
  flex: 1 1 auto;
  min-height: 2.5rem;
  max-height: 8rem;
  resize: none;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.55rem 0.8rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #334155;
}

.chat-input:focus {
  outline: none;
  border-color: #334155;
}

.chat-input::placeholder {
  color: #94a3b8;
}

.chat-send {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #955313;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s ease;
}

.chat-send:hover {
  background: #7f440e;
}

.ai-tools-chat.chat-shell {
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  border-radius: 0;
}

.ai-tools-chat .chat-thread {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  background: transparent;
}

.ai-tools-chat.ai-tools-chat-empty .chat-thread {
  flex: 0 0 auto;
  overflow: visible;
}

.ai-tools-chat.ai-tools-chat-empty [data-chat-empty] {
  margin-top: calc(30vh - 96px);
  margin-bottom: 24px;
}

.ai-tools-chat [data-chat-history] {
  box-sizing: border-box;
  width: min(100%, 820px);
  margin: 0 auto;
  padding: 1rem;
}

.ai-tools-chat .chat-suggestions {
  width: min(100%, 820px);
  margin: 0 auto;
  border-top: 0;
  padding: 0 0.75rem 0.5rem;
  justify-content: center;
}

.ai-tools-chat .ai-tools-composer {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  border-top: 0;
  background: transparent;
  padding: 0 64px;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
}

.ai-tools-chat .ai-tools-composer #ai-tools-input {
  max-width: 938px;
  margin: 0 auto;
}

.ai-tools-chat.ai-tools-chat-empty .ai-tools-composer #ai-tools-input {
  max-width: 640px;
}

.ai-tools-chat .chat-input {
  min-height: 3.25rem;
  border-color: #d8d3cc;
  border-radius: 1.35rem;
  padding: 0.95rem 1rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.ai-tools-chat .chat-input:focus {
  border-color: rgba(149, 83, 19, 0.55);
  box-shadow: 0 0 0 3px rgba(149, 83, 19, 0.1);
}

.ai-tools-chat .chat-send {
  height: 3.25rem;
  width: 3.25rem;
  border-radius: 1.1rem;
}

.ai-tools-chat .ai-tools-input-field {
  min-height: 0;
  max-height: 3.25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 0.25rem;
  box-shadow: none;
}

.ai-tools-chat .ai-tools-input-field:focus {
  box-shadow: none;
}

.ai-tools-chat .ai-tools-send {
  height: 2rem;
  width: 2rem;
  border-radius: 9999px;
}

@media (max-width: 900px) {
  .ai-tools-chat.ai-tools-chat-empty {
    justify-content: center;
  }

  .ai-tools-chat.ai-tools-chat-empty .chat-thread {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .ai-tools-chat.ai-tools-chat-empty [data-chat-empty] {
    margin-top: 0;
    margin-bottom: 16px;
  }

  .ai-tools-chat.ai-tools-chat-empty #ai-tools-empty-mark {
    height: 112px;
    width: 112px;
  }

  .ai-tools-chat .ai-tools-composer {
    padding: 0 12px;
  }

  .ai-tools-chat .ai-tools-composer #ai-tools-input,
  .ai-tools-chat.ai-tools-chat-empty .ai-tools-composer #ai-tools-input {
    max-width: 700px;
  }

  #ai-tools-disclaimer {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Suggestion item picker (modal). */
/* The article/draft picker reuses the .dash-modal shell (backdrop + bottom
   sheet on mobile); this is just its scrollable option list. */
.dash-modal-list {
  margin-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 55vh;
  overflow-y: auto;
}

.chat-picker-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chat-picker-option:hover {
  background: #faf6f1;
  border-color: rgba(149, 83, 19, 0.25);
  color: #955313;
}

/* "Create a new article" chooser modal (blank editor vs Word import).
   Stays in the DOM; the single `.is-open` toggle shows it. Only the backdrop
   fades — the card itself just scales/slides in, never fades. */
.dash-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0ms linear 200ms;
}

.dash-modal.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0ms linear 0ms;
}

.dash-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  cursor: pointer;
  background: rgba(15, 23, 42, 0.5);
  opacity: 0;
  transition: opacity 200ms ease;
}

.dash-modal.is-open .dash-modal-backdrop {
  opacity: 1;
}

.dash-modal-card {
  position: relative;
  width: 100%;
  max-width: 34rem;
  /* Never exceed the viewport (minus the .dash-modal 1rem padding on each
     side); scroll internally so tall modals like member-control fit instead
     of overflowing off-screen. Mobile has its own 85vh rule below. */
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
  transform: scale(0.98);
  transition: transform 160ms ease;
}

.dash-modal.is-open .dash-modal-card {
  transform: scale(1);
}

.dash-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.dash-modal-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1e293b;
}

.dash-modal-subtitle {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #64748b;
}

/* Shared confirmation dialog (base.html), built on .dash-modal. */
.confirm-card {
  max-width: 26rem;
}

.confirm-message {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  color: #64748b;
}

.confirm-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

.confirm-btn {
  display: inline-flex;
  height: 2.5rem;
  align-items: center;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 0 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.confirm-btn-cancel {
  border-color: #e2e8f0;
  background: #ffffff;
  color: #475569;
}

.confirm-btn-cancel:hover {
  border-color: rgba(149, 83, 19, 0.4);
  color: #955313;
}

.confirm-btn-ok {
  background: #955313;
  color: #ffffff;
}

.confirm-btn-ok:hover {
  background: #7f440e;
}

.confirm-btn-ok.is-danger {
  background: #e11d48;
}

.confirm-btn-ok.is-danger:hover {
  background: #be123c;
}

.dash-modal-close {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: #94a3b8;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.dash-modal-close:hover {
  background: #f1f5f9;
  color: #475569;
}

.dash-modal-choices {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .dash-modal-choices {
    grid-template-columns: 1fr 1fr;
  }
}

.dash-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1.1rem;
  text-align: left;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.dash-choice:hover {
  border-color: rgba(149, 83, 19, 0.45);
}

.dash-choice.is-dragover {
  border-color: #955313;
  border-style: dashed;
  background: rgba(149, 83, 19, 0.06);
}

.dash-choice.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.dash-choice-icon {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  background: rgba(149, 83, 19, 0.1);
  color: #955313;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.dash-choice:hover .dash-choice-icon {
  background: #955313;
  color: #ffffff;
}

.dash-choice-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
}

.dash-choice-text {
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: #64748b;
}

.dash-choice-hint {
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #955313;
}

.dash-modal-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Editor section tabs and responsive pane layout. */
#editor-page {
  --editor-mobile-nav-height: 4.9rem;
}

#editor-topbar-inner {
  position: relative;
}

#editor-heading {
  flex: 1 1 auto;
  min-width: 0;
}

#editor-title-display {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-desktop-action {
  display: none;
}

.editor-mobile-action-trigger {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #475569;
  transition:
    border-color 0.16s ease,
    color 0.16s ease,
    background-color 0.16s ease;
}

.editor-mobile-action-trigger:hover,
.editor-mobile-action-trigger[aria-expanded="true"] {
  border-color: rgba(149, 83, 19, 0.4);
  background: rgba(149, 83, 19, 0.06);
  color: #955313;
}

.editor-desktop-tabbar {
  display: none;
}

.editor-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  background: #f8fafc;
}

.editor-tabs-indicator {
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0;
  width: var(--editor-tab-width, calc((100% - 0.5rem) / 2));
  border-radius: 9999px;
  background: #955313;
  opacity: 0;
  transform: translateX(var(--editor-tab-left, 0.25rem));
  transition:
    transform 420ms cubic-bezier(0.2, 1.25, 0.26, 1),
    width 420ms cubic-bezier(0.2, 1.25, 0.26, 1),
    opacity 120ms ease;
}

.editor-tabs-indicator.is-ready {
  opacity: 1;
}

.editor-tab-button {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 9rem;
  height: 2.35rem;
  align-items: center;
  justify-content: center;
  padding: 0 1.1rem;
  border-radius: 9999px;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 800;
  white-space: nowrap;
}

.editor-tab-button.is-active {
  color: #ffffff;
}

/* Auth page tabs on phones: each tab only gets half of a narrow card, and
   long locale labels ("Створити обліковий запис") would bleed out of the
   pill. Let the text wrap and shrink instead of overflowing. The sliding
   indicator is placed from offsetWidth/offsetLeft in JS, so a taller pill
   still tracks correctly. (The editor's own tabs live in a desktop-only
   tabbar, so this override only ever hits auth.) */
@media (max-width: 640px) {
  #auth-tablist .editor-tab-button {
    min-width: 0;
    height: auto;
    min-height: 2.35rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
  }
}

.editor-workspace {
  display: grid;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  gap: 1.5rem;
  align-items: start;
  padding: 1.5rem 1.25rem calc(1.5rem + var(--editor-mobile-nav-height));
}

.editor-pane {
  min-width: 0;
}

/* Metadata pane order: article details, then the cover/preview picker, then the
   gallery (full width) underneath both. Order works at every width because the
   grid is single-column until the desktop breakpoint widens it. */
.editor-metadata-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

#editor-meta-card {
  order: 1;
}

#editor-cover-card {
  order: 2;
}

#editor-gallery-card {
  order: 3;
}

.editor-actions-choices {
  grid-template-columns: 1fr !important;
}

.editor-action-choice {
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem;
}

.editor-action-icon {
  height: 2.5rem;
  width: 2.5rem;
  flex: 0 0 auto;
}

.editor-action-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.1rem;
}

.editor-action-choice-primary {
  border-color: rgba(149, 83, 19, 0.35);
  background: rgba(149, 83, 19, 0.04);
}

.editor-action-choice-primary .editor-action-icon {
  background: #955313;
  color: #ffffff;
}

.editor-mobile-nav {
  display: none;
}

.editor-mobile-nav-indicator {
  position: absolute;
  top: 0.45rem;
  bottom: calc(0.45rem + env(safe-area-inset-bottom));
  left: 0;
  width: var(--editor-tab-width, calc((100% - 2rem) / 3));
  border-radius: 12px;
  background: #955313;
  opacity: 0;
  transform: translateX(var(--editor-tab-left, 0.75rem));
  transition:
    transform 420ms cubic-bezier(0.2, 1.25, 0.26, 1),
    width 420ms cubic-bezier(0.2, 1.25, 0.26, 1),
    opacity 120ms ease;
}

.editor-mobile-nav-indicator.is-ready {
  opacity: 1;
}

.editor-mobile-nav-button {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  min-height: 3.4rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  border-radius: 12px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
}

.editor-mobile-nav-button.is-active {
  color: #ffffff;
}

@media (min-width: 1024px) {
  #editor-heading {
    max-width: clamp(12rem, calc(50vw - 13rem), 34rem);
    position: relative;
    z-index: 1;
  }

  #editor-topbar-actions {
    position: relative;
    z-index: 2;
  }

  .editor-desktop-action {
    display: inline-flex;
  }

  .editor-mobile-action-trigger {
    display: none;
  }

  .editor-desktop-tabbar {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    flex: 0 0 auto;
    justify-content: center;
    transform: translate(-50%, -50%);
  }

  .editor-workspace {
    padding: 1.5rem 2rem 2rem;
  }

  .editor-workspace.is-metadata-layout {
    max-width: 960px;
  }

  @media (min-width: 1024px) {
    .editor-workspace.is-metadata-layout {
      max-width: 1200px;
    }
  }

  .editor-metadata-grid {
    display: grid;
    gap: 1.25rem;
  }

  @media (min-width: 1024px) {
    .editor-metadata-grid {
      grid-template-columns: minmax(0, 1fr) 280px;
    }
    /* Full-width row beneath the details + cover columns. */
    #editor-gallery-card {
      grid-column: 1 / -1;
    }
  }

  .editor-workspace.is-editor-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  }

  #editor-preview-card {
    position: sticky;
    top: 8.75rem;
  }

  #editor-preview-scroll {
    max-height: calc(100vh - 11rem);
  }
}

@media (max-width: 1023px) {
  #editor-page {
    padding-bottom: var(--editor-mobile-nav-height);
  }

  .editor-mobile-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    padding:
      0.45rem max(0.75rem, env(safe-area-inset-right))
      calc(0.45rem + env(safe-area-inset-bottom))
      max(0.75rem, env(safe-area-inset-left));
    border-top: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -18px 50px rgba(15, 23, 42, 0.12);
  }
}

/* Editor body while a file is dragged over it. */
#editor-body-card.is-dropping {
  border-color: #955313;
  background: rgba(149, 83, 19, 0.04);
}

/* Bottom sheet on mobile: full-width, slides up from the bottom edge. */
@media (max-width: 639px) {
  .dash-modal {
    align-items: flex-end;
    padding: 0;
    transition: visibility 0ms linear 300ms;
  }

  .dash-modal.is-open {
    transition: visibility 0ms linear 0ms;
  }

  .dash-modal-backdrop {
    transition: opacity 300ms ease;
  }

  .dash-modal-card {
    max-width: none;
    max-height: 85vh;
    overflow-y: auto;
    border-bottom: 0;
    border-radius: 1.25rem 1.25rem 0 0;
    transform: translateY(100%);
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .dash-modal.is-open .dash-modal-card {
    transform: translateY(0);
  }

  /* Grab handle. */
  .dash-modal-card::before {
    content: "";
    display: block;
    width: 2.25rem;
    height: 0.3rem;
    margin: -0.25rem auto 0.9rem;
    border-radius: 9999px;
    background: #e2e8f0;
  }
}

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  .dash-modal,
  .dash-modal-backdrop,
  .dash-modal-card,
  .editor-tabs-indicator,
  .editor-mobile-nav-indicator,
  .editor-tab-button,
  .editor-mobile-nav-button {
    transition-duration: 1ms;
  }

  .dash-modal-card {
    transform: none;
  }
}

.article-body a,
.article-link {
  color: #955313;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(149, 83, 19, 0.3);
  transition: color 0.15s, text-decoration-color 0.15s;
  word-break: break-word;
}
.article-body a:hover,
.article-link:hover {
  color: #7c3aed;
  text-decoration-color: currentColor;
}

/* Article photo gallery (legacy gallery_assist nodes). Written here rather
   than as Tailwind utilities: the compiled tailwind.css is a committed build
   and would not contain new arbitrary classes until it is regenerated. */
.article-gallery {
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

.article-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.article-gallery-item {
  min-width: 0;
}

.article-gallery-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.article-gallery-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  transition: opacity 0.15s ease;
}

.article-gallery-open:hover .article-gallery-thumb,
.article-gallery-open:focus-visible .article-gallery-thumb {
  opacity: 0.88;
}

.article-gallery-caption {
  margin-top: 0.4rem;
  overflow: hidden;
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Offset the lightbox from the top by the header's height (set in JS). */
#article-gallery-lightbox {
  margin: 0;
}

.gallery-lightbox {
  position: fixed;
  top: var(--gallery-lightbox-top, 0px);
  right: 0;
  bottom: 0;
  left: 0;
  /* Below the sticky site header (z-index 46) so it never paints over it; the
     top offset is set from the header's height when the lightbox opens. */
  z-index: 45;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.92);
}

.gallery-lightbox.is-open {
  display: flex;
}

.gallery-lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 92vw;
  margin: 0;
}

.gallery-lightbox-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 6px;
}

.gallery-lightbox-caption {
  margin-top: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
}

.gallery-lightbox-caption:empty {
  display: none;
}

.gallery-lightbox-nav,
.gallery-lightbox-close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s ease;
}

.gallery-lightbox-nav:hover,
.gallery-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.24);
}

.gallery-lightbox-nav {
  top: 50%;
  width: 2.75rem;
  height: 2.75rem;
  transform: translateY(-50%);
}

.gallery-lightbox-nav-prev {
  left: 1rem;
}

.gallery-lightbox-nav-next {
  right: 1rem;
}

.gallery-lightbox-close {
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
}

@media (min-width: 640px) {
  .article-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .article-gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .gallery-lightbox-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-gallery-thumb,
  .gallery-lightbox-nav,
  .gallery-lightbox-close {
    transition: none;
  }
}

/* "Originally in <language>" — a translation notice.
   On a listing card it is the orange tab in the card's top-right corner; on
   the article page it becomes a quiet notice under the byline, where there is
   room to explain what the label means. */
.post-language-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
  padding: 0.375rem 0.625rem;
  border-radius: 4px;
  background: #955313;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.post-language-tab-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.article-original-language {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(149, 81, 19, 0.28);
  border-left: 3px solid #955313;
  border-radius: 10px;
  background: rgba(149, 81, 19, 0.05);
}

.article-original-language-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: #955313;
}

.article-original-language-text {
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: #64748b;
}

.article-original-language-label {
  color: #955313;
  font-weight: 800;
}

.article-original-language-note {
  display: block;
  color: #94a3b8;
  font-size: 0.8125rem;
  line-height: 1.4rem;
}