:root {
  --bg: #faf8f4;
  --fg: #1f1b16;
  --muted: #7a7269;
  --accent: #8a5a2b;
  --carded: #d8ecd0;      /* active card highlight (.word.carded) */
  --carded-inactive: #e8e4dc;  /* inactive card highlight (.word.carded.inactive) */
  --popup-bg: #fffdf9;
  --line: #e7e0d6;
  --reading: 1.25rem;
}

* { box-sizing: border-box; }

/* Elements set display:flex below (#auth-form, #auth-user), which would otherwise
   override the UA [hidden] rule and leave them visible when toggled hidden in JS. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Georgia, "Times New Roman", serif;
}

/* ---- top bar ---- */
#topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0.6rem 1.25rem;
  background: #fff; border-bottom: 1px solid var(--line);
  font-family: system-ui, sans-serif; font-size: 0.9rem;
}
#topbar .brand { font-weight: 700; color: var(--accent); }
/* Work selector: a dropdown (keeps the bar compact as the corpus grows). margin-right:auto
   keeps it left while pushing the pager/toggles/auth to the right, as the old booklist did. */
.book-jump { display: flex; align-items: center; gap: 0.35rem; color: var(--muted);
  white-space: nowrap; margin-right: auto; }
.book-jump select { padding: 0.2rem 0.35rem; cursor: pointer; max-width: 22rem;
  font-family: system-ui, sans-serif; }
.toggle { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.queue { color: var(--muted); }

/* ---- auth ---- */
.auth { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.auth button {
  border: 1px solid var(--line); background: #fff; border-radius: 5px;
  padding: 0.3rem 0.6rem; cursor: pointer; font: inherit; color: var(--fg);
}
.auth button:hover { border-color: var(--accent); color: var(--accent); }
#auth-user { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); }

#auth-form {
  position: fixed; top: 3.1rem; right: 1rem; z-index: 30; width: 17rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--popup-bg); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18); padding: 1rem;
  font-family: system-ui, sans-serif;
}
.auth-title { font-weight: 700; }
#auth-form input {
  padding: 0.45rem 0.55rem; border: 1px solid var(--line); border-radius: 5px; font: inherit;
}
#auth-form #auth-submit {
  padding: 0.45rem; border: 1px solid var(--accent); background: var(--accent);
  color: #fff; border-radius: 5px; cursor: pointer;
}
.linkish { border: 0; background: none; color: var(--accent); cursor: pointer;
  text-align: left; padding: 0; font: inherit; }
.auth-error { color: #b3261e; font-size: 0.85rem; min-height: 1em; }
.auth-note { color: var(--muted); font-size: 0.78rem; }

/* ---- reader ---- */
#reader { max-width: 42rem; margin: 0 auto; padding: 2rem 1.25rem 5rem; }
#book-head { margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
#book-title { margin: 0; font-size: 1.8rem; }
#book-author { color: var(--muted); margin-top: 0.25rem; }
#chapter-title { margin: 0 0 1rem; font-size: 1.3rem; color: var(--accent);
  font-family: system-ui, sans-serif; }

#text {
  white-space: pre-wrap;       /* faithful: paragraph breaks + punctuation verbatim */
  word-break: break-word;
  font-size: var(--reading);
  line-height: 1.9;
}

