/* Odarcon — site stylesheet. Tokens match the real screener's :root exactly
   (see CivisAI Screener v4.html) so the screener needs no color changes to
   fit this design — only the surrounding chrome (nav/footer/pilot banner)
   is new.

   RTL: every rule below already uses logical properties (inset-inline-*,
   border-block-*, margin-inline, padding-inline-start, etc.), and CSS Grid
   auto-flips explicit grid-template-columns tracks to match `dir` per
   spec — so this file needed no structural changes to support the Hebrew
   locale's `dir="rtl"`. Font stacks are unchanged (system-font fallbacks
   only, no third-party font request) since Segoe UI / Roboto / -apple-
   system all cover Hebrew glyphs already. */

:root {
  --ink: #16202b;
  --ink-soft: #3d4c5a;
  /* #6b7a89 was 4.12:1 on --bg — under AA's 4.5:1 for normal text. The screener's own :root
     (CivisAI Screener v4.html) already carries the fix, #5c6b7a (5.13:1 on --bg): this file had
     drifted out of the lockstep the top-of-file note promises. Matched here, not re-derived. */
  --muted: #5c6b7a;
  --line: #dfe6ec;
  --line-soft: #edf1f5;
  --bg: #f5f8fa;
  --card: #ffffff;
  --accent: #1c5d86;
  --accent-soft: #e8f1f7;
  --strong: #147150;
  --strong-soft: #e4f3ec;
  --pursue: #1c6b7d;
  --pursue-soft: #e3f0f3;
  --possible: #4a5b8c;
  --possible-soft: #eaedf7;
  --open: #97591a;
  --open-soft: #fbf0e2;
  /* --dead was #7a8794, which is 3.67:1 on white and 3.24:1 on --dead-soft — the pair the
     screener paints the "ruled out" verdict badge in, at 11.52px/700, which is not large text.
     Darkened by 27 on every channel (122,135,148 -> 95,108,121), so it is a pure step down the
     same ramp with the token's own +13/+13 channel spacing preserved: no hue shift, nothing
     restyled, 4.74:1 on --dead-soft and 5.37:1 on white. This file spends the pair itself on
     /sample/, where the "Ruled out" badge is 13.26px/600 — 3.24:1 before, 4.74:1 now. Kept in
     lockstep with the screener's own :root (see the note at the top of this file): the two are
     the same palette and must not drift. */
  --dead: #5f6c79;
  --dead-soft: #eef1f4;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(22, 32, 43, .05), 0 8px 24px rgba(22, 32, 43, .06);
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-scale: 1;
}

/* — accessibility: high contrast — */
html[data-contrast="true"] {
  --ink: #000000;
  --ink-soft: #000000;
  --muted: #1a1a1a;
  --line: #000000;
  --line-soft: #333333;
  --bg: #ffffff;
  --card: #ffffff;
  --accent: #0a3a56;
  --accent-soft: #dbe9f0;
}

/* — accessibility: text size — */
html { font-size: calc(17px * var(--font-scale)); }

/* — accessibility: underline links — */
html[data-underline="true"] a { text-decoration: underline !important; }

/* — accessibility: reduce motion — */
html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-serif); line-height: 1.25; margin: 0; font-weight: 600; letter-spacing: -.01em; }
a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); }
a:hover { color: color-mix(in srgb, var(--accent) 80%, black); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img { max-width: 100%; display: block; }

.odc-skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; background: #fff; color: var(--ink);
  padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0;
}
.odc-skip-link:focus { inset-inline-start: 16px; top: 10px; }

/* — pilot banner — */
.odc-pilot-banner {
  background: var(--open-soft);
  border-block-end: 1px solid var(--line);
  padding: 10px 24px;
  text-align: center;
  font: 14px/1.5 var(--font-sans);
  color: var(--ink-soft);
}
.odc-pilot-banner a { color: var(--open); font-weight: 600; }

