@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/eb-garamond-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/eb-garamond-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/eb-garamond-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/eb-garamond-latin-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
}

/* Sophia's Selene register (docs/SOPHIA_SELENE_PLAN.md): a Cormorant display
   voice against a Hanken Grotesk UI voice. Both are variable `wght` faces, so
   one file each covers every weight the design uses.

   The declared range must be the font's REAL fvar axis range. Cormorant's is
   300-700, not 100-900 — overstating it makes the browser clamp silently and
   suppresses synthetic bolding, so a rule asking for 800 would quietly render
   700. Only Hanken Grotesk reaches 800. See app/static/fonts/README.md.

   These are declared globally beside the other faces (that is where @font-face
   lives in this project) but consumed only inside `body.sophia-world`, and
   preloaded only by app/templates/sophia/base.html. No other module shifts. */
@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-latin-wght-normal.woff2") format("woff2");
}

/* Cormorant's real italic (the Module World selectors' letters, slice A2), same source and axis as the
   upright. The browser fetches it only where italic Cormorant is drawn, which before A2 was nowhere on
   Sophia's pages (a read-only crawl of 258 pages, LOG «A2»); only the module island's page preloads
   it, when it draws a letter (show.html), since a late swap would resize the selectors. */
@font-face {
  font-family: "Cormorant";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-latin-wght-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
}

:root {
  --font-serif: Garamond, "EB Garamond", "Adobe Garamond Pro", Georgia, "Times New Roman", serif;
  --font-ui: Garamond, "EB Garamond", "Adobe Garamond Pro", Georgia, "Times New Roman", serif;
  --cream: #f6f0e3;
  --parchment: #efe3c8;
  --paper: #fffaf0;
  --beige: #d8c59f;
  --gold: #b68b3c;
  --brown: #4f3826;
  --brown-soft: #74563c;
  --olive: #596338;
  --gray: #6b5f4e;
  --line: #dcccae;
  --danger: #8b2f25;
  --success: #556b3f;
  --shadow: 0 12px 32px rgba(79, 56, 38, 0.12);
  --sidebar-bg: #eadbbe;
  --topbar-bg: rgba(255, 250, 240, 0.72);
  --surface-soft: rgba(239, 227, 200, 0.45);
  --surface-row: rgba(255, 250, 240, 0.45);
  --gold-strong: #7d571c;
  --scholarium-accent: #b9822f;
  --ink: #3a3026;
  --ink-soft: #5b5345;
  --ink-muted: #6b5f4e;
  --border-soft: #d9cdb6;
  --gold-deep: #7d571c;
  /* Annotation apparatus (Lectionarium annotations): footnote markers, note
     card accents, chips. Antique brown in light; the parchment-gold variant in
     dark keeps markers/chips ≥ 4.5:1 on the near-black surfaces. --annot-ink
     follows --ink so note body text always inherits the theme's text color. */
  --annot-accent: #8a5a24;
  --annot-surface: rgba(216, 181, 107, 0.12);
  --annot-border: rgba(138, 90, 36, 0.35);
  --annot-ink: var(--ink);
  /* Transient gold wash behind a margin note's matched phrase; alpha kept low
     enough that --ink stays ≥ 4.5:1 over the blended background in each theme. */
  --annot-phrase: rgba(216, 181, 107, 0.38);
  /* Novedades bell (topbar notifications). Antique brown reads as a quiet herald
     on parchment; the count pill uses a warm rust so it draws the eye without
     the neon-red urgency of a SaaS notification centre. The numeral — not the
     colour — is the information, so cream-on-rust stays ≥ 4.5:1. */
  --notif-accent: #8a5a24;
  --notif-surface: rgba(216, 181, 107, 0.12);
  --notif-border: var(--line);
  --notif-badge-bg: #9a3b28;
  --notif-badge-ink: #f6f0e3;
  /* Shared Novedades semantics. These aliases deliberately resolve through the
     active Alchemia theme by default; product shells can remap the component
     without making shared rules consume that product's generic palette. */
  --notif-panel-bg: var(--paper);
  --notif-soft-surface: var(--surface-soft);
  --notif-hover-bg: var(--surface-soft);
  --notif-ink: var(--ink);
  --notif-heading-ink: var(--brown);
  --notif-muted-ink: var(--ink-muted);
  --notif-subtle-ink: var(--ink-muted);
  --notif-danger: var(--danger);
  --notif-shadow: var(--shadow);
  --notif-control-border: var(--line);
  --notif-on-accent-ink: var(--paper);
  --notif-focus: var(--notif-accent);
}

/* Slice 7 — Pergamino nocturno. Near-black umber keeps OLED pixels quiet
   without losing Alchemia's candle-lit parchment identity. Elevated surfaces
   are slightly lighter instead of relying on heavy shadows. */
html[data-theme="dark"] {
  color-scheme: dark;
  --cream: #090806;
  --parchment: #17130e;
  --paper: #211b14;
  --beige: #78694f;
  --gold: #d8b56b;
  --brown: #eee2cb;
  --brown-soft: #d1bea0;
  --olive: #b9c38b;
  --gray: #c2b6a4;
  --line: #78694f;
  --danger: #f09a8d;
  --success: #b8cf91;
  --shadow: 0 1px 0 rgba(255, 238, 204, 0.035), 0 14px 38px rgba(0, 0, 0, 0.28);
  --sidebar-bg: #100d09;
  --topbar-bg: rgba(16, 13, 9, 0.9);
  --surface-soft: rgba(216, 181, 107, 0.1);
  --surface-row: rgba(238, 226, 203, 0.035);
  --gold-strong: #e3c27d;
  --scholarium-accent: #d4a957;
  --ink: #eee2cb;
  --ink-soft: #d1bea0;
  --ink-muted: #c2b6a4;
  --border-soft: #78694f;
  --gold-deep: #e3c27d;
  --annot-accent: #d8b56b;
  --annot-surface: rgba(216, 181, 107, 0.08);
  --annot-border: rgba(216, 181, 107, 0.3);
  --annot-ink: var(--ink);
  --annot-phrase: rgba(216, 181, 107, 0.26);
  /* Brighter parchment-gold accent so the bell / unread dot clear 3:1 on the
     near-black topbar; the badge softens to terracotta with a near-black
     numeral (dark text on light pill) rather than glowing red. */
  --notif-accent: #d8b56b;
  --notif-surface: rgba(216, 181, 107, 0.08);
  --notif-border: var(--line);
  --notif-badge-bg: #d98b6a;
  --notif-badge-ink: #211b14;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    color-scheme: dark;
    --cream: #090806;
    --parchment: #17130e;
    --paper: #211b14;
    --beige: #78694f;
    --gold: #d8b56b;
    --brown: #eee2cb;
    --brown-soft: #d1bea0;
    --olive: #b9c38b;
    --gray: #c2b6a4;
    --line: #78694f;
    --danger: #f09a8d;
    --success: #b8cf91;
    --shadow: 0 1px 0 rgba(255, 238, 204, 0.035), 0 14px 38px rgba(0, 0, 0, 0.28);
    --sidebar-bg: #100d09;
    --topbar-bg: rgba(16, 13, 9, 0.9);
    --surface-soft: rgba(216, 181, 107, 0.1);
    --surface-row: rgba(238, 226, 203, 0.035);
    --gold-strong: #e3c27d;
    --scholarium-accent: #d4a957;
    --ink: #eee2cb;
    --ink-soft: #d1bea0;
    --ink-muted: #c2b6a4;
    --border-soft: #78694f;
    --gold-deep: #e3c27d;
    --annot-accent: #d8b56b;
    --annot-surface: rgba(216, 181, 107, 0.08);
    --annot-border: rgba(216, 181, 107, 0.3);
    --annot-ink: var(--ink);
    --annot-phrase: rgba(216, 181, 107, 0.26);
    --notif-accent: #d8b56b;
    --notif-surface: rgba(216, 181, 107, 0.08);
    --notif-border: var(--line);
    --notif-badge-bg: #d98b6a;
    --notif-badge-ink: #211b14;
  }
}

/* Sophia has its own extensive visual language and is intentionally deferred
   to a later audited slice. Keep that module on its established light tokens
   even when the account preference is dark or automatic. */
html[data-theme="dark"] body.sophia-world {
  color-scheme: light;
  --cream: #f6f0e3;
  --parchment: #efe3c8;
  --paper: #fffaf0;
  --beige: #d8c59f;
  --gold: #b68b3c;
  --brown: #4f3826;
  --brown-soft: #74563c;
  --olive: #596338;
  --gray: #6b5f4e;
  --line: #dcccae;
  --danger: #8b2f25;
  --success: #556b3f;
  --sidebar-bg: #eadbbe;
  --topbar-bg: rgba(255, 250, 240, 0.72);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.sophia-world {
    color-scheme: light;
    --cream: #f6f0e3;
    --parchment: #efe3c8;
    --paper: #fffaf0;
    --beige: #d8c59f;
    --gold: #b68b3c;
    --brown: #4f3826;
    --brown-soft: #74563c;
    --olive: #596338;
    --gray: #6b5f4e;
    --line: #dcccae;
    --danger: #8b2f25;
    --success: #556b3f;
    --sidebar-bg: #eadbbe;
    --topbar-bg: rgba(255, 250, 240, 0.72);
  }
}

html {
  font-size: 112.5%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--brown);
  background: var(--cream);
  font-family: var(--font-serif);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .page,
html[data-theme="dark"] .content {
  background-color: var(--cream);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body,
  html[data-theme="auto"] .page,
  html[data-theme="auto"] .content {
    background-color: var(--cream);
  }

  html[data-theme="auto"] input,
  html[data-theme="auto"] select,
  html[data-theme="auto"] textarea {
    color-scheme: dark;
  }
}

a {
  color: inherit;
}

/* Prevent clicks and taps on controls from starting accidental text selection. */
button:not(:has(input, textarea, select, [contenteditable])),
summary:not(:has(input, textarea, select, [contenteditable])),
[role="button"]:not(input):not(textarea):not(select):not([contenteditable]):not(:has(input, textarea, select, [contenteditable])),
[role="tab"]:not(input):not(textarea):not(select):not([contenteditable]):not(:has(input, textarea, select, [contenteditable])),
[role="menuitem"]:not(input):not(textarea):not(select):not([contenteditable]):not(:has(input, textarea, select, [contenteditable])),
[aria-expanded]:not(input):not(textarea):not(select):not([contenteditable]):not(:has(input, textarea, select, [contenteditable])),
.sophia-link-button,
.sophia-icon-button,
.sophia-entry-tree-toolbar button,
.sophia-entry-row button,
.sophia-note-toolbar button,
.sophia-course-module-summary,
.sophia-reader-nav-toggle,
.sophia-reader-nav-control,
.sophia-reader-module-nav-toggle,
.sophia-entry-caret,
.sophia-course-module-caret,
.sophia-reader-nav-caret {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 240ms ease;
}

.sidebar {
  overflow: hidden;
  min-height: 100vh;
  padding: 28px 22px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
}

.sidebar-inner {
  transition: opacity 200ms ease, visibility 200ms ease;
}

.sidebar-toggle {
  position: fixed;
  left: 280px;
  top: 50vh;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 40px;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: none;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  box-shadow: 2px 0 6px rgba(79, 56, 38, 0.08);
  transition: left 240ms ease, background 150ms ease;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  background: var(--cream);
  outline: none;
}

.sidebar-toggle-icon {
  display: block;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--brown);
  border-top: 2px solid var(--brown);
  transform: rotate(225deg);
  margin-left: 2px;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 0px minmax(0, 1fr);
}

.app-shell.sidebar-collapsed .sidebar {
  padding: 0;
  border-right: none;
}

.app-shell.sidebar-collapsed .sidebar-inner {
  opacity: 0;
  visibility: hidden;
}

.app-shell.sidebar-collapsed .sidebar-toggle {
  left: 0px;
  border-left: 1px solid var(--line);
}

.app-shell.sidebar-collapsed .sidebar-toggle-icon {
  transform: rotate(45deg);
  margin-left: -1px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--paper);
  color: var(--brown);
  font-weight: 700;
}

.brand-mark.large {
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  font-size: 1.4rem;
}

.brand-name {
  font-size: 1.15rem;
  font-weight: 700;
}

.brand-subtitle,
.eyebrow,
.card-kicker,
.card-meta {
  color: var(--gray);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.nav-list {
  display: grid;
  gap: 6px;
}

.nav-link {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-family: var(--font-ui);
}

.nav-link.active {
  background: var(--paper);
  box-shadow: inset 3px 0 0 var(--gold);
}

.nav-link.muted {
  color: var(--gray);
}

.page {
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 92px;
  padding: 20px 34px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.topbar-heading {
  min-width: 0;
}

/* Cross-domain pill (Studium Slice 3). Symmetric padding and a 44x44 floor,
   because the label now collapses: the old asymmetric `6px 12px 6px 8px` leaned
   on the label for its right-hand breathing room and left an off-centre egg
   without it. The gap moved into the label's own padding-inline-start so it
   clips WITH the label instead of leaving a stranded 8px. */
.sophia-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  border: 1px solid #c5ced6;
  border-radius: 999px;
  background: #fbf8ee;
  color: #2f526f;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.sophia-link:hover,
.sophia-link:focus-visible {
  background: #2f526f;
  border-color: #2f526f;
  color: var(--paper);
}

.sophia-link-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2f526f;
  color: var(--paper);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
}

.sophia-link-text {
  padding-inline-start: 8px;
}

.sophia-link:hover .sophia-link-mark,
.sophia-link:focus-visible .sophia-link-mark {
  background: var(--paper);
  color: #2f526f;
}

/* The label collapses to the letter mark and expands on hover/focus.
 *
 * Gated on a FINE POINTER on purpose: a touch pointer has no hover, so a
 * hover-only label would be permanently invisible there. Below this query the
 * label simply stays open.
 *
 * `max-width` + `opacity`, NOT `grid-template-columns: 0fr -> 1fr`. `fr`
 * distributes *leftover* space, and a shrink-to-fit inline grid inside the flex
 * `.topbar-left` has indefinite free space, so the flexible track would resolve
 * from its base size — which `overflow: hidden` drives to 0 and never reopens.
 * This is the same mechanism `.back-to-top-text` already ships below.
 *
 * `min-width: 0` is mandatory: a flex item's `min-width: auto` resolves to its
 * content minimum and would beat `max-width: 0` outright.
 *
 * The `ch` ceiling is sized to the word (~9ch for "Sophia") rather than to a
 * generic `rem` value, so the transition does not spend most of its duration
 * travelling past an edge that already stopped moving. */
@media (hover: hover) and (pointer: fine) {
  .sophia-link-text {
    overflow: hidden;
    white-space: nowrap;
    max-width: 0;
    min-width: 0;
    padding-inline-start: 0;
    opacity: 0;
    transition:
      max-width 200ms ease,
      padding-inline-start 200ms ease,
      opacity 140ms ease;
  }

  .sophia-link:hover .sophia-link-text,
  .sophia-link:focus-visible .sophia-link-text {
    max-width: 9ch;
    padding-inline-start: 8px;
    opacity: 1;
  }
}

/* Veritatis Studium home mark. Vision §24 asks every domain for a consistent
   path back to the platform; this is Alchemia's. It echoes
   `.studium-brand-mark`'s disc geometry in the platform header, skinned with
   Alchemia's warm palette tokens. The `aria-label` on the anchor is mandatory —
   its only child is `aria-hidden`. */
.studium-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--paper);
  color: var(--brown);
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.studium-link-mark {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
}

.studium-link:hover,
.studium-link:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  .sophia-link-text,
  .studium-link {
    transition: none;
  }
}

.topbar h1,
.page-intro h2,
.section-heading h2,
.card h2 {
  margin: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.search-input {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--brown);
  padding: 9px 12px;
}

/* The disabled placeholder yields first (P1.2): «Cerrar sesión» is wider than
   the «Logout» it replaced, and otherwise wrapped the topbar heading between
   about 1150 and 1188px and pushed the page sideways between about 981 and
   1020px. So it starts narrower, and it may shrink below its own text, as it
   already did on the dashboard, rather than widen the page. */
.search-input {
  width: clamp(240px, 20vw, 280px);
  min-width: 0;
}

/* The topbar's search field (P3.3): Studium's cross-domain search, as a GET
   form. Scoped to the form so the other `.search-input` users keep their 42px
   box: a 44px target and §B2's ring (3px at a 3px offset) in the ink the
   profile link beside it already focuses with, which has a dark-theme value. */
.topbar-search {
  display: flex;
  min-width: 0;
}

.topbar-search .search-input {
  min-height: 44px;
}

.topbar-search .search-input:focus-visible {
  outline: 3px solid var(--brown-soft);
  outline-offset: 3px;
}

.text-link {
  font-family: var(--font-ui);
}

/* P1.2: «Cerrar sesión» is a POST, so the topbar's link became a button that
   keeps the link's look. A 44px target; Sophia restyles it in sophia.css. */
button.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-family: var(--font-ui);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

button.text-link:focus-visible {
  outline: 3px solid var(--brown-soft);
  outline-offset: 3px;
}

/* ============================================================
   The account control and the bar's search (P6.6; the owner, P6.3 and P6.4)
   One account control in every portal (partials/_account_control.html): the
   initials in a round button; with a mouse, hover or keyboard focus widens it
   to the name over room its slot already holds, so nothing moves; a press
   opens «Mi cuenta» and «Cerrar sesión». Each portal sets the --ac-* inks
   (Alchemia's here; sophia.css and studium.css set theirs). The search waits
   behind a magnifying glass and opens as a row of its own under the bar
   (partials/_bar_search.html); without JavaScript the glass is a link to the
   search page. shell_bar.js closes both on Escape or a press elsewhere.
   ============================================================ */
.account-control {
  position: relative;
  display: block;
  flex: none;
}

/* Alchemia's inks (Sophia's are in sophia.css, Studium's in studium.css). */
.account-control--alchemia {
  --ac-edge: var(--beige);
  --ac-bg: var(--paper);
  --ac-ink: var(--brown);
  --ac-ini-bg: var(--olive);
  --ac-ini-ink: var(--paper);
  --ac-pop: var(--paper);
  --ac-line: var(--line);
  --ac-muted: var(--ink-muted);
  --ac-focus: var(--brown-soft);
  --ac-font: var(--font-serif);
}

.account-control-disclosure {
  display: block;
}

.account-control-button {
  display: inline-flex;
  align-items: center;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  padding: 3px;
  border: 1px solid var(--ac-edge);
  border-radius: 999px;
  background: var(--ac-bg);
  color: var(--ac-ink);
  font: 500 0.95rem/1 var(--ac-font);
  cursor: pointer;
  list-style: none;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}

.account-control-button::-webkit-details-marker {
  display: none;
}

.account-control-button:focus-visible {
  outline: 3px solid var(--ac-focus);
  outline-offset: 3px;
}

.account-control-initials {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ac-ini-bg);
  color: var(--ac-ini-ink);
  font: 600 0.88rem/1 var(--ac-font);
  letter-spacing: 0.04em;
}

/* At rest the name and the caret take no room; the button is the circle. */
.account-control-name {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0;
  transition: max-width 220ms ease-out, opacity 180ms ease-out, padding 220ms ease-out;
}

.account-control-caret {
  flex: none;
  width: 0;
  height: 18px;
  opacity: 0;
  fill: currentColor;
  transition: width 220ms ease-out, opacity 180ms ease-out, margin 220ms ease-out, transform 160ms ease-out;
}

.account-control-disclosure[open] .account-control-caret {
  transform: rotate(180deg);
}

/* With a mouse on a computer's width, the slot holds the open button's room (a hidden copy of the name, the
   doors' way), so opening moves nothing: the button sits at the slot's right edge and grows leftwards into it.
   A touch screen has no hover, and a phone's bar no room: there the open menu names you, and the circle stays
   a circle. */
.account-control-room {
  display: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .account-control {
    height: 46px;
  }

  .account-control-room {
    display: block;
    box-sizing: content-box;
    max-width: 10em;
    height: 0;
    overflow: hidden;
    padding-inline: 62px 34px;
    visibility: hidden;
    white-space: nowrap;
    font: 500 0.95rem/1 var(--ac-font);
  }

  .account-control-disclosure {
    position: absolute;
    top: 0;
    right: 0;
  }

  .account-control-button:hover .account-control-name,
  .account-control-button:focus-visible .account-control-name,
  .account-control-disclosure[open] .account-control-name {
    max-width: 10em;
    padding: 0 4px 0 10px;
    opacity: 1;
  }

  .account-control-button:hover .account-control-caret,
  .account-control-button:focus-visible .account-control-caret,
  .account-control-disclosure[open] .account-control-caret {
    width: 18px;
    margin-right: 8px;
    opacity: 1;
  }

  .account-control-button:hover {
    background: color-mix(in srgb, var(--ac-ink) 8%, var(--ac-bg));
  }
}

/* 14px between the menu's two 44px targets: two focus rings (3px at a 3px offset) meet at 12px. */
.account-control-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 15rem;
  max-width: calc(100vw - 32px);
  padding: 6px;
  border: 1px solid var(--ac-edge);
  border-radius: 8px;
  background: var(--ac-pop);
  color: var(--ac-ink);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  font-family: var(--ac-font);
}

.account-control-who {
  margin: 0 0 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ac-line);
  color: var(--ac-muted);
  font-size: 0.89rem;
  overflow-wrap: anywhere;
}

.account-control .account-control-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: 400 0.95rem/1.2 var(--ac-font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.account-control .account-control-item:hover {
  background: color-mix(in srgb, currentColor 9%, transparent);
  text-decoration: none;
}

.account-control .account-control-item:focus-visible {
  outline: 3px solid var(--ac-focus);
  outline-offset: 3px;
}

.account-control-glyph {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

/* The bar's search: the glass, and the row it opens. */
.bar-search-toggle {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  color: var(--brown);
  transition: background-color 160ms ease-out;
}

.bar-search-toggle:hover,
.bar-search-toggle[aria-expanded="true"] {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.bar-search-toggle:focus-visible {
  outline: 3px solid var(--brown-soft);
  outline-offset: 3px;
}

.bar-search-glyph {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.topbar {
  flex-wrap: wrap;
}

.topbar > .bar-search-row {
  display: none;
  flex: 1 1 100%;
  order: 99;
  align-items: center;
  gap: 8px;
}

.topbar.is-searching > .bar-search-row {
  display: flex;
}

.bar-search-row .search-input {
  flex: 1 1 auto;
  width: auto;
}

.bar-search-submit {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--brown);
  cursor: pointer;
}

.bar-search-submit:focus-visible {
  outline: 3px solid var(--brown-soft);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .account-control-name,
  .account-control-caret {
    transition: none;
  }
}

/* ============================================================
   Novedades bell — topbar notifications (Slice 2)
   A quiet herald: native <details> disclosure, no urgency theatre.
   Works with JS off (the panel still opens); novedades.js only adds
   mark-read / mark-all / dismiss.
   ============================================================ */
.novedades-menu {
  position: relative;
  display: inline-flex;
}

/* Chromium hides a closed <details> body with content-visibility, not display,
   so the fixed bottom-sheet panel would still widen the page at enlarged text.
   Closed means not rendered. */
.novedades-menu:not([open]) > .novedades-panel {
  display: none;
}

/* The bell trigger is a real <summary> styled as a 44×44 icon button. */
.novedades-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: var(--notif-muted-ink);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 160ms ease, color 160ms ease;
}
.novedades-bell::-webkit-details-marker { display: none; }
.novedades-bell::marker { content: ""; }
.novedades-bell:hover,
.novedades-menu[open] > .novedades-bell {
  background: var(--notif-hover-bg);
  color: var(--notif-accent);
}
.novedades-bell:focus-visible {
  outline: 2px solid var(--notif-focus);
  outline-offset: 2px;
}
.novedades-bell-icon {
  width: 22px;
  height: 22px;
  display: block;
}

/* Count pill anchored top-right of the bell. The numeral IS the information
   (the pill only draws the eye), so it repeats the count already in the button's
   aria-label and is itself aria-hidden. */
.novedades-badge {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--notif-badge-bg);
  color: var(--notif-badge-ink);
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--notif-panel-bg);
}

/* Dropdown panel — parchment surface, visible border, tonal elevation. */
.novedades-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-width: min(360px, calc(100vw - 32px));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  background: var(--notif-panel-bg);
  border: 1px solid var(--notif-border);
  border-radius: 14px;
  box-shadow: var(--notif-shadow);
  z-index: 60;
}

.novedades-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 6px;
}
.novedades-panel-title {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--notif-muted-ink);
}
.novedades-markall {
  min-height: 32px;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--notif-accent);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  cursor: pointer;
}
.novedades-markall:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.novedades-markall:focus-visible {
  outline: 2px solid var(--notif-focus);
  outline-offset: 1px;
}

.novedades-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.novedades-item {
  position: relative;
  border-radius: 10px;
}
.novedades-item.is-important,
.novedades-page-item.is-important {
  border-inline-start: 3px solid var(--notif-accent);
}

/* Row main control — the same look whether it's an <a> (has a target) or a
   <button> (targetless). Interactive controls are siblings, never nested. */
.novedades-item-main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-family: var(--font-ui);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease;
}
.novedades-item:not(.is-read) .novedades-item-main {
  background: var(--notif-surface);
}
.novedades-item-main:hover {
  background: var(--notif-hover-bg);
}
.novedades-item-main:focus-visible {
  outline: 2px solid var(--notif-focus);
  outline-offset: -2px;
}

