/* שקוף — site styles.
 *
 * Dark-first, sharp-cornered, mono-labelled. Hebrew never renders in a
 * monospace face (they have no Hebrew glyphs), so mono is reserved for Latin
 * labels, code and numerals; Hebrew runs in a light-weight sans at tight
 * tracking, which is what carries the same feel in RTL.
 *
 * Light mode is a full sibling rather than an afterthought — shipping an
 * accessibility tool whose own site ignores a user's system preference would
 * be a poor look.
 */

/* ---- Fonts ------------------------------------------------------------
 * Self-hosted, because the CSP is font-src 'self' and the whole product
 * position is "no external requests" — loading a webfont from a CDN would put
 * a third party in the request path of a page that exists to say it doesn't.
 *
 * Heebo (Oded Ezer) for Hebrew: a neutral grotesque in the same lineage as the
 * face the reference design uses, with proper Hebrew drawing rather than a
 * Latin font limping through Hebrew glyphs.
 * JetBrains Mono for Latin labels, numerals and code.
 * Both OFL — licences ship alongside in /fonts.
 *
 * Variable fonts: one file covers 300–800, so weights cost nothing extra.
 */
@font-face {
  font-family: 'Heebo';
  src: url('/fonts/heebo-hebrew.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  src: url('/fonts/heebo-latin.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jbmono-latin.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg:        #0b0b0c;
  --bg-raised: #121214;
  --bg-sunken: #08080a;
  --line:      #26262b;
  --line-soft: #1a1a1e;
  --fg:        #f4f4f5;   /* 18.1:1 on --bg */
  --fg-dim:    #a8a8b0;   /*  8.6:1 on --bg */
  --fg-faint:  #8c8c96;   /*  6.0:1 — measured; #77777f read 4.43:1 and failed */
  --invert-bg: #f4f4f5;
  --invert-fg: #0b0b0c;
  --accent:    #6ea8ff;   /*  8.0:1 on --bg */
  --warn-line: #d4a13c;
  --ok:        #5ed3a0;
  --no:        #ff8f86;

  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;
  --sans: "Heebo", "Segoe UI", "Noto Sans Hebrew", Arial, sans-serif;

  --wide:    1240px;
  --measure: 74ch;
  --pad:     clamp(20px, 4vw, 40px);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:        #ffffff;
    --bg-raised: #fafafa;
    --bg-sunken: #f4f4f5;
    --line:      #e0e0e4;
    --line-soft: #ededf0;
    --fg:        #0d0d0f;
    --fg-dim:    #52525b;
    --fg-faint:  #71717a;
    --invert-bg: #0d0d0f;
    --invert-fg: #ffffff;
    --accent:    #1c50c8;   /* 7.0:1 on white */
    --warn-line: #8a5c00;
    --ok:        #106b45;
    --no:        #a01a12;
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
}

/* ---- Skip link -------------------------------------------------------- */
.skip {
  position: absolute; right: 0; top: -80px; z-index: 60;
  background: var(--invert-bg); color: var(--invert-fg);
  padding: 14px 24px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  transition: top .15s ease;
}
.skip:focus { top: 0; }

/* ---- Base ------------------------------------------------------------- */
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 4px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Heebo runs a touch heavier than the reference grotesque, so the display
   sizes sit at 300 to keep the airy feel; smaller headings go back to 600
   where thin strokes would start to hurt legibility. */
h1, h2, h3 { letter-spacing: -0.035em; line-height: 1.1; margin: 0 0 .45em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.5rem); font-weight: 300; }
h2 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); font-weight: 300; }
h3 { font-size: 1.06rem; font-weight: 600; letter-spacing: -0.012em; }
p  { margin: 0 0 1.15em; text-wrap: pretty; }
strong { font-weight: 700; }

.dim   { color: var(--fg-dim); }
.lead  { font-size: clamp(1.02rem, .97rem + .3vw, 1.2rem); color: var(--fg-dim); max-width: 52ch; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* ---- Layout ----------------------------------------------------------- */
.wrap      { width: min(100% - (var(--pad) * 2), var(--wide)); margin-inline: auto; }
.wrap-text { width: min(100% - (var(--pad) * 2), var(--measure)); margin-inline: auto; }
section    { padding-block: clamp(56px, 8vw, 116px); }
.rule      { border-top: 1px solid var(--line); }

/* ---- Mono label chip -------------------------------------------------- */
.label {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line);
  padding: 5px 11px; margin-bottom: 26px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--fg-dim); direction: ltr;
}
.label::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: none; }

/* ---- Header ----------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; background: var(--bg); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 62px; }
/* The bar tracks the width of the content column beneath it. Without this the
   header spans the full 1240px while a prose page sits at ~740px, leaving the
   brand and the button pinned to far edges with nothing between them and no
   visual relationship to the page. */