.word { cursor: pointer; border-radius: 3px; transition: background 0.08s; }
.word:hover { background: #f0e7d8; }
/* Carded lemmas, highlighted across every text (M3 Feature A; highlight == card).
   Active = green (queued for the next download); inactive = grey (already exported). */
.word.carded { background: var(--carded); box-shadow: inset 0 -2px 0 #a9d39a; }
.word.carded:hover { background: #c7e3bb; }
.word.carded.inactive { background: var(--carded-inactive); box-shadow: inset 0 -2px 0 #c9c1b3; }
.word.carded.inactive:hover { background: #ddd7cc; }

/* Triage aids (definition worklist). Undefined = yellow background; proper noun =
   blue outline. Outline (not box-shadow/background) so the two combine on undefined
   proper nouns -- the common "name with no gloss" case -- and don't clash with cards. */
.word.audit-undef { background: #fdf0a8; }
.word.audit-undef:hover { background: #f8e98c; }
.word.audit-propn { outline: 1px solid #5b82c9; outline-offset: -1px; }

/* Footnote marker: a clickable superscript that opens the note text in the popup. */
.footnote {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.62em;
  line-height: 0;
  vertical-align: super;
  font-family: system-ui, sans-serif;
  user-select: none;
}
.footnote:hover { text-decoration: underline; }
.footnote-note { font-style: italic; }

.queue { color: var(--muted); display: flex; align-items: center; gap: 0.5rem; }
.queue a { color: var(--accent); text-decoration: none; }
.queue a:hover { text-decoration: underline; }

/* Chapter nav lives in the sticky top bar so it stays put while reading. */
#pager {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: system-ui, sans-serif;
}
#pager button {
  padding: 0.1rem 0.5rem; cursor: pointer; font-size: 1.1rem; line-height: 1.2;
}
#pager button:disabled { opacity: 0.4; cursor: default; }
.chapter-jump { display: flex; align-items: center; gap: 0.35rem; color: var(--muted);
  white-space: nowrap; }
.chapter-jump select { padding: 0.2rem 0.35rem; cursor: pointer;
  font-family: system-ui, sans-serif; }

#attribution {
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.78rem; font-family: system-ui, sans-serif;
  line-height: 1.5;
}

/* ---- popup ---- */
#popup {
  position: absolute; z-index: 20; width: min(22rem, 90vw);
  background: var(--popup-bg); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.16);
  padding: 0.9rem 1rem; font-family: system-ui, sans-serif;
}
.popup-close {
  position: absolute; top: 0.3rem; right: 0.4rem;
  border: 0; background: none; font-size: 1.1rem; color: var(--muted); cursor: pointer;
}
.popup-head { display: flex; align-items: center; gap: 0.6rem; }
#popup-headword { font-size: 1.4rem; font-family: Georgia, serif; }
#popup-audio {
  border: 1px solid var(--line); background: #fff; border-radius: 50%;
  width: 1.9rem; height: 1.9rem; cursor: pointer; color: var(--accent);
}
#popup-audio:disabled { opacity: 0.5; cursor: default; }
.popup-grammar { color: var(--muted); font-size: 0.85rem; margin: 0.2rem 0 0.5rem; }
.popup-gloss { margin: 0 0 0.7rem; padding-left: 1.1rem; font-size: 0.95rem; line-height: 1.45; }
.popup-gloss .no-gloss { color: var(--muted); list-style: none; margin-left: -1.1rem; }
.popup-gloss .gloss-more {
  list-style: none; margin-left: -1.1rem; margin-top: 0.15rem;
  color: var(--accent, #2a6); font-size: 0.85rem; cursor: pointer; user-select: none;
}
.popup-gloss .gloss-more:hover { text-decoration: underline; }
.popup-government { margin: -0.3rem 0 0.7rem; font-size: 0.85rem; }
.popup-government .government-label {
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.7rem; font-weight: 600;
}
.popup-government ul { margin: 0.15rem 0 0; padding-left: 1.1rem; line-height: 1.4; }
.popup-add {
  width: 100%; padding: 0.45rem; cursor: pointer;
  border: 1px solid var(--accent); background: #fff; color: var(--accent); border-radius: 6px;
}
.popup-add:hover { background: var(--accent); color: #fff; }

/* ---- cards page (/cards) ---- */
#cards-main { max-width: 56rem; margin: 0 auto; padding: 2rem 1.25rem 5rem;
  font-family: system-ui, sans-serif; }
#cards-main h1 { font-family: Georgia, serif; }
.cards-toolbar { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0 1.25rem;
  color: var(--muted); }
.cards-toolbar .grow { flex: 1; }
.cards-empty, .cards-signin { color: var(--muted); margin-top: 2rem; }
.print-note { margin: -0.5rem 0 1.25rem; padding: 0.6rem 0.8rem; font-size: 0.85rem;
  color: var(--fg); background: #efe6d8; border: 1px solid var(--line); border-radius: 6px; }

table.cards { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.cards th, table.cards td {
  text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line);
}
table.cards th { cursor: pointer; user-select: none; white-space: nowrap; color: var(--muted); }
table.cards th:hover { color: var(--accent); }
table.cards th .arrow { font-size: 0.7rem; opacity: 0.7; }
table.cards td.lemma { font-family: Georgia, serif; font-size: 1.05rem; }
.status-pill { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 10px;
  font-size: 0.78rem; }
.status-pill.active { background: var(--carded); color: #2c5e1d; }
.status-pill.inactive { background: var(--carded-inactive); color: #6a5f4c; }
.row-actions { display: flex; gap: 0.4rem; }
.row-actions button, .cards-toolbar button {
  border: 1px solid var(--line); background: #fff; border-radius: 5px;
  padding: 0.25rem 0.55rem; cursor: pointer; font: inherit; color: var(--fg);
}
.row-actions button:hover, .cards-toolbar button:hover { border-color: var(--accent); color: var(--accent); }
.row-actions .danger:hover { border-color: #b3261e; color: #b3261e; }
table.cards select, .cards-toolbar select, .cards-toolbar input {
  font: inherit; padding: 0.2rem 0.4rem; border: 1px solid var(--line); border-radius: 5px;
  background: #fff; color: var(--fg);
}
.cards-toolbar a { color: var(--accent); text-decoration: none; }
.cards-toolbar a:hover { text-decoration: underline; }
.builder { max-width: 32rem; }
table.builder-fields { max-width: 32rem; }
table.builder-fields th:not(:first-child), table.builder-fields td:not(:first-child) {
  text-align: center; width: 4rem;
}

/* An "edited" chip on cards whose Front/Back has been hand-edited (card editor). */
.edited-chip { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.4rem;
  border-radius: 10px; font-size: 0.72rem; background: #efe6d8; color: var(--accent); }

/* ---- Card editor overlay ------------------------------------------------- */
.editor-overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center;
  justify-content: center; padding: 1.5rem;
  background: rgba(31, 27, 22, 0.55);
}
.editor-panel {
  display: flex; flex-direction: column; gap: 0.75rem;
  width: min(760px, 100%); max-height: 92vh;
  background: var(--popup-bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem 1.1rem; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}
.editor-head { display: flex; align-items: center; gap: 0.5rem; }
.editor-head .grow { flex: 1; }
.ce-lemma { font-weight: 700; font-size: 1.15rem; color: var(--accent); }
.ce-pos { color: var(--muted); font-size: 0.85rem; }
.ce-position { color: var(--muted); font-size: 0.85rem; }
.ce-edited-flag { padding: 0.05rem 0.4rem; border-radius: 10px; font-size: 0.72rem;
  background: #efe6d8; color: var(--accent); }

.editor-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); }
.editor-toolbar .grow { flex: 1; }
.ce-tools-label { color: var(--muted); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.04em; margin-right: 0.1rem; }
.ce-sep { width: 1px; height: 1.2rem; background: var(--line); margin: 0 0.35rem; }
.editor-toolbar button, .editor-head button, .editor-foot button {
  border: 1px solid var(--line); background: #fff; border-radius: 5px;
  padding: 0.25rem 0.55rem; cursor: pointer; font: inherit; color: var(--fg);
}
.editor-toolbar button:hover, .editor-head button:hover, .editor-foot button:hover {
  border-color: var(--accent); color: var(--accent);
}

/* The two card boxes. overflow:visible so text that doesn't fit runs off the card
   (per design); the surrounding area scrolls so spilled content stays reachable. */
.editor-cards { flex: 1; overflow: auto; display: flex; flex-direction: column;
  gap: 1.4rem; padding: 0.6rem 0.4rem 1.2rem; }
.editor-side-label { color: var(--muted); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 0.3rem; }
/* The editing box is a TRUE-SCALE replica of the print card: same mm dimensions,
   padding, font (family/size/line-height) and face-class sizes as server/print_pdf.py,
   so text wraps and fills exactly as it will on paper. It grows downward with the text
   (top-anchored, like the print card's flex-start); the green .card-boundary overlaid on
   top stays fixed at the card's real size, so anything past it is what prints clipped.
   Sized 1:1 (mm), deliberately -- no zoom/transform, which would desync the font-resize
   maths and the aspect ratio. Keep these values in lockstep with print_pdf.py. */
.card-edit-wrap { position: relative; width: 60.1667mm; max-width: 100%; }
.card-edit {
  width: 100%; min-height: 46.8mm; box-sizing: border-box;
  border: 0.2mm solid var(--line); border-radius: 1.5mm; background: #fff;
  padding: 2mm; font-family: 'DejaVu Serif', Georgia, serif; font-size: 16px;
  /* Explicit line-height, NOT `normal`: WeasyPrint and the browser derive `normal` from
     the font differently (~1.1646 vs ~1.2), which desynced how many lines fit the card.
     Pin the same number here and in print_pdf.py so wrap/clip register across engines. */
  line-height: 1.165; color: #000; text-align: center; overflow: visible; cursor: text;
}
.card-edit:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.card-boundary {
  position: absolute; top: 0; left: 0; width: 100%; height: 46.8mm;   /* the card's real size */
  box-sizing: border-box;   /* sit exactly on the 60.1667x46.8mm edge, not 0.8mm outside it */
  border: 0.4mm solid #2e9e4f; border-radius: 1.5mm; pointer-events: none;
}
.editor-hint { margin: 0 0 0.2rem; color: var(--muted); font-size: 0.8rem; }
.boundary-key { display: inline-block; width: 1.4em; height: 0.85em; vertical-align: -0.1em;
  border: 1.5px solid #2e9e4f; border-radius: 2px; }
/* Mirror the export CSS EXACTLY (server/print_pdf.py) so the editor and the printed card
   lay out identically -- same face-class sizes, margins and colours. */
.card-edit .cardbody { width: 100%; }
/* Blank line the user added: keep its height even if it's a bare empty block, exactly as
   the print card does (server/print_pdf.py), so blank lines are WYSIWYG too. */
.card-edit div:empty, .card-edit p:empty { min-height: 1em; }
.card-edit .word { font-size: 1.4em; font-weight: bold; margin: 2px 0; }
.card-edit .def { margin: 2px 0; color: #222; font-size: 0.9em; }
.card-edit .sent { margin: 2px 0; color: #333; font-style: italic; font-size: 0.85em; }
.card-edit .grammar { color: #555; font-size: 0.75em; }
.card-edit .formlabel { color: #8a5a2b; font-size: 0.7em; text-transform: uppercase;
  letter-spacing: 0.04em; }

.editor-foot { display: flex; align-items: center; gap: 0.75rem; }
.editor-foot .ce-saved { flex: 1; text-align: center; color: var(--muted);
  font-size: 0.8rem; }