/* Unread dot (accent). Read rows keep the gutter but drop the dot. */
.novedades-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--notif-accent);
}
.novedades-item.is-read .novedades-dot {
  background: transparent;
}

.novedades-item-body {
  flex: 1 1 auto;
  min-width: 0;
}
.novedades-item-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.novedades-chip {
  padding: 1px 8px;
  border: 1px solid var(--notif-border);
  border-radius: 999px;
  background: var(--notif-surface);
  color: var(--notif-accent);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.novedades-time {
  flex: 0 0 auto;
  margin-inline-start: auto;
  color: var(--notif-muted-ink);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.novedades-item-title {
  display: block;
  color: var(--notif-ink);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}
.novedades-item-snippet {
  margin-top: 3px;
  color: var(--notif-muted-ink);
  font-size: 0.82rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.novedades-item.is-read .novedades-item-title {
  color: var(--notif-subtle-ink);
  font-weight: 500;
}
.novedades-item.is-read .novedades-chip {
  color: var(--notif-subtle-ink);
}

/* Row actions follow readable content in both DOM and visual order. */
.novedades-item-actions,
.novedades-page-item-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 10px 8px 28px;
}
.novedades-page-item-actions {
  padding: 0 16px 12px 34px;
}
.novedades-activity-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--notif-control-border);
  border-radius: 8px;
  color: var(--notif-muted-ink);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
}
.novedades-activity-open:hover {
  background: var(--notif-hover-bg);
}
.novedades-activity-open:focus-visible {
  outline: 2px solid var(--notif-focus);
  outline-offset: 2px;
}
.novedades-dismiss {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
  border: 1px solid var(--notif-control-border);
  border-radius: 8px;
  background: transparent;
  color: var(--notif-muted-ink);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
.novedades-dismiss:hover {
  color: var(--notif-danger);
  border-color: var(--notif-danger);
  background: var(--notif-hover-bg);
}
.novedades-dismiss:focus-visible {
  outline: 2px solid var(--notif-focus);
  outline-offset: 2px;
}
.novedades-dismiss:disabled,
.novedades-page-dismiss:disabled {
  cursor: wait;
  color: var(--notif-subtle-ink);
  background: var(--notif-soft-surface);
}

.novedades-dismiss[hidden],
.novedades-page-dismiss[hidden],
.novedades-feedback[hidden],
.novedades-current-note[hidden],
[data-novedades-current-empty][hidden] {
  display: none !important;
}

.novedades-feedback {
  margin: 4px 10px 8px;
  padding: 8px 10px;
  border-inline-start: 3px solid var(--notif-accent);
  border-radius: 6px;
  background: var(--notif-soft-surface);
  color: var(--notif-ink);
  font-size: 0.82rem;
  line-height: 1.4;
}
.novedades-feedback.is-error {
  border-inline-start-color: var(--notif-danger);
  color: var(--notif-danger);
}

.novedades-state-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 4px;
}
.novedades-state-fact {
  color: var(--notif-muted-ink);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
}

.novedades-empty {
  margin: 0;
  padding: 22px 14px 26px;
  text-align: center;
  color: var(--notif-muted-ink);
  font-size: 0.9rem;
}

/* Mobile: the panel becomes a bottom sheet; JS adds a dismiss scrim. */
.novedades-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.5);
}
@media (max-width: 900px) {
  .novedades-panel {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 80vh;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -14px 38px rgba(0, 0, 0, 0.28);
  }
  .novedades-panel::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 4px auto 8px;
    border-radius: 999px;
    background: var(--notif-border);
  }
}

@media (prefers-reduced-motion: reduce) {
  .novedades-bell,
  .novedades-item-main,
  .novedades-dismiss,
  .novedades-page-dismiss {
    transition: none;
  }
}

/* Platform sub-label beside the category chip (Slice 3). Text, not colour-only. */
.novedades-plat {
  padding: 1px 7px;
  border: 1px solid var(--notif-border);
  border-radius: 999px;
  color: var(--notif-muted-ink);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Bell dropdown footer: "Ver todas las novedades". */
.novedades-panel-foot {
  padding: 6px 6px 2px;
  margin-top: 2px;
  border-top: 1px solid var(--notif-border);
  text-align: center;
}
.novedades-seeall {
  display: inline-block;
  min-height: 44px;
  padding: 12px 10px;
  color: var(--notif-accent);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
}
.novedades-seeall:hover { text-decoration: underline; }
.novedades-seeall:focus-visible {
  outline: 2px solid var(--notif-focus);
  outline-offset: 2px;
}

/* Platform-home variant: two per-product links instead of one "Ver todas".
   `text-align: center` plus one `inline-block` child is fine for a single link,
   but two 44px targets abutting inside a ~360px panel fall under SC 2.5.8's
   spacing floor — hence flex with a real gap rather than inline layout. */
.novedades-panel-foot--split {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
}

/* ── Dashboard entry card ─────────────────────────────────────────────── */
.novedades-entry-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 22px;
  padding: 16px 18px;
  border: 1px solid var(--notif-border);
  border-radius: 12px;
  background: var(--notif-surface);
  color: var(--notif-ink);
  text-decoration: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.novedades-entry-card:hover {
  border-color: var(--notif-accent);
}
.novedades-entry-card:focus-visible {
  outline: 2px solid var(--notif-focus);
  outline-offset: 2px;
}
.novedades-entry-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--notif-border);
  background: var(--notif-panel-bg);
  color: var(--notif-accent);
}
.novedades-entry-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.novedades-entry-title {
  font-family: var(--font-display, inherit);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--notif-heading-ink);
}
.novedades-entry-sub {
  font-size: 0.84rem;
  color: var(--notif-muted-ink);
}
.novedades-entry-go {
  flex: 0 0 auto;
  margin-inline-start: auto;
  color: var(--notif-accent);
  font-size: 1.1rem;
}

/* ── Student Novedades page (list + detail) ───────────────────────────── */
.novedades-page {
  width: 100%;
  max-width: none;
}
.novedades-detail {
  max-width: 760px;
}
.novedades-page-back,
.novedades-detail-back {
  margin-top: 10px;
}
.novedades-back-link {
  color: var(--notif-accent);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}
.novedades-back-link:hover { text-decoration: underline; }
.novedades-back-link:focus-visible {
  outline: 2px solid var(--notif-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.novedades-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 5px;
  border: 1px solid var(--notif-control-border);
  border-radius: 12px;
  background: var(--notif-soft-surface);
}
.novedades-view-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 0;
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--notif-muted-ink);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.novedades-view-tab:hover {
  background: var(--notif-hover-bg);
  color: var(--notif-heading-ink);
}
.novedades-view-tab[aria-current="page"] {
  background: var(--notif-panel-bg);
  color: var(--notif-heading-ink);
  box-shadow: inset 0 -3px 0 var(--notif-accent);
}
.novedades-view-tab:focus-visible,
.novedades-page-nav:focus-visible,
.novedades-recovery-link:focus-visible {
  outline: 2px solid var(--notif-focus);
  outline-offset: 2px;
}

.novedades-page-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border: 1px solid var(--notif-border);
  border-radius: 12px;
  overflow: visible;
  background: var(--notif-panel-bg);
}
.novedades-current-surface {
  padding: 12px;
  border: 1px solid var(--notif-border);
  border-radius: 14px;
  background: var(--notif-soft-surface);
}
.novedades-featured {
  margin-bottom: 14px;
}
.novedades-featured h3 {
  margin: 0 0 8px;
  color: var(--notif-heading-ink);
  font-family: var(--font-display, inherit);
  font-size: 1.14rem;
  line-height: 1.25;
}
.novedades-page-list--featured {
  margin-bottom: 0;
  border-inline-start: 3px solid var(--notif-accent);
}
.novedades-current-note {
  margin: 0;
  padding: 12px 14px;
  color: var(--notif-muted-ink);
  border: 1px dashed var(--notif-border);
  border-radius: 10px;
  background: var(--notif-panel-bg);
  font-size: 0.86rem;
}
.novedades-page-item:first-child,
.novedades-page-item:first-child .novedades-page-item-link {
  border-radius: 11px 11px 0 0;
}
.novedades-page-item:last-child,
.novedades-page-item:last-child .novedades-page-item-link {
  border-radius: 0 0 11px 11px;
}
.novedades-page-item:only-child,
.novedades-page-item:only-child .novedades-page-item-link {
  border-radius: 11px;
}
.novedades-page-item + .novedades-page-item {
  border-top: 1px solid var(--notif-border);
}
.novedades-page-item:not(.is-read) {
  background: var(--notif-surface);
}
.novedades-page-item-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
}
.novedades-page-dismiss {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--notif-control-border);
  border-radius: 8px;
  background: var(--notif-panel-bg);
  color: var(--notif-danger);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}
.novedades-page-dismiss:hover {
  border-color: var(--notif-danger);
  background: var(--notif-hover-bg);
}
.novedades-page-dismiss:focus-visible {
  outline: 2px solid var(--notif-focus);
  outline-offset: 2px;
}
.novedades-page-feedback {
  margin: 0 0 12px;
}
.novedades-page-item-link:hover .novedades-page-item-title {
  color: var(--notif-accent);
}
.novedades-page-item-link:focus-visible {
  outline: 2px solid var(--notif-focus);
  outline-offset: 2px;
}
.novedades-page-item .novedades-dot {
  margin-top: 6px;
}
.novedades-page-item.is-read .novedades-dot {
  visibility: hidden;
}
.novedades-page-item-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.novedades-page-item-timing {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-inline-start: auto;
}
.novedades-page-item-timing .novedades-time,
.novedades-page-read-state {
  flex: 0 0 auto;
  margin-inline-start: 0;
  color: var(--notif-muted-ink);
  font-size: 0.72rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.novedades-page-item-title {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--notif-ink);
}
.novedades-page-item.is-read .novedades-page-item-title {
  color: var(--notif-subtle-ink);
  font-weight: 500;
}
.novedades-page-item-snippet {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--notif-muted-ink);
}
.novedades-page-course {
  color: var(--notif-subtle-ink);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.novedades-page-empty {
  margin-top: 14px;
  padding: 28px;
  text-align: center;
  color: var(--notif-muted-ink);
  border: 1px dashed var(--notif-border);
  border-radius: 12px;
}
.novedades-page-recovery p {
  margin: 0 0 12px;
}
.novedades-recovery-link,
.novedades-page-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--notif-control-border);
  border-radius: 8px;
  background: var(--notif-panel-bg);
  color: var(--notif-accent);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.novedades-recovery-link:hover,
.novedades-page-nav:hover {
  border-color: var(--notif-accent);
  background: var(--notif-hover-bg);
}
.novedades-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.novedades-page-nav--older {
  margin-inline-start: auto;
}

/* ── Announcement detail body (the only place the rich body renders) ───── */
.novedades-detail-head {
  margin: 4px 0 18px;
}
.novedades-detail-meta {
  margin-bottom: 10px;
}
.novedades-detail-title {
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--notif-heading-ink);
}
.novedades-detail-body {
  color: var(--notif-ink);
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.novedades-detail-body > :first-child { margin-top: 0; }
.novedades-detail-body p { margin: 0 0 1em; }
.novedades-detail-body h1,
.novedades-detail-body h2,
.novedades-detail-body h3,
.novedades-detail-body h4,
.novedades-detail-body h5,
.novedades-detail-body h6 {
  color: var(--notif-heading-ink);
  line-height: 1.3;
  margin: 1.4em 0 0.5em;
}
.novedades-detail-body h1 { font-size: 1.5rem; }
.novedades-detail-body h2 { font-size: 1.3rem; }
.novedades-detail-body h3 { font-size: 1.12rem; }
.novedades-detail-body ul,
.novedades-detail-body ol { margin: 0 0 1em; padding-inline-start: 1.5em; }
.novedades-detail-body li { margin: 0.2em 0; }
.novedades-detail-body blockquote {
  margin: 0 0 1em;
  padding: 0.4em 1em;
  border-inline-start: 3px solid var(--notif-accent);
  color: var(--notif-muted-ink);
  background: var(--notif-surface);
  border-radius: 0 8px 8px 0;
}
.novedades-detail-body a {
  color: var(--notif-accent);
  text-underline-offset: 2px;
}
.novedades-detail-body a:focus-visible {
  outline: 2px solid var(--notif-focus);
  outline-offset: 2px;
  border-radius: 3px;
}
.novedades-detail-body .docx-small-caps {
  font-variant-caps: small-caps;
}
.novedades-detail-table-wrap { overflow-x: auto; }
.novedades-detail-body .novedades-detail-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1em;
  font-size: 0.94rem;
}
.novedades-detail-body .novedades-detail-table td,
.novedades-detail-body .novedades-detail-table th {
  border: 1px solid var(--notif-border);
  padding: 6px 10px;
  text-align: start;
  vertical-align: top;
}
.novedades-detail-body .novedades-detail-table th {
  background: var(--notif-soft-surface);
  font-weight: 600;
  color: var(--notif-heading-ink);
}
.novedades-detail-empty { color: var(--notif-muted-ink); }

/* Tables inside the detail body must not overflow the page on small screens. */
@media (max-width: 560px) {
  .novedades-detail-body .novedades-detail-table { display: block; overflow-x: auto; }
}

/* ── Admin composer + audit list ──────────────────────────────────────── */
.admin-announce-intro .admin-announce-actions { margin-top: 14px; }
.admin-announce-new-btn,
.admin-announce-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--notif-accent);
  border-radius: 8px;
  background: var(--notif-accent);
  color: var(--notif-on-accent-ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.admin-announce-new-btn:hover,
.admin-announce-submit-btn:hover { filter: brightness(0.95); }
.admin-announce-new-btn:focus-visible,
.admin-announce-submit-btn:focus-visible {
  outline: 2px solid var(--notif-focus);
  outline-offset: 2px;
}

.admin-announce-form {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.admin-announce-fieldset {
  border: 1px solid var(--notif-control-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0;
}
.admin-announce-legend {
  padding: 0 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--notif-muted-ink);
}
.admin-announce-audience {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-announce-audience-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--notif-control-border);
  border-radius: 8px;
  background: var(--notif-panel-bg);
  cursor: pointer;
}
.admin-announce-audience-option:focus-within {
  outline: 2px solid var(--notif-focus);
  outline-offset: 2px;
}
.admin-announce-audience-option input:checked ~ .admin-announce-audience-label {
  color: var(--notif-accent);
  font-weight: 600;
}
.admin-announce-audience-label { color: var(--notif-ink); font-size: 0.9rem; }

.admin-announce-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-announce-flabel {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--notif-heading-ink);
}
.admin-announce-req { color: var(--notif-danger); }
.admin-announce-input {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--notif-control-border);
  border-radius: 8px;
  background: var(--notif-panel-bg);
  color: var(--notif-ink);
  font-family: inherit;
  font-size: 0.95rem;
}
.admin-announce-input:focus-visible {
  outline: 2px solid var(--notif-focus);
  outline-offset: 1px;
  border-color: var(--notif-accent);
}
.admin-announce-help {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--notif-muted-ink);
}

.novedades-lifecycle {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.novedades-lifecycle-options,
.novedades-lifecycle-toggles {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.novedades-lifecycle-option {
  align-items: flex-start;
}
.novedades-lifecycle-toggle .admin-announce-audience-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.novedades-lifecycle-detail {
  color: var(--notif-muted-ink);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.45;
}
.novedades-lifecycle-archive-note {
  line-height: 1.5;
}
.novedades-lifecycle-datetime-region {
  padding: 12px 14px;
  border: 1px solid var(--notif-border);
  border-radius: 8px;
  background: var(--notif-soft-surface);
}
.novedades-lifecycle-datetime-region code {
  overflow-wrap: anywhere;
  color: inherit;
}
.novedades-lifecycle-error,
.novedades-lifecycle-conflict {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--notif-danger);
  border-left-width: 4px;
  border-radius: 6px;
  color: var(--notif-danger);
  font-size: 0.84rem;
  line-height: 1.45;
}

.admin-announce-editor {
  border: 1px solid var(--notif-control-border);
  border-radius: 10px;
  background: var(--notif-panel-bg);
  overflow: hidden;
}
.admin-announce-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--notif-border);
  background: var(--notif-soft-surface);
}
.admin-announce-tool-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 4px;
  background: var(--notif-border);
}
.admin-announce-editor .sophia-note-tool {
  min-width: 36px;
  min-height: 36px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--notif-ink);
  font-size: 0.85rem;
  cursor: pointer;
}
.admin-announce-editor .sophia-note-tool:hover {
  background: var(--notif-panel-bg);
  border-color: var(--notif-border);
}
.admin-announce-editor .sophia-note-tool.is-active {
  background: var(--notif-surface);
  border-color: var(--notif-accent);
  color: var(--notif-accent);
}
.admin-announce-editor .sophia-note-tool:focus-visible {
  outline: 2px solid var(--notif-focus);
  outline-offset: 1px;
}
.admin-announce-editor-surface {
  padding: 14px 16px;
  min-height: 220px;
}
.admin-announce-editor-surface .ProseMirror {
  min-height: 190px;
  outline: none;
  color: var(--notif-ink);
  line-height: 1.6;
}
.admin-announce-editor-surface .ProseMirror:focus-visible {
  outline: none;
}
.admin-announce-editor-surface .ProseMirror table {
  border-collapse: collapse;
  width: 100%;
}
.admin-announce-editor-surface .ProseMirror td,
.admin-announce-editor-surface .ProseMirror th {
  border: 1px solid var(--notif-border);
  padding: 4px 8px;
}

.admin-announce-submit-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.admin-announce-cancel {
  color: var(--notif-muted-ink);
  font-size: 0.88rem;
  text-decoration: none;
}
.admin-announce-cancel:hover { text-decoration: underline; }
.admin-announce-cancel:focus-visible {
  outline: 2px solid var(--notif-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.admin-announce-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--notif-border);
  border-radius: 8px;
  background: var(--notif-panel-bg);
}
.admin-announce-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.admin-announce-table th,
.admin-announce-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--notif-border);
  color: var(--notif-heading-ink);
  white-space: nowrap;
}
.admin-announce-table tr:last-child td { border-bottom: 0; }
.admin-announce-table th {
  color: var(--notif-muted-ink);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--notif-soft-surface);
}
.admin-announce-table td.admin-announce-title-cell {
  white-space: normal;
  color: var(--notif-ink);
}
.admin-announce-table .admin-announce-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.admin-announce-chip {
  display: inline-block;
  padding: 1px 9px;
  border: 1px solid var(--notif-border);
  border-radius: 999px;
  background: var(--notif-surface);
  color: var(--notif-accent);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}
.admin-announce-empty { padding: 28px; color: var(--notif-subtle-ink); }

/* ── Authored announcement lifecycle management ──────────────────────── */
.novedades-management-surface,
.novedades-course-management {
  min-width: 0;
}

.novedades-course-management {
  display: grid;
  gap: 22px;
}

.novedades-management-heading {
  margin-bottom: 16px;
}

.novedades-management-heading .eyebrow,
.novedades-management-heading h2,
.novedades-management-heading p {
  margin-block: 0;
}

.novedades-management-heading p:last-child {
  margin-top: 4px;
  color: var(--notif-muted-ink);
}

.novedades-course-management-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.novedades-management-primary-link,
.novedades-management-secondary-link,
.novedades-management-pagination a,
.novedades-management-empty a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--notif-control-border);
  border-radius: 8px;
  background: var(--notif-panel-bg);
  color: var(--notif-accent);
  font-weight: 600;
  text-decoration: none;
}

.novedades-management-primary-link {
  border-color: var(--notif-accent);
  background: var(--notif-accent);
  color: var(--notif-on-accent-ink);
}

.novedades-management-primary-link:hover,
.novedades-management-secondary-link:hover,
.novedades-management-pagination a:hover,
.novedades-management-empty a:hover {
  filter: brightness(0.96);
}

.novedades-management-primary-link:focus-visible,
.novedades-management-secondary-link:focus-visible,
.novedades-management-pagination a:focus-visible,
.novedades-management-empty a:focus-visible,
.novedades-management-button:focus-visible,
.novedades-management-form select:focus-visible,
.novedades-management-form input:focus-visible,
.novedades-management-feedback a:focus-visible {
  outline: 2px solid var(--notif-focus);
  outline-offset: 2px;
}

.novedades-management-feedback {
  display: grid;
  gap: 3px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--notif-danger);
  border-inline-start-width: 4px;
  border-radius: 8px;
  background: var(--notif-panel-bg);
  color: var(--notif-ink);
}

.novedades-management-feedback strong {
  color: var(--notif-danger);
}

.novedades-management-feedback a {
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--notif-accent);
  font-weight: 600;
}

.novedades-management-help {
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid var(--notif-border);
  border-radius: 10px;
  background: var(--notif-soft-surface);
  color: var(--notif-ink);
}

.novedades-management-help h3 {
  margin: 0 0 8px;
  color: var(--notif-heading-ink);
  font-size: 1rem;
}

.novedades-management-help ul {
  margin: 0;
  padding-inline-start: 20px;
}

.novedades-management-help li + li {
  margin-top: 4px;
}

.novedades-management-list {
  display: grid;
  gap: 16px;
}

.novedades-management-row {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--notif-border);
  border-radius: 10px;
  background: var(--notif-panel-bg);
}

.novedades-management-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.novedades-management-row-head > div {
  min-width: 0;
}

.novedades-management-kicker {
  margin: 0 0 3px;
  color: var(--notif-muted-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.novedades-management-row h3 {
  margin: 0;
  color: var(--notif-heading-ink);
  font-size: 1.08rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.novedades-management-state,
.novedades-management-tally {
  display: inline-flex;
  width: fit-content;
  padding: 3px 8px;
  border: 1px solid var(--notif-control-border);
  border-radius: 999px;
  color: var(--notif-muted-ink);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.novedades-management-state--active,
.novedades-management-tally--complete {
  border-color: var(--notif-accent);
  color: var(--notif-accent);
}

.novedades-management-state--expired,
.novedades-management-state--archived {
  border-style: dashed;
  color: var(--notif-heading-ink);
}

.novedades-management-policy-warning {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px dashed var(--notif-control-border);
  border-inline-start: 4px solid var(--notif-danger);
  border-radius: 7px;
  background: var(--notif-soft-surface);
  color: var(--notif-ink);
  font-size: 0.84rem;
}

.novedades-management-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 1px;
  margin: 16px 0 0;
  overflow: hidden;
  border: 1px solid var(--notif-border);
  border-radius: 8px;
  background: var(--notif-border);
}

.novedades-management-facts > div {
  min-width: 0;
  padding: 10px 12px;
  background: var(--notif-soft-surface);
}

.novedades-management-facts dt {
  color: var(--notif-muted-ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.novedades-management-facts dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 3px 0 0;
  color: var(--notif-ink);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.novedades-management-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--notif-border);
}

.novedades-management-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px 8px;
  min-width: 0;
  margin: 0;
}

.novedades-management-form label {
  grid-column: 1 / -1;
  color: var(--notif-heading-ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.novedades-management-form select,
.novedades-management-form input:not([type="hidden"]) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--notif-control-border);
  border-radius: 7px;
  background: var(--notif-panel-bg);
  color: var(--notif-ink);
  font: inherit;
}

.novedades-management-form [aria-invalid="true"] {
  border-color: var(--notif-danger);
}

.novedades-management-form--single {
  display: flex;
  align-items: end;
}

.novedades-management-button {
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid var(--notif-control-border);
  border-radius: 7px;
  background: var(--notif-panel-bg);
  color: var(--notif-accent);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.novedades-management-button:hover {
  background: var(--notif-hover-bg);
}

.novedades-management-button--danger {
  border-color: var(--notif-danger);
  color: var(--notif-danger);
}

.novedades-management-pagination {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}

.novedades-management-pagination a:last-child {
  margin-inline-start: auto;
}

.novedades-management-empty {
  margin: 0;
  padding: 22px;
  border: 1px dashed var(--notif-border);
  border-radius: 9px;
  color: var(--notif-muted-ink);
}

.novedades-management-empty p {
  margin-top: 0;
}

.novedades-operational-audit {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 2px solid var(--notif-border);
}

@media (max-width: 650px) {
  .novedades-management-row-head {
    flex-direction: column;
  }

  .novedades-management-actions,
  .novedades-management-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .novedades-management-form label {
    grid-column: auto;
  }

  .novedades-management-button,
  .novedades-management-form--single,
  .novedades-management-form--single .novedades-management-button {
    width: 100%;
  }

  .novedades-management-pagination {
    flex-direction: column;
  }

  .novedades-management-pagination a,
  .novedades-management-pagination a:last-child {
    width: 100%;
    margin-inline-start: 0;
  }
}

/* ── Novedades pendientes card (Novedades Slice 6) ────────────────────── */
/* Existing theme tokens only, so light/dark/auto all read correctly. */
.admin-pending-card {
  padding: 18px 20px;
  border: 1px solid var(--notif-border);
  border-radius: 10px;
  background: var(--notif-panel-bg);
}
.admin-pending-title {
  margin: 0 0 8px;
  color: var(--notif-ink);
  font-size: 1.02rem;
}
.admin-pending-lead {
  margin: 0 0 8px;
  color: var(--notif-ink);
  font-size: 0.92rem;
}
.admin-pending-items {
  margin: 0 0 10px;
  padding-left: 20px;
  color: var(--notif-heading-ink);
  font-size: 0.9rem;
}
.admin-pending-items li { margin: 2px 0; }
.admin-pending-help {
  margin: 0 0 14px;
  color: var(--notif-muted-ink);
  font-size: 0.84rem;
  max-width: 62ch;
}
.admin-pending-help code {
  font-size: 0.82rem;
  background: var(--notif-soft-surface);
  padding: 1px 5px;
  border-radius: 4px;
}
.admin-pending-form { margin: 0; }
.admin-pending-form .admin-announce-submit-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}

/* ── Septimana-unlock message settings (Novedades Slice 5) ────────────── */
/* Uses only Novedades semantic tokens, so light, dark, and auto all resolve
   through the active product mapping. */
.admin-unlockmsg-settings-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: 10px;
  padding: 10px 16px;
  border: 1px solid var(--notif-control-border);
  border-radius: 8px;
  background: var(--notif-panel-bg);
  color: var(--notif-ink);
  font-size: 0.9rem;
  text-decoration: none;
  touch-action: manipulation;
}
.admin-unlockmsg-settings-link:hover { background: var(--notif-hover-bg); }
.admin-unlockmsg-settings-link:focus-visible {
  outline: 2px solid var(--notif-focus);
  outline-offset: 2px;
}
.admin-unlockmsg-form { max-width: 640px; }
.admin-unlockmsg-input {
  resize: vertical;
  min-height: 64px;
  line-height: 1.5;
  /* ≥16px so mobile Safari does not zoom the field on focus. */
  font-size: 1rem;
}
.admin-unlockmsg-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.admin-unlockmsg-meta .admin-announce-help { flex: 1 1 auto; margin: 0; }
.admin-unlockmsg-meta code {
  padding: 1px 5px;
  border: 1px solid var(--notif-border);
  border-radius: 5px;
  background: var(--notif-soft-surface);
  font-size: 0.9em;
}
.admin-unlockmsg-count {
  flex: 0 0 auto;
  color: var(--notif-muted-ink);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-unlockmsg-error {
  margin: 6px 0 0;
  color: var(--notif-danger);
  font-size: 0.85rem;
  line-height: 1.4;
}
.admin-unlockmsg-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px dashed var(--notif-border);
  border-radius: 10px;
  background: var(--notif-soft-surface);
}
.admin-unlockmsg-preview-label {
  color: var(--notif-muted-ink);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* The frame around the reused bell-row classes: same surface the dropdown
   gives an unread row, so the preview reads exactly like the real thing. */
.admin-unlockmsg-preview-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--notif-border);
  border-radius: 8px;
  background: var(--notif-surface);
  overflow-wrap: anywhere;
}
.admin-unlockmsg-actions { flex-wrap: wrap; row-gap: 10px; }
.admin-unlockmsg-reset {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--notif-control-border);
  border-radius: 8px;
  background: var(--notif-panel-bg);
  color: var(--notif-ink);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  touch-action: manipulation;
}
.admin-unlockmsg-reset:hover:not(:disabled) { background: var(--notif-hover-bg); }
.admin-unlockmsg-reset:focus-visible {
  outline: 2px solid var(--notif-focus);
  outline-offset: 2px;
}
.admin-unlockmsg-reset:disabled {
  opacity: 0.45;
  cursor: default;
}
.admin-unlockmsg-default {
  margin: 4px 0 0;
  color: var(--notif-muted-ink);
  font-size: 0.82rem;
  line-height: 1.5;
}
.admin-unlockmsg-default-text { font-style: italic; }