.site-header .bar.narrow { width: min(100% - (var(--pad) * 2), var(--measure)); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 22px; height: 22px; flex: none; }
.brand b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border: 1px solid transparent;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; direction: ltr; white-space: nowrap;
}
.btn-solid { background: var(--invert-bg); color: var(--invert-fg); border-color: var(--invert-bg); }
.btn-solid:hover { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn-line { border-color: var(--line); color: var(--fg); background: transparent; }
.btn-line:hover { border-color: var(--fg); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 11.5px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.center .btn-row { justify-content: center; }
/* Hebrew inside a button needs the sans face and RTL flow. */
.btn-he { font-family: var(--sans); font-size: 15px; letter-spacing: 0; text-transform: none; direction: rtl; }

/* ---- Hero ------------------------------------------------------------- */
.hero { padding-block: clamp(64px, 11vw, 150px) clamp(48px, 7vw, 96px); }
.hero h1 { max-width: 20ch; margin-inline: auto; }

/* ---- Panel mock ------------------------------------------------------- */
.mock { border: 1px solid var(--line); background: var(--bg-raised); max-width: 420px; width: 100%; }
.mock-bar {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); padding: 10px 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-faint); direction: ltr;
}
.mock-body { padding: 16px; }
.mock-group {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-faint); margin: 16px 0 8px; unicode-bidi: isolate;
}
.mock-group:first-child { margin-top: 0; }
.mock-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line-soft); padding: 9px 12px; margin-bottom: 7px; font-size: 14px;
}
.mock-row.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.mock-sw { width: 34px; height: 19px; background: var(--line); position: relative; flex: none; }
.mock-row.on .mock-sw { background: var(--accent); }
/* The knob is light in both states. A dark knob disappeared entirely against
   the dark "off" track. */
.mock-sw::after { content:""; position:absolute; top:2px; right:2px; width:15px; height:15px; background: var(--fg); }
.mock-row.on .mock-sw::after { transform: translateX(-15px); background: var(--bg); }
.mock-note { border-top: 1px solid var(--line); padding: 11px 14px; font-size: 11.5px; line-height: 1.5; color: var(--fg-faint); }

/* ---- Grid / cells ----------------------------------------------------- */
.cells { display: grid; border: 1px solid var(--line); }
@media (min-width: 700px)  { .cells-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cells-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .cells-2 { grid-template-columns: repeat(2, 1fr); } }
.cell { padding: clamp(22px, 2.6vw, 34px); border-block-end: 1px solid var(--line); }
.cell:last-child { border-block-end: 0; }
@media (min-width: 700px) {
  .cell { border-inline-start: 1px solid var(--line); }
  .cells-3 > .cell:nth-child(2n+1) { border-inline-start: 0; }
  .cells-2 > .cell:nth-child(2n+1) { border-inline-start: 0; }
}
@media (min-width: 1000px) {
  .cells-3 > .cell { border-inline-start: 1px solid var(--line); }
  .cells-3 > .cell:nth-child(3n+1) { border-inline-start: 0; }
}
/* Latin labels inside RTL blocks need both halves solved:
   - `direction: ltr` so a multi-token label keeps its order. Under RTL, the
     neutral "/" in "01 / TEXT" flips the runs and it renders as "TEXT / 01".
   - `text-align: right` to put it back on the start edge beside the Hebrew
     heading it belongs to, which `direction: ltr` alone would abandon.
   The site is Hebrew-only, so the physical `right` here is unambiguous. */
.cell-num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--fg-faint); display: block; margin-bottom: 14px;
  direction: ltr; text-align: right;
}
.cell h3 { margin-bottom: .5em; }
.cell ul { margin: 0; padding-inline-start: 18px; color: var(--fg-dim); font-size: 15px; }
.cell li { margin: 4px 0; }
.cell p:last-child, .cell ul:last-child { margin-bottom: 0; }

/* ---- Notice ----------------------------------------------------------- */
.notice { border: 1px solid var(--warn-line); border-inline-start-width: 3px; padding: clamp(24px, 3vw, 36px); background: var(--bg-raised); }
.notice h2 { margin-top: 0; }
.notice p:last-child { margin-bottom: 0; }

.callout { border: 1px solid var(--line); border-inline-start: 3px solid var(--accent); background: var(--bg-raised); padding: 16px 20px; margin-bottom: 22px; font-size: 15px; color: var(--fg-dim); }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--fg); }

/* ---- Table ------------------------------------------------------------ */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: start; padding: 14px 18px; border-block-end: 1px solid var(--line-soft); vertical-align: top; }
thead th {
  background: var(--bg-raised); font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint);
  font-weight: 500; white-space: nowrap; unicode-bidi: isolate; text-align: start;
}
tbody tr:last-child td { border-block-end: 0; }
td.v { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; direction: ltr; }
td.no  { color: var(--no);  font-weight: 700; white-space: nowrap; }
td.yes { color: var(--ok);  font-weight: 700; white-space: nowrap; }

