/* Shared theme + lookup-engine styles for both pages (index.html, glossary.html).
   Page-specific layout stays in each page's own <style>; this file owns the fonts,
   the light/dark palettes, base controls, and the classes emitted by shared/lookup.js. */

/* Self-hosted Atkinson Hyperlegible (offline; no CDN) — high-legibility font for the booth. */
@font-face { font-family:'Atkinson Hyperlegible'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/AtkinsonHyperlegible-Regular.ttf?v=2') format('truetype'); }
@font-face { font-family:'Atkinson Hyperlegible'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/AtkinsonHyperlegible-Bold.ttf?v=2') format('truetype'); }
@font-face { font-family:'Atkinson Hyperlegible'; font-style:italic; font-weight:400; font-display:swap; src:url('/fonts/AtkinsonHyperlegible-Italic.ttf?v=2') format('truetype'); }

/* Dark (default) + light themes. Tinted badges derive from the palette via color-mix so they
   adapt to either theme without per-color overrides.
   --accent is for TEXT on the page background; --accent-fill is for a SURFACE carrying
   --on-accent text (buttons, active chips). Dark mode's #4493f8 reads well as text but white
   on it is only 3.1:1, so filled controls use the deeper blue (4.6:1) in both themes. */
:root, :root[data-theme="dark"] {
  --bg:#0f1419; --bg2:#11181f; --panel:#1a2129; --line:#2a3441; --fg:#e6edf3; --muted:#8b98a5;
  --accent:#4493f8; --good:#3fb950; --bad:#f85149; --warn:#d29922;
  --accent-fill:#1f6feb; --on-accent:#ffffff; --shared:#a371f7; --shadow:rgba(0,0,0,.35);
  --row-hover:color-mix(in srgb, var(--accent) 7%, var(--bg));
}
:root[data-theme="light"] {
  --bg:#ffffff; --bg2:#f3f5f8; --panel:#f7f9fb; --line:#d4dae2; --fg:#1a2129; --muted:#5a6673;
  --accent:#1f6feb; --good:#1a7f37; --bad:#cf222e; --warn:#9a6700;
  --accent-fill:#1f6feb; --on-accent:#ffffff; --shared:#8250df; --shadow:rgba(0,0,0,.14);
  --row-hover:color-mix(in srgb, var(--accent) 6%, var(--bg));
}
/* Before core.js's initTheme() runs, a light-OS visitor got a dark first paint. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:#ffffff; --bg2:#f3f5f8; --panel:#f7f9fb; --line:#d4dae2; --fg:#1a2129; --muted:#5a6673;
  --accent:#1f6feb; --good:#1a7f37; --bad:#cf222e; --warn:#9a6700;
  --accent-fill:#1f6feb; --on-accent:#ffffff; --shared:#8250df; --shadow:rgba(0,0,0,.14);
  --row-hover:color-mix(in srgb, var(--accent) 6%, var(--bg));
  }
}
/* One type scale instead of fourteen ad-hoc sizes. */
:root { --fs-xs:11.5px; --fs-sm:12.5px; --fs-ui:13.5px; --fs-md:14.5px; --fs-body:16.5px; --fs-lg:18.5px; }

* { box-sizing: border-box; }
body { margin:0; font:var(--fs-body)/1.6 'Atkinson Hyperlegible', system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--fg); }
button { background:var(--accent-fill); border:0; color:var(--on-accent); border-radius:6px; padding:7px 12px; cursor:pointer; font:inherit; font-weight:700; }
button.ghost { background:transparent; border:1px solid var(--line); color:var(--fg); font-weight:500; }
a { color:var(--accent); }
.muted { color:var(--muted); }
.hidden { display:none; }
.small { font-size:var(--fs-ui); }
.nolink { text-decoration:none; }
/* Highlighted query: full-contrast text on a warm tint with an underline, instead of warn-coloured
   text on a warn tint (3.6:1 in light mode). */
mark { background:color-mix(in srgb, var(--warn) 26%, var(--bg)); color:var(--fg); box-shadow:inset 0 -2px 0 var(--warn); padding:0 2px; border-radius:2px; }
.danger { color:var(--bad) !important; }
/* Shared base for text fields; pages only add sizing. */
input, select, textarea { background:var(--panel); border:1px solid var(--line); color:var(--fg); border-radius:6px; font:inherit; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
input[type=checkbox], input[type=radio] { accent-color:var(--accent-fill); }
.del { background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:var(--fs-md); line-height:1; padding:0 4px; font-weight:700; }
.del:hover { color:var(--bad); }
/* ⚡ flash: send button, and the pulse on a row someone flashed at you. Background-colour
   only — a flashed row must not change height, or sizeTier1()'s measurements go stale. */
.flash { background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:var(--fs-ui); line-height:1; padding:0 4px; opacity:.45; }
.flash:hover { opacity:1; color:var(--accent); }
table.gl tr.flashed { animation: flashpulse 1.6s ease-out 2; }
@keyframes flashpulse {
  0%, 100% { background:transparent; }
  15% { background:color-mix(in srgb, var(--accent) 38%, transparent); }
}

/* ---- lookup engine (shared/lookup.js output) ---- */
.col { margin-bottom:26px; }
.colhead { font-size:var(--fs-ui); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline; }
.colhead .t { font-size:var(--fs-sm); color:var(--muted); text-transform:none; letter-spacing:0; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:12px; }
.card.iaterow { padding:6px 10px; margin-bottom:6px; }
/* One line per IATE hit — the tier's default face. Never wraps: it ellipses instead, so
   eight hits stay a fixed, predictable ~250px and the glossary above keeps the screen.
   The full card lives in .cardfull, one click away. */
.iateline { display:flex; align-items:baseline; gap:8px; white-space:nowrap; overflow:hidden; font-size:var(--fs-md); }
.iateline .dom { color:var(--muted); font-size:var(--fs-sm); flex:0 0 auto; max-width:22%; overflow:hidden; text-overflow:ellipsis; }
.iateline .segs { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; }
.iateline .lc { color:var(--accent); font-weight:700; font-size:var(--fs-sm); text-transform:uppercase; margin-right:4px; }
.iateline .sep { color:var(--line); }
.iateline .addbtn { flex:0 0 auto; }
.lineexp { flex:0 0 auto; padding:0 5px; font-size:var(--fs-sm); line-height:1.4; color:var(--muted); }
.lineexp:hover { color:var(--accent); border-color:var(--accent); }
.cardfull { border-top:1px solid var(--line); margin-top:8px; padding-top:8px; }
.iatetoggle { padding:2px 8px; font-size:var(--fs-sm); margin-left:6px; color:var(--muted); text-transform:none; letter-spacing:0; }
.iatetoggle:hover { color:var(--accent); border-color:var(--accent); }
.domains { color:var(--muted); font-size:var(--fs-ui); margin-bottom:8px; }
.cardfoot { display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.nomatch { color:var(--muted); font-size:var(--fs-ui); font-style:italic; }
/* One pane per language — auto-fit grid so 2 panes sit side by side and 3+ wrap into
   equal columns instead of squeezing (multi-target EUR-Lex / IATE cards). */
.sxs { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; }
.pane { background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:9px 11px; }
.pane .lc { color:var(--accent); font-weight:700; font-size:var(--fs-sm); text-transform:uppercase; display:flex; justify-content:space-between; margin-bottom:4px; }
.pane .primary { font-weight:700; }
.pane .alt { color:var(--muted); font-size:var(--fs-md); }
.rel { font-size:var(--fs-sm); color:var(--good); font-weight:700; }
.def { color:var(--muted); font-size:var(--fs-ui); margin-top:8px; font-style:italic; }
.addbtn { font-size:var(--fs-ui); padding:4px 8px; }
.warn { font-size:var(--fs-ui); color:var(--fg); background:color-mix(in srgb, var(--warn) 22%, var(--bg)); border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-bottom:12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.showmore { display:block; width:100%; margin:0 0 12px; font-size:var(--fs-md); color:var(--muted); }
.showmore:hover { color:var(--accent); border-color:var(--accent); }
.ctx-wrap { margin-top:10px; border-top:1px solid var(--line); padding-top:10px; }
.passage { margin-bottom:12px; }
.pref { font-weight:700; font-size:var(--fs-ui); color:var(--accent); margin-bottom:5px; }
.passage .blk { font-size:var(--fs-md); max-height:260px; overflow:auto; }
.cardfoot input.tgt { background:var(--panel); border:1px solid var(--line); color:var(--fg); border-radius:5px; padding:3px 7px; font:inherit; font-size:var(--fs-ui); margin-right:6px; min-width:160px; }

/* ---- toast + centered modals (shared/import.js, shared/suggest.js) ---- */
#toast { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:var(--panel); border:1px solid var(--line); color:var(--fg); border-radius:8px; padding:8px 14px; font-size:var(--fs-ui); opacity:0; transition:opacity .2s; pointer-events:none; z-index:50; }
#toast.show { opacity:1; }

/* ---- expired-session banner (shared/core.js) ----
   Deliberately NOT a toast: it must not time out, because the whole point is that the user
   finds out they are signed out before the next thing they type is lost. Sits above the
   modals so it is still reachable from inside the importer or the suggest table. */
#authbar { position:fixed; top:0; left:0; right:0; z-index:70; display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; padding:9px 14px; font-size:var(--fs-ui); color:var(--fg); background:color-mix(in srgb, var(--warn) 30%, var(--bg)); border-bottom:1px solid var(--line); box-shadow:0 2px 10px var(--shadow); }
#authbar button { background:var(--panel); border:1px solid var(--line); color:var(--fg); border-radius:6px; padding:5px 12px; font:inherit; font-size:var(--fs-ui); cursor:pointer; }
#authbar button:hover { border-color:var(--accent); color:var(--accent); }
#importmodal, #suggestmodal, #sharemodal { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:60; display:flex; align-items:center; justify-content:center; padding:24px; }
#importmodal .box, #suggestmodal .box, #sharemodal .box { background:var(--bg); border:1px solid var(--line); border-radius:12px; width:min(1000px,100%); max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
#importmodal .box > header, #suggestmodal .box > header, #sharemodal .box > header { display:flex; flex-direction:row; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--bg); }
#importmodal .box > header .chips, #suggestmodal .box > header .chips { color:var(--muted); font-size:var(--fs-ui); }
#importmodal .box > header .spacer, #suggestmodal .box > header .spacer, #sharemodal .box > header .spacer { flex:1; }
#importmodal .box > .body, #suggestmodal .box > .body, #sharemodal .box > .body { overflow:auto; padding:16px; }
#importmodal .box > footer, #suggestmodal .box > footer, #sharemodal .box > footer { display:flex; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid var(--line); flex-wrap:wrap; }
#importmodal .box > footer .spacer, #suggestmodal .box > footer .spacer, #sharemodal .box > footer .spacer { flex:1; }
#importmodal select { background:var(--panel); border:1px solid var(--line); color:var(--fg); border-radius:6px; padding:4px 6px; font:inherit; }
#suggestmodal input, #sharemodal input { background:var(--panel); border:1px solid var(--line); color:var(--fg); border-radius:6px; padding:7px 10px; font:inherit; }
.maprow { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.mapcol { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px 10px; min-width:170px; }
.mapcol .h { font-size:var(--fs-sm); color:var(--muted); margin-bottom:4px; word-break:break-word; }
.mapcol .sample { font-size:var(--fs-sm); color:var(--muted); font-style:italic; margin-top:4px; max-height:34px; overflow:hidden; }
.mapcol select { width:100%; font-size:var(--fs-ui); }
table.rev { width:100%; border-collapse:collapse; font-size:var(--fs-ui); }
table.rev th { text-align:left; font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-bottom:1px solid var(--line); padding:5px 7px; position:sticky; top:0; background:var(--bg); }
table.rev td { border-bottom:1px solid var(--line); padding:4px 7px; vertical-align:top; }
table.rev tr.dup { opacity:.5; }
table.rev .badge { font-size:var(--fs-xs); font-weight:700; padding:1px 6px; border-radius:999px; }
table.rev .badge.new { background:color-mix(in srgb, var(--good) 22%, var(--bg)); color:var(--good); }
table.rev .badge.dup { background:color-mix(in srgb, var(--warn) 22%, var(--bg)); color:var(--warn); }

/* ---- miner + reviewer overlays (shared/miner.js, shared/reviewer.js) ---- */
#miner, #reviewer { position:fixed; inset:0; background:var(--bg); z-index:40; display:none; flex-direction:column; }
body.miner-open #miner { display:flex; }
body.reviewer-open #reviewer { display:flex; }
.miner-head { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.miner-head h2 { font-size:var(--fs-body); margin:0; flex:1; }
.miner-body { flex:1; min-height:0; display:grid; grid-template-columns: 360px 1fr; gap:0; }
.miner-in { padding:16px; border-right:1px solid var(--line); overflow:auto; display:flex; flex-direction:column; gap:10px; }
.miner-out { padding:16px; overflow:auto; }
.miner-in label { font-size:var(--fs-ui); color:var(--muted); display:block; margin-bottom:3px; }
.miner-in textarea { width:100%; min-height:160px; resize:vertical; background:var(--panel); border:1px solid var(--line); color:var(--fg); border-radius:6px; padding:9px 11px; font:inherit; }
.miner-in input[type=text], .miner-in select { width:100%; background:var(--panel); border:1px solid var(--line); color:var(--fg); border-radius:6px; padding:7px 9px; font:inherit; }
.miner-in .row { display:flex; gap:8px; }
.miner-in .row > div { flex:1; }
.filelist { font-size:var(--fs-ui); color:var(--muted); }
/* Per-file language column, shown only in versions mode (see miner.js renderFileList). */
.filelist .frow { display:flex; gap:8px; align-items:center; margin:3px 0; }
.filelist .frow .fname { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filelist .frow .flang { font-size:var(--fs-ui); padding:2px 4px; }
/* The document's own rendering per language — darker than IATE's, because it leads. */
.mrow .tr.doc { color:var(--fg); }
.msection { margin-bottom:22px; }
.msection h3 { font-size:var(--fs-md); text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:6px; display:flex; justify-content:space-between; }
.mrow { display:flex; gap:9px; align-items:flex-start; padding:7px 0; border-bottom:1px solid var(--line); font-size:var(--fs-ui); }
.mrow input[type=checkbox] { margin-top:4px; }
.mrow .body { flex:1; }
.mrow .term { font-weight:700; }
.mrow .tr { color:var(--muted); font-size:var(--fs-md); }
.mrow .meta { color:var(--muted); font-size:var(--fs-sm); margin-top:2px; }
.mrow .freq { color:var(--accent); font-size:var(--fs-sm); font-weight:700; white-space:nowrap; }
.mrow input.tgt { width:100%; margin-top:4px; background:var(--panel); border:1px solid var(--line); color:var(--fg); border-radius:5px; padding:4px 7px; font:inherit; font-size:var(--fs-md); }
.miner-msg { padding:10px 12px; border-radius:8px; margin-bottom:14px; font-size:var(--fs-md); }
.miner-msg.err { background:color-mix(in srgb, var(--bad) 18%, var(--bg)); border:1px solid var(--bad); }
.miner-msg.warn2 { background:color-mix(in srgb, var(--warn) 22%, var(--bg)); border:1px solid var(--line); }
.domain-bar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:14px; }
.domain-bar .lbl { font-size:var(--fs-sm); color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-right:2px; }
.domain-chip { background:var(--panel); border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:3px 10px; font-size:var(--fs-ui); font-weight:500; cursor:pointer; }
.domain-chip:hover { border-color:var(--accent); color:var(--fg); }
.domain-chip.on { background:var(--accent-fill); border-color:var(--accent-fill); color:var(--on-accent); }
/* Applying a subject area DEMOTES rather than hides: an out-of-domain hit sorts to the bottom
   and is dimmed, exactly like a person-candidate, because the gold set showed genuinely useful
   terms sitting outside any sensible domain selection. */
.mrow.person, .mrow.offdomain, .mrow.weak { opacity:0.62; }
.domain-apply { background:var(--panel); border:1px solid var(--line); color:var(--fg); border-radius:6px; padding:3px 10px; font-size:var(--fs-ui); font-weight:700; cursor:pointer; margin-left:4px; }
.domain-apply:hover:not(:disabled) { border-color:var(--accent); }
.domain-apply:disabled { opacity:.5; cursor:default; }
.mrow .meta.alt { font-style:italic; opacity:.85; }
.badge.name { margin-left:6px; font-size:var(--fs-xs); font-weight:700; padding:0 5px; border-radius:4px; background:color-mix(in srgb, var(--muted) 16%, var(--bg)); color:var(--muted); border:1px solid var(--line); }
/* Reviewer: status badges + flagged segments */
.badge { font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border-radius:999px; white-space:nowrap; }
.badge.ok { background:color-mix(in srgb, var(--good) 18%, var(--bg)); color:var(--good); border:1px solid color-mix(in srgb, var(--good) 45%, var(--bg)); }
.badge.unrendered { background:color-mix(in srgb, var(--bad) 18%, var(--bg)); color:var(--bad); border:1px solid color-mix(in srgb, var(--bad) 45%, var(--bg)); }
.badge.inconsistent { background:color-mix(in srgb, var(--warn) 22%, var(--bg)); color:var(--warn); border:1px solid color-mix(in srgb, var(--warn) 45%, var(--bg)); }
.badge.acr { background:color-mix(in srgb, var(--accent) 12%, var(--bg)); color:color-mix(in srgb, var(--accent) 70%, var(--fg)); border:1px solid color-mix(in srgb, var(--accent) 45%, var(--bg)); margin-left:6px; }
.statline { display:flex; flex-wrap:wrap; gap:14px; font-size:var(--fs-md); margin-bottom:16px; }
.statline b { color:var(--fg); }
.seg { border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:10px; }
.seg .sxs2 { display:flex; gap:10px; }
.seg .pane2 { flex:1; background:var(--bg2); border:1px solid var(--line); border-radius:6px; padding:7px 9px; font-size:var(--fs-md); }
.seg .pane2 .lc { color:var(--accent); font-weight:700; font-size:var(--fs-xs); text-transform:uppercase; display:block; margin-bottom:3px; }
.seg .flags { margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
@media (max-width:900px) {
  .miner-body { grid-template-columns: 1fr; overflow:auto; }
  .miner-in { border-right:0; border-bottom:1px solid var(--line); }
  .seg .sxs2 { flex-direction:column; }
}

/* ---- multilingual manual-add bar (both pages) ---- */
.addbar { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.addbar input { flex:1; min-width:120px; font-size:var(--fs-md); padding:6px 8px; background:var(--panel); border:1px solid var(--line); color:var(--fg); border-radius:6px; font-family:inherit; }
.addbar input.acrin { flex:0 0 76px; min-width:60px; }
.addbar button { white-space:nowrap; }
/* Only the recommended rows are on screen. The rest live behind `.more`, because an unticked
   candidate is one the miner decided against - showing hundreds of them turns a recommendation
   into a data dump. The button names the count so nothing looks silently dropped. */
button.more { margin:10px 0 2px; font-size:var(--fs-ui); padding:5px 11px; }
.weakwrap { border-left:2px solid var(--line); padding-left:10px; margin-top:6px; }
.weakwrap .mrow { opacity:.72; }
.maddsel-top { margin-bottom:16px; }
.selall { display:flex; gap:6px; margin:8px 0 4px; }
.selall button { font-size:var(--fs-sm); padding:3px 9px; }