/* ── Teacher course-announcement composer (Slice 4) ───────────────────── */
/* The audience options stack a small "active students" count under each label;
   it is an active-enrollment count, not a delivery guarantee. */
.novedades-course-audience { flex-direction: column; align-items: stretch; }
.novedades-course-option { align-items: flex-start; }
.novedades-course-option .admin-announce-audience-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.novedades-course-count {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--notif-muted-ink);
  font-variant-numeric: tabular-nums;
}
.novedades-course-empty {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--notif-border);
  border-radius: 8px;
  background: var(--notif-soft-surface);
  color: var(--notif-muted-ink);
  font-size: 0.85rem;
  line-height: 1.5;
}
.novedades-detail-course {
  margin: 6px 0 0;
  color: var(--notif-muted-ink);
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  .novedades-entry-card,
  .admin-announce-new-btn,
  .admin-announce-submit-btn {
    transition: none;
  }
}

.content {
  padding: 34px;
}

.page-intro {
  max-width: 760px;
  margin-bottom: 26px;
}

.page-intro p {
  color: var(--gray);
  line-height: 1.6;
}

.card-grid,
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.card-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(220px, 340px));
}

.card {
  min-height: 190px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.card.wide {
  grid-column: 1 / -1;
}

.card p,
.card li {
  color: var(--gray);
  line-height: 1.55;
}

.card ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.card-meta {
  display: inline-block;
  margin-top: 10px;
  color: var(--brown-soft);
}

.section-band {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.section-heading {
  margin-bottom: 16px;
}

.admin-dashboard-main {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.admin-dashboard-intro {
  margin-bottom: 0;
}

.admin-dashboard-section {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.76);
  box-shadow: 0 8px 24px rgba(79, 56, 38, 0.08);
}

.admin-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-section-heading h3 {
  margin: 0;
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-attention-band,
.admin-user-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.admin-summary-card {
  min-height: 108px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.82);
  color: var(--brown);
  text-decoration: none;
}

.import-hub-card {
  display: block;
}

.import-hub-card-title {
  display: block;
  font-size: 1.25rem;
}

.import-editor-open {
  display: inline-block;
  padding: 0.42rem 0.7rem;
}

.import-upload-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-top: 12px;
}

.import-upload-form label {
  display: grid;
  gap: 5px;
  min-width: min(100%, 320px);
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.import-upload-form input,
.import-upload-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.55rem 0.65rem;
  background: rgba(255, 255, 255, 0.56);
  color: var(--brown);
  font: inherit;
  text-transform: none;
}

.import-preview-panel {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.corpus-bulk-job {
  gap: 14px;
}

.corpus-bulk-progress {
  display: grid;
  gap: 8px;
}

.corpus-bulk-progress-bar {
  overflow: hidden;
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.36);
}

.corpus-bulk-progress-bar span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--gold);
  transition: width 160ms ease;
}

.import-preview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.import-preview-stats span {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.32);
  color: var(--gray);
}

.import-preview-stats strong {
  color: var(--brown);
  font-size: 1.2rem;
}

.import-warning-list {
  padding: 12px 14px;
  border: 1px solid rgba(144, 94, 39, 0.38);
  border-radius: 8px;
  background: #f7ead4;
  color: var(--brown);
}

.import-warning-list ul,
.import-preview-details ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.import-malformed-list {
  display: grid;
  gap: 10px;
  list-style: none;
  padding-left: 0;
}

.import-preview-details {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.28);
}

.import-preview-details summary {
  color: var(--brown-soft);
  cursor: pointer;
  font-weight: 700;
}

.import-action-pill.create {
  border-color: rgba(89, 122, 74, 0.42);
  background: #e9efd9;
  color: #4b6239;
}

.import-action-pill.update {
  border-color: rgba(182, 139, 60, 0.55);
  background: #f4e5c8;
  color: var(--brown);
}

.import-action-pill.preserve_manual {
  border-color: rgba(144, 94, 39, 0.42);
  background: #f7ead4;
  color: var(--brown);
}

.import-action-pill.matched,
.import-action-pill.resolved {
  border-color: rgba(89, 122, 74, 0.42);
  background: #e9efd9;
  color: #4b6239;
}

.import-action-pill.ambiguous,
.import-action-pill.fallback,
.import-action-pill.unmatched {
  border-color: rgba(144, 94, 39, 0.42);
  background: #f7ead4;
  color: var(--brown);
}

.import-preview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.import-preview-edit-toggle {
  white-space: nowrap;
}

.import-preview-edit-row[hidden] {
  display: none;
}

.import-preview-edit-row td {
  padding: 0 12px 14px;
  background: rgba(255, 250, 240, 0.48);
}

.import-preview-edit-panel {
  margin-top: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
}

.import-preview-edit-form {
  display: grid;
  gap: 10px;
}

.import-preview-edit-form label {
  display: grid;
  gap: 5px;
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.import-preview-edit-form input,
.import-preview-edit-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  background: rgba(255, 255, 255, 0.58);
  color: var(--brown);
  font: inherit;
  text-transform: none;
}

.import-preview-edit-form input[aria-invalid="true"],
.import-preview-edit-form textarea[aria-invalid="true"] {
  border-color: rgba(144, 58, 39, 0.68);
  background: #fff7ef;
}

.import-inline-error {
  color: #7f3324;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
}

.import-preview-entry-edit-form {
  grid-template-columns: minmax(110px, 0.35fr) minmax(150px, 0.45fr) minmax(0, 1fr);
}

.import-preview-entry-edit-form label.wide,
.import-preview-edit-submit {
  grid-column: 1 / -1;
}

.import-preview-edit-submit {
  display: flex;
  justify-content: flex-end;
}

.import-malformed-edit-form {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.3);
}

.import-elementa-preview-list {
  display: grid;
  gap: 16px;
}

.import-elementa-preview-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(182, 139, 60, 0.38);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 250, 240, 0.86), rgba(246, 240, 227, 0.74));
  box-shadow: 0 8px 18px rgba(79, 56, 38, 0.07);
}

.import-elementa-card-header,
.import-elementa-card-actions,
.import-elementa-card-status,
.import-elementa-candidate-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.import-elementa-card-header {
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid rgba(182, 139, 60, 0.22);
  padding-bottom: 12px;
}

.import-elementa-card-title {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.import-elementa-card-title > strong,
.import-elementa-source-panel h4,
.import-elementa-target-panel h4 {
  margin: 0;
  color: var(--brown);
  font-family: var(--font-serif);
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: 0;
}

.import-elementa-card-title > span {
  color: var(--brown-soft);
  font-family: var(--font-serif);
  font-size: 1.02rem;
}

.import-elementa-card-actions {
  justify-content: flex-end;
}

.import-elementa-card-actions form {
  margin: 0;
}

.import-elementa-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.75fr);
  gap: 14px;
  align-items: start;
}

.import-elementa-source-panel,
.import-elementa-target-panel,
.import-elementa-resolver-panel,
.import-elementa-edit-panel .import-preview-edit-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.36);
}

.import-elementa-source-panel,
.import-elementa-target-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.import-elementa-block-preview {
  max-height: 420px;
  overflow: auto;
  padding: 14px 16px;
  border: 1px solid rgba(182, 139, 60, 0.3);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.72);
  color: var(--brown);
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.58;
}

.import-elementa-block-preview table {
  width: 100%;
  border-collapse: collapse;
}

.import-elementa-block-preview td,
.import-elementa-block-preview th {
  border: 1px solid var(--line);
  padding: 4px 6px;
}

.import-elementa-target-summary,
.import-elementa-target-existing {
  display: grid;
  gap: 4px;
}

.import-elementa-target-summary strong,
.import-elementa-target-existing strong,
.import-elementa-candidate-main strong {
  color: var(--brown);
}

.import-elementa-target-summary span,
.import-elementa-candidate-main span {
  color: var(--brown-soft);
  font-family: var(--font-serif);
}

.import-elementa-target-existing {
  max-height: 92px;
  overflow: auto;
  padding: 9px 10px;
  border: 1px solid rgba(182, 139, 60, 0.24);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.42);
}

.import-elementa-target-existing small {
  color: var(--gray);
  line-height: 1.45;
}

.import-elementa-fallback-suggestion,
.import-elementa-overwrite-warning {
  display: grid;
  gap: 2px;
  margin-top: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(182, 139, 60, 0.45);
  border-radius: 8px;
  background: #f4e5c8;
  color: var(--brown);
}

.import-elementa-overwrite-warning {
  border-color: rgba(144, 94, 39, 0.42);
  background: #f7ead4;
}

.import-elementa-fallback-suggestion span {
  color: var(--gray);
}

.import-elementa-resolver,
.import-elementa-resolver-panel,
.import-elementa-candidate-list,
.import-elementa-manual-target-grid {
  display: grid;
  gap: 10px;
}

.import-elementa-resolver-panel {
  padding: 12px;
}

.import-elementa-candidate-card,
.import-elementa-target-form {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.34);
}

.import-elementa-candidate-card {
  grid-template-columns: minmax(180px, 1fr) auto auto auto;
  align-items: center;
}

.import-elementa-candidate-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.import-elementa-manual-target-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.import-elementa-edit-panel {
  margin-top: 2px;
}

.import-elementa-edit-panel .import-preview-edit-panel {
  margin-top: 0;
}

.import-elementa-overwrite {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gray);
  font-size: 0.78rem;
  text-transform: none;
}

.import-elementa-overwrite input {
  width: auto;
}

.import-week-editor {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.import-editor-heading {
  align-items: flex-start;
}

.import-editor-heading p {
  margin: 0.3rem 0 0;
}

.import-entry-list {
  display: grid;
  gap: 12px;
}

.import-entry-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.82);
}

.import-entry-card details {
  padding: 0;
}

.import-entry-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
}

.import-entry-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.import-entry-main strong {
  color: var(--brown);
}

.import-entry-main span {
  color: var(--gray);
  overflow-wrap: anywhere;
}

.import-entry-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.import-status-pill.edited {
  border-color: rgba(182, 139, 60, 0.55);
  background: #f4e5c8;
  color: var(--brown);
}

.import-entry-edit-form {
  display: grid;
  gap: 14px;
  padding: 0 14px 14px;
  border-top: 1px solid var(--line);
}

.import-entry-form-grid {
  display: grid;
  grid-template-columns: minmax(110px, 0.4fr) minmax(150px, 0.6fr) minmax(0, 1fr);
  gap: 12px;
  padding-top: 14px;
}

.import-entry-form-grid label {
  display: grid;
  gap: 5px;
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.import-entry-form-grid label.wide {
  grid-column: 1 / -1;
}

.import-entry-form-grid input,
.import-entry-form-grid textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.55rem 0.65rem;
  background: rgba(255, 255, 255, 0.56);
  color: var(--brown);
  font: inherit;
  text-transform: none;
}

.import-elementa-preview {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.32);
  color: var(--gray);
}

.import-elementa-preview strong {
  color: var(--brown-soft);
}

.import-elementa-preview small {
  color: var(--gray);
}

.import-elementa-editor {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
}

.import-elementa-details {
  display: grid;
  gap: 10px;
}

.import-elementa-toggle {
  display: inline-block;
  width: max-content;
  list-style: none;
  cursor: pointer;
}

.import-elementa-toggle::-webkit-details-marker {
  display: none;
}

.import-elementa-form {
  display: grid;
  gap: 12px;
  padding-top: 4px;
}

.import-elementa-form label {
  display: grid;
  gap: 5px;
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.import-elementa-form input,
.import-elementa-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.55rem 0.65rem;
  background: rgba(255, 255, 255, 0.56);
  color: var(--brown);
  font: inherit;
  text-transform: none;
}

.import-elementa-form .sun-editor,
.import-elementa-form .sun-editor * {
  font-family: var(--font-ui);
  letter-spacing: 0;
}

.import-elementa-form .sun-editor .sun-editor-editable,
.import-elementa-form .sun-editor .se-wrapper .se-wrapper-inner,
.import-elementa-form .sun-editor .se-wrapper .se-wrapper-code {
  color: var(--brown);
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  text-transform: none;
}

.import-elementa-form .sun-editor .sun-editor-editable *,
.import-elementa-form .sun-editor .se-wrapper .se-wrapper-inner *,
.import-elementa-form .sun-editor .se-wrapper .se-wrapper-code * {
  font-family: inherit;
  font-variant: normal;
  letter-spacing: 0;
  text-transform: none;
}

.import-elementa-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.import-entry-actions {
  display: flex;
  justify-content: flex-end;
}

.import-form-overrides-editor {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
}

.import-form-overrides-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.85rem;
}

.import-form-overrides-preview strong {
  color: var(--brown);
}

.import-form-overrides-details {
  display: grid;
  gap: 10px;
}

.import-form-overrides-toggle {
  display: inline-block;
  width: max-content;
  list-style: none;
  cursor: pointer;
}

.import-form-overrides-toggle::-webkit-details-marker {
  display: none;
}

.import-form-overrides-form {
  display: grid;
  gap: 14px;
  padding-top: 4px;
}

.import-form-overrides-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px 14px;
  background: rgba(255, 255, 255, 0.36);
}

.import-form-overrides-group legend {
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 6px;
}

.import-form-overrides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.import-form-overrides-cell {
  display: grid;
  gap: 4px;
}

.import-form-overrides-cell.has-override {
  background: rgba(218, 188, 117, 0.18);
  border-radius: 6px;
  padding: 4px;
}

.import-form-overrides-label {
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0;
}

.import-form-overrides-cell input[type="text"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.45rem 0.55rem;
  background: rgba(255, 255, 255, 0.7);
  color: var(--brown);
  font: inherit;
  text-transform: none;
}

.import-form-overrides-reset {
  justify-self: end;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--brown-soft);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  cursor: pointer;
}

.import-form-overrides-reset:hover {
  border-color: var(--gold);
  color: var(--brown);
}

.import-form-overrides-note {
  display: grid;
  gap: 5px;
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
}

.import-form-overrides-note input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.55rem 0.65rem;
  background: rgba(255, 255, 255, 0.56);
  color: var(--brown);
  font: inherit;
  text-transform: none;
}

.import-form-overrides-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.import-form-overrides-empty {
  margin: 0;
  color: var(--gray);
  font-style: italic;
}

.admin-summary-card.is-active {
  border-color: var(--gold);
  background: #f4e5c8;
  box-shadow: 0 0 0 2px rgba(182, 139, 60, 0.14);
}

.attention-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.attention-card:hover,
.attention-card:focus {
  border-color: var(--gold);
  background: #f4e5c8;
  transform: translateY(-1px);
}

.admin-summary-count,
.admin-summary-value {
  color: var(--brown);
  font-size: 1.7rem;
  line-height: 1;
}

.admin-summary-count {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-soft);
  color: #8a5d13;
}

.admin-summary-label,
.admin-summary-subtitle {
  display: block;
  color: var(--gray);
  font-family: var(--font-ui);
}

.admin-summary-label {
  margin-bottom: 8px;
}

.admin-summary-subtitle {
  margin-top: 8px;
  font-size: 0.85rem;
}

.admin-positive-state {
  margin: 0;
  color: var(--gray);
}

.admin-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.admin-course-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.admin-course-card h4,
.admin-course-group-card h4,
.admin-data-platform-grid h4 {
  margin: 0;
}

.admin-course-card-header p {
  margin: 6px 0 0;
  color: var(--gray);
}

.admin-course-meta {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.admin-course-meta div,
.admin-group-row,
.admin-status-list li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
}

.admin-course-meta dt {
  color: var(--gray);
  font-family: var(--font-ui);
}

.admin-course-meta dd {
  margin: 0;
  text-align: right;
}

.admin-group-list {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.admin-group-row {
  color: var(--gray);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
}

.admin-group-details {
  text-align: left;
  color: var(--muted-text, #7d6d5c);
}

.admin-group-septimana {
  display: block;
}

.admin-course-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.admin-course-title {
  margin: 0;
}

.admin-course-title a {
  text-decoration: underline;
}

.admin-group-name {
    font-weight: 550;
	color: var(--heading-color, #3f2815);
}

.admin-link-row {
  padding: 6px 0;
  border-radius: 6px;
  text-decoration: none;
}

.admin-link-row:hover,
.admin-link-row:focus,
.admin-course-card h4 a:hover,
.admin-course-card h4 a:focus {
  color: var(--brown);
  text-decoration: underline;
}

.admin-group-row {
  text-decoration: none;
}

.admin-group-row:hover,
.admin-group-row:focus {
  text-decoration: none;
}

.admin-group-row:hover .admin-group-name,
.admin-group-row:focus .admin-group-name {
  text-decoration: underline;
}

.admin-group-details,
.admin-group-row:hover .admin-group-details,
.admin-group-row:focus .admin-group-details {
  text-decoration: none;
}

.admin-data-platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.admin-data-platform-grid article + article {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.admin-status-list {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.admin-status-list span {
  color: var(--gray);
}

.admin-focused-group-title h3 {
  margin: 0;
  font-size: 1.2rem;
}

.admin-focused-group-title p {
  margin: 4px 0 0;
  color: var(--gray);
}

/* Auth-shell styles (.auth-shell, .auth-page, .login-card, .login-form, …)
   moved to css/auth.css in Slice 1 of docs/AUTH_ACCOUNTS_UX_PLAN.md.
   base.html loads auth.css only for unauthenticated pages. */

.flash-stack {
  width: min(100%, 760px);
  margin-bottom: 18px;
}

.flash {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--brown);
}

.flash-error {
  border-color: #d9aaa3;
  color: var(--danger);
}

.flash-warning {
  border-color: #d9c18c;
}

.flash-info {
  border-color: #b8c1a1;
  color: var(--success);
}

.dictionarium-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 36%);
  gap: 28px;
  align-items: start;
}

.dictionarium-main {
  min-width: 0;
}

.dictionarium-intro {
  margin-bottom: 18px;
}

.dict-search {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.dict-search-input,
.dict-search select,
.inline-form select,
.week-jump-form select {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--brown);
  padding: 10px 12px;
}

.segmented-control {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  font-family: var(--font-ui);
}

.segmented-control label {
  min-height: 42px;
  padding: 10px 14px;
  cursor: pointer;
}

.segmented-control label.active {
  background: #eadbbe;
  color: var(--brown);
}

.segmented-control input {
  position: absolute;
  opacity: 0;
}

.button-primary,
.button-secondary,
.review-row button {
  min-height: 42px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 9px 14px;
  background: var(--paper);
  color: var(--brown);
  font-family: var(--font-ui);
  text-decoration: none;
  cursor: pointer;
}

.button-primary {
  background: var(--brown);
  color: var(--paper);
  border-color: var(--brown);
}

.button-primary:disabled,
.button-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.button-warning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--danger);
  background-color: #fff5ef;
  border: 1px solid rgba(139, 47, 37, 0.45);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.button-warning:hover,
.button-warning:focus {
  background-color: #ffe9dc;
  border-color: var(--danger);
  color: #6f2218;
  outline: none;
}

.button-warning:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.autocomplete-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  width: min(100%, 520px);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.autocomplete-menu button {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--brown);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.dict-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.dict-tabs a {
  padding: 0 0 10px;
  color: var(--brown);
  text-decoration: none;
  font-family: var(--font-ui);
}

.dict-tabs a.active {
  color: var(--gold-strong);
  box-shadow: 0 2px 0 var(--gold);
}

.dict-section {
  min-width: 0;
}

.dict-section-heading {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.dict-section-heading.simple {
  display: flex;
  justify-content: space-between;
}

.dict-section-heading h3,
.entry-detail-panel h3,
.review-panel h4,
.omnia-section h4 {
  margin: 0;
}

.omnia-section {
  scroll-margin-top: 28px;
}

.week-jump-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  font-family: var(--font-ui);
}

.entry-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding-left: 2rem;
  list-style-position: outside;
}

.entry-list li {
  border-bottom: 1px solid var(--line);
  background: var(--surface-row);
}

.entry-list li.active {
  background: var(--surface-soft);
}

.entry-list a {
  display: inline-block;
  width: 100%;
  padding: 12px 14px;
  text-decoration: none;
}

.entry-list small {
  display: block;
  padding: 0 14px 10px 42px;
  color: var(--gray);
  font-style: italic;
}

.entry-word {
  font-size: 1.05rem;
}

.entry-week,
.entry-pos,
.entry-definition {
  color: var(--gray);
}

.entry-detail-panel {
  position: sticky;
  top: 22px;
  max-height: calc(100vh - 44px);
  overflow: visible;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform-origin: top left;
  will-change: transform;
}

.entry-detail-panel-body {
  max-height: calc(100vh - 44px);
  overflow: auto;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);

  transition:
    box-shadow 220ms ease,
    border-radius 220ms ease;
}

.admin-course-group-focus,
.admin-course-focus,
.admin-course-overview,
.admin-course-detail-list {
  display: grid;
  gap: 18px;
}

.admin-course-group-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.78);
}

.admin-focus-header,
.admin-group-actions,
.admin-course-subgrid {
  display: grid;
  gap: 14px;
}

.admin-focus-header {
  grid-template-columns: minmax(0, 1fr) minmax(210px, auto);
  align-items: start;
}

.admin-focus-header p {
  margin: 6px 0 0;
  color: var(--gray);
}

.compact-meta {
  margin: 0;
}

.admin-warning-list {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 10px 12px 10px 28px;
  border: 1px solid rgba(139, 47, 37, 0.24);
  border-radius: 8px;
  background: rgba(139, 47, 37, 0.06);
  color: var(--danger);
}

.admin-group-actions {
  grid-template-columns: repeat(2, minmax(0, max-content));
  margin-top: 14px;
  justify-content: center;
}

.admin-action-success {
  border-color: rgba(85, 107, 63, 0.42);
  color: var(--success);
}

.admin-action-danger {
  border-color: rgba(139, 47, 37, 0.38);
  color: var(--danger);
}

.admin-action-success:hover,
.admin-action-success:focus {
  background: rgba(85, 107, 63, 0.14);
  border-color: rgba(85, 107, 63, 0.58);
}

.admin-action-danger:hover,
.admin-action-danger:focus {
  background: rgba(139, 47, 37, 0.12);
  border-color: rgba(139, 47, 37, 0.55);
}