/* ---- Code ------------------------------------------------------------- */
.code { position: relative; border: 1px solid var(--line); background: var(--bg-sunken); margin-bottom: 20px; }
.code-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--line); padding: 8px 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-faint); direction: ltr;
}
.code pre {
  margin: 0; padding: 18px; overflow-x: auto;
  direction: ltr; text-align: left; font-size: 13px; line-height: 1.7;
  font-family: var(--mono); color: var(--fg);
}
.code pre:focus-visible { outline-offset: -2px; }
/* The AI prompt is Hebrew prose with LTR code lines embedded in it.
   `unicode-bidi: plaintext` gives every line its own base direction from its
   first strong character, so Hebrew lines stay RTL and the code lines render
   left-to-right instead of having their brackets flipped to the wrong end.
   Copying is unaffected either way — innerText reads source order, not visual
   order — but a snippet that *looks* mangled will not be trusted. */
.code.rtl pre {
  direction: rtl; text-align: right; unicode-bidi: plaintext;
  font-family: var(--sans); font-size: 14.5px; line-height: 1.75;
}
/* Code embedded inside the Hebrew prompt. `unicode-bidi: plaintext` alone is
   not enough: a line beginning with a neutral character such as "<" still gets
   its brackets reordered. An explicit dir="ltr" block is a hard bidi boundary,
   so the snippet renders exactly as it will be pasted. Copying is unaffected —
   innerText reads source order — but a snippet that looks mangled on screen
   will not be trusted, and this one is the whole point of the page. */
.code.rtl .ltr {
  display: block; direction: ltr; text-align: left; unicode-bidi: isolate;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  border-inline-start: 2px solid var(--line); padding-inline-start: 14px;
  margin: 10px 0 10px 0; color: var(--fg-dim);
}
:not(pre) > code {
  font-family: var(--mono); font-size: .85em; direction: ltr; display: inline-block;
  background: var(--bg-sunken); border: 1px solid var(--line); padding: 0 6px;
}
.copy-btn {
  flex: none; min-height: 28px; padding: 0 12px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--fg-dim);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
}
.copy-btn:hover { border-color: var(--fg); color: var(--fg); }
.copy-btn[data-copied="true"] { border-color: var(--ok); color: var(--ok); }

/* ---- Tabs ------------------------------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-bottom: 0; }
.tab {
  min-height: 46px; padding: 0 18px; cursor: pointer;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-inline-end: 1px solid var(--line);
  /* Inactive tabs are still navigation, so they get the brighter dim tone
     rather than the faint one. */
  color: var(--fg-dim); font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; direction: ltr;
}
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--fg); background: var(--bg-raised); border-bottom-color: transparent; }
.tabpanel { border: 1px solid var(--line); border-top: 0; padding: clamp(22px, 3vw, 34px); }
.tabpanel:focus-visible { outline-offset: -3px; }

/* ---- Steps ------------------------------------------------------------ */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; }
.steps > li { counter-increment: s; border-top: 1px solid var(--line); padding: 26px 0; display: grid; gap: 4px 20px; }
.steps > li:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 640px) { .steps > li { grid-template-columns: 52px 1fr; } }
.steps > li::before {
  content: "0" counter(s);
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  color: var(--fg-faint); direction: ltr; padding-top: 4px;
}
.steps h3 { margin-bottom: .3em; }
.steps p:last-child { margin-bottom: 0; }
.steps .code { margin-top: 14px; }

/* ---- Details ---------------------------------------------------------- */
details { border: 1px solid var(--line); margin-bottom: 12px; background: var(--bg-raised); }
summary { cursor: pointer; padding: 16px 20px; font-weight: 600; font-size: 15px; }
summary::marker { color: var(--fg-faint); }
details[open] summary { border-bottom: 1px solid var(--line); }
.details-body { padding: 18px 20px; color: var(--fg-dim); font-size: 15px; }
.details-body p:last-child, .details-body .code:last-child { margin-bottom: 0; }

/* ---- Disclosure ------------------------------------------------------- */
.disclosure { border: 1px solid var(--line); padding: clamp(24px, 3vw, 40px); background: var(--bg-raised); }
.disclosure h2 { margin-top: 0; }
.disclosure p:last-child { margin-bottom: 0; }

/* ---- Unfilled placeholders — must stay conspicuous -------------------- */
.todo {
  background: #4a1010; color: #ffc9c9; border: 1px dashed #ff6b6b;
  padding: 2px 9px; font-weight: 700; font-size: .93em; display: inline-block;
}
@media (prefers-color-scheme: light) { .todo { background: #ffecec; color: #7a0000; border-color: #c00000; } }

/* ---- Footer ----------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 44px 64px; color: var(--fg-faint); font-size: 14px; }
.site-footer .foot-links { display: flex; gap: 22px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 22px; }
.site-footer .foot-links a { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--fg-dim); direction: ltr; }
.site-footer .foot-links a:hover { color: var(--fg); }
.site-footer p { max-width: 78ch; line-height: 1.65; }
.site-footer p:last-child { margin-bottom: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }