/* Illouz platform — the six components everything else composes from.
   Logical properties only. Grep this file for `left`, `right`, `margin-left`,
   `text-align: left` or `border-left` and the result must be empty — that is the
   RTL checklist's first item and it is checkable rather than a matter of taste. */

*,*::before,*::after{ box-sizing: border-box; }
body{ margin:0; }

/* Every surface paints its own ground from a token. A transparent surface
   borrows whatever is behind it, which is how a dark card ends up on a light page. */
.surface{ background: var(--surface); color: var(--ink); }
.page{ background: var(--ground); color: var(--ink); min-height: 100vh; }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* Wide content scrolls inside itself. The body never scrolls sideways. */
.scroll-x{ overflow-x: auto; max-width: 100%; }

/* ============================================================ 1. CASE ROW
   The densest thing in the product. Three staff scan hundreds a day.
   Reading start in Hebrew is the RIGHT edge, so the identifier column comes
   first in source order and the browser places it correctly under dir=rtl. */

.case-table{ width:100%; border-collapse: collapse; background: var(--surface); }
.case-table th{
  font-size: var(--t-12); font-weight:700; color: var(--ink-muted);
  text-align: start; padding: var(--s-2) var(--s-3);
  border-block-end: 1px solid var(--rule-strong);
  white-space: nowrap;
}
.case-row{ height:32px; border-block-end:1px solid var(--rule); }
.case-row > td{ padding: 0 var(--s-3); font-size: var(--t-13); color: var(--ink-mid); }
.case-row:hover{ background: var(--surface-sunk); }
.case-row .person{ font-size: var(--t-15); color: var(--ink); font-weight:600; }
.case-row .subject{ color: var(--ink-mid); max-width: 34ch; overflow:hidden;
  text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.case-row a{ color: inherit; text-decoration: none; }

/* Status encoded TWICE — colour and form — so it survives greyscale and
   colour-blindness. Hollow / half / filled is the form axis. */
.dot{ inline-size:9px; block-size:9px; border-radius:50%; display:inline-block;
      vertical-align:-1px; margin-inline-end: var(--s-2); border:1.5px solid currentColor; }
.dot.is-open{ background: transparent; color: var(--ink-muted); }
.dot.is-waiting{ color: var(--warn);
  background: linear-gradient(to bottom, currentColor 50%, transparent 50%); }
.dot.is-crit{ background: currentColor; color: var(--crit); }

.pill{ display:inline-block; font-size: var(--t-12); font-weight:700;
  padding: 1px var(--s-2); border-radius: 999px; white-space: nowrap; }
.pill.is-crit{ background: var(--crit-soft); color: var(--crit); }
.pill.is-warn{ background: var(--warn-soft); color: var(--warn); }
.pill.is-ok{ background: var(--ok-soft); color: var(--ok); }
/* Gold on light is a FILL behind navy text, never gold text. */
.pill.is-accent{ background: var(--accent-fill); color: var(--navy); }
/* Category labels use the neutral pill. Semantic colour is a separate axis and a
   category must never borrow it — a birthday greeting tinted --warn reads as a
   problem, and a real problem then reads as one more category. */
.pill.is-neutral{ background: var(--surface-sunk); color: var(--ink-mid);
  border:1px solid var(--rule-strong); }

.days{ font-variant-numeric: tabular-nums; }
.days.is-warn{ color: var(--warn); font-weight:700; }
/* Weight alone cannot separate warn from crit: in greyscale a bold 19 and a bold
   41 are the same number. The rule under the critical figure is the form axis for
   this column, the way the dot is for the status column. */
.days.is-crit{ color: var(--crit); font-weight:700;
  text-decoration: underline; text-decoration-thickness:2px;
  text-underline-offset:3px; text-decoration-color: currentColor; }

/* The two actions that matter, revealed on hover — never a menu of nine. */
.row-actions{ visibility: hidden; white-space: nowrap; }
.case-row:hover .row-actions,
.case-row:focus-within .row-actions{ visibility: visible; }

.empty-state{ padding: var(--s-6); text-align:center; color: var(--ink-muted); }
.empty-state strong{ color: var(--ink); display:block; margin-block-end: var(--s-2); }

/* =================================================== 2. REVIEW QUEUE CARD
   Where Dan's name gets attached to an artefact, so it shows the truth: the
   artefact exactly as it will go out, and where it came from. */

.review-card{ background: var(--surface); border:1px solid var(--rule);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  margin-block-end: var(--s-4); overflow: hidden; }
.review-head{ display:flex; gap: var(--s-3); align-items:center;
  padding: var(--s-3) var(--s-4); border-block-end:1px solid var(--rule); }
.review-head .grow{ flex:1; }
.review-lang{ font-size: var(--t-12); font-weight:700; color: var(--ink-mid);
  border:1px solid var(--rule-strong); border-radius: var(--radius);
  padding: 1px var(--s-2); }
.review-artefact{ padding: var(--s-4); background: var(--surface-sunk);
  border-block-end:1px solid var(--rule); unicode-bidi: plaintext; }
.review-artefact .as-sent{ background: var(--surface); border:1px solid var(--rule);
  border-radius: var(--radius); padding: var(--s-4); font-size: var(--t-15); }
.provenance{ font-size: var(--t-12); color: var(--ink-muted);
  padding: var(--s-2) var(--s-4); display:flex; gap: var(--s-4); flex-wrap: wrap; }
.provenance .id{ font-variant-numeric: tabular-nums; }
.review-actions{ display:flex; gap: var(--s-2); padding: var(--s-3) var(--s-4); }

.btn{ font: inherit; font-size: var(--t-13); font-weight:700; cursor:pointer;
  border-radius: var(--radius); padding: var(--s-2) var(--s-4);
  border:1px solid var(--rule-strong); background: var(--surface); color: var(--ink); }
.btn-primary{ background: var(--primary); color: var(--primary-on); border-color: var(--primary); }
.btn-accent{ background: var(--accent-fill); color: var(--navy); border-color: var(--accent-fill); }
.btn-quiet{ background: transparent; border-color: transparent; color: var(--ink-mid); }
.btn:hover{ box-shadow: var(--shadow-1); }

/* ======================================================= 4. INQUIRY FORM
   A stranger in trouble, on a phone, at 23:00. One question per screen. */

.front{ font-size: var(--t-17); }
.front section{ padding-block: var(--s-8); }
.wrap{ max-inline-size: 65ch; margin-inline: auto; padding-inline: var(--s-4); }

.lang-picker{ display:flex; gap: var(--s-2); flex-wrap:wrap;
  padding: var(--s-3) 0; border-block-end:1px solid var(--rule); }
/* Each language written in its own script. Never flags — a flag is a country,
   not a language, and it gets that wrong for every one of these four. */
.lang-picker a{ font-size: var(--t-15); text-decoration:none; color: var(--ink-mid);
  padding: var(--s-1) var(--s-3); border-radius: var(--radius); }
.lang-picker a[aria-current="true"]{ background: var(--accent-fill); color: var(--navy); font-weight:700; }

.field{ margin-block-end: var(--s-5); }
.field label{ display:block; font-weight:700; margin-block-end: var(--s-2); }
.field .hint{ font-size: var(--t-13); color: var(--ink-muted); margin-block-end: var(--s-2); }
.field input, .field textarea, .field select{
  inline-size:100%; font: inherit; font-size: var(--t-17);
  padding: var(--s-3); border:1px solid var(--rule-strong);
  border-radius: var(--radius); background: var(--surface); color: var(--ink);
  unicode-bidi: plaintext;
}
.field input[dir="ltr"]{ unicode-bidi: isolate; }
.consent{ font-size: var(--t-13); color: var(--ink-mid); background: var(--surface-sunk);
  border-inline-start: 3px solid var(--accent-fill);
  padding: var(--s-3) var(--s-4); border-radius: var(--radius); }
.what-next{ font-size: var(--t-15); color: var(--ink-mid); }
.reference{ font-variant-numeric: tabular-nums; font-size: var(--t-26);
  font-family: var(--font-display); font-weight:900; }

/* ======================================================= 5. PETITION PAGE */

.petition-ask{ font-family: var(--font-display); font-weight:900;
  font-size: var(--t-34); line-height:1.15; text-wrap: balance; margin:0 0 var(--s-5); }
/* The signature count is the single gold element on the page. */
.sig-count{ font-family: var(--font-display); font-weight:900; font-size: var(--t-44);
  font-variant-numeric: tabular-nums; color: var(--accent);
  border-block-end: 6px solid var(--accent-fill); display:inline-block; line-height:1.05; }
.sig-label{ font-size: var(--t-15); color: var(--ink-muted); }
.sign-form{ display:flex; gap: var(--s-2); flex-wrap:wrap; margin-block: var(--s-5); }
.sign-form input{ flex:1 1 14rem; }

/* ============================================================== SHARED */

.h-page{ font-family: var(--font-display); font-weight:900; font-size: var(--t-26); margin:0; }
.muted{ color: var(--ink-muted); }
.stack > * + *{ margin-block-start: var(--s-4); }
.bar{ display:flex; align-items:center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-block-end:1px solid var(--rule);
  background: var(--surface); }
.bar .grow{ flex:1; }

/* Directional icons mirror; object icons do not. */
.icon-dir{ display:inline-block; }
[dir="rtl"] .icon-dir{ transform: scaleX(-1); }