.import-week-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.import-week-delete-form {
  margin: 0;
}

.import-week-delete-button {
  min-height: 34px;
  padding: 6px 10px;
  border-color: rgba(139, 47, 37, 0.48);
  background: #fff7f4;
  color: var(--danger);
  font-size: 0.86rem;
}

.import-week-delete-button:hover,
.import-week-delete-button:focus {
  border-color: rgba(139, 47, 37, 0.68);
  background: rgba(139, 47, 37, 0.12);
  color: #6f241d;
}

.admin-group-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.admin-course-subgrid {
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.2fr);
  margin-top: 16px;
}

.admin-unit-list {
  display: grid;
  gap: 8px;
}

.admin-unit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.admin-unit-row:first-child {
  border-top: 0;
}

.admin-unit-row span {
  display: block;
  color: var(--gray);
}

.admin-unit-row.is-muted {
  opacity: 0.68;
}

.admin-pill {
  display: inline-block;
  margin: 2px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.84rem;
}

.admin-pill.warning {
  border-color: rgba(139, 47, 37, 0.28);
  color: var(--danger);
}

.admin-enrollment-section {
  display: grid;
  gap: 14px;
}

.admin-section-heading.compact {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.admin-section-heading.compact span {
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

.admin-section-heading.compact h3 {
  margin: 0;
  color: var(--text, #3d2515);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.admin-group-list.refined {
  display: grid;
  gap: 0.65rem;
}

.admin-enrollment-list {
  display: grid;
  gap: 14px;
}

.admin-enrollment-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.78);
}

.admin-enrollment-card h4 {
  margin-bottom: 8px;
}

/* Intended-track chip on pending approvals (AUTH_ACCOUNTS_UX_PLAN Slice 3):
   the program the student chose at registration, so approval and enrollment
   decisions need no follow-up email. */
.admin-track-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  border: 1px solid rgba(182, 139, 60, 0.5);
  border-radius: 999px;
  background: rgba(182, 139, 60, 0.12);
  color: var(--brown);
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 2px;
  white-space: nowrap;
}

.admin-track-chip.is-sophia {
  border-color: rgba(114, 118, 77, 0.55);
  background: rgba(114, 118, 77, 0.12);
}

.admin-enrollment-card p {
  margin: 5px 0 0;
  color: var(--gray);
}

.admin-enrollment-card p span {
  color: var(--brown-soft);
}

.admin-enrollment-form,
.admin-enrollment-filter-form {
  display: grid;
  gap: 10px;
  min-width: 220px;
}

.admin-enrollment-form label,
.admin-enrollment-filter-form label {
  display: grid;
  gap: 4px;
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.88rem;
}

.admin-enrollment-form select,
.admin-enrollment-form input,
.admin-enrollment-filter-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  padding: 8px 10px;
}

.admin-enrollment-filter-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.58);
}

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.7);
}

.admin-enrollment-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
}
.admin-enrollment-table th,
.admin-enrollment-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: top;
}

.admin-enrollment-table th {
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-enrollment-table td span {
  display: block;
  margin-top: 3px;
  color: var(--gray);
  font-size: 0.9rem;
}

.admin-enrollment-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-course-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.admin-course-count {
  margin: 0;
  color: var(--muted-text, #7d6d5c);
}

.admin-course-range {
  color: var(--muted-text, #8b7660);
  font-size: 0.95rem;
  font-weight: 400;
  white-space: nowrap;
}

.admin-group-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: inherit;
  text-decoration: none;

  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.admin-group-card-link:hover,
.admin-group-card-link:focus-visible {
  background: var(--parchment);
  border-color: var(--line);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(79, 56, 38, 0.22);
}

.admin-group-card-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.admin-group-card-link:hover strong,
.admin-group-card-link:focus-visible strong {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.admin-group-card-main {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.admin-group-card-main strong {
  color: var(--text, #3d2515);
  font-weight: 700;
  line-height: 1.15;
}

.admin-group-card-main small {
  color: var(--muted-text, #7d6d5c);
  font-size: 0.9rem;
}

.admin-current-badge {
  flex: 0 0 auto;
  border: 1px solid var(--border-soft, #dac8a9);
  border-radius: 999px;
  padding: 0.16rem 0.55rem;
  background: rgba(255, 255, 255, 0.35);
  color: var(--muted-text, #7d6d5c);
  font-size: 0.84rem;
  white-space: nowrap;
}

.admin-unit-row.refined {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--border-soft, #dac8a9);
}

.admin-unit-main {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.admin-unit-main span {
  color: var(--muted-text, #7d6d5c);
  font-size: 0.94rem;
}

.admin-pill.quiet-pill {
  border-color: var(--border-soft, #dac8a9);
  background: rgba(255, 255, 255, 0.34);
  color: var(--muted-text, #7d6d5c);
  font-size: 0.88rem;
}

.detail-topline,
.detail-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.detail-grid {
  justify-content: flex-end;
  text-align: right;
}

.detail-definition,
.detail-block p,
.quiet {
  color: var(--gray);
  line-height: 1.55;
}

.detail-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.detail-grid span,
.muted-panel {
  margin-top: 10px;
  color: var(--gray);
}

.entry-mark-controls,
.dict-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.85rem 0;
}

.entry-mark-controls form {
  margin: 0;
}

.entry-detail-panel .entry-mark-controls {
  justify-content: center;
  gap: 0.45rem;
  margin: 0.65rem 0 0.9rem;
}
.entry-detail-panel .entry-mark-button {
  min-height: 0;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: transparent;
  font-size: 0.82rem;
  line-height: 1.2;
  box-shadow: none;
  opacity: 0.82;

  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

.entry-detail-panel .entry-mark-button:hover,
.entry-detail-panel .entry-mark-button:focus {
  opacity: 1;
  transform: translateY(-1px);
}

.entry-detail-panel .entry-mark-button.mark-review {
  border-color: rgba(139, 47, 37, 0.38);
  color: var(--danger);
}

.entry-detail-panel .entry-mark-button.mark-learned {
  border-color: rgba(85, 107, 63, 0.42);
  color: var(--success);
}

.entry-detail-panel .entry-mark-button.mark-review.is-active {
  background: rgba(139, 47, 37, 0.12);
  border-color: rgba(139, 47, 37, 0.55);
  color: var(--danger);
  opacity: 1;
  box-shadow: none;
}

.entry-detail-panel .entry-mark-button.mark-learned.is-active {
  background: rgba(85, 107, 63, 0.14);
  border-color: rgba(85, 107, 63, 0.58);
  color: var(--success);
  opacity: 1;
  box-shadow: none;
}

.elementa-body p {
  margin: 0 0 0.75rem;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

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

.elementa-body > p:last-child {
  margin-bottom: 0;
}

.elementa blockquote,
.elementa-body blockquote {
  margin: 12px 0;
  padding: 12px 14px;
  border-left: 4px solid var(--beige);
  background: color-mix(in srgb, var(--parchment) 72%, var(--paper));
  color: var(--ink);
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
  font-family: var(--font-ui);
}

.terminaciones-grid,
.repaso-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.review-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.72);
}

.history-link {
  display: block;
  margin-top: 8px;
  color: var(--brown);
  text-decoration: none;
}

.omnia-toc {
  display: grid;
  gap: 8px;
  margin: 12px 0 18px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.66);
}

.omnia-toc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.omnia-toc-row > span {
  min-width: 98px;
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.omnia-toc a {
  padding: 6px 9px;
  border: 1px solid var(--beige);
  border-radius: 6px;
  color: var(--brown);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

.omnia-rows {
  display: grid;
  gap: 20px;
}

.omnia-section {
  scroll-margin-top: 18px;
}

.omnia-section h4 {
  padding: 10px 0;
  border-bottom: 2px solid var(--beige);
}

.omnia-row-list {
  line-height: 1.9;
}

.omnia-row {
  display: inline;
  color: var(--brown);
  text-decoration: none;
}

.omnia-row:hover,
.omnia-row:focus,
.omnia-row.active {
  color: #7d571c;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.omnia-deponent-sep,
.omnia-extremitas-sep {
  display: block;
  margin-top: 0.35em;
  color: var(--muted-text, #7d6d5c);
  font-size: 0.78em;
  font-style: italic;
  letter-spacing: 0.02em;
}
.omnia-deponent-sep::before,
.omnia-extremitas-sep::before {
  content: "— ";
}

.omnia-pos,
.omnia-definition,
.omnia-week {
  color: var(--gray);
}

.dict-tooltip {
  position: absolute;
  z-index: 20;
  width: min(320px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;
}

.dict-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dict-tooltip p {
  margin: 8px 0;
  color: var(--brown);
  line-height: 1.45;
}

.tooltip-entry-line {
  font-weight: 700;
}

.dict-tooltip small {
  color: var(--brown-soft);
  font-style: italic;
}

.tooltip-kicker {
  color: var(--gray);
  font-family: var(--font-ui);
  font-size: 0.76rem;
}

.tooltip-kicker span {
  text-transform: uppercase;
}


.back-to-top {
  position: fixed;
  right: 1.35rem;
  bottom: 1.35rem;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 2.65rem;
  height: 2.65rem;
  padding: 0 0.85rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--paper);
  color: var(--danger);
  box-shadow: var(--shadow);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    min-width 0.18s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus {
  background: #f2e2c3;
  color: var(--brown);
  outline: none;
}

.back-to-top-text {
  overflow: hidden;
  max-width: 0;
  white-space: nowrap;
  opacity: 0;
  transition:
    max-width 0.18s ease,
    opacity 0.18s ease;
}

.back-to-top:hover .back-to-top-text,
.back-to-top:focus .back-to-top-text {
  max-width: 7rem;
  opacity: 1;
}

.back-to-top-arrow {
  font-size: 1.15rem;
  line-height: 1;
}

.compact-card {
  min-height: 145px;
}

.review-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(140px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.review-row span,
.history-link span {
  color: var(--gray);
}

.review-panel.wide {
  grid-column: 1 / -1;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.data-table th,
.data-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar-toggle {
    display: none;
  }

  .admin-group-actions {
  justify-content: center;
}

  .sidebar {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-list {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  }

  /* One row on a phone (P6.6; the owner's general note in P6.3: the stacked bar «looks pretty bad and uneven»):
     the heading and the «S» door at the left, the glass, the bell, the account control and the VS mark at the
     right. A page title shares the row when it fits there on one line; a longer one (or enlarged text, or a
     narrow phone) keeps the row to itself and the controls take one of their own under it, at the right, so a
     title is never cut or squeezed into a column of single words. The eyebrow alone (no page title) may wrap
     between its words beside the controls, as long as its longest word fits. The page's own title replaces the
     eyebrow when there is one. Until P6.6 the bar was a column of five rows, 332 px at 390 (P6.2's measure). */
  .topbar {
    align-items: center;
    gap: 10px 12px;
    min-height: 0;
    padding: 12px 16px;
  }

  .topbar-left {
    flex: 1 1 auto;
    flex-basis: min-content;
    min-width: 0;
    gap: 10px;
  }

  .topbar-left:has(h1:not(:empty)) {
    flex-basis: auto;
  }

  .topbar-heading .eyebrow,
  .topbar-heading h1 {
    overflow-wrap: break-word;
  }

  .topbar-heading:has(h1:not(:empty)) .eyebrow {
    display: none;
  }

  .topbar-actions {
    flex: none;
    gap: 8px;
    margin-inline-start: auto;
  }

  /* The «S» door collapses to its seal; the link keeps its aria-label. */
  .sophia-link-text {
    display: none;
  }

  .search-input {
    width: 100%;
  }

  .content {
    padding: 24px;
  }

  .dictionarium-shell,
  .dict-search {
    grid-template-columns: 1fr;
  }

  .import-entry-summary,
  .import-entry-form-grid,
  .import-elementa-card-body,
  .import-elementa-manual-target-grid {
    grid-template-columns: 1fr;
  }

  .import-elementa-card-header,
  .import-elementa-card-actions {
    justify-content: flex-start;
  }

  .import-elementa-candidate-card {
    grid-template-columns: 1fr;
  }

  .import-entry-status,
  .import-entry-actions,
  .import-elementa-actions {
    justify-content: flex-start;
  }

  .entry-detail-panel {
    position: static;
    max-height: none;
  }

  .entry-detail-panel-body {
    max-height: none;
  }

  .admin-data-platform-grid {
    grid-template-columns: 1fr;
  }

  .admin-data-platform-grid article + article {
    padding-left: 0;
    padding-top: 18px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .admin-approval-card {
    grid-template-columns: 1fr;
  }

  .admin-enrollment-card,
  .admin-enrollment-filter-form,
  .admin-focus-header,
  .admin-group-actions,
  .admin-course-subgrid,
  .admin-unit-row {
    grid-template-columns: 1fr;
  }

  .dict-section-heading {
    grid-template-columns: 1fr;
  }

  .omnia-row {
    grid-template-columns: 1fr;
  }

  .review-row {
    grid-template-columns: 1fr;
  }
}


.week-title-jump-form {
  margin: 0;
  text-align: center;
}

.week-title-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.week-title-select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--brown);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: inherit;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}

.week-title-select:focus {
  outline: none;
}

.week-title-select-wrap::after {
  content: "";
  position: absolute;
  right: 0.15rem;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--brown-soft);
  border-bottom: 2px solid var(--brown-soft);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
  opacity: 0.75;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.week-title-select-wrap:hover::after {
  opacity: 1;
  transform: translateY(-60%) rotate(45deg);
}

.week-title-select:hover {
  color: var(--brown-soft);
}



.week-title-menu {
  position: relative;
  display: inline-block;
  text-align: center;
  justify-self: center;
}

.week-title-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--brown);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.week-title-menu summary::-webkit-details-marker {
  display: none;
}

.week-title-menu summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--brown-soft);
  border-bottom: 2px solid var(--brown-soft);
  transform: translateY(-18%) rotate(45deg);
  opacity: 0.75;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.week-title-menu:hover summary,
.week-title-menu[open] summary {
  color: var(--brown-soft);
}

.week-title-menu:hover summary::after {
  opacity: 1;
}

.week-title-menu[open] summary::after {
  transform: translateY(12%) rotate(225deg);
}

.week-title-menu-list {
  position: absolute;
  z-index: 15;
  top: calc(100% + 10px);
  left: 50%;
  width: max-content;
  min-width: 100%;
  max-width: min(90vw, 360px);
  max-height: 320px;
  overflow: auto;
  transform: translateX(-50%);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.week-title-menu-list a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--brown);
  text-decoration: none;
  font-family: var(--font-serif);
  text-align: left;
}

.week-title-menu-list a:hover,
.week-title-menu-list a:focus {
  background: #f2e2c3;
  color: var(--brown);
  outline: none;
}

.week-title-menu-list a.active {
  background: #eadbbe;
  color: var(--brown);
  font-weight: 700;
}

.week-title-menu summary,
.week-title-menu summary * {
  user-select: none;
  -webkit-user-select: none;
}

.week-title-menu summary {
  -webkit-tap-highlight-color: transparent;
}

/* Keep the Septimana vocabulary section in the older font style */
.septimana-section {
  font-family: Georgia, "Times New Roman", serif;
}

.septimana-section .entry-list {
  font-size: calc(1rem / 1.125);
}

.septimana-section .entry-list,
.septimana-section .entry-list a,
.septimana-section .entry-list small,
.septimana-section .entry-word,
.septimana-section .entry-pos,
.septimana-section .entry-definition,
.septimana-section .entry-week {
  font-family: Georgia, "Times New Roman", serif;
}

.septimana-section .entry-word {
  font-size: 1.05em;
}

.septimana-section .button-secondary {
  transition:
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.septimana-section .button-secondary:hover,
.septimana-section .button-secondary:focus {
  background: #f2e2c3;
  color: var(--brown);
  border-color: var(--gold);
  box-shadow: 0 3px 12px rgba(79, 56, 38, 0.12);
  transform: translateY(-1px);
  outline: none;
}

.septimana-section .button-secondary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.week-jump-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}



.week-jump-link:hover {
  color: var(--gold);
}

.week-jump-link:hover::after {
  opacity: 1;
}

.entry-detail-edit-link {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(182, 139, 60, 0.35);
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  background: rgba(255, 250, 240, 0.55);
  color: #7a5a24;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
}

.entry-detail-edit-link:hover,
.entry-detail-edit-link:focus-visible {
  border-color: rgba(182, 139, 60, 0.7);
  background: rgba(246, 240, 227, 0.9);
  color: #4f3826;
  outline: none;
}

.entry-num-inline,
.entry-definition-inline {
  font-weight: 200;
  color: var(--brown-soft);
}

.detail-entry-line {
  margin-bottom: 0;
}

.detail-additional-forms {
  margin: 0.15rem 0 0;
  color: var(--brown-soft);
  line-height: 1.35;
}

.omnia-controls {
  gap: 0.55rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
}

.omnia-word-count {
  margin-left: auto;
  padding-left: 0.85rem;
  border-left: 1px solid rgba(92, 64, 51, 0.22);
  color: var(--muted-text, #7a6a5f);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .omnia-word-count {
    margin-left: 0;
  }
}

.inline-form-label {
  font-family: var(--font-ui);
}

.omnia-week-menu {
  justify-self: auto;
  text-align: left;
}

.omnia-week-menu summary {
  font-size: 1rem;
  font-weight: 700;
  padding: 0.35rem 0.15rem;
}

.omnia-week-menu .week-title-menu-list {
  left: 0;
  transform: none;
  min-width: max-content;
}

.omnia-week-menu .week-title-menu-list a {
  white-space: nowrap;
}

.inline-form-label {
  font-family: var(--font-ui);
}

.omnia-week-menu,
.omnia-order-menu {
  justify-self: auto;
  text-align: left;
}

.omnia-week-menu summary,
.omnia-order-menu summary {
  font-size: 1rem;
  font-weight: 700;
  padding: 0.35rem 0.15rem;
}

.omnia-week-menu .week-title-menu-list,
.omnia-order-menu .week-title-menu-list {
  left: 0;
  transform: none;
  min-width: max-content;
}

.omnia-week-menu .week-title-menu-list a,
.omnia-order-menu .week-title-menu-list a {
  white-space: nowrap;
}

.empty-detail-message {
  text-align: center;
}

.empty-detail-message p {
  margin: 0;
}

.detail-expand-button.side-tab {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  z-index: 20;

  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--paper);
  color: var(--brown);
  box-shadow: 0 8px 24px rgba(79, 56, 38, 0.16);

  font-size: 1rem;
  line-height: 1;
  cursor: pointer;

  transition:
    background 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.detail-expand-button.side-tab:hover {
  background: var(--parchment);
  transform: translate(-50%, -50%) scale(1.04);
  box-shadow: 0 10px 28px rgba(79, 56, 38, 0.22);
}

.detail-expand-button.side-tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.detail-expand-button.side-tab span {
  display: inline-block;
  transform: translateX(1px);
}

body.dict-detail-expanded [data-entry-detail-panel] {
  position: fixed;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  width: min(760px, calc(100vw - 2rem));
  max-height: none;
  z-index: 1000;
  overflow: visible;
}


body.dict-detail-expanded .entry-detail-panel-body {
  height: 100%;
  max-height: none;
  overflow: auto;
  box-shadow: 0 24px 70px rgba(79, 56, 38, 0.32);
}


body.dict-detail-expanded .detail-expand-button.side-tab {
  left: 0;
}

.admin-course-detail-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-course-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1rem;
  margin-bottom: 1.15rem;
  border-bottom: 1px solid var(--border-soft, #dac8a9);
}

.admin-course-detail-header h4 {
  margin: 0.1rem 0 0;
  font-size: 1.45rem;
  line-height: 1.1;
}

.admin-course-detail-header h4 a {
  color: var(--text, #3d2515);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.admin-kicker {
  margin: 0;
  color: var(--muted-text, #7d6d5c);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.admin-course-detail-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.45rem 0.65rem;
  color: var(--muted-text, #7d6d5c);
  font-size: 0.95rem;
  white-space: nowrap;
}

.admin-code-muted {
  color: var(--muted-text, #7d6d5c);
  opacity: 0.68;
  font-size: 0.9em;
}

.admin-soft-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(85, 107, 63, 0.58);
  border-radius: 999px;
  padding: 0.12rem 0.65rem;
  background: rgba(85, 107, 63, 0.14);
  color: var(--success);
  font-size: 0.86rem;
  font-weight: 700;
}

.admin-course-side-panel,
.admin-course-units-panel {
  min-width: 0;
}

@media (max-width: 850px) {
  .admin-course-detail-header {
    display: grid;
  }

  .admin-course-detail-meta {
    justify-content: flex-start;
    white-space: normal;
  }

  .admin-course-detail-grid {
    grid-template-columns: 1fr;
  }

  .admin-unit-row.refined {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .admin-unit-weeks {
    justify-content: flex-start;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entry-detail-panel,
  .entry-detail-panel-body {
    transition: none;
  }
}

.repaso-section {
  max-width: 100%;
}

.repaso-layout {
  display: grid;
  gap: 1rem;
}

.repaso-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 250, 240, 0.72);
  box-shadow: 0 10px 24px rgba(79, 56, 38, 0.06);
  overflow: hidden;
}

.repaso-panel-priority {
  background:
    linear-gradient(
      180deg,
      rgba(255, 250, 240, 0.92),
      rgba(255, 250, 240, 0.68)
    );
}

.repaso-panel-heading {
  padding: 1rem 1.1rem 0.65rem;
  border-bottom: 1px solid rgba(220, 204, 174, 0.75);
}

.repaso-panel-heading h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--brown);
}

.repaso-panel-heading p {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--gray);
}

.repaso-list {
  display: grid;
}

.repaso-item {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 1.1rem;
  color: var(--brown);
  text-decoration: none;
  border-bottom: 1px solid rgba(220, 204, 174, 0.65);
}

.repaso-item:last-child {
  border-bottom: 0;
}

.repaso-item:hover,
.repaso-item:focus-visible {
  background: rgba(239, 227, 200, 0.42);
}

.repaso-word {
  font-weight: 600;
  color: var(--brown);
  text-decoration: underline;
  text-decoration-thickness: 0.04em;
  text-underline-offset: 0.16em;
}

.repaso-meta {
  color: var(--gray);
  font-size: 0.92rem;
  line-height: 1.25;
}

.repaso-item-action {
  grid-template-columns: minmax(9rem, 1fr) minmax(12rem, 1.4fr) auto;
  align-items: center;
  column-gap: 1rem;
}

.repaso-secondary-grid .repaso-item-action {
  grid-template-columns: 1fr;
  align-items: start;
}

.repaso-actions {
  display: flex;
  gap: 0.45rem;
  justify-content: flex-end;
  align-items: center;
}

.repaso-actions form {
  margin: 0;
}

.repaso-button {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.45rem 0.7rem;
  background: var(--paper);
  color: var(--brown);
  font-family: var(--font-ui);
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.repaso-button:hover,
.repaso-button:focus-visible {
  background: var(--parchment);
  border-color: var(--gold);
  box-shadow: 0 6px 16px rgba(79, 56, 38, 0.12);
  transform: translateY(-1px);
}

.repaso-button.subtle {
  color: var(--gray);
}

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

.repaso-panel .quiet {
  margin: 0;
  padding: 0.9rem 1.1rem;
  color: var(--gray);
}

@media (max-width: 1100px) {
  .repaso-secondary-grid {
    grid-template-columns: 1fr;
  }

  .repaso-item-action {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .repaso-actions {
    justify-content: flex-start;
    padding-top: 0.35rem;
  }
}

.repaso-list-wrap {
  position: relative;
  overflow: hidden;
  max-height: var(--repaso-expanded-height, none);
  transition:
    max-height 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.repaso-panel.is-collapsible.is-collapsed .repaso-list-wrap {
  max-height: var(--repaso-collapse-height, 300px);
}

.repaso-panel.is-collapsible:not(.is-collapsed) .repaso-list-wrap {
  max-height: var(--repaso-expanded-height, 1200px);
}

.repaso-panel.is-collapsible.is-collapsed .repaso-list-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.25rem;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 250, 240, 0),
    rgba(255, 250, 240, 0.96)
  );
  opacity: 1;
  transition: opacity 220ms ease;
}

.repaso-panel.is-collapsible:not(.is-collapsed) .repaso-list-wrap::after {
  opacity: 0;
}

.repaso-collapse-toggle {
  width: 100%;
  border: 0;
  border-top: 1px solid rgba(220, 204, 174, 0.75);
  padding: 0.72rem 1rem;
  background: rgba(255, 250, 240, 0.74);
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-weight: 700;
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease;
}

.repaso-collapse-toggle:hover,
.repaso-collapse-toggle:focus-visible {
  background: #f2e2c3;
  color: var(--brown);
  outline: none;
}

.repaso-collapse-toggle[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .repaso-list-wrap {
    transition: none;
  }

  .repaso-panel.is-collapsible.is-collapsed .repaso-list-wrap::after {
    transition: none;
  }
}

.admin-focus-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  margin-top: 0.65rem;
  color: var(--gray);
  font-family: var(--font-ui);
  line-height: 1.35;
}

.admin-focus-summary span {
  white-space: nowrap;
}

.admin-focus-summary strong {
  color: var(--brown);
  font-weight: 700;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.corpus-intro {
  margin-bottom: 18px;
}

.corpus-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.corpus-tabs a {
  padding: 0 0 10px;
  color: var(--brown);
  text-decoration: none;
  font-family: var(--font-ui);
}

.corpus-tabs a.active {
  color: #7d571c;
  box-shadow: 0 2px 0 var(--gold);
}

.corpus-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 36%);
  gap: 28px;
  align-items: start;
}

.corpus-main {
  min-width: 0;
}

.corpus-detail-panel {
  position: sticky;
  top: 22px;
  max-height: calc(100vh - 44px);
}

.corpus-detail-panel-body {
  max-height: calc(100vh - 44px);
  overflow: auto;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.corpus-detail-panel-body h3 {
  margin: 0;
}

.corpus-detail-sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 16px 0 0;
}

.corpus-detail-sections dt {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brown);
  margin-top: 4px;
}

.corpus-detail-sections dd {
  margin: 0 0 6px;
  color: var(--gray);
}

.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.card-link .card {
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.card-link:hover .card,
.card-link:focus-visible .card {
  box-shadow: 0 16px 36px rgba(79, 56, 38, 0.18);
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .corpus-shell {
    grid-template-columns: 1fr;
  }

  .corpus-detail-panel {
    position: static;
    max-height: none;
  }

  .corpus-detail-panel-body {
    max-height: none;
  }
}

/* ==========================================================================
   Bibliotheca: shell + search + filters + results + detail panel
   ========================================================================== */

.bibliotheca-shell {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  grid-template-areas:
    "search   search"
    "filters  results";
  gap: 22px 24px;
  margin: 0;
}

.bibliotheca-shell.is-loading {
  cursor: progress;
  opacity: 0.72;
}

.bibliotheca-search-bar {
  grid-area: search;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.bibliotheca-search-bar .search-label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brown-soft);
}

.bibliotheca-search-input {
  flex: 1 1 240px;
  min-width: 0;
}

.bibliotheca-sort-select {
  flex: 0 1 220px;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--brown);
  font-family: var(--font-ui);
}

.bibliotheca-sort-select option:disabled {
  color: var(--gray);
}

.bibliotheca-search-submit {
  flex: 0 0 auto;
}

/* Filter rail */

.bibliotheca-filters {
  grid-area: filters;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
  align-self: start;
  position: sticky;
  top: 22px;
}

.bibliotheca-chip-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.bibliotheca-chip-strip .card-kicker {
  margin: 0;
}

.filter-chip-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  color: var(--brown);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease;
}

.filter-chip:hover,
.filter-chip:focus-visible {
  background: var(--parchment);
  border-color: var(--gold);
}

.filter-chip-label {
  font-family: var(--font-serif);
}

.filter-chip-remove {
  color: var(--brown-soft);
  font-weight: 600;
}

.bibliotheca-clear-all {
  margin: 0;
  font-size: 0.85rem;
}

.bibliotheca-clear-all a {
  color: var(--brown-soft);
}

.bibliotheca-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bibliotheca-filter-label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brown);
}

.bibliotheca-filter-select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--brown);
  font-family: var(--font-ui);
}

.bibliotheca-filter-select:disabled {
  background: var(--cream);
  color: var(--gray);
  cursor: not-allowed;
}

.bibliotheca-filter-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--gray);
  font-style: italic;
}

/* Results: count line + work cards */

.bibliotheca-results-section {
  grid-area: results;
  min-width: 0;
}

.bibliotheca-empty-state {
  padding: 22px;
  border-radius: 8px;
}

.bibliotheca-result-count {
  margin: 0 0 14px;
  font-size: 0.92rem;
  color: var(--brown-soft);
}

.bibliotheca-result-count-hint {
  color: var(--gray);
  font-style: italic;
  margin-left: 6px;
}

.bibliotheca-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.bibliotheca-work-card {
  position: relative;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.bibliotheca-work-card:hover,
.bibliotheca-work-card:focus-within {
  box-shadow: 0 16px 36px rgba(79, 56, 38, 0.18);
  transform: translateY(-1px);
}

.bibliotheca-work-card.active {
  border-color: var(--gold);
  box-shadow: 0 16px 36px rgba(79, 56, 38, 0.18), inset 3px 0 0 var(--gold);
}

.bibliotheca-work-card-link {
  text-decoration: none;
  color: inherit;
  position: static;
}

/* Stretched link: the title <a>'s ::before fills the entire card so the
   whole card is a single clickable target with one accessible element.
   Inner interactive elements (Open in Lector) sit at a higher z-index so
   they remain independently clickable and don't trigger the panel-swap
   handler. Default content (title/meta/chips/excerpt) stays beneath the
   overlay — selection within the card is the known stretched-link
   tradeoff, accepted for result cards. */
.bibliotheca-work-card-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.bibliotheca-work-card-link:focus-visible {
  outline: none;
}

.bibliotheca-work-card-link:focus-visible::before {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.bibliotheca-work-card-link:hover .bibliotheca-work-card-title,
.bibliotheca-work-card-link:focus-visible .bibliotheca-work-card-title {
  color: #7d571c;
}

.bibliotheca-work-card-actions {
  position: relative;
  z-index: 2;
}

.bibliotheca-work-card-lector {
  position: relative;
  z-index: 2;
}

.bibliotheca-work-card-title {
  margin: 0 0 4px;
  font-size: 1.18rem;
  font-family: var(--font-serif);
  color: var(--brown);
}

.bibliotheca-work-card-meta {
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: var(--brown-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

.bibliotheca-work-card-author.muted {
  color: var(--gray);
  font-style: italic;
}

.bibliotheca-work-card-sep,
.bibliotheca-detail-sep,
.lector-sep {
  color: var(--gray);
}

.bibliotheca-work-card-chips,
.bibliotheca-detail-chips,
.lector-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.bibliotheca-work-card-excerpt {
  margin: 8px 0 10px;
  font-family: var(--font-serif);
  color: var(--brown);
  line-height: 1.55;
}

.bibliotheca-work-card-actions {
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Coverage slot: hidden until coverage data lands. Keeping it in the DOM
   means the card height won't shift the day it lights up. */
.coverage-placeholder[hidden] {
  display: none;
}

.coverage-placeholder {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--brown-soft);
}

/* Detail panel — Bibliotheca variant. Inherits position/sticky from
   .corpus-detail-panel via index.html, so we only style the inner content. */

.bibliotheca-detail-panel .corpus-detail-panel-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bibliotheca-detail-header .card-kicker {
  margin: 0 0 6px;
}

.bibliotheca-detail-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--brown);
}

.bibliotheca-detail-meta {
  margin: 6px 0 0;
  color: var(--brown-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

.bibliotheca-detail-author.muted {
  color: var(--gray);
  font-style: italic;
}

/* Preview shrinks to roughly the card-excerpt's visual weight so the
   stats grid becomes the panel's main content rather than the body
   text. The block is clamped so a long preview can't dominate the
   panel. */
.bibliotheca-detail-preview-text {
  margin: 6px 0 0;
  font-family: var(--font-serif);
  color: var(--brown);
  line-height: 1.55;
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Categories in the detail panel render inline (e.g. "General exposition
   · Letters") rather than as boxed chips, matching the author·epoch
   line above them. The .bibliotheca-detail-chip class is preserved for
   existing selectors/tests but loses its boxed/eyebrow visual weight. */
.bibliotheca-detail-categories {
  margin: 6px 0 0;
  font-family: var(--font-serif);
  color: var(--brown-soft);
  font-size: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

.bibliotheca-detail-category {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: var(--brown-soft);
}

.bibliotheca-detail-stats-list {
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
}

.bibliotheca-detail-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 90px;
}

.bibliotheca-detail-stat dt {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brown);
}

.bibliotheca-detail-stat dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--brown);
}

.bibliotheca-detail-coverage-unavailable {
  color: var(--gray);
}

.bibliotheca-detail-coverage-empty {
  font-size: 0.9rem;
  color: var(--brown-soft);
}

/* Unknown-words stat: the value is a link-styled <button> that toggles
   the chip section below. */
.bibliotheca-detail-stat-toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--brown);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

.bibliotheca-detail-stat-toggle:hover,
.bibliotheca-detail-stat-toggle:focus-visible {
  color: #7d571c;
}

.bibliotheca-detail-stat-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

.bibliotheca-detail-coverage-counts {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--brown-soft);
}

.bibliotheca-detail-coverage-hint {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--brown-soft);
  font-style: italic;
}

/* Unknown word forms: chip grid revealed by the Unknown-words stat. */
.bibliotheca-detail-unknown-forms {
  margin: 0;
}

.bibliotheca-unknown-forms-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.bibliotheca-unknown-form {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-serif);
  font-size: 0.92rem;
  color: var(--brown);
}

.bibliotheca-unknown-form-count {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--brown-soft);
}

.bibliotheca-unknown-forms-more {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 10px 0 0;
  font: inherit;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--brown-soft);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

.bibliotheca-unknown-forms-more:hover,
.bibliotheca-unknown-forms-more:focus-visible {
  color: #7d571c;
}

.bibliotheca-unknown-forms-empty {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--brown-soft);
  font-style: italic;
}

