/* Shared shell for the landing page and the console. Page-specific rules stay
   in each page's own <style>; this file holds only what both surfaces use.
   The printable report (report.js) is deliberately NOT served from here — it
   travels outside the server and has to carry its own CSS inline.

   ── Theming ──
   Solomon is dark-first, so bare :root carries the dark palette. Light is
   redefined twice: once for an OS preference (guarded so an explicit dark
   choice still wins) and once for an explicit choice. A toggle only has to set
   document.documentElement.dataset.theme to "light" or "dark".
   Components read tokens ONLY — never a literal that works in one theme.

   ── Direction ──
   Nothing here is left/right. Layout is flex/grid with gap, and the few
   directional properties are logical (margin-inline-*), so switching the page
   to dir="ltr" for English needs no CSS change. */

:root {
  color-scheme: dark;

  /* ── canvas ── */
  --bg:#0A1128;               /* Midnight Navy */
  --card:#111C3A;             /* raised surface */
  --glass:rgba(17,28,58,.8);  /* the focal box, over the watermark */
  --sunken:rgba(10,17,40,.55);/* recessed fill: fields, stat tiles */
  --line:#004B49;             /* Subtle Emerald — quiet container boundary */

  /* ── type ── */
  --gold:#E6C280;             /* Champagne Gold — headers */
  --ink:#F4F6F8;              /* Pearl White — primary text */
  --dim:#A0AEC0;              /* Cool Grey — body, secondary */
  --faint:#4A5568;            /* Muted Slate — placeholders, metadata */

  /* ── action ── */
  --accent:#D4AF37;           /* Cyber Gold — focus and submit */
  --glow:rgba(212,175,55,.25);
  --seal-opacity:.045;

  /* ── status: semantic, and deliberately not the accent ── */
  --green:#4ADE9B; --red:#FF6B7A; --blue:#7DC4FF; --amber:#FFB25E;

  /* One home for the verdict colours. The console reads these back out through
     getComputedStyle instead of repeating the hex codes in JS, so they are
     written as literals rather than var() indirections. */
  --v-true:#4ADE9B; --v-false:#FF6B7A; --v-partial:#E6C280;
  --v-abstain:#A0AEC0; --v-block:#FF6B7A;
  --v-accepted:#4ADE9B; --v-rejected:#FF6B7A;

  /* Cinzel and Inter carry no Hebrew glyphs, so the browser falls through to
     the next family per-glyph: English renders Cinzel/Inter, Hebrew renders
     Frank Ruhl/Assistant. The pairing needs no :lang() rules. No mono face in
     this set covers Hebrew — Hebrew in a mono context falls back to the system. */
  --font-display:"Cinzel","Frank Ruhl Libre",Georgia,serif;
  --font-body:"Inter","Assistant",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;

  --card-pad:14px;            /* the landing page raises this for roomier cards */
}

/* Light, for an OS preference. Guarded so an explicit dark toggle still wins. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:#EEF1F7; --card:#FFFFFF; --glass:rgba(255,255,255,.78);
    --sunken:rgba(10,17,40,.035); --line:#A8C4C1;
    --gold:#7A5C10; --ink:#0A1128; --dim:#46536B; --faint:#6B7789;
    --accent:#8A6B12; --glow:rgba(138,107,18,.22); --seal-opacity:.07;
    --green:#0F8A57; --red:#C42D40; --blue:#1668B0; --amber:#9A5B06;
    --v-true:#0F8A57; --v-false:#C42D40; --v-partial:#8A6A12;
    --v-abstain:#46536B; --v-block:#C42D40;
    --v-accepted:#0F8A57; --v-rejected:#C42D40;
  }
}
/* Light, chosen explicitly — wins over a dark OS. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#EEF1F7; --card:#FFFFFF; --glass:rgba(255,255,255,.78);
  --sunken:rgba(10,17,40,.035); --line:#A8C4C1;
  --gold:#7A5C10; --ink:#0A1128; --dim:#46536B; --faint:#6B7789;
  --accent:#8A6B12; --glow:rgba(138,107,18,.22); --seal-opacity:.07;
  --green:#0F8A57; --red:#C42D40; --blue:#1668B0; --amber:#9A5B06;
  --v-true:#0F8A57; --v-false:#C42D40; --v-partial:#8A6A12;
  --v-abstain:#46536B; --v-block:#C42D40;
  --v-accepted:#0F8A57; --v-rejected:#C42D40;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--dim); font-family:var(--font-body); }
.wrap { max-width:860px; margin:0 auto; padding:16px; }

/* ── header ── */
header { text-align:center; margin-bottom:14px; }
.brand { font-family:var(--font-display); font-size:10px; color:var(--gold);
         font-weight:700; letter-spacing:.28em; text-transform:uppercase; }
h1 { font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--gold); margin:2px 0 0; }
h2 { font-family:var(--font-display); font-weight:700; color:var(--gold); }
h3 { font-family:var(--font-display); font-weight:700; color:var(--ink); }
.sub { font-size:10px; color:var(--faint); }
/* Hebrew takes no tracking — letter-spacing pulls apart glyphs that read as a
   unit. Latin display type keeps it, so this is scoped to the RTL direction. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing:normal; }

/* ── surfaces ── */
.card { background:var(--card); border:1px solid var(--line); border-radius:12px;
        padding:var(--card-pad); margin-bottom:14px; }