/* — header / nav — */
.odc-header { background: var(--card); border-block-end: 1px solid var(--line); }
.odc-header-inner {
  max-width: 1120px; margin-inline: auto; padding: 16px 24px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.odc-logo {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 21px var(--font-serif); color: var(--ink); text-decoration: none;
}
/* 26px, not more, and the ceiling comes from the screener rather than from
   here: this header is 62px with the nav links as its tallest item and would
   take 28, but the screener wears the same lockup in a 55px masthead that
   starts growing at 27. One number, both headers unchanged. `width: auto` off
   the intrinsic 99x78 keeps the aspect ratio exact at any text-size setting.

   The mark is not mirrored under `dir="rtl"` — the flex row reverses, putting
   it on the right of the wordmark, but the artwork itself is a logo and logos
   do not flip. Worth knowing that this leaves the bird facing away from the
   wordmark in Hebrew; that is a brand call, not a CSS one. */
.odc-logo-mark { display: block; height: 26px; width: auto; }
.odc-nav-links { display: flex; gap: 22px; flex: 1; font: 14px var(--font-sans); flex-wrap: wrap; }
.odc-nav-links a { color: var(--ink-soft); text-decoration: none; }
.odc-nav-links a:hover { color: var(--accent); }
.odc-lang-switch { display: flex; gap: 6px; font: 13px var(--font-sans); align-items: center; }
.odc-lang-switch .active { color: var(--ink); font-weight: 600; padding: 3px 7px; border-radius: 6px; background: var(--accent-soft); }
.odc-lang-switch .disabled { color: var(--muted); padding: 3px 7px; }
.odc-lang-switch a.odc-lang-link { color: var(--ink-soft); padding: 3px 7px; border-radius: 6px; text-decoration: none; }
.odc-lang-switch a.odc-lang-link:hover { background: var(--line-soft); color: var(--ink); }
.odc-free-badge {
  font-size: .78rem; color: var(--strong); background: var(--strong-soft);
  padding: 4px 10px; border-radius: 99px; font-weight: 600; white-space: nowrap;
}

/* — buttons — */
.odc-btn {
  display: inline-block; font: 600 15px var(--font-sans); text-decoration: none;
  padding: 12px 24px; border-radius: 8px; border: none; cursor: pointer;
}
.odc-btn-primary { background: var(--accent); color: #fff; }
.odc-btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, black); color: #fff; }
.odc-btn-secondary { border: 1px solid var(--line); color: var(--ink); background: var(--card); }
.odc-btn-secondary:hover { background: var(--line-soft); color: var(--ink); }

/* — cards / kicker chips — */
.odc-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.odc-chip { display: inline-block; font: 600 .78rem var(--font-sans); padding: 5px 12px; border-radius: 99px; }
.odc-chip-accent { background: var(--accent-soft); color: var(--accent); }
.odc-chip-open { background: #fbeee0; color: var(--open); }

/* — footer — */
.odc-footer { background: var(--ink); color: #dbe3e9; }
.odc-footer-grid {
  max-width: 1120px; margin-inline: auto; padding: 48px 24px 32px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px;
}
.odc-footer-grid h3, .odc-footer-brand { color: #fff; font-family: var(--font-serif); }
.odc-footer-brand { font: 700 20px var(--font-serif); margin: 0 0 10px; }
.odc-footer-grid p { color: #a9b6c0; }
.odc-footer-col-title { font: 600 13px var(--font-sans); color: #fff; margin: 0 0 10px; }
.odc-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font: 14px var(--font-sans); }
.odc-footer-col a { color: #a9b6c0; text-decoration: none; }
.odc-footer-col a:hover { color: #fff; }
.odc-footer-bottom {
  max-width: 1120px; margin-inline: auto; padding: 20px 24px 40px;
  border-block-start: 1px solid #2c3a47;
}
.odc-footer-bottom p { font: 13px/1.6 var(--font-sans); color: #8b98a3; margin: 0 0 10px; }
.odc-footer-bottom a { color: #a9b6c0; }

/* — accessibility widget — */
.odc-a11y-wrap { position: fixed; inset-inline-end: 20px; inset-block-end: 20px; z-index: 150; }
.odc-a11y-fab {
  width: 52px; height: 52px; border-radius: 99px; background: var(--ink); color: #fff;
  border: none; font: 16px var(--font-sans); cursor: pointer; box-shadow: var(--shadow);
}
.odc-a11y-panel {
  position: absolute; inset-block-end: 60px; inset-inline-end: 0; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; width: 230px; font: 14px var(--font-sans); color: var(--ink); display: none;
}
.odc-a11y-panel.open { display: block; }
.odc-a11y-panel .odc-a11y-title { font-weight: 600; margin-block-end: 10px; }
.odc-a11y-row { display: flex; justify-content: space-between; align-items: center; margin-block-end: 10px; cursor: default; }
.odc-a11y-row:last-child { margin-block-end: 0; }
.odc-a11y-row label { cursor: pointer; }
.odc-a11y-steps { display: flex; gap: 6px; }
.odc-a11y-steps button {
  width: 32px; height: 32px; border: 1px solid var(--line); background: var(--bg);
  border-radius: 6px; cursor: pointer; font: 14px var(--font-sans); color: var(--ink);
}

/* On desktop the fixed fab sits in the page's own right margin — the content columns
   (odc-main-narrow etc.) are centered with room to spare, so nothing is ever under it. On a
   phone there is no such margin: content runs edge to edge, and whatever card or paragraph is
   scrolled into the bottom-right corner sits directly behind the button — confirmed live,
   45px/16 body text got a line clipped by it mid-paragraph, not just at a page's end. Shrinking
   it is a real fix, not full one: it still overlaps whatever is under it, just less of it. 44px
   stays at the standard minimum touch target while covering ~28% less area than 52px.
   `hover: none` targets touch devices directly; the width clause is the fallback for a narrow
   *viewport* on a device that still reports hover (a resized desktop window, most testing). */
@media (hover: none) and (pointer: coarse), (max-width: 560px) {
  .odc-a11y-wrap { inset-inline-end: 14px; inset-block-end: 14px; }
  .odc-a11y-fab { width: 44px; height: 44px; font-size: 14px; }
  .odc-a11y-panel { inset-block-end: 52px; }
}

/* — generic content helpers used across pages — */
.odc-main-narrow { max-width: 680px; margin-inline: auto; padding: 44px 24px 72px; }
.odc-main-medium { max-width: 720px; margin-inline: auto; padding: 44px 24px 72px; }
.odc-main-wide { max-width: 1120px; margin-inline: auto; padding: 44px 24px 72px; }
.odc-h2-spaced { font: 600 1.1rem var(--font-serif); margin: 26px 0 8px; }
.odc-body-text { font: 15.5px/1.65 var(--font-sans); color: var(--ink-soft); margin: 0 0 14px; }

details.odc-faq-item { background: var(--card); border-block-end: 1px solid var(--line); }
details.odc-faq-item:last-child { border-block-end: none; }
details.odc-faq-item summary {
  padding: 18px 20px; font: 600 16px var(--font-sans); color: var(--ink); cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; gap: 12px;
}
details.odc-faq-item summary::-webkit-details-marker { display: none; }
details.odc-faq-item summary::after { content: "+"; color: var(--muted); font-weight: 400; }
details.odc-faq-item[open] summary::after { content: "\2212"; }
details.odc-faq-item .odc-faq-a { margin: 0 20px 18px; font: 15px/1.65 var(--font-sans); color: var(--ink-soft); max-width: 64ch; }

/* — responsive layout —
   The page grids used to live in inline `style` attributes in build.mjs, which
   cannot carry a media query: a 3-up card row stayed 3-up at 390px and pushed
   the document sideways. They are classes now so the breakpoints below can
   reach them. Grid auto-flips for `dir` (see the RTL note at the top), so
   these need no RTL variants.

   Two stops: 860px collapses the side-by-side page grids to one column, and
   560px collapses the footer and stacks the header. */
.odc-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 48px; align-items: center; }
.odc-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; }
.odc-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.odc-grid-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.odc-grid-cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

@media (max-width: 860px) {
  .odc-hero,
  .odc-grid-2,
  .odc-grid-3,
  .odc-grid-cards,
  .odc-grid-cards-2 { grid-template-columns: minmax(0, 1fr); }
  .odc-hero { gap: 32px; }
  .odc-grid-2 { gap: 28px; }
  /* The hero image is decorative; below the fold on a phone it is just a wall
     of stripes between the CTA and the next section. */
  .odc-hero-media { display: none; }
  .odc-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}

@media (max-width: 560px) {
  .odc-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 36px 20px 24px; }
  .odc-header-inner { gap: 12px 18px; padding: 12px 20px; }
  /* The nav links drop to their own row below (order: 3), so on phones the
     logo's row-mates are just the language switcher at 22px — the 29px of
     slack the desktop row had is not there. 24px is the height the wordmark
     alone used to occupy, so this row keeps its exact size. */
  .odc-logo-mark { height: 24px; }
  /* The free/no-uploads badge is the first thing to drop: the nav links and
     the language switcher both have to stay reachable. */
  .odc-free-badge { display: none; }
  /* 18px, not 16: the touch-target overlay below grows "FAQ" (26.8px) and "Blog" (29px) to
     44px wide, which is 8.6px and 7.5px of overhang — 16.1px of the 16px gap, so the two
     overlays met by 0.1px and the later link in source order won the tap. Two more pixels of
     gap is free here (the row is 174.5px inside a 280px column, still one line). */
  .odc-nav-links { gap: 18px; flex-basis: 100%; order: 3; }
  /* The banner is 84px on a 320px screen — three lines of 14px/1.5 plus 20px of block
     padding — and it is the first thing on the page, so on the screener it is 84px of the
     fold spent before the masthead even starts. 13px/1.45 with 6px of block padding and
     14px gutters takes it to 50.7px on every phone: the extra width plus the smaller type
     fit the sentence in two lines instead of three on a 320px screen, and it was already
     two on a 390px one (63px). Nothing is hidden and nothing is clipped — same sentence,
     same link, same colour pair (#3d4c5a on #fbf0e2, 8.4:1), and 13px is the size this
     file already sets the footer's legal line in, so it is not a new step on the scale.
     Above 560px the banner is untouched at 42px. */
  .odc-pilot-banner { padding: 6px 14px; font-size: 13px; line-height: 1.45; }
  h1 { font-size: 2rem !important; line-height: 1.25 !important; }
}

/* — touch targets in the chrome —
   Measured at scroll 0 on an iPhone 13, an iPhone SE and a Pixel 7, identical on all three:
   the logo 90.6x24, the masthead nav links x29, the language link 31.3x22, every footer
   column link x29 (but see below), and the footer's mailto 113.6x16. Every one is under
   44x44, and "FAQ" at 26.8px wide is under 24x24 as well.

   The logo has since become a mark + wordmark lockup, which makes it wider and taller than
   the 90.6x24 measured above — 24px tall on phones by design (see .odc-logo-mark in the
   560px block), so it still needs the overlay's block axis and still gets it. The device
   numbers above are left as they were measured rather than re-stated from a desktop
   browser; only the logo's row has changed.

   Why the obvious answer — more `padding-block` — is the wrong tool here, in three parts:

   • In the masthead these links are flex items. Block padding on a flex item grows the flex
     line, and the flex line is the masthead's height. The screener wears this same masthead,
     and the masthead is exactly why its first form field sits below the fold on a 320px
     screen. Buying 20px of tap target with 20px of fold is a trade that loses.

   • In the footer column the padding does not grow the layout — the link is an inline box
     inside a grid `li`, so the line box, not the padding, sets the row height — but it does
     overflow into the 8px row gap. The rows are 17px of text on a 25px pitch, so the 6px of
     padding that used to be here made a 29px box on a 25px pitch: every link overlapped the
     next by 4px and, being earlier in source order, lost the overlap. Painted 29, hit-tested
     25. That is the failure mode this block was supposed to fix, reintroduced by the fix.

   • And it could not reach the language links at all. `.odc-lang-switch a.odc-lang-link`
     (0-2-1) carries `padding: 3px 7px` for its hover pill and beat `.odc-lang-switch a`
     (0-1-1) outright, so EN/HE stayed 31.3x22 while the rule above claimed to have fixed
     them. Nothing in this file styles these links' ::after, so the overlay has no such fight.

   So: an inert `::after` overlay. It is absolutely positioned, contributes nothing to layout
   by construction, and — the part that matters — each of its four edges can be aimed
   independently. That is what lets three stacked masthead rows tile the band between the
   banner and the page without ever overlapping each other, which a symmetric 44px box cannot
   do: two adjacent links whose 44px boxes overlap are worse than two small ones, because the
   later one silently wins the tap.

   `min(0px, (100% - 44px) / 2)` is "grow to 44px, centred, but only if the text is narrower
   than that" — percentages on an absolutely positioned box resolve against its containing
   block, which is the link's own padding box, so 0 once the link is already big enough. It is
   logical rather than physical, so it mirrors under `dir="rtl"` with no second rule.

   Both media conditions, because neither alone is enough: a phone is coarse-pointer at any
   width, and a narrow window is narrow even where the browser reports a fine pointer. */
@media (hover: none) and (pointer: coarse), (max-width: 560px) {
  a.odc-logo,
  .odc-nav-links a,
  .odc-lang-switch a.odc-lang-link,
  .odc-footer-col a,
  .odc-footer-bottom a { position: relative; }

  a.odc-logo::after,
  .odc-nav-links a::after,
  .odc-lang-switch a.odc-lang-link::after,
  .odc-footer-col a::after,
  .odc-footer-bottom a::after {
    content: "";
    position: absolute;
    inset-inline: min(0px, (100% - 44px) / 2);
    inset-block: min(0px, (100% - 44px) / 2);
  }

  /* The footer columns are the one place 44px cannot be had. The rows are on a 25px pitch
     (17px line box, 8px grid gap) and the pitch is the ceiling: a 44px box needs a 44px
     pitch, which is +19px per row — +152px of footer on a phone, where all four columns
     stack. So the overlay is capped at the pitch: 25px tall, exactly tiling, never stealing
     from a neighbour, and 44px wide, which is the half of the target that was free. That
     clears WCAG 2.2 AA (2.5.8, 24x24) but not 2.5.5's 44x44 — the remaining 19px is a
     footer-height decision, not a CSS one, and is reported rather than taken here. */
  .odc-footer-col a { padding-block: 0; }
  .odc-footer-col a::after { inset-block: -4px; }

  /* The one place the old `padding-block: 6px` stays. On the nav row it is already paid for —
     the flex line has been 29px tall since it was added — and taking it back would shorten the
     header by 12px, which is a layout change this pass is not making. It is harmless where it
     is (nothing is stacked against the nav row to overlap) and the overlay simply starts from
     the 29px box instead of a 17px one. It is removed from the footer column above, where it
     was actively causing the overlap, and from the language switcher, where a specificity loss
     meant it never applied at all. */
  .odc-nav-links a { padding-block: 6px; }
}

/* The header wraps to two rows below 560px — logo and language switcher on the first, the
   nav links on the second — so the three overlays have to tile a band rather than each take
   44px around its own centre. Measured on an iPhone SE (320) and an iPhone 13 (390), which
   differ only in where the pilot banner ends: banner bottom 84/63, header 84-174 / 63-153
   with 12px of block padding, logo 96-120 / 75-99, language links 97-119 / 76-98, nav links
   132-161 / 111-140, page content at 174/153. The logo and the language switcher never
   overlap because they are at opposite ends of the same row; the nav row below them is the
   only real boundary, and all three overlays stop at it or start from it. */
@media (max-width: 560px) {
  a.odc-logo::after { inset-block: -12px -8px; }                    /* 84-128 / 63-107, 44px */
  .odc-lang-switch a.odc-lang-link::after { inset-block: -11px; }   /* 86-130 / 65-109, 44px */
  .odc-nav-links a::after { inset-block: -2px -13px; }              /* 130-174 / 109-153, 44px */
  /* Which way a contest resolves, if the two rows ever share one. This header keeps the nav
     on a row of its own below 560px, so today they never meet — but the screener's masthead
     wears the same markup with a different wrap, and there the Hebrew layout puts the language
     link 12px from the last nav link, 12px where the two overlays want 9.6 + 6.35. Whichever
     paints later takes the overlap, and by source order that is the language link, so a tap a
     few pixels past the last nav link switched locale and restarted the flow. Ranking the nav
     above it gives the contested strip to the nav link and costs the language link 4px of an
     expansion it never had before. Stated here as well as there so the two files stay one
     rule, and so a future re-wrap of this header cannot reintroduce it silently. */
  .odc-nav-links a { z-index: 1; }
}

/* — hero mark —
   Was a hatched box captioned "[ archival image placeholder ]", which shipped
   to production looking exactly like an unfinished page. This is a real
   decorative element until art direction supplies a photograph; the alt text
   still describes what belongs here. */
.odc-hero-media {
  border: 1px solid var(--line); border-radius: var(--radius);
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--card);
}
.odc-hero-media svg { width: 100%; height: 100%; display: block; }

/* — the lockup on the narrowest screens —
   A mark plus a wordmark is wider than the wordmark was alone: 130.1px against
   93.6px at 320px. Height was the constraint that set 26px; here it is width,
   and it is spent somewhere worse. The screener's masthead is a wrapping flex
   line, and those 36 extra pixels are exactly enough to stop the logo and the
   tagline sharing a row — an extra row of masthead, measured at 29.7px, in
   front of the first question on the smallest screen. That is the fold-for-
   chrome trade the touch-target note above already refused once.

   So below 480px the mark carries the brand by itself, which is narrower than
   the wordmark ever was and gives the row back. The wordmark is clipped rather
   than `display: none` on purpose: the <img> is alt="" (the text beside it is
   the accessible name), so removing the text from the accessibility tree would
   leave the link with no name at all. Clipped, it is still read aloud. */
@media (max-width: 480px) {
  .odc-logo { gap: 0; }
  .odc-logo > span {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}