/* Action row sits at the very bottom of the panel column. The panel body
   is already flex-direction:column (lines above), so margin-top:auto
   pushes the actions below all data/stats/source content. */
.bibliotheca-detail-actions {
  margin: 0;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.bibliotheca-detail-rebuild-form {
  margin: 0;
}

.bibliotheca-detail-coverage {
  margin: 0;
}

.bibliotheca-detail-coverage .card-kicker {
  margin: 0 0 4px;
}

.bibliotheca-detail-source {
  font-size: 0.88rem;
  color: var(--brown-soft);
}

.bibliotheca-detail-source p {
  margin: 0 0 4px;
}

.bibliotheca-detail-source-url a {
  color: var(--brown-soft);
  word-break: break-all;
}

.bibliotheca-detail-empty-heading {
  margin: 4px 0 8px;
  font-family: var(--font-serif);
  color: var(--brown);
}

.bibliotheca-detail-empty-body {
  margin: 0 0 12px;
}

/* Responsive: collapse to a single column under the same breakpoint as
   .corpus-shell so the page behaves consistently on mobile. */
@media (max-width: 900px) {
  .bibliotheca-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "search"
      "filters"
      "results";
  }

  .bibliotheca-filters {
    position: static;
  }
}

/* ==========================================================================
   Lector — focused reading view for a single corpus work.
   Three-zone layout: left passage nav | center passage text | right metadata.
   ========================================================================== */

.lector {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lector-intro {
  margin: 0;
}

.lector-title {
  margin: 4px 0 6px;
  font-family: var(--font-serif);
  color: var(--brown);
}

.lector-meta {
  margin: 0 0 8px;
  color: var(--brown-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

.lector-author.muted {
  color: var(--gray);
  font-style: italic;
}

.lector-actions {
  margin: 10px 0 0;
}

.lector-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) minmax(280px, 32%);
  gap: 28px;
  align-items: start;
}

.lector-left-nav {
  position: sticky;
  top: 22px;
  max-height: calc(100vh - 44px);
  overflow: auto;
  background: var(--cream);
  border: 1px solid var(--brown-soft-border, rgba(120, 80, 40, 0.18));
  border-radius: 8px;
  padding: 12px;
}

.lector-passage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lector-passage-list-item {
  margin: 0;
}

.lector-passage-list-link {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  color: var(--brown);
  text-decoration: none;
  line-height: 1.3;
}

.lector-passage-list-link:hover,
.lector-passage-list-link:focus {
  background: rgba(180, 140, 60, 0.12);
  color: var(--brown);
  outline: none;
}

.lector-passage-list-item.active .lector-passage-list-link {
  background: rgba(180, 140, 60, 0.22);
  font-weight: 600;
}

.lector-passage-list-empty {
  margin: 0;
  padding: 10px;
  border-radius: 6px;
  font-size: 0.88rem;
}

.lector-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lector-passage {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lector-passage-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.lector-passage-header-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.lector-passage-label {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--brown);
}

.lector-passage-source-ref {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.lector-passage-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lector-passage-nav .is-disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

.lector-passage-body {
  max-width: 62ch;
}

.lector-passage-text {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--brown);
  line-height: 1.65;
  text-align: left;
}

.lector-passage-text:last-child {
  margin-bottom: 0;
}

.lector-passage-text.muted {
  color: var(--gray);
  font-style: italic;
}

.lector-stream {
  display: flex;
  flex-direction: column;
}

.lector-stream-group {
  margin: 0;
}

.lector-stream-group + .lector-stream-group {
  margin-top: 28px;
}

.lector-stream-section-title {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brown);
}

.lector-stream-item {
  margin: 0;
}

.lector-stream-item.is-continuation {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(140, 110, 80, 0.18);
}

.lector-stream-item-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.lector-stream-item-label {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}

.lector-stream-item-label:hover,
.lector-stream-item-label:focus {
  color: var(--brown);
  text-decoration: underline;
}

.lector-stream-item-source-ref {
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
}

.lector-stream-continue {
  margin: 20px 0 0;
  text-align: right;
}

.lector-stream-continue-link.is-disabled {
  opacity: 0.65;
  pointer-events: none;
}

.lector-stream-error {
  display: inline-block;
  margin-left: 10px;
  color: #8f3d2f;
  font-size: 0.9rem;
}

.lector-empty {
  margin: 0;
  padding: 18px;
  border-radius: 6px;
}

.lector-context-panel-aside .corpus-detail-panel-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lector-context-header .card-kicker {
  margin: 0 0 6px;
}

.lector-context-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--brown);
}

.lector-context-sections {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lector-context-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.lector-context-row dt {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brown-soft);
}

.lector-context-row dd {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--brown);
  text-align: right;
}

.lector-context-source {
  font-size: 0.88rem;
  color: var(--brown-soft);
}

.lector-context-source p {
  margin: 0 0 4px;
}

.lector-context-source-url a {
  color: var(--brown-soft);
  word-break: break-all;
}

.lector-context-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.lector-context-rebuild-form {
  margin: 0;
}

/* Lector edit view (admin-only). Reuses the three-column lector-shell;
   the form spans the center textarea and the right metadata panel. */
.lector-edit {
  display: block;
}

.lector-edit-shell {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.lector-edit-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lector-edit-textarea-label {
  font-size: 0.9rem;
  color: var(--ink-soft, #5b5345);
}

.lector-edit-textarea {
  width: 100%;
  min-height: 60vh;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem;
  line-height: 1.55;
  padding: 12px 14px;
  border: 1px solid var(--rule-warm, #d8cdb6);
  border-radius: 6px;
  background: var(--surface-cream, #fbf6ea);
  color: var(--ink, #2f2a22);
}

.lector-edit-textarea:focus {
  outline: 2px solid var(--accent-gold, #b08a3e);
  outline-offset: 2px;
}

.lector-edit-panel {
  padding: 16px;
}

.lector-edit-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.lector-edit-row label {
  font-size: 0.85rem;
  color: var(--ink-soft, #5b5345);
  font-weight: 600;
}

.lector-edit-row input[type="text"],
.lector-edit-row input[type="url"],
.lector-edit-row textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.92rem;
  padding: 6px 8px;
  border: 1px solid var(--rule-warm, #d8cdb6);
  border-radius: 4px;
  background: var(--surface-cream, #fbf6ea);
  color: var(--ink, #2f2a22);
}

.lector-edit-row input:focus,
.lector-edit-row textarea:focus {
  outline: 2px solid var(--accent-gold, #b08a3e);
  outline-offset: 1px;
}

.lector-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  align-items: center;
}

.lector-edit-error {
  margin: 12px 0;
}

@media (max-width: 900px) {
  .lector-edit-shell {
    grid-template-columns: 1fr;
  }
  .lector-edit-textarea {
    min-height: 45vh;
  }
}

@media (max-width: 900px) {
  .lector-shell {
    grid-template-columns: 1fr;
  }

  .lector-left-nav {
    position: static;
    max-height: none;
  }
}

/* Lector right-zone: stack work-metadata panel and entry-detail panel. */
.lector-right-zone {
  position: sticky;
  top: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  max-height: calc(100vh - 44px);
  overflow: auto;
}

.lector-right-zone .lector-context-panel,
.lector-right-zone .lector-entry-detail-panel {
  min-width: 0;
}

@media (max-width: 900px) {
  .lector-right-zone {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* Inline clickable Latin word tokens inside passage text. */
.lector-word-token {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  text-align: inherit;
  text-underline-offset: 2px;
  text-decoration: underline dotted transparent;
  transition: text-decoration-color 0.12s ease;
}

.lector-word-token:hover,
.lector-word-token:focus-visible {
  text-decoration: underline dotted var(--brown-soft, rgba(120, 80, 40, 0.5));
}

.lector-word-token:focus-visible {
  outline: 2px solid var(--gold, rgba(180, 140, 80, 0.6));
  outline-offset: 2px;
  border-radius: 2px;
}

.lector-word-token[aria-expanded="true"] {
  text-decoration: underline dotted var(--brown, #5b3a1e);
}

/* Slice 6: KWIC occurrence opened in the Lector. The primary hit gets a warm
   gold mark; other same-lemma occurrences in the passage are marked subtly so
   they read as related without competing with the primary. scroll-margin-top
   keeps the #lector-occ fragment target clear of the sticky reader header. */
.lector-token-highlight {
  background: var(--gold-soft, rgba(200, 160, 90, 0.42));
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--gold, rgba(180, 140, 80, 0.55));
  scroll-margin-top: 96px;
}

.lector-token-neighbor {
  background: var(--gold-faint, rgba(200, 160, 90, 0.16));
  border-radius: 3px;
  text-decoration: underline dotted var(--gold, rgba(180, 140, 80, 0.55));
}

/* Shared reader tooltip card (Corpus Lector + Lectionarium Reader). Both readers
   drive the same window.AlchemiaReaderTooltips renderer, so the card sizing,
   scrolling, pointer capture, and stacked-match spacing live in one place. Wider
   than the hover tooltip to hold stacked matches. */
.corpus-dict-tooltip,
.lectionarium-dict-tooltip {
  width: min(380px, calc(100vw - 32px));
  max-height: min(60vh, 480px);
  overflow-y: auto;
}

/* When visible the card becomes a real interactive surface above the reader
   text, so clicks inside it never fall through to the token behind. */
.corpus-dict-tooltip.is-visible,
.lectionarium-dict-tooltip.is-visible {
  pointer-events: auto;
  z-index: 60;
}

.corpus-dict-tooltip .tooltip-match + .tooltip-match,
.lectionarium-dict-tooltip .tooltip-match + .tooltip-match {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.tooltip-entry-headword {
  font-weight: 700;
  color: var(--brown);
  text-decoration: none;
}

.tooltip-entry-headword:hover,
.tooltip-entry-headword:focus-visible {
  text-decoration: underline;
}

.tooltip-entry-pos {
  color: var(--brown-soft);
  font-style: italic;
  font-weight: 400;
}

.tooltip-parse {
  margin-top: 6px;
}

.tooltip-parse-label {
  display: block;
  color: var(--gray);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tooltip-parse ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.tooltip-parse li {
  color: var(--brown-soft);
  font-size: 0.85rem;
  line-height: 1.3;
  padding: 1px 0;
}

/* Entry-detail panel restored to the Lector right zone. */
.lector-entry-detail-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.lector-entry-detail-panel .entry-detail-panel-body {
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lector-entry-detail-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 10px;
}

.lector-info-restore-btn {
  font-size: 0.85rem;
}

.entry-panel-editor {
  display: block;
}

.entry-panel-editor-error {
  margin: 0 0 12px 0;
  padding: 10px 12px;
  border: 1px solid #d9aaa3;
  border-radius: 6px;
  background: var(--paper);
  color: var(--danger);
  font-size: 0.92rem;
  line-height: 1.4;
}

.entry-panel-editor-toast {
  display: inline-block;
  margin: 0 0 12px 0;
  padding: 6px 14px;
  border: 1px solid #b8c1a1;
  border-radius: 999px;
  background: var(--paper);
  color: var(--success);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 1;
  transition: opacity 600ms ease;
}

.entry-panel-editor-toast.is-leaving {
  opacity: 0;
}

/* Verba study review card. */
.srs-study-shell {
  width: min(100%, 880px);
  margin: 28px auto 0;
  padding: 0 8px 32px;
}

.srs-review-card {
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding: 28px 30px 26px;
  border: 1px solid rgba(182, 139, 60, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 250, 240, 0.96), rgba(239, 227, 200, 0.72)),
    var(--paper);
  box-shadow:
    0 20px 46px rgba(79, 56, 38, 0.14),
    inset 0 1px 0 rgba(255, 250, 240, 0.88);
}

/* Dark review surface: avoid pale fixed gradients behind light theme text. */
html[data-theme="dark"] .srs-review-card {
  background:
    linear-gradient(180deg, rgba(216, 181, 107, 0.07), transparent),
    var(--paper);
  border-color: var(--beige);
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .srs-week-badge,
html[data-theme="dark"] .srs-pos-badge,
html[data-theme="dark"] .srs-show-answer-btn .srs-kbd {
  background: var(--surface-soft);
  border-color: var(--beige);
  color: var(--brown-soft);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .srs-review-card {
    background:
      linear-gradient(180deg, rgba(216, 181, 107, 0.07), transparent),
      var(--paper);
    border-color: var(--beige);
    box-shadow: var(--shadow);
  }

  html[data-theme="auto"] .srs-week-badge,
  html[data-theme="auto"] .srs-pos-badge,
  html[data-theme="auto"] .srs-show-answer-btn .srs-kbd {
    background: var(--surface-soft);
    border-color: var(--beige);
    color: var(--brown-soft);
  }
}

.srs-review-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-top: 4px solid rgba(182, 139, 60, 0.48);
}

.srs-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.srs-queue-counts {
  display: inline-flex;
  align-items: baseline;
  gap: 13px;
  min-width: 0;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.srs-queue-count {
  min-width: 1ch;
  padding: 1px 0 3px;
  border-bottom: 2px solid transparent;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
}

.srs-queue-count.is-nonzero {
  border-bottom-color: currentColor;
}

.srs-queue-count-new {
  color: #3f6f8f;
}

.srs-queue-count-learning {
  color: var(--danger);
}

.srs-queue-count-review {
  color: var(--success);
}

.srs-week-badge,
.srs-pos-badge,
.srs-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: var(--font-ui);
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.srs-week-badge {
  min-height: 28px;
  padding: 4px 12px;
  border: 1px solid rgba(182, 139, 60, 0.42);
  background: rgba(239, 227, 200, 0.58);
  color: var(--brown-soft);
  font-size: 0.75rem;
  font-weight: 700;
}

.srs-card-front {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.srs-answer-label {
  margin: 0;
  color: var(--gray);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* The prompt label only names the side being asked (Forma latina / Español);
   keep it small and muted so it does not compete with the term itself. */
.srs-prompt-label {
  margin: 0;
  color: var(--gray);
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

.srs-card-term {
  margin: 0;
  color: var(--brown);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.08;
  text-wrap: balance;
}

.srs-show-answer-row {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.srs-review-card[data-answer-shown="true"] .srs-show-answer-row {
  display: none;
}

.srs-show-answer-btn,
.srs-grade-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 1rem;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.srs-show-answer-btn {
  padding: 10px 20px;
  background: var(--brown);
  color: var(--paper);
  box-shadow: 0 10px 22px rgba(79, 56, 38, 0.18);
}

.srs-show-answer-btn .srs-kbd {
  border-color: rgba(255, 250, 240, 0.46);
  background: rgba(255, 250, 240, 0.16);
  color: var(--paper);
}

.srs-show-answer-btn:hover,
.srs-show-answer-btn:focus-visible,
.srs-grade-btn:hover,
.srs-grade-btn:focus-visible {
  border-color: var(--brown);
  box-shadow: 0 12px 24px rgba(79, 56, 38, 0.16);
  transform: translateY(-1px);
}

.srs-show-answer-btn:focus-visible,
.srs-grade-btn:focus-visible,
.srs-entry-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.srs-show-answer-btn:active,
.srs-grade-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(79, 56, 38, 0.12);
}

.srs-card-back {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 24px 18px 20px;
  border-top: 1px solid rgba(220, 204, 174, 0.82);
  text-align: center;
}

.srs-card-back[hidden],
.srs-grade-footer[hidden] {
  display: none;
}

.srs-review-card[data-answer-shown="true"] .srs-card-back {
  animation: srs-answer-reveal 160ms ease-out both;
}

.srs-card-back-noscript {
  border-bottom: 1px solid rgba(220, 204, 174, 0.82);
}

.srs-answer-main {
  color: var(--brown);
  font-size: 2.35rem;
  font-weight: 600;
  line-height: 1.12;
  text-wrap: balance;
}

.srs-answer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.srs-pos-badge {
  min-height: 28px;
  padding: 4px 11px;
  border: 1px solid rgba(116, 86, 60, 0.22);
  background: rgba(255, 250, 240, 0.7);
  color: var(--brown-soft);
  font-size: 0.78rem;
}

.srs-entry-link {
  margin-top: 2px;
  color: var(--brown-soft);
  font-family: var(--font-ui);
  text-decoration: underline;
  text-decoration-color: rgba(182, 139, 60, 0.58);
  text-underline-offset: 3px;
}

.srs-grade-footer {
  margin-top: 2px;
  padding-top: 20px;
  border-top: 1px solid rgba(220, 204, 174, 0.82);
}

.srs-rating-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.srs-rating-form-noscript {
  margin-top: 18px;
}

.srs-grade-btn {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 250, 240, 0.72);
  color: var(--brown);
}

.srs-grade-again {
  border-color: rgba(139, 47, 37, 0.38);
}

.srs-grade-hard {
  border-color: rgba(116, 86, 60, 0.34);
}

.srs-grade-good {
  border-color: rgba(85, 107, 63, 0.5);
  background: rgba(239, 227, 200, 0.72);
  box-shadow: inset 0 -3px 0 rgba(85, 107, 63, 0.18);
}

.srs-grade-easy {
  border-color: rgba(114, 118, 77, 0.46);
}

.srs-grade-btn:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
  box-shadow: none;
}

.srs-kbd {
  min-width: 28px;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid rgba(116, 86, 60, 0.28);
  background: rgba(255, 250, 240, 0.82);
  color: var(--brown-soft);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

@keyframes srs-answer-reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .srs-study-intro {
    margin-bottom: 10px;
  }

  .srs-study-intro p {
    display: none;
  }

  .srs-study-shell {
    margin-top: 10px;
    padding: 0 0 12px;
  }

  .srs-review-card {
    display: flex;
    flex-direction: column;
    overflow: visible;
    min-height: 62dvh;
    padding: 18px 16px 0;
  }

  .srs-card-header {
    gap: 12px;
    margin-bottom: 12px;
  }

  .srs-card-front {
    flex: 1;
    align-content: center;
    padding: 8px 0 18px;
  }

  .srs-card-term {
    font-size: 2.2rem;
  }

  .srs-answer-main {
    font-size: 1.9rem;
  }

  .srs-card-back {
    margin-top: 0;
    padding: 18px 8px 16px;
  }

  .srs-show-answer-row {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: auto -16px 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(220, 204, 174, 0.82);
    border-radius: 0 0 8px 8px;
    background: linear-gradient(180deg, rgba(255, 250, 240, 0.97), rgba(239, 227, 200, 0.94));
  }

  .srs-show-answer-btn {
    width: 100%;
    min-height: 52px;
  }

  .srs-grade-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 -16px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(220, 204, 174, 0.82);
    border-radius: 0 0 8px 8px;
    background: linear-gradient(180deg, rgba(255, 250, 240, 0.97), rgba(239, 227, 200, 0.94));
  }

  .srs-rating-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .srs-grade-btn {
    min-height: 52px;
    padding: 8px 4px;
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.15;
  }
}

@media (max-width: 430px) {
  .srs-card-term {
    font-size: 1.9rem;
  }

  .srs-answer-main {
    font-size: 1.65rem;
  }

  .srs-grade-btn {
    font-size: 0.78rem;
  }
}

@media (pointer: coarse) {
  .srs-kbd {
    display: none;
  }

  .srs-show-answer-btn,
  .srs-grade-btn {
    touch-action: manipulation;
  }

  .srs-grade-btn:active,
  .srs-show-answer-btn:active {
    transform: scale(0.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  .srs-show-answer-btn,
  .srs-grade-btn {
    transition: none;
  }

  .srs-review-card[data-answer-shown="true"] .srs-card-back {
    animation: none;
  }
}

/* ----------------------------------------------------------------------- */
/* Student dashboard — Septimana banner + compact module cards             */
/* ----------------------------------------------------------------------- */

.dash-welcome {
  margin-bottom: 18px;
}

.dash-welcome h2 {
  margin: 2px 0 0;
}

.septimana-banner {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 6px 0 26px;
  padding: 18px 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(182, 139, 60, 0.07), rgba(182, 139, 60, 0.02)),
    var(--paper);
  box-shadow: var(--shadow);
}

.septimana-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.65;
}

.septimana-banner-center {
  text-align: center;
}

.septimana-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brown-soft);
}

.septimana-title {
  margin: 2px 0 0;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant: small-caps;
  color: var(--brown);
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.activity-placement-section {
  margin: 0 0 26px;
}

.activity-placement-heading {
  margin-bottom: 12px;
}

.activity-placement-heading h2 {
  margin: 2px 0 0;
}

.activity-placement-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-placement-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 14px 14px 14px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.activity-placement-card--submitted,
.activity-placement-card--expired,
.activity-placement-card--closed,
.activity-placement-card--runtime_unavailable {
  border-left-color: var(--brown-soft);
  background: var(--cream);
}

.activity-placement-copy {
  min-width: 0;
}

.activity-placement-copy h3,
.activity-placement-copy p {
  overflow-wrap: anywhere;
}

.activity-placement-copy h3 {
  margin: 0;
  color: var(--brown);
  font-family: var(--font-serif);
  font-size: 1.12rem;
}

.activity-placement-copy p {
  margin: 4px 0 0;
  color: var(--brown-soft);
  font-size: 0.88rem;
}

.activity-placement-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--brown);
  border-radius: 6px;
  color: var(--brown);
  background: var(--paper);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  margin-left: auto;
}

.activity-placement-action:hover {
  color: var(--paper);
  background: var(--brown);
}

.activity-placement-action:active {
  color: var(--paper);
  background: var(--brown-soft);
}

.activity-placement-action:focus-visible {
  outline: 3px solid var(--brown);
  outline-offset: 3px;
}

.dash-card {
  display: flex;
  flex-direction: column;
  min-height: 172px;
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.dash-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.dash-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

.dash-chip {
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--brown-soft);
  background: var(--cream);
}

.dash-chip--done {
  color: var(--success);
  border-color: rgba(85, 107, 63, 0.35);
  background: rgba(85, 107, 63, 0.08);
}

.dash-chip--active {
  color: var(--brown);
  border-color: rgba(182, 139, 60, 0.45);
  background: rgba(182, 139, 60, 0.12);
}

.dash-chip--muted {
  color: var(--gray);
}

.dash-title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--brown);
  line-height: 1.3;
}

.dash-empty {
  margin: 6px 0 0;
  color: var(--gray);
  font-style: italic;
  line-height: 1.5;
}

.dash-stat {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
}

.dash-stat-value {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--brown);
}

.dash-stat-unit {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--brown-soft);
}

.dash-stat-caption {
  margin: 3px 0 8px;
  font-size: 0.85rem;
  color: var(--gray);
}

.dash-words {
  margin: 0 0 8px;
  padding-left: 22px;
}

.dash-words li {
  margin: 2px 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--gray);
}

.dash-word-token {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--brown);
}

.dash-word-pos {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--brown-soft);
}

.dash-word-def {
  color: var(--gray);
}

.dash-line {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 0 8px;
}

.dash-line-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown-soft);
}

.dash-line-value {
  font-size: 0.95rem;
  color: var(--brown);
  line-height: 1.4;
}

.dash-link {
  margin-top: auto;
  padding-top: 10px;
  align-self: flex-start;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brown);
  text-decoration: none;
  border-bottom: 1px solid rgba(182, 139, 60, 0.5);
}