.label { font-size:10px; font-weight:700; color:var(--dim); letter-spacing:.1em; margin:10px 0 6px; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.foot { text-align:center; font-size:8.5px; color:var(--faint); opacity:.7; padding:10px 0 20px; }
/* The build stamp: which commit is answering. LTR and monospaced inside an
   RTL footer, so a hash is never reordered on screen. */
.foot .build { direction:ltr; unicode-bidi:isolate; font-family:var(--font-mono); }

/* ── the focal box ─────────────────────────────────────────────────────────
   Glass over the seal watermark: the one place on each page where the user
   acts. The seal is a mask rather than a coloured image, so it takes --accent
   and follows the theme; it is inlined as a data URI, so an air-gapped install
   still renders it — nothing here reaches the network. */
.focal {
  position:relative; isolation:isolate;
  background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:14px;
}
.focal::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-color:var(--accent); opacity:var(--seal-opacity);
  --seal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='white' stroke-width='1.1'%3E%3Ccircle cx='50' cy='50' r='47'/%3E%3Ccircle cx='50' cy='50' r='38'/%3E%3Cpath d='M50 14 L81 68 L19 68 Z'/%3E%3Cpath d='M50 86 L19 32 L81 32 Z'/%3E%3C/svg%3E");
  -webkit-mask:var(--seal) no-repeat center / min(260px,70%);
  mask:var(--seal) no-repeat center / min(260px,70%);
}
.focal:focus-within { border-color:var(--accent); box-shadow:0 0 8px 2px var(--glow); }

/* ── controls ── */
input, textarea, select {
  width:100%; background:var(--sunken); border:1px solid var(--line); border-radius:8px;
  color:var(--ink); padding:10px; font-family:inherit; font-size:13px; margin-bottom:8px;
  transition:border-color .15s, box-shadow .15s;
}
textarea { min-height:90px; resize:vertical; }
::placeholder { color:var(--faint); opacity:1; }
input:focus, textarea:focus, select:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 8px 0 var(--glow);
}
input:focus::placeholder, textarea:focus::placeholder { color:transparent; }

button { border-radius:8px; border:1px solid; padding:10px 14px; font-family:var(--font-body);
         font-weight:700; font-size:13px; cursor:pointer; transition:filter .15s; }
button:hover:not(:disabled) { filter:brightness(1.12); }
button:disabled { opacity:.5; cursor:default; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Gold fill, page-ground text — the pairing inverts correctly in both themes. */
.primary { background:var(--accent); border-color:var(--accent); color:var(--bg); width:100%; }
.blue  { background:color-mix(in srgb, var(--blue)  12%, transparent); border-color:color-mix(in srgb, var(--blue)  40%, transparent); color:var(--blue); }
.green { background:color-mix(in srgb, var(--green) 12%, transparent); border-color:color-mix(in srgb, var(--green) 40%, transparent); color:var(--green); }
.redb  { background:color-mix(in srgb, var(--red)   12%, transparent); border-color:color-mix(in srgb, var(--red)   40%, transparent); color:var(--red); }

/* ── stat tile: one name for what used to be .s on the landing and .stat here ── */
.stat { flex:1; min-width:100px; text-align:center; background:var(--sunken);
        border:1px solid var(--line); border-radius:8px; padding:10px; }
.stat b { display:block; font-family:var(--font-display); font-size:22px; font-variant-numeric:tabular-nums; }
.stat span { font-size:10.5px; color:var(--faint); }

/* ── text utilities ── */
.pill { display:inline-block; padding:2px 10px; border-radius:6px; font-size:11px; font-weight:700; }
.line { padding:7px 0; border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent); font-size:12px; }
.mono { font-family:var(--font-mono); font-size:10px; color:var(--faint); }
.msg  { font-size:12px; margin-top:8px; }
.ok { color:var(--green); } .err { color:var(--red); } .warn { color:var(--amber); }
.hidden { display:none; }

/* A whole-box error, as opposed to .err which only colours text. These were
   both called .err before, on different pages, meaning different things. */
.alert { background:color-mix(in srgb, var(--red) 12%, transparent);
         border:1px solid color-mix(in srgb, var(--red) 45%, transparent); color:var(--red);
         border-radius:8px; padding:10px 13px; font-size:13px; margin-bottom:14px; }

/* נוסח-הפסק נשאר עברית גם כשהממשק אנגלי — הוא התוצר עצמו, לא עטיפה שלו.
   הוא נושא dir משלו, ולכן יש לו יישור משלו ולא זה של הדף שמסביבו. */
[data-ruling] { direction:rtl; text-align:start; unicode-bidi:isolate; }
[dir="ltr"] [data-ruling] { text-align:right; }

@media (prefers-reduced-motion:reduce) { *, *::before { transition:none !important; } }