.dash-link:hover,
.dash-link:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.dash-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ── Dashboard teacher tools (course announcement entry points) ─────────── */

.teacher-tools-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.teacher-tools-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.teacher-tools-row--grading {
  flex-wrap: wrap;
}

body.dashboard-world .search-input {
  min-width: 0;
}

.teacher-tools-course {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  margin-right: auto;
}

.teacher-tools-course-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown-soft);
}

.teacher-tools-course-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brown);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.teacher-tools-chip {
  align-self: center;
}

.teacher-tools-send {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid rgba(182, 139, 60, 0.45);
  border-radius: 8px;
  background: var(--cream);
  color: var(--brown);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.teacher-tools-send:hover {
  border-color: var(--gold);
  background: rgba(182, 139, 60, 0.12);
}

.teacher-tools-send:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .teacher-tools-row {
    flex-wrap: wrap;
  }

  .teacher-tools-send {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .teacher-tools-send {
    transition: none;
  }
}

@media (max-width: 640px) {
  .septimana-banner {
    padding: 14px 18px;
    gap: 12px;
  }

  .septimana-title {
    font-size: 1.5rem;
  }
}

.septimana-code {
  font-variant: normal;
  letter-spacing: 0.06em;
}

/* --- Unified admin navigation & pipeline (admin redesign) -------------------- */

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.76);
  box-shadow: 0 8px 24px rgba(79, 56, 38, 0.08);
}

.admin-nav-tab {
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
}

.admin-nav-tab:hover,
.admin-nav-tab:focus {
  color: var(--brown);
  background: rgba(182, 139, 60, 0.12);
}

.admin-nav-tab.active {
  color: var(--paper);
  background: var(--gold);
}

.nav-section-label {
  display: block;
  margin: 14px 12px 4px;
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.admin-section-link {
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.admin-section-link:hover,
.admin-section-link:focus {
  color: var(--gold);
  text-decoration: underline;
}

.admin-section-hint {
  margin: -6px 0 14px;
  color: var(--gray);
  font-size: 0.92rem;
}

.admin-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--paper);
  font-size: 0.75rem;
  vertical-align: middle;
}

.admin-step-done {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--olive);
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

.admin-breadcrumb {
  margin: 0 0 12px;
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.85rem;
}

.admin-breadcrumb a {
  color: var(--brown-soft);
}

.admin-breadcrumb a:hover,
.admin-breadcrumb a:focus {
  color: var(--gold);
}

.admin-group-row-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
}

.admin-group-row-actions .admin-group-name {
  color: var(--brown);
  font-weight: 600;
  text-decoration: none;
}

.admin-group-row-actions .admin-group-name:hover,
.admin-group-row-actions .admin-group-name:focus {
  color: var(--gold);
  text-decoration: underline;
}

.admin-group-quick-actions {
  display: inline-flex;
  gap: 8px;
}

.admin-group-quick-actions form {
  margin: 0;
}

.admin-quick-action {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--brown);
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.admin-quick-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.admin-module-link {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.82);
  color: var(--brown);
  text-decoration: none;
}

.admin-module-link:hover,
.admin-module-link:focus {
  border-color: var(--gold);
  box-shadow: 0 6px 18px rgba(79, 56, 38, 0.12);
}

.admin-module-link strong {
  font-family: var(--font-ui);
  font-size: 0.95rem;
}

.admin-module-link span {
  color: var(--gray);
  font-size: 0.82rem;
}

.admin-status-pill {
  display: inline-block;
  padding: 0.14rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: lowercase;
}

.admin-status-pill.status-active {
  border-color: rgba(114, 118, 77, 0.5);
  background: rgba(114, 118, 77, 0.12);
  color: var(--olive);
}

.admin-status-pill.status-pending {
  border-color: rgba(182, 139, 60, 0.5);
  background: rgba(182, 139, 60, 0.12);
  color: var(--gold);
}

.admin-status-list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}

.admin-status-list-inline li {
  border: 0;
  padding: 0;
}

.admin-course-detail-list {
  display: grid;
  gap: 26px;
}

.admin-course-detail-titled {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.admin-course-detail-titled:first-child {
  padding-top: 0;
  border-top: 0;
}

.admin-course-detail-name {
  margin: 0 0 10px;
}

.admin-course-detail-name a {
  color: var(--brown);
  text-decoration: none;
}

.admin-course-detail-name a:hover,
.admin-course-detail-name a:focus {
  color: var(--gold);
  text-decoration: underline;
}

.admin-pipeline-section:target,
.admin-dashboard-section:target {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .admin-group-row-actions {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* --- Frequentia (Corpus Reader) ----------------------------------- */

.frequentia {
  display: grid;
  gap: 16px;
}

.frequentia-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid var(--line);
}

.frequentia-heading h3,
.frequentia-results-header h3 {
  margin: 2px 0 4px;
  color: var(--brown);
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  font-weight: 600;
  line-height: 1.1;
}

.frequentia-heading > div > p:last-child {
  max-width: 620px;
  margin: 0;
  color: var(--gray);
  line-height: 1.45;
}

.frequentia-scope-summary {
  display: grid;
  min-width: 200px;
  gap: 2px;
  text-align: right;
}

.frequentia-scope-summary span,
.frequentia-scope-summary small {
  color: var(--gray);
  font-family: var(--font-ui);
  font-size: 0.76rem;
}

.frequentia-scope-summary span {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.frequentia-scope-summary strong {
  font-size: 1.02rem;
}

.frequentia-controls {
  overflow: hidden;
  margin-bottom: 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 46%),
    var(--paper);
  box-shadow: 0 7px 20px rgba(79, 56, 38, 0.07);
}

.frequentia-unit-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.frequentia-unit-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.frequentia-unit-option {
  position: relative;
  cursor: pointer;
}

.frequentia-unit-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.frequentia-unit-option > span {
  display: grid;
  min-height: 66px;
  align-content: center;
  gap: 2px;
  padding: 10px 14px 10px 42px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.5);
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.frequentia-unit-option > span::before {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 15px;
  height: 15px;
  border: 1px solid var(--beige);
  border-radius: 50%;
  background: #fffef9;
  box-shadow: inset 0 0 0 4px #fffef9;
  content: "";
  transform: translateY(-50%);
}

.frequentia-unit-option input:checked + span {
  border-color: rgba(182, 139, 60, 0.68);
  background: rgba(239, 227, 200, 0.62);
  box-shadow: inset 3px 0 0 var(--gold);
}

.frequentia-unit-option input:checked + span::before {
  border-color: var(--gold);
  background: var(--gold);
}

.frequentia-unit-option input:focus-visible + span {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.frequentia-unit-option strong {
  font-family: var(--font-ui);
  font-size: 0.96rem;
}

.frequentia-unit-option small {
  color: var(--gray);
  font-size: 0.78rem;
}

.frequentia-search-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.frequentia-search-field {
  flex: 1 1 240px;
}

.frequentia-search-field input,
.frequentia-number {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffef9;
  color: var(--brown);
  font-family: var(--font-ui);
  font-size: 1rem;
}

.frequentia-search-field input:focus,
.frequentia-number:focus {
  border-color: var(--gold);
  outline: 2px solid rgba(182, 139, 60, 0.18);
  outline-offset: 1px;
}

.frequentia-submit {
  min-height: 41px;
  padding: 9px 19px;
  border: 1px solid #9d7430;
  border-radius: 8px;
  background: var(--brown);
  color: var(--paper);
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(79, 56, 38, 0.13);
  transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.frequentia-submit:hover,
.frequentia-submit:focus-visible {
  background: var(--brown-soft);
  box-shadow: 0 6px 14px rgba(79, 56, 38, 0.17);
  transform: translateY(-1px);
}

.frequentia-search-submit {
  min-width: 126px;
}

.frequentia-hint {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--gray);
}

.frequentia-scope,
.frequentia-options {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 18px 0 0;
  padding: 16px 0 0;
}

.frequentia-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px 14px;
  margin-top: 8px;
}

.frequentia-options-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 12px 14px;
  margin-top: 8px;
}

.frequentia-pos-filter {
  margin-top: 16px;
}

.frequentia-pos-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 7px;
}

.frequentia-pos-options label {
  position: relative;
  cursor: pointer;
}

.frequentia-pos-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.frequentia-pos-options span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.56);
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.78rem;
}

.frequentia-pos-options small {
  margin-left: 4px;
  color: var(--gray);
  font-size: 0.63rem;
  letter-spacing: 0.05em;
}

.frequentia-pos-options input:checked + span {
  border-color: rgba(114, 118, 77, 0.58);
  background: rgba(114, 118, 77, 0.13);
  color: #4f5733;
  box-shadow: inset 0 0 0 1px rgba(114, 118, 77, 0.12);
}

.frequentia-pos-options input:focus-visible + span {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.frequentia-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.frequentia-form-actions p {
  margin: 0;
  color: var(--gray);
  font-size: 0.8rem;
}

.frequentia-chips {
  margin: 0;
  border-radius: 10px;
}

.frequentia-results,
.frequentia-report {
  overflow: hidden;
  border-color: var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 8px 22px rgba(79, 56, 38, 0.07);
}

.frequentia-results-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.frequentia-meta {
  color: var(--gray);
  font-size: 0.9rem;
  margin: 4px 0 0;
}

.frequentia-active-pos {
  margin: 7px 0 0;
  color: var(--olive);
  font-size: 0.82rem;
}

.frequentia-unit-badge {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid rgba(182, 139, 60, 0.4);
  border-radius: 999px;
  background: rgba(239, 227, 200, 0.55);
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.frequentia-coverage {
  display: grid;
  grid-template-columns: minmax(170px, 0.85fr) minmax(280px, 1.5fr);
  gap: 12px 22px;
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid rgba(114, 118, 77, 0.27);
  border-radius: 9px;
  background: linear-gradient(110deg, rgba(114, 118, 77, 0.12), rgba(239, 227, 200, 0.3));
}

.frequentia-coverage-primary {
  display: grid;
  align-content: center;
  padding-right: 18px;
  border-right: 1px solid rgba(114, 118, 77, 0.25);
}

.frequentia-coverage-primary span {
  color: var(--olive);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.frequentia-coverage-primary strong {
  margin: 1px 0;
  color: #4f5733;
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
}

.frequentia-coverage-primary small {
  color: var(--gray);
  font-size: 0.72rem;
}

.frequentia-coverage-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(75px, 1fr));
  gap: 10px;
  align-items: center;
  margin: 0;
}

.frequentia-coverage-counts div {
  display: grid;
  gap: 2px;
}

.frequentia-coverage-counts dt {
  color: var(--gray);
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.frequentia-coverage-counts dd {
  margin: 0;
  color: var(--brown);
  font-size: 0.96rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.frequentia-methods {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(114, 118, 77, 0.2);
  color: var(--gray);
  font-size: 0.75rem;
}

.frequentia-methods strong {
  color: var(--brown-soft);
  font-variant-numeric: tabular-nums;
}

.frequentia-analysis-unavailable {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid rgba(182, 139, 60, 0.35);
  border-radius: 8px;
  background: rgba(239, 227, 200, 0.4);
  color: var(--brown-soft);
  font-size: 0.86rem;
}

.frequentia-empty {
  padding: 34px 18px 22px;
  text-align: center;
}

.frequentia-empty h3 {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 1.3rem;
}

.frequentia-empty p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--gray);
  line-height: 1.5;
}

.frequentia-table-wrap {
  overflow-x: auto;
  margin-top: 4px;
  border: 1px solid rgba(220, 204, 174, 0.72);
  border-radius: 8px;
}

.frequentia-table {
  width: 100%;
  margin: 0;
}

.frequentia-table thead th {
  border-bottom: 1px solid var(--line);
  background: rgba(239, 227, 200, 0.55);
  color: var(--brown-soft);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.frequentia-table tbody tr:nth-child(even) {
  background: rgba(239, 227, 200, 0.16);
}

.frequentia-table tbody tr:hover {
  background: rgba(182, 139, 60, 0.08);
}

.frequentia-table .frequentia-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.frequentia-result-no {
  color: var(--gray);
}

.frequentia-lemma-cell {
  min-width: 150px;
}

.frequentia-lemma {
  color: var(--brown);
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 600;
  text-decoration-color: rgba(182, 139, 60, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a.frequentia-lemma:hover,
a.frequentia-lemma:focus-visible {
  color: var(--gold);
}

.frequentia-disambiguator {
  display: block;
  margin-top: 1px;
  color: var(--gray);
  font-size: 0.72rem;
}

.frequentia-pos-badge {
  display: inline-block;
  color: var(--olive);
  font-size: 0.84rem;
}

.frequentia-pos-code {
  display: block;
  margin-top: 1px;
  color: var(--gray);
  font-family: var(--font-ui);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

.frequentia-form-link {
  color: var(--brown);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.frequentia-form-link:hover,
.frequentia-form-link:focus {
  color: var(--gold);
}

.frequentia-report-form {
  margin: 4px 0 2px;
  font-size: 1.55rem;
}

.frequentia-summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  margin: 16px 0;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(239, 227, 200, 0.24);
}

.frequentia-summary dt {
  color: var(--brown-soft);
  font-weight: 600;
}

.frequentia-summary dd {
  margin: 0;
}

.frequentia-subheading {
  margin: 16px 0 0;
}

.frequentia-crosslink {
  margin-top: 14px;
}

.frequentia-crosslink a {
  color: var(--brown-soft);
  text-underline-offset: 3px;
}

.frequentia-lemma-report {
  padding: 0;
}

.frequentia-lookup-state,
.frequentia-chooser {
  padding: 24px;
}

.frequentia-lookup-state > h3 {
  margin-bottom: 5px;
}

.frequentia-lookup-state > p:not(.card-kicker, .frequentia-canonical-note) {
  max-width: 720px;
  color: var(--gray);
  line-height: 1.55;
}

.frequentia-canonical-note {
  margin: 0 0 14px;
  color: var(--olive);
  font-size: 0.78rem;
}

.frequentia-canonical-note code {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(114, 118, 77, 0.1);
  color: inherit;
}

.frequentia-outside-hints {
  margin-top: 22px;
  padding: 17px;
  border: 1px solid rgba(182, 139, 60, 0.3);
  border-radius: 10px;
  background: rgba(239, 227, 200, 0.28);
}

.frequentia-outside-hints h4 {
  margin: 2px 0 12px;
  color: var(--brown);
  font-family: var(--font-serif);
  font-size: 1.08rem;
}

.frequentia-outside-hints ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.frequentia-outside-hints li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 10px 12px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.48);
}

.frequentia-outside-hints li > div {
  display: grid;
  gap: 2px;
}

.frequentia-outside-hints li > div:last-child {
  justify-items: end;
}

.frequentia-outside-hints span,
.frequentia-outside-hints small {
  color: var(--gray);
  font-size: 0.74rem;
}

.frequentia-outside-hints a {
  color: var(--brown-soft);
  font-size: 0.8rem;
  font-weight: 600;
  text-underline-offset: 3px;
}

.frequentia-report-intro,
.frequentia-report-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
}

.frequentia-report-intro h3,
.frequentia-report-hero h3 {
  margin: 2px 0 5px;
  color: var(--brown);
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  font-weight: 600;
}

.frequentia-report-intro p:last-child {
  max-width: 690px;
  margin: 0;
  color: var(--gray);
  line-height: 1.5;
}

.frequentia-candidate-grid {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}

.frequentia-candidate-card {
  display: grid;
  grid-template-columns: 30px minmax(130px, 1fr) minmax(150px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.48);
  color: inherit;
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.frequentia-candidate-card:hover,
.frequentia-candidate-card:focus-visible {
  border-color: rgba(182, 139, 60, 0.65);
  background: rgba(239, 227, 200, 0.35);
  transform: translateY(-1px);
}

.frequentia-candidate-mark {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(182, 139, 60, 0.42);
  border-radius: 50%;
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
}

.frequentia-candidate-name,
.frequentia-candidate-pos,
.frequentia-candidate-count {
  display: grid;
  gap: 1px;
}

.frequentia-candidate-name strong {
  color: var(--brown);
  font-family: var(--font-serif);
  font-size: 1.12rem;
}

.frequentia-candidate-name small,
.frequentia-candidate-pos small,
.frequentia-candidate-count small {
  color: var(--gray);
  font-family: var(--font-ui);
  font-size: 0.67rem;
}

.frequentia-candidate-pos {
  color: var(--olive);
  font-size: 0.86rem;
}

.frequentia-candidate-count {
  justify-items: end;
  font-variant-numeric: tabular-nums;
}

.frequentia-combined-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 13px;
  padding: 14px 16px;
  border: 1px solid rgba(114, 118, 77, 0.38);
  border-radius: 9px;
  background: linear-gradient(105deg, rgba(114, 118, 77, 0.1), rgba(239, 227, 200, 0.4));
  color: inherit;
  text-decoration: none;
}

.frequentia-combined-option:hover,
.frequentia-combined-option:focus-visible {
  border-color: var(--olive);
}

.frequentia-combined-option > span {
  display: grid;
  gap: 2px;
}

.frequentia-combined-option > span:last-child {
  justify-items: end;
  font-variant-numeric: tabular-nums;
}

.frequentia-combined-option strong {
  color: #4f5733;
}

.frequentia-combined-option small {
  color: var(--gray);
  font-size: 0.72rem;
}

.frequentia-report-hero {
  padding: 24px 24px 19px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 90% 20%, rgba(182, 139, 60, 0.11), transparent 31%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.52), transparent 58%);
}

.frequentia-grammar-line,
.frequentia-combination-label {
  margin: 0;
  color: var(--olive);
  font-size: 0.84rem;
}

.frequentia-grammar-line span {
  margin-left: 4px;
  color: var(--gray);
  font-family: var(--font-ui);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}

.frequentia-combination-label {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 680px;
}

.frequentia-combination-label > span {
  padding: 3px 7px;
  border: 1px solid rgba(114, 118, 77, 0.25);
  border-radius: 999px;
  background: rgba(114, 118, 77, 0.07);
  font-size: 0.73rem;
}

.frequentia-list-action {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(182, 139, 60, 0.45);
  border-radius: 7px;
  background: rgba(239, 227, 200, 0.42);
  color: var(--brown-soft);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}

.frequentia-list-action:hover,
.frequentia-list-action:focus-visible {
  border-color: var(--gold);
  background: var(--parchment);
}

.frequentia-report-summary {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(0, 2.3fr);
  gap: 18px;
  margin: 18px 24px 0;
}

.frequentia-primary-metric {
  display: grid;
  align-content: center;
  min-height: 112px;
  padding: 15px 18px;
  border-radius: 10px;
  background: var(--brown);
  color: var(--paper);
}

.frequentia-primary-metric span,
.frequentia-primary-metric small {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  opacity: 0.76;
  text-transform: uppercase;
}

.frequentia-primary-metric strong {
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
}

.frequentia-report-summary > dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 9px;
  margin: 0;
}

.frequentia-report-summary > dl > div {
  display: grid;
  align-content: center;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(239, 227, 200, 0.2);
}

.frequentia-report-summary dt {
  color: var(--gray);
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.frequentia-report-summary dd {
  margin: 1px 0;
  color: var(--brown);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.frequentia-report-summary dl small {
  overflow: hidden;
  color: var(--gray);
  font-size: 0.67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frequentia-report-provenance {
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(260px, 1.2fr);
  gap: 20px;
  margin: 16px 24px 0;
  padding: 14px 16px;
  border-left: 3px solid var(--olive);
  background: rgba(114, 118, 77, 0.07);
}

.frequentia-report-provenance ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  margin: 5px 0 0;
  padding: 0;
  color: var(--gray);
  font-size: 0.76rem;
  list-style: none;
}

.frequentia-report-provenance li strong {
  color: var(--brown-soft);
  font-variant-numeric: tabular-nums;
}

.frequentia-report-provenance .frequentia-methodology {
  align-self: center;
  margin: 0;
  padding: 0 0 0 18px;
  border-top: 0;
  border-left: 1px solid rgba(114, 118, 77, 0.23);
}

.frequentia-breakdowns {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding: 20px 24px 24px;
  border-top: 1px solid var(--line);
}

.frequentia-breakdowns > header h4 {
  margin: 2px 0 3px;
  color: var(--brown);
  font-family: var(--font-serif);
  font-size: 1.25rem;
}

.frequentia-breakdowns > header > p:last-child {
  margin: 0 0 7px;
  color: var(--gray);
  font-size: 0.82rem;
}

.frequentia-breakdown {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.28);
}

.frequentia-breakdown > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}

.frequentia-breakdown > summary::-webkit-details-marker {
  display: none;
}

.frequentia-breakdown > summary::before {
  flex: 0 0 auto;
  width: 1rem;
  color: var(--gold);
  content: "›";
  font-size: 1.2rem;
  transform-origin: center;
  transition: transform 140ms ease;
}

.frequentia-breakdown[open] > summary::before {
  transform: rotate(90deg);
}

.frequentia-breakdown > summary > span:first-child {
  display: grid;
  flex: 1;
  gap: 2px;
}

.frequentia-breakdown > summary strong {
  color: var(--brown-soft);
}

.frequentia-breakdown > summary small {
  color: var(--gray);
  font-size: 0.72rem;
}

.frequentia-breakdown-count {
  color: var(--olive);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  white-space: nowrap;
}

.frequentia-breakdown-body {
  padding: 0 14px 14px;
  border-top: 1px solid var(--line);
}

.frequentia-breakdown-body h5 {
  margin: 15px 2px 6px;
  color: var(--olive);
  font-family: var(--font-serif);
  font-size: 0.94rem;
}

.frequentia-breakdown-table td:first-child {
  min-width: 180px;
}

.frequentia-breakdown-table td:first-child small {
  display: block;
  margin-top: 2px;
  color: var(--gray);
  font-size: 0.67rem;
}

.frequentia-scope-link {
  color: var(--brown);
  font-family: var(--font-serif);
  font-weight: 600;
  text-decoration-color: rgba(182, 139, 60, 0.45);
  text-underline-offset: 3px;
}

.frequentia-scope-link:hover,
.frequentia-scope-link:focus-visible {
  color: var(--gold);
}

.frequentia-rank-note {
  margin: 12px 0 0;
  color: var(--gray);
  font-size: 0.75rem;
}

.frequentia-lemma-report > .frequentia-crosslink {
  margin: 0 24px 22px;
}

.frequentia-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  align-items: baseline;
}

.frequentia-pagination a,
.frequentia-page-current {
  min-width: 32px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.4);
  font-size: 0.82rem;
  text-align: center;
  text-decoration: none;
}

.frequentia-pagination a:hover,
.frequentia-pagination a:focus {
  border-color: var(--gold);
  background: rgba(239, 227, 200, 0.4);
}

.frequentia-page-current {
  border-color: rgba(182, 139, 60, 0.45);
  background: var(--parchment);
  font-weight: 600;
}

.frequentia-page-gap {
  color: var(--gray);
}

.frequentia-panel-scope {
  font-weight: 600;
  margin: 2px 0 10px;
}

.frequentia-panel-lemma {
  margin: 2px 0 10px;
  color: var(--brown);
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 600;
}

.frequentia-detail-panel .corpus-detail-panel-body {
  display: grid;
  gap: 20px;
}

.frequentia-panel-section {
  padding-top: 17px;
  border-top: 1px solid var(--line);
}

.frequentia-panel-coverage {
  display: grid;
  gap: 1px;
  margin: 7px 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--olive);
  background: rgba(114, 118, 77, 0.09);
}

.frequentia-panel-coverage strong {
  color: var(--olive);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.frequentia-panel-coverage span,
.frequentia-panel-note,
.frequentia-methodology {
  color: var(--gray);
  font-size: 0.78rem;
  line-height: 1.45;
}

.frequentia-panel-note {
  margin: 10px 0 0;
}

.frequentia-methodology {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dotted var(--line);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .frequentia-heading,
  .frequentia-form-actions,
  .frequentia-results-header,
  .frequentia-report-intro,
  .frequentia-report-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .frequentia-scope-summary {
    min-width: 0;
    text-align: left;
  }

  .frequentia-unit-toggle,
  .frequentia-options-row {
    grid-template-columns: 1fr;
  }

  .frequentia-form-actions .frequentia-submit {
    width: 100%;
  }

  .frequentia-search-submit,
  .frequentia-list-action {
    width: 100%;
    text-align: center;
  }

  .frequentia-coverage {
    grid-template-columns: 1fr;
  }

  .frequentia-coverage-primary {
    padding: 0 0 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(114, 118, 77, 0.25);
  }

  .frequentia-coverage-counts {
    grid-template-columns: repeat(2, minmax(90px, 1fr));
  }

  .frequentia-unit-badge {
    align-self: flex-start;
  }

  .frequentia-candidate-card {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }

  .frequentia-candidate-pos {
    grid-column: 2;
  }

  .frequentia-candidate-count {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .frequentia-report-summary {
    grid-template-columns: 1fr;
  }

  .frequentia-report-provenance {
    grid-template-columns: 1fr;
  }

  .frequentia-report-provenance .frequentia-methodology {
    padding: 12px 0 0;
    border-top: 1px solid rgba(114, 118, 77, 0.23);
    border-left: 0;
  }
}

@media (max-width: 480px) {
  .frequentia-lookup-state,
  .frequentia-chooser,
  .frequentia-report-hero,
  .frequentia-breakdowns {
    padding-right: 16px;
    padding-left: 16px;
  }

  .frequentia-report-summary,
  .frequentia-report-provenance {
    margin-right: 16px;
    margin-left: 16px;
  }

  .frequentia-report-summary > dl {
    grid-template-columns: 1fr;
  }

  .frequentia-candidate-card {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .frequentia-candidate-count {
    grid-column: 2;
    grid-row: auto;
    justify-items: start;
  }

  .frequentia-combined-option,
  .frequentia-outside-hints li {
    align-items: flex-start;
    flex-direction: column;
  }

  .frequentia-combined-option > span:last-child,
  .frequentia-outside-hints li > div:last-child {
    justify-items: start;
  }
}

/* --- Curatio (admin correction workspace) -------------------------------- */

.curatio {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.curatio-nav {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-size: 0.95rem;
}

.curatio-nav a {
  color: #6d5426;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.curatio-nav a.is-active {
  border-bottom-color: var(--scholarium-accent);
  font-weight: 600;
}

.curatio-drift {
  background: rgba(185, 130, 47, 0.12);
  border: 1px solid rgba(185, 130, 47, 0.45);
  border-radius: 10px;
  padding: 14px 18px;
}

.curatio-drift ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.curatio-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.curatio-card {
  background: var(--paper);
  border: 1px solid rgba(114, 118, 77, 0.25);
  border-radius: 12px;
  padding: 16px 18px;
}

.curatio-facts {
  margin: 8px 0 0;
  display: grid;
  gap: 6px;
}

.curatio-facts div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.curatio-facts dt {
  color: var(--gray);
}

.curatio-facts dd {
  margin: 0;
  text-align: right;
}

.curatio-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.curatio-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  border-bottom: 1px dotted rgba(114, 118, 77, 0.2);
  padding-bottom: 4px;
}

.curatio-sublist {
  list-style: none;
  flex-basis: 100%;
  margin: 2px 0 0;
  padding-left: 16px;
  display: grid;
  gap: 3px;
}

.curatio-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--gold-strong);
}

.curatio-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.78rem;
  border: 1px solid transparent;
}

.curatio-badge-accepted {
  background: rgba(114, 118, 77, 0.14);
  border-color: rgba(114, 118, 77, 0.4);
}

.curatio-badge-ambiguous {
  background: rgba(185, 130, 47, 0.14);
  border-color: rgba(185, 130, 47, 0.45);
}

.curatio-badge-unmatched {
  background: rgba(150, 82, 55, 0.12);
  border-color: rgba(150, 82, 55, 0.4);
}

.curatio-badge-excluded {
  background: rgba(120, 120, 120, 0.12);
  border-color: rgba(120, 120, 120, 0.35);
  color: var(--gray);
}

.curatio-rule-id {
  font-size: 0.82rem;
  word-break: break-all;
}

.curatio-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px 14px;
  background: var(--paper);
  border: 1px solid rgba(114, 118, 77, 0.25);
  border-radius: 12px;
  padding: 14px 18px;
}

.curatio-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.88rem;
  color: var(--gray);
}

.curatio-filters input,
.curatio-filters select {
  padding: 6px 8px;
  border: 1px solid rgba(114, 118, 77, 0.35);
  border-radius: 8px;
  background: var(--parchment);
  color: var(--ink);
  font: inherit;
}

.curatio-filter-actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.curatio-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(114, 118, 77, 0.25);
  border-radius: 12px;
  background: var(--paper);
}

.curatio-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.curatio-table th,
.curatio-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(114, 118, 77, 0.18);
  vertical-align: top;
}

.curatio-table thead th {
  background: var(--surface-soft);
  color: var(--gold-strong);
}

.curatio-pagination {
  display: flex;
  align-items: center;
  gap: 14px;
}

.curatio-empty {
  padding: 18px;
}

/* Curatio slice 5c: rule authoring, preview, lifecycle */

.curatio-rules-toolbar {
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

.curatio-status-filter {
  display: flex;
  gap: 12px;
  font-size: 0.92rem;
}

.curatio-status-filter a {
  color: var(--gold-strong);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.curatio-status-filter a.is-active {
  border-bottom-color: var(--scholarium-accent);
  font-weight: 600;
}

.curatio-type-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.curatio-type-picker a {
  color: var(--gold-strong);
  text-decoration: none;
  font-size: 0.88rem;
  border: 1px solid rgba(114, 118, 77, 0.35);
  border-radius: 999px;
  padding: 3px 12px;
  background: var(--paper);
}

.curatio-type-picker a.is-active {
  border-color: var(--scholarium-accent);
  background: rgba(185, 130, 47, 0.14);
  font-weight: 600;
}

.curatio-rule-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.curatio-fieldset {
  background: var(--paper);
  border: 1px solid rgba(114, 118, 77, 0.25);
  border-radius: 12px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 14px;
}

.curatio-fieldset legend {
  color: var(--gold-strong);
  font-weight: 600;
  padding: 0 6px;
}

.curatio-fieldset label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.88rem;
  color: var(--gray);
}

.curatio-fieldset input,
.curatio-fieldset select,
.curatio-fieldset textarea {
  padding: 6px 8px;
  border: 1px solid rgba(114, 118, 77, 0.35);
  border-radius: 8px;
  background: var(--parchment);
  color: var(--ink);
  font: inherit;
}

.curatio-fieldset label.curatio-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.curatio-branch-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 14px;
  border-bottom: 1px dotted rgba(114, 118, 77, 0.25);
  padding-bottom: 8px;
}

.curatio-payload,
.curatio-notes {
  background: rgba(114, 118, 77, 0.06);
  border: 1px solid rgba(114, 118, 77, 0.2);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.82rem;
  overflow-x: auto;
  white-space: pre-wrap;
  margin: 4px 0 10px;
}

.curatio-rule-actions {
  flex-wrap: wrap;
  align-items: center;
}

.curatio-rule-actions form {
  display: inline-flex;
}

.curatio-badge-rule-draft {
  background: rgba(185, 130, 47, 0.14);
  border-color: rgba(185, 130, 47, 0.45);
}

.curatio-badge-rule-active {
  background: rgba(114, 118, 77, 0.14);
  border-color: rgba(114, 118, 77, 0.4);
}

.curatio-badge-rule-deprecated,
.curatio-badge-rule-superseded {
  background: rgba(120, 120, 120, 0.12);
  border-color: rgba(120, 120, 120, 0.35);
  color: #6b6b6b;
}

.curatio-reason-cell {
  max-width: 360px;
}

.curatio-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.curatio-legacy-form {
  flex-basis: 100%;
  margin-top: 4px;
}

.curatio-legacy-form input[type="text"] {
  flex: 1 1 180px;
  padding: 4px 8px;
  border: 1px solid rgba(114, 118, 77, 0.35);
  border-radius: 8px;
  background: var(--parchment);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
}

/* --- KWIC concordance (slice 1) ------------------------------------------ */

.kwic-landing h3 {
  margin: 6px 0 10px;
}

.kwic-landing p {
  max-width: 62ch;
}

.frequentia-report-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
}

.kwic-results {
  padding-bottom: 14px;
}

.kwic-target-panels {
  margin-top: 8px;
}

.kwic-target-panel[hidden] {
  display: none;
}

.kwic-target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.kwic-inline-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  font-size: 0.8rem;
  color: var(--gray);
}

.kwic-inline-options legend {
  font-weight: 700;
  color: var(--brown-soft);
}

.kwic-inline-options label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.kwic-status-target {
  min-width: 10rem;
}

.kwic-results-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 24px 0;
}

.kwic-results-header h3 {
  margin: 4px 0 6px;
  font-size: 1.25rem;
}

.kwic-target-pos {
  margin-left: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gray);
}

.kwic-header-side {
  display: flex;
  align-items: flex-start;
}

.kwic-parity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 13px;
  border-radius: 8px;
  border: 1px solid rgba(114, 118, 77, 0.4);
  background: rgba(114, 118, 77, 0.09);
  font-size: 0.82rem;
}

.kwic-parity small {
  color: var(--gray);
  font-size: 0.74rem;
}

.kwic-parity-mismatch {
  border-color: rgba(158, 74, 58, 0.5);
  background: rgba(158, 74, 58, 0.08);
}

.kwic-parity-mismatch strong {
  color: #9e4a3a;
}

.kwic-provenance {
  margin: 10px 24px 0;
  color: var(--gray);
  font-size: 0.74rem;
}

.kwic-drift-warning,
.kwic-threshold-note,
.kwic-candidate-note {
  margin: 10px 24px 0;
  padding: 8px 12px;
  border: 1px solid rgba(182, 139, 60, 0.45);
  border-radius: 7px;
  background: rgba(239, 227, 200, 0.4);
  font-size: 0.8rem;
}

.kwic-table-wrap {
  margin-top: 14px;
}

/* One result = one line: fixed layout, nowrap cells, clipped contexts.
   The two unsized context columns share all remaining width; the
   min-width guarantees them a readable share (the wrap scrolls when
   the viewport cannot afford it). */
.kwic-table {
  table-layout: fixed;
  min-width: 1080px;
}

.kwic-col-no {
  width: 3.4rem;
}

.kwic-col-node {
  width: 10rem;
}

.kwic-col-author {
  width: 8rem;
}

.kwic-col-work {
  width: 10rem;
}

.kwic-col-epoch {
  width: 6rem;
}

.kwic-col-type {
  width: 8rem;
}

.kwic-table th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kwic-th-left,
.kwic-left {
  text-align: right;
}

.kwic-th-node {
  text-align: center;
}

.kwic-left,
.kwic-right {
  font-size: 0.86rem;
  line-height: 1.45;
}

/* Compact contexts clip rather than wrap; the left context clips from
   its far (left) edge via the rtl trick — the inner span isolates the
   Latin text back to ltr so word order is untouched. Clicking a side
   swaps in the server-rendered ~40-word expanded context. */
.kwic-context {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.kwic-left.kwic-context {
  direction: rtl;
}

.kwic-context-inner {
  direction: ltr;
  unicode-bidi: isolate;
}

.kwic-context-wide {
  display: none;
}

.kwic-context.kwic-context-expanded {
  white-space: normal;
  overflow: visible;
  direction: ltr;
}

.kwic-context-expanded .kwic-context-compact {
  display: none;
}

.kwic-context-expanded .kwic-context-wide {
  display: inline;
}

.kwic-node {
  text-align: center;
}

.kwic-node-btn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: inherit;
}

.kwic-node-btn:hover .kwic-node-form,
.kwic-node-btn:focus-visible .kwic-node-form {
  color: #7d571c;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

.kwic-node-form {
  font-weight: 700;
  color: var(--brown-soft);
}

.kwic-node-form em {
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kwic-meta-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.82rem;
}

.kwic-row-selected > td {
  background: rgba(185, 130, 47, 0.1);
}

.kwic-sort {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(114, 118, 77, 0.6);
}

.kwic-sort:hover,
.kwic-sort:focus-visible {
  color: var(--brown-soft);
  border-bottom-color: var(--gold);
}

.kwic-sort-active {
  color: var(--brown-soft);
  border-bottom: 2px solid var(--gold);
}

.kwic-sort-disabled {
  color: var(--gray);
  cursor: not-allowed;
  border-bottom: 1px dotted rgba(120, 120, 120, 0.4);
}

.kwic-th-label {
  font-weight: 500;
  color: var(--gray);
  font-size: 0.72rem;
}

.kwic-row-no a {
  color: var(--gray);
  text-decoration: none;
  border-bottom: 1px dotted rgba(114, 118, 77, 0.6);
}

.kwic-row-no a:hover,
.kwic-row-no a:focus-visible {
  color: var(--brown-soft);
  border-bottom-color: var(--gold);
}

.kwic-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(185, 130, 47, 0.45);
  background: rgba(185, 130, 47, 0.12);
  font-size: 0.68rem;
  font-weight: 600;
  vertical-align: middle;
}

.kwic-badge-status {
  border-color: rgba(114, 118, 77, 0.42);
  background: rgba(114, 118, 77, 0.1);
  color: var(--brown-soft);
}

.kwic-badge-excluded {
  border-color: rgba(120, 120, 120, 0.42);
  background: rgba(120, 120, 120, 0.1);
  color: var(--gray);
}

.kwic-expansion-row > td {
  padding: 0 10px 6px;
  border-top: none;
}

.kwic-expansion summary {
  cursor: pointer;
  color: var(--gray);
  font-size: 0.74rem;
  list-style-position: inside;
}

.kwic-expansion summary:hover {
  color: var(--brown-soft);
}

.kwic-expansion-body {
  margin: 8px 0 10px;
  padding: 10px 14px;
  border: 1px solid rgba(114, 118, 77, 0.25);
  border-radius: 8px;
  background: rgba(239, 227, 200, 0.28);
}

.kwic-passage {
  margin: 0 0 8px;
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-line;
}

.kwic-passage mark,
.kwic-sentence mark {
  background: rgba(185, 130, 47, 0.25);
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 700;
}

/* Slice 6: the sentence rung of the expansion ladder (compact → sentence →
   full passage → reader). Sentence shows first; the full passage nests under
   a native <details> so the ladder stays no-JS. */
.kwic-expansion-label {
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
}

.kwic-sentence {
  margin: 0 0 8px;
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-line;
}

.kwic-passage-full {
  margin: 0 0 8px;
}

.kwic-passage-full > summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--brown, #5b3a1e);
}

.kwic-passage-full[open] > summary {
  margin-bottom: 6px;
}

.kwic-segment-note {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: var(--gray);
}

.kwic-expansion-actions {
  margin: 0;
  font-size: 0.78rem;
  color: var(--gray);
}

.kwic-order-note {
  margin: 12px 24px 0;
  font-size: 0.8rem;
}

.kwic-expansion-analysis {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: var(--gray);
}

.kwic-expansion-analysis strong {
  color: var(--brown-soft);
}

.kwic-candidate-list {
  margin: 0 0 8px;
  padding-left: 18px;
  font-size: 0.82rem;
  color: var(--gray);
}

/* --- KWIC sort bar (slice 2 multi-level sorting) --------------------------- */

.kwic-sort-level {
  font-size: 0.62rem;
  margin-left: 1px;
}

.kwic-sortbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 12px 24px 0;
  font-size: 0.8rem;
}

.kwic-sortbar-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
}

.kwic-sortbar-corpus {
  color: var(--gray);
  font-style: italic;
}

.kwic-sortbar-levels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: kwic-sort-level;
}

.kwic-sortbar-level {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid rgba(114, 118, 77, 0.35);
  border-radius: 999px;
  background: rgba(239, 227, 200, 0.4);
}

.kwic-sortbar-level::before {
  counter-increment: kwic-sort-level;
  content: counter(kwic-sort-level);
  font-size: 0.68rem;
  color: var(--gray);
}

.kwic-sortbar-dir {
  color: var(--brown-soft);
  text-decoration: none;
  font-weight: 600;
}

.kwic-sortbar-dir:hover,
.kwic-sortbar-dir:focus-visible {
  color: var(--gold);
}

.kwic-sortbar-remove {
  color: var(--gray);
  text-decoration: none;
  padding: 0 2px;
}

.kwic-sortbar-remove:hover,
.kwic-sortbar-remove:focus-visible {
  color: var(--brown-soft);
}

.kwic-sortbar-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.kwic-sortbar-add select {
  font: inherit;
  font-size: 0.78rem;
  padding: 2px 6px;
  border: 1px solid rgba(114, 118, 77, 0.35);
  border-radius: 6px;
  background: var(--cream, #fdf8ee);
  color: inherit;
  max-width: 170px;
}

.kwic-sortbar-add button {
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 2px 10px;
  border: 1px solid rgba(114, 118, 77, 0.45);
  border-radius: 999px;
  background: rgba(239, 227, 200, 0.4);
  color: var(--brown-soft);
  cursor: pointer;
}

.kwic-sortbar-add button:hover,
.kwic-sortbar-add button:focus-visible {
  border-color: var(--gold);
}

/* --- KWIC filters (slice 3 result narrowing) ------------------------------ */

.kwic-filter-chips {
  margin-top: 12px;
}

.kwic-filter-chip {
  background: rgba(114, 118, 77, 0.09);
  border-color: rgba(114, 118, 77, 0.38);
}

.kwic-filter-notes {
  margin: 10px 24px 0;
  padding: 8px 12px 8px 28px;
  border: 1px solid rgba(182, 139, 60, 0.45);
  border-radius: 7px;
  background: rgba(239, 227, 200, 0.4);
  color: var(--gray);
  font-size: 0.8rem;
}

.kwic-filters {
  margin: 12px 24px 0;
  border: 1px solid rgba(114, 118, 77, 0.26);
  border-radius: 8px;
  background: rgba(253, 248, 238, 0.72);
}

.kwic-filters > summary {
  cursor: pointer;
  padding: 9px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brown-soft);
}

.kwic-filter-form {
  padding: 0 12px 12px;
}

.kwic-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.kwic-filter-group {
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(114, 118, 77, 0.22);
  border-radius: 8px;
}

.kwic-filter-group-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.kwic-filter-group legend {
  padding: 0 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gray);
}

.kwic-filter-group label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-size: 0.74rem;
  color: var(--gray);
}

.kwic-filter-group select,
.kwic-filter-group input {
  width: 100%;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid rgba(114, 118, 77, 0.32);
  border-radius: 6px;
  background: #fffdf8;
  color: var(--brown);
  font: inherit;
  font-size: 0.8rem;
}

.kwic-filter-group input:disabled {
  background: rgba(239, 227, 200, 0.35);
  color: var(--gray);
}

.kwic-filter-hint {
  align-self: end;
  margin: 0;
  font-size: 0.72rem;
  color: var(--gray);
}

.kwic-filter-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 0.8rem;
}

.kwic-filter-actions button {
  padding: 5px 13px;
  border: 1px solid rgba(114, 118, 77, 0.45);
  border-radius: 999px;
  background: rgba(239, 227, 200, 0.55);
  color: var(--brown-soft);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.kwic-filter-actions button:hover,
.kwic-filter-actions button:focus-visible {
  border-color: var(--gold);
}

.kwic-filter-empty {
  margin: 14px 24px 0;
  padding: 16px;
  border: 1px solid rgba(114, 118, 77, 0.26);
  border-radius: 8px;
  background: rgba(239, 227, 200, 0.28);
}

.kwic-filter-empty h4 {
  margin: 4px 0 8px;
}

.kwic-filter-empty p {
  max-width: 58ch;
}

/* --- KWIC collapsible right panel ----------------------------------------- */

/* The concordance is the main event: the panel column shrinks to its
   summary tab while collapsed and the results take the freed width.
   Below 900px .corpus-shell already stacks into one column. */
@media (min-width: 901px) {
  .kwic-shell {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.kwic-panel > .kwic-panel-summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  padding: 12px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--brown);
}

.kwic-panel > .kwic-panel-summary::-webkit-details-marker {
  display: none;
}

.kwic-panel > .kwic-panel-summary::before {
  content: "◂";
  color: var(--gold);
}

@media (min-width: 901px) {
  .kwic-panel:not([open]) > .kwic-panel-summary {
    flex-direction: column;
    gap: 6px;
  }

  .kwic-panel:not([open]) > .kwic-panel-summary .kwic-panel-summary-label {
    writing-mode: vertical-rl;
  }
}

.kwic-panel[open] > .kwic-panel-summary {
  padding: 8px 14px;
  margin-bottom: 10px;
  gap: 8px;
}

.kwic-panel[open] > .kwic-panel-summary::before {
  content: "▸";
}

.kwic-panel[open] > .corpus-detail-panel-body {
  width: min(330px, 88vw);
}

.kwic-panel-summary:hover,
.kwic-panel-summary:focus-visible {
  color: #7d571c;
  border-color: var(--gold);
}

.kwic-occurrence-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.kwic-occ-line {
  margin: 4px 0 0;
  font-weight: 600;
  color: var(--brown-soft);
}

.kwic-occ-meta,
.kwic-occ-note,
.kwic-occ-actions {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--gray);
}

/* Phones: give up the one-line clip and let everything word-wrap. */
@media (max-width: 760px) {
  .kwic-table {
    table-layout: auto;
    min-width: 0;
  }

  .kwic-context,
  .kwic-meta-cell,
  .kwic-table th {
    white-space: normal;
    overflow: visible;
  }

  .kwic-left.kwic-context {
    direction: ltr;
  }

  .kwic-panel[open] > .corpus-detail-panel-body {
    width: auto;
  }

  .kwic-filter-grid,
  .kwic-filter-group-wide,
  .kwic-target-grid {
    grid-template-columns: 1fr;
  }
}

/* Slice 5 — admin parity diagnostics + per-row Curatio detail. */
.kwic-drift-warning p {
  margin: 0;
}

.kwic-drift-commands-label {
  margin-top: 6px !important;
  font-weight: 700;
}

.kwic-drift-commands {
  margin: 4px 0 0;
  padding-left: 18px;
  list-style: disc;
}

.kwic-drift-commands code,
.kwic-admin-detail code {
  font-size: 0.78rem;
  background: rgba(114, 118, 77, 0.12);
  padding: 1px 4px;
  border-radius: 4px;
}

.kwic-parity-debug {
  margin: 10px 24px 0;
  border: 1px solid rgba(168, 88, 72, 0.45);
  border-radius: 8px;
  background: rgba(244, 227, 220, 0.5);
}

.kwic-parity-debug > summary {
  cursor: pointer;
  padding: 9px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brown-soft);
}

.kwic-parity-debug-body {
  padding: 0 12px 12px;
}

.kwic-parity-debug-note {
  margin: 6px 0 0;
  color: var(--gray);
  font-size: 0.78rem;
}

.kwic-parity-debug-work {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(114, 118, 77, 0.22);
}

.kwic-parity-debug-work-head {
  margin: 0 0 6px;
  font-size: 0.82rem;
}

.kwic-parity-debug-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
}

.kwic-parity-debug-table th,
.kwic-parity-debug-table td {
  padding: 3px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(114, 118, 77, 0.16);
}

.kwic-admin-detail {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(168, 88, 72, 0.4);
}

.kwic-admin-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 12px;
  margin: 4px 0 0;
  font-size: 0.8rem;
}

.kwic-admin-grid dt {
  font-weight: 700;
  color: var(--brown-soft);
}

.kwic-admin-grid dd {
  margin: 0;
}

.kwic-admin-preview {
  margin: 8px 0 0;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(239, 227, 200, 0.4);
  font-size: 0.8rem;
}

.kwic-admin-preview-differs {
  background: rgba(244, 227, 220, 0.7);
  border: 1px solid rgba(168, 88, 72, 0.4);
}

.kwic-admin-actions {
  margin: 8px 0 0;
  font-size: 0.8rem;
}

/* Distributio (KWIC slice 7) — shared by the Frequentia lemma report
   section and the KWIC result-set panel. */

.frequentia-distribution {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.frequentia-distribution > header h4 {
  margin: 2px 0 4px;
}

.frequentia-distribution > header p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gray);
}

.kwic-distribution {
  margin: 14px 0 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(239, 227, 200, 0.28);
}

.kwic-distribution-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.kwic-distribution-header h4 {
  margin: 2px 0 4px;
}

.kwic-distribution-header p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gray);
}

.kwic-distribution-dismiss {
  flex: 0 0 auto;
  font-size: 0.8rem;
}

.kwic-distribution-link {
  margin: 10px 0 4px;
  font-size: 0.85rem;
}

.corpus-dist {
  margin-top: 12px;
  display: grid;
  gap: 18px;
}

.corpus-dist-stats {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.corpus-dist-headline {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.corpus-dist-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brown);
}

.corpus-dist-metric {
  font-weight: 700;
  color: var(--brown-soft);
}

.corpus-dist-band {
  font-style: italic;
  color: var(--olive);
}

.corpus-dist-parts {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--gray);
}

.corpus-dist-diagnostics {
  margin-top: 8px;
  font-size: 0.82rem;
}

.corpus-dist-diagnostics summary {
  cursor: pointer;
  color: var(--brown-soft);
}

.corpus-dist-diagnostics dl {
  display: grid;
  gap: 8px;
  margin: 10px 0 6px;
}

.corpus-dist-diagnostics dl > div {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  gap: 2px 10px;
  align-items: baseline;
}

.corpus-dist-diagnostics dt {
  font-weight: 700;
  color: var(--brown-soft);
}

.corpus-dist-diagnostics dd {
  margin: 0;
  font-weight: 700;
}

.corpus-dist-diagnostics small {
  color: var(--gray);
}

.corpus-dist-diagnostics > p {
  margin: 4px 0 0;
  color: var(--gray);
}

.corpus-dist-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gray);
}

.corpus-dist-section > header,
.corpus-dist-within > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.corpus-dist-section h5,
.corpus-dist-within h5 {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

.corpus-dist-section > header small,
.corpus-dist-within > header small {
  color: var(--gray);
}

.corpus-dist-rows {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.corpus-dist-rows li {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr minmax(120px, max-content);
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
}

.corpus-dist-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.corpus-dist-bar-track {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: rgba(216, 197, 159, 0.35);
  overflow: hidden;
}

.corpus-dist-bar {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--gold), #cba45e);
}

.corpus-dist-figures {
  display: flex;
  align-items: baseline;
  gap: 6px;
  justify-content: flex-end;
  white-space: nowrap;
}

.corpus-dist-figures small {
  color: var(--gray);
}

.corpus-dist-deciles {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 84px;
  margin-top: 8px;
  padding: 0 2px;
}

.corpus-dist-decile {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: 3px;
}

.corpus-dist-decile-bar {
  display: block;
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #cba45e, var(--gold));
  min-height: 0;
  max-height: calc(100% - 18px);
}

.corpus-dist-decile small {
  font-size: 0.68rem;
  color: var(--gray);
}

.corpus-dist-passages {
  margin-top: 10px;
}

.corpus-dist-note {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--gray);
}

@media (max-width: 760px) {
  .corpus-dist-rows li {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .corpus-dist-figures {
    justify-content: flex-start;
  }
}

/* Collocatio panel (KWIC slice 8) */
.kwic-collocation {
  margin: 14px 0 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(239, 227, 200, 0.28);
}

.kwic-collocation-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.kwic-collocation-header h4 {
  margin: 2px 0 4px;
}

.kwic-collocation-header p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gray);
}

.kwic-collocation-dismiss {
  flex: 0 0 auto;
  font-size: 0.8rem;
}

.kwic-collocation-link {
  margin: 10px 0 4px;
  font-size: 0.85rem;
}

.kwic-coll {
  margin-top: 12px;
  display: grid;
  gap: 16px;
}

.kwic-coll-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.kwic-coll-controls label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.75rem;
  color: var(--brown-soft);
}

.kwic-coll-controls select,
.kwic-coll-controls input[type="number"] {
  font-size: 0.85rem;
  padding: 3px 6px;
}

.kwic-coll-controls input[type="number"] {
  width: 5em;
}

.kwic-coll-basis {
  margin: 0;
  font-size: 0.8rem;
  color: var(--gray);
}

.kwic-coll-empty,
.kwic-coll-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--gray);
}

.kwic-coll-aid {
  margin: 0 0 4px;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--gray);
}

.kwic-coll-section > header {
  margin-bottom: 6px;
}

.kwic-coll-section h5 {
  margin: 0;
}

.kwic-coll-section > header small {
  display: block;
  font-size: 0.75rem;
  color: var(--gray);
}

.kwic-coll-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.kwic-coll-table th[scope="col"] {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brown-soft);
  border-bottom: 1px solid var(--line);
  padding: 4px 8px;
}

.kwic-coll-table th[scope="row"] {
  text-align: left;
  font-weight: 500;
  padding: 4px 8px;
}

.kwic-coll-table td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(216, 197, 159, 0.35);
}

.kwic-coll-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.kwic-coll-table th[scope="col"].kwic-coll-num {
  text-align: right;
}

.kwic-coll-pos {
  margin-left: 6px;
  font-size: 0.7rem;
  color: var(--gray);
}

@media (max-width: 760px) {
  .kwic-coll-controls {
    gap: 8px 10px;
  }

  .kwic-coll-table {
    font-size: 0.8rem;
  }
}

/* ------------------------------------------------------------------ */
/* KWIC Slice 9 — selection, exports, saved result sets.              */
/* ------------------------------------------------------------------ */
.kwic-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 12px 0 6px;
  padding: 8px 12px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.kwic-toolbar-selection {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--brown-soft);
}
.kwic-toolbar-count {
  font-weight: 600;
  color: var(--brown);
}
.kwic-toolbar-hint {
  color: var(--gray);
}
.kwic-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.85rem;
}
.kwic-toolbar-clear,
.kwic-toolbar-save,
.kwic-toolbar-saved-link {
  color: var(--gold);
  text-decoration: none;
}
.kwic-toolbar-clear:hover,
.kwic-toolbar-save:hover,
.kwic-toolbar-saved-link:hover {
  text-decoration: underline;
}

.kwic-export {
  position: relative;
}
.kwic-export > summary {
  cursor: pointer;
  color: var(--gold);
  list-style: none;
}
.kwic-export > summary::-webkit-details-marker {
  display: none;
}
.kwic-export-form {
  position: absolute;
  right: 0;
  z-index: 20;
  margin-top: 6px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
  font-size: 0.82rem;
}
.kwic-export-scope {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kwic-export-opt,
.kwic-export-scope label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--brown-soft);
}
.kwic-export-buttons {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.kwic-export-buttons button {
  flex: 1;
  font: inherit;
  font-size: 0.8rem;
  padding: 6px 8px;
  cursor: pointer;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--brown);
}
.kwic-export-buttons button:hover {
  background: var(--parchment);
}

/* Checkbox selection column. */
.kwic-col-select {
  width: 34px;
  text-align: center;
}
td.kwic-col-select,
th.kwic-col-select {
  text-align: center;
}
.kwic-row-checked > td {
  background: rgba(114, 118, 77, 0.12);
}
.kwic-select-bar {
  margin: 6px 0;
}
.kwic-select-apply {
  font: inherit;
  font-size: 0.82rem;
  padding: 5px 12px;
  cursor: pointer;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 4px;
  color: #fff;
}
.kwic-select-apply:hover {
  filter: brightness(0.95);
}

/* Inline saved-sets panel. */
.kwic-saved-panel {
  margin: 12px 0 18px;
  padding: 14px 16px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.kwic-saved-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.kwic-saved-dismiss {
  color: var(--gold);
  text-decoration: none;
  font-size: 0.85rem;
}
.kwic-saved-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 14px;
  max-width: 480px;
}
.kwic-saved-form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.82rem;
  color: var(--brown-soft);
}
.kwic-saved-form input[type="text"],
.kwic-saved-form textarea,
.kwic-saved-editform input[type="text"],
.kwic-saved-editform textarea,
.kwic-saved-search input {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
}
.kwic-saved-form button,
.kwic-saved-editform button {
  align-self: flex-start;
  font: inherit;
  font-size: 0.82rem;
  padding: 6px 12px;
  cursor: pointer;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 4px;
  color: #fff;
}
.kwic-saved-pins {
  font-size: 0.8rem;
  color: var(--olive);
}
.kwic-saved-list,
.kwic-saved-manage-list {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kwic-saved-item,
.kwic-saved-manage-item {
  padding: 8px 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.kwic-saved-open {
  font-weight: 600;
  color: var(--brown);
  text-decoration: none;
}
.kwic-saved-open:hover {
  text-decoration: underline;
}
.kwic-saved-meta {
  display: block;
  font-size: 0.78rem;
  color: var(--gray);
}
.kwic-saved-stale {
  border-left: 3px solid var(--danger);
}
.kwic-saved-stale-flag {
  color: var(--danger);
}
.kwic-saved-empty,
.kwic-saved-all {
  font-size: 0.85rem;
}
.kwic-saved-all {
  color: var(--gold);
  text-decoration: none;
}

/* Dedicated management page. */
.kwic-saved-search {
  margin: 10px 0;
}
.kwic-saved-search input {
  width: 100%;
  max-width: 360px;
}
.kwic-saved-manage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}
.kwic-saved-notes-body {
  margin: 6px 0;
  font-size: 0.85rem;
  color: var(--brown-soft);
  white-space: pre-wrap;
}
.kwic-saved-edit > summary {
  cursor: pointer;
  color: var(--gold);
  font-size: 0.82rem;
}
.kwic-saved-editform {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin: 8px 0;
}
.kwic-saved-editform label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.8rem;
  color: var(--brown-soft);
}
.kwic-saved-delete button {
  background: var(--danger);
  border-color: var(--danger);
}

@media (max-width: 760px) {
  .kwic-export-form {
    left: 0;
    right: auto;
  }
  .kwic-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- KWIC Slice 10: advanced query + saved corpus scopes --- */

.kwic-query {
  margin: 10px 0 0;
  border: 1px solid var(--border-soft, #e0d6c2);
  border-radius: 8px;
  background: var(--parchment-soft, #faf6ec);
}
.kwic-query > summary {
  cursor: pointer;
  padding: 8px 14px;
  font-size: 0.85rem;
  color: var(--brown-soft);
}
.kwic-query-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 14px 12px;
}
.kwic-query-input {
  width: 100%;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.85rem;
  padding: 8px 10px;
  border: 1px solid var(--border-soft, #e0d6c2);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}
.kwic-query-errors {
  margin: 0;
  padding: 8px 12px 8px 28px;
  border: 1px solid var(--danger, #a4533d);
  border-radius: 6px;
  background: rgba(164, 83, 61, 0.06);
  font-size: 0.85rem;
  color: var(--danger, #a4533d);
}
.kwic-query-actions button {
  align-self: flex-start;
}
.kwic-query-help {
  font-size: 0.78rem;
  color: var(--brown-soft);
}
.kwic-query-help code {
  background: rgba(120, 96, 56, 0.09);
  padding: 0 3px;
  border-radius: 3px;
}

.corpus-scopes {
  margin: 10px 0 0;
  border: 1px solid var(--border-soft, #e0d6c2);
  border-radius: 8px;
  background: var(--parchment-soft, #faf6ec);
}
.corpus-scopes > summary {
  cursor: pointer;
  padding: 8px 14px;
  font-size: 0.85rem;
  color: var(--brown-soft);
}
.corpus-scopes-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 14px 12px;
}
.corpus-scopes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.corpus-scope-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.corpus-scope-apply {
  font-weight: 600;
}
.corpus-scope-summary {
  font-size: 0.8rem;
  color: var(--brown-soft);
}
.corpus-scope-save {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}
.corpus-scope-save-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.8rem;
  color: var(--brown-soft);
}
.corpus-scopes-empty,
.corpus-scopes-hint,
.corpus-scopes-manage {
  margin: 0;
  font-size: 0.8rem;
  color: var(--brown-soft);
}
.corpus-scopes-manage-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.corpus-scopes-manage-item {
  border-top: 1px solid var(--border-soft, #e0d6c2);
  padding-top: 10px;
}
.corpus-scopes-manage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.corpus-scope-open-links {
  margin: 4px 0 0;
  font-size: 0.85rem;
}

/* Site footer — quiet legal links on both shells (AUTH_ACCOUNTS_UX_PLAN Slice 2). */
.site-footer {
  padding: 20px 24px 24px;
  text-align: center;
  font-family: var(--font-ui);
  color: var(--brown-soft);
}

.site-footer-links {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 10px;
  font-size: 0.92rem;
}

.site-footer-links a {
  display: inline-block;
  padding: 6px 4px;
  color: var(--brown-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(116, 86, 60, 0.4);
}

.site-footer-links a:hover {
  color: var(--brown);
  text-decoration-color: currentColor;
}

.site-footer-links a:focus-visible {
  outline: 2px solid var(--brown-soft);
  outline-offset: 2px;
  border-radius: 3px;
}

.site-footer-sep {
  color: var(--gold);
}

.site-footer-brand {
  margin: 2px 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--gray);
}

/* Keep the footer clear of the fixed Rota coin on touch phones. */
@media (max-width: 900px) {
  .app-shell .site-footer {
    padding-bottom: 96px;
  }
}

/* Activity core.standard component layer. Alchemia supplies parchment values;
   Sophia remaps the same portable variables inside its own world boundary. */
.sophia-student-shell {
  --activity-student-bg: var(--cream);
  --activity-student-surface: var(--paper);
  --activity-student-soft-surface: var(--surface-soft);
  --activity-student-text: var(--ink);
  --activity-student-muted: var(--ink-muted);
  --activity-student-heading: var(--brown);
  --activity-student-accent: var(--gold-strong);
  --activity-student-border: var(--line);
  --activity-student-radius: 8px;
  --activity-student-shadow: var(--shadow);
  min-width: 0;
  padding: clamp(16px, 3vw, 32px);
  overflow-wrap: anywhere;
  background: var(--activity-student-bg);
  color: var(--activity-student-text);
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1.6;
}

.activity-student-runtime {
  --activity-student-danger: var(--danger);
  --activity-student-accent: var(--gold-strong);
  --activity-runtime-surface: var(--paper);
  --activity-runtime-soft-surface: var(--surface-soft);
  --activity-runtime-text: var(--ink);
  --activity-runtime-muted: var(--ink-muted);
  --activity-runtime-heading: var(--brown);
  --activity-runtime-border: var(--line);
  --activity-runtime-danger: var(--danger);
  display: grid;
  min-width: 0;
  gap: 16px;
  margin-top: 24px;
  overflow-x: clip;
}

.activity-runtime-facts,
.activity-runtime-navigation,
.activity-runtime-submission {
  display: flex;
  width: min(100%, 832px);
  min-width: 0;
  align-items: center;
  gap: 10px 18px;
  margin-inline: auto;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
  flex-wrap: wrap;
}

.activity-runtime-submission {
  align-items: center;
  overflow-wrap: anywhere;
}

.activity-runtime-submission > div:first-child {
  /* Wrap the action when the actual work pane cannot fit readable copy beside it. */
  flex: 1 1 16rem;
  min-width: 0;
}

.activity-runtime-submission [data-runtime-native-submit] {
  /* The native confirmation is a full row, never an auto-sized second column. */
  flex: 1 1 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.activity-runtime-submission [data-runtime-native-submit] > button {
  justify-self: start;
  max-width: 100%;
}

.activity-runtime-submission [data-runtime-native-submit][hidden] {
  /* The enhanced runtime hides the native form; its grid must not defeat [hidden]. */
  display: none;
}

.activity-runtime-submission [data-runtime-native-submit] > label {
  /* The native confirmation checkbox row is a full 44px target. */
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
}

.activity-runtime-submission h2,
.activity-runtime-confirmation h2 {
  margin: 0;
  color: var(--activity-runtime-heading);
}

.activity-runtime-submission p {
  margin: 4px 0 0;
  color: var(--activity-runtime-muted);
}

.activity-runtime-submission .button-primary,
.activity-runtime-submission .button-secondary,
.activity-runtime-confirmation .button-primary,
.activity-runtime-confirmation .button-secondary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.activity-runtime-submission__status {
  flex-basis: 100%;
}

.activity-runtime-submission [data-runtime-submission-refresh] {
  margin-inline-end: auto;
}

.activity-runtime-confirmation {
  width: min(calc(100% - 32px), 560px);
  padding: 24px;
  border: 2px solid var(--activity-runtime-border);
  border-radius: 10px;
  background: var(--activity-runtime-surface);
  color: var(--activity-runtime-text);
  box-shadow: var(--shadow);
}

.activity-runtime-confirmation::backdrop {
  background: rgba(27, 22, 17, 0.58);
}

.activity-runtime-confirmation > p {
  color: var(--activity-runtime-muted);
}

.activity-runtime-confirmation__warning,
.activity-runtime-confirmation [role="alert"] {
  padding: 12px 14px;
  border-inline-start: 4px solid var(--activity-runtime-danger);
  background: var(--activity-runtime-soft-surface);
  color: var(--activity-runtime-text) !important;
}

.activity-runtime-confirmation__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.activity-runtime-submission :focus-visible,
.activity-runtime-confirmation :focus-visible {
  outline: 3px solid var(--activity-student-accent);
  outline-offset: 3px;
}

[data-runtime-confirmation-frozen="true"] .sophia-student-response:disabled {
  opacity: 0.68;
}

.activity-runtime-facts p,
.activity-runtime-navigation p {
  margin: 0;
  color: var(--ink-muted);
}

.activity-runtime-navigation p {
  flex-basis: 100%;
}

.activity-runtime-navigation .button-primary,
.activity-runtime-navigation .button-secondary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.activity-runtime-navigation .button-secondary[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
  pointer-events: none;
}

.activity-runtime-late {
  color: var(--activity-student-danger) !important;
  font-weight: 700;
}

.activity-runtime-timer[data-runtime-timer-warning="true"] {
  color: var(--activity-student-heading);
  font-weight: 700;
}

.sophia-student-header,
.sophia-student-blocks,
.sophia-student-source-pane,
.sophia-student-work > .sophia-student-source,
.sophia-student-runtime-note {
  width: min(100%, 832px);
  margin-inline: auto;
}

.sophia-student-header,
.sophia-student-block,
.sophia-student-section,
.sophia-student-source,
.sophia-student-source-pane--collapsible {
  min-width: 0;
  border: 1px solid var(--activity-student-border);
  border-radius: var(--activity-student-radius);
  background: var(--activity-student-surface);
  box-shadow: var(--activity-student-shadow);
}

.sophia-student-header,
.sophia-student-block,
.sophia-student-section,
.sophia-student-source {
  padding: clamp(16px, 3vw, 28px);
}

.sophia-student-header h1,
.sophia-student-header h2,
.sophia-student-block h2,
.sophia-student-block h3,
.sophia-student-block h4,
.sophia-student-section > h2,
.sophia-student-section > h3 {
  margin-top: 0;
  color: var(--activity-student-heading);
}

.sophia-student-eyebrow,
.sophia-student-block__kind,
.sophia-student-response__label {
  color: var(--activity-student-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sophia-student-work,
.sophia-student-blocks,
.sophia-student-section,
.sophia-student-response,
.sophia-student-response fieldset {
  display: grid;
  min-width: 0;
  gap: 13px;
}

.sophia-student-work {
  margin-top: 16px;
}

.sophia-student-response,
.sophia-student-response fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.sophia-student-response label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: var(--activity-student-heading);
  font-size: 0.94rem;
  font-weight: 650;
}

.sophia-student-response input[type="text"],
.sophia-student-response textarea,
.sophia-student-response select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--activity-student-border);
  border-radius: 6px;
  background: var(--activity-student-surface);
  color: var(--activity-student-text);
  font: inherit;
}

.sophia-student-response textarea {
  resize: vertical;
}

.sophia-student-choice,
.sophia-student-ordering li,
.sophia-student-repeatable__item {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--activity-student-border);
  border-radius: 6px;
  background: var(--activity-student-soft-surface);
}

.sophia-student-choice {
  display: flex !important;
  min-height: 44px;
  align-items: center;
  gap: 10px;
}

.sophia-student-choice input {
  width: 18px;
  height: 18px;
  accent-color: var(--activity-student-accent);
}

.sophia-student-ordering,
.sophia-student-repeatable {
  display: grid;
  gap: 8px;
}

.sophia-student-ordering li,
.sophia-student-ordering__actions,
.sophia-student-runtime-note,
.sophia-student-completion {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sophia-student-ordering li > span:first-of-type {
  flex: 1;
}

.sophia-student-ordering button,
.sophia-student-response-action {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--activity-student-border);
  border-radius: 6px;
  background: var(--activity-student-surface);
  color: var(--activity-student-accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.sophia-student-ordering svg,
.sophia-student-response-action svg,
.sophia-student-completion svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.sophia-student-runtime-note,
.sophia-student-feedback,
.sophia-student-response__constraints,
.activity-response-save-state {
  padding: 12px 14px;
  border-inline-start: 4px solid var(--activity-student-accent);
  background: var(--activity-student-soft-surface);
}

.activity-response-save-state {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--activity-student-muted);
  font-size: 0.9rem;
}

.activity-response-save-state p {
  margin: 0;
}

[data-runtime-save-state="error"],
[data-runtime-save-state="conflict"] {
  border-inline-start-color: var(--danger);
  color: var(--danger);
}

.sophia-student-response:disabled {
  opacity: 0.76;
}

.sophia-student-response :focus-visible,
.activity-runtime-navigation :focus-visible {
  outline: 3px solid var(--activity-student-accent);
  outline-offset: 3px;
}

.sophia-student-shell img,
.sophia-student-shell audio,
.sophia-student-shell video {
  max-width: 100%;
}