/**
 * The home page's own design system - warm-neutral paper, one blue hue ramp
 * across the category panels, Rubik for headings over Noto Sans Hebrew for
 * body copy. Deliberately NOT part of src/style.css: every other page on the
 * site keeps the green portal look, and mixing the two palettes in one file
 * would make either impossible to retune. index.html loads this INSTEAD of
 * style.css, not in addition to it.
 *
 * Three variants off ONE set of tokens, switched by the same data-theme
 * attribute (and the same localStorage key) the rest of the site already
 * uses, so a visitor's choice survives clicking into an app:
 *
 *   (none)  follow prefers-color-scheme
 *   clouds  יום       - the light default
 *   fashion לילה      - hand-tuned dark, not a blind lightness inversion
 *   zebra   נגישות    - the same layout with every UI chroma multiplied by 0
 *
 * That last one is why nearly every color here is written as
 * `oklch(L calc(C * var(--chroma)) H)`: setting --chroma to 0 greys the whole
 * interface in one line while keeping lightness - and therefore every
 * contrast ratio - exactly where it was. The per-app icon colors are the one
 * deliberate exception (they stay vivid, so color is a second cue and never
 * the only one).
 *
 * RTL: `direction` is set in CSS as well as via the dir attribute, and every
 * edge-sensitive rule uses logical properties. Both on purpose - see the
 * comment on `html, body` below.
 */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&family=Noto+Sans+Hebrew:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------- tokens */

:root {
  --chroma: 1;

  --paper: oklch(0.967 calc(0.013 * var(--chroma)) 78);
  --card: oklch(1 0 0);
  --text: oklch(0.26 calc(0.018 * var(--chroma)) 55);
  --muted: oklch(0.46 calc(0.018 * var(--chroma)) 215);
  --border: oklch(0.895 calc(0.018 * var(--chroma)) 195);
  --border-strong: oklch(0.82 calc(0.02 * var(--chroma)) 195);
  --band: oklch(0.235 calc(0.02 * var(--chroma)) 215);
  --band-text: oklch(0.94 calc(0.012 * var(--chroma)) 215);
  --band-muted: oklch(0.76 calc(0.016 * var(--chroma)) 215);
  --band-card: oklch(0.295 calc(0.022 * var(--chroma)) 215);
  --link: oklch(0.45 calc(0.13 * var(--chroma)) 250);

  /* Two layers, both very soft: a wide ambient one and a tight contact one.
     A single shadow at this radius reads as a smudge on warm paper. */
  --shadow: 0 1px 2px oklch(0.26 0.02 215 / 0.06), 0 8px 24px oklch(0.26 0.02 215 / 0.07);
  --shadow-lift: 0 2px 4px oklch(0.26 0.02 215 / 0.08), 0 16px 34px oklch(0.26 0.02 215 / 0.13);

  --radius-panel: 22px;
  --radius-card: 16px;
  --radius-chip: 999px;

  --font-head: 'Rubik', system-ui, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Noto Sans Hebrew', 'Rubik', system-ui, 'Segoe UI', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --maxw: 1180px;
  /* The density the accessibility toolbar exposes as מרווח/צפוף - the same
     knob the card grid's own min column width rides on. */
  --gap-card: 14px;
  --col-card: 310px;
  --pad-panel: 26px;
  --size-secondary: 12.5px;

  --focus: oklch(0.45 calc(0.16 * var(--chroma)) 250);
  --motion: 0.18s;
}

/* Dark, hand-tuned. The bands that are ALREADY dark in the light variant
   (trust band, phone bezel, footer) do not get inverted here - blindly
   flipping their lightness turns them into near-white slabs that fight the
   page instead of anchoring it. They go DARKER, not lighter. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clouds"]):not([data-theme="zebra"]) { color-scheme: dark; }
  :root:not([data-theme="clouds"]):not([data-theme="zebra"]) {
    --paper: oklch(0.158 calc(0.013 * var(--chroma)) 195);
    --card: oklch(0.205 calc(0.008 * var(--chroma)) 245);
    --text: oklch(0.9 calc(0.018 * var(--chroma)) 215);
    --muted: oklch(0.68 calc(0.018 * var(--chroma)) 215);
    --border: oklch(0.3 calc(0.014 * var(--chroma)) 235);
    --border-strong: oklch(0.4 calc(0.018 * var(--chroma)) 235);
    --band: oklch(0.112 calc(0.014 * var(--chroma)) 245);
    --band-text: oklch(0.9 calc(0.014 * var(--chroma)) 215);
    --band-muted: oklch(0.7 calc(0.016 * var(--chroma)) 215);
    --band-card: oklch(0.165 calc(0.016 * var(--chroma)) 245);
    --link: oklch(0.78 calc(0.12 * var(--chroma)) 245);
    --shadow: 0 1px 2px oklch(0 0 0 / 0.4), 0 8px 24px oklch(0 0 0 / 0.34);
    --shadow-lift: 0 2px 4px oklch(0 0 0 / 0.46), 0 16px 34px oklch(0 0 0 / 0.5);
    --focus: oklch(0.8 calc(0.15 * var(--chroma)) 245);
  }
}

[data-theme="fashion"] {
  color-scheme: dark;
  --paper: oklch(0.158 calc(0.013 * var(--chroma)) 195);
  --card: oklch(0.205 calc(0.008 * var(--chroma)) 245);
  --text: oklch(0.9 calc(0.018 * var(--chroma)) 215);
  --muted: oklch(0.68 calc(0.018 * var(--chroma)) 215);
  --border: oklch(0.3 calc(0.014 * var(--chroma)) 235);
  --border-strong: oklch(0.4 calc(0.018 * var(--chroma)) 235);
  --band: oklch(0.112 calc(0.014 * var(--chroma)) 245);
  --band-text: oklch(0.9 calc(0.014 * var(--chroma)) 215);
  --band-muted: oklch(0.7 calc(0.016 * var(--chroma)) 215);
  --band-card: oklch(0.165 calc(0.016 * var(--chroma)) 245);
  --link: oklch(0.78 calc(0.12 * var(--chroma)) 245);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.4), 0 8px 24px oklch(0 0 0 / 0.34);
  --shadow-lift: 0 2px 4px oklch(0 0 0 / 0.46), 0 16px 34px oklch(0 0 0 / 0.5);
  --focus: oklch(0.8 calc(0.15 * var(--chroma)) 245);
}

/* נגישות. Chroma to zero everywhere (icons excepted, see --ico below),
   secondary type up a size, greys darkened so nothing sits at the 4.5:1
   line, and a focus ring that is impossible to miss. */
[data-theme="zebra"] {
  --chroma: 0;
  --muted: oklch(0.34 0 0);
  --band-muted: oklch(0.82 0 0);
  --size-secondary: 14px;
  --border: oklch(0.72 0 0);
  --border-strong: oklch(0.5 0 0);
  --focus: oklch(0.2 0 0);
}

[data-theme="zebra"] a { text-decoration-thickness: 2px; }
[data-theme="zebra"] .kind,
[data-theme="zebra"] .chip,
[data-theme="zebra"] .pill { border-width: 2px; }

/* Visitor-controlled, from the accessibility toolbar. Kept separate from the
   theme so someone can run high-contrast on the light variant too. */
/* Applied per top-level block rather than to <body>, and never to the
   toolbar itself. A `filter` on an ancestor makes it the containing block
   for every position:fixed descendant - filtering <body> would leave the
   accessibility toolbar scrolling away up the page, for exactly the reader
   who just turned high contrast on. Leaving the panel unfiltered also keeps
   the control that got you here readable while you try the other modes. */
[data-contrast="high"] body > *:not(.a11y-panel):not(.a11y-open) { filter: contrast(1.35); }
[data-contrast="invert"] body > *:not(.a11y-panel):not(.a11y-open) { filter: invert(1) hue-rotate(180deg); }
/* Text size. Applied to the page's top-level blocks rather than to <html>,
   and never to the toolbar itself.
   Zooming the root scales the position:fixed toolbar too while the layout
   viewport stays the device width: at 160% the panel became 544px wide on a
   390px screen with its start edge at -183px, the page gained 174px of
   sideways scroll, and the size buttons walked off the display - so the
   control that got you there could no longer be used to get back. Scoping the
   zoom leaves the toolbar at its own scale and the viewport unchanged. */
body > *:not(.a11y-panel):not(.a11y-open) {
  zoom: var(--a11y-zoom, 1);
  /* A zoomed block still lays out at the full width of its containing block
     and is scaled afterwards, so at 1.6 it renders 390px of content as 624px
     and the page scrolls sideways. Inside the zoomed subtree 100vw is scaled
     too, so dividing by the same factor gives back exactly the viewport. */
  inline-size: calc(100vw / var(--a11y-zoom, 1));
}

[data-density="compact"] {
  --gap-card: 10px;
  --col-card: 250px;
  --pad-panel: 18px;
}
[data-spacing="loose"] {
  line-height: 2;
  letter-spacing: 0.03em;
  word-spacing: 0.14em;
}
[data-underline="on"] main a { text-decoration: underline; }
[data-focusring="strong"] :focus-visible {
  outline: 4px solid var(--focus) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ base */

/* dir="rtl" on <html> alone is not enough: anything that later replaces the
   document's markup, and any flex row rendered before the attribute is
   parsed, falls back to LTR and mirrors every start/end edge. Setting it
   here too pins it. Every rule below uses logical properties for the same
   reason. */
html, body {
  direction: rtl;
  unicode-bidi: isolate;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  overflow-wrap: break-word;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.026em;
  margin: 0;
  line-height: 1.25;
}

a { color: inherit; }
main a { color: var(--link); text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-inline-size: var(--maxw);
  margin-inline: auto;
  padding-inline: 22px;
}

.nowrap { white-space: nowrap; flex: none; }

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ico {
  inline-size: 1em;
  block-size: 1em;
  flex: none;
  vertical-align: -0.14em;
}

/* ---------------------------------------------------------------- header */

.site-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--border);
}

.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  min-block-size: 66px;
  flex-wrap: wrap;
  padding-block: 10px;
}

.brand { display: flex; align-items: baseline; gap: 10px; flex: none; text-decoration: none; }
.brand b { font-family: var(--font-head); font-size: 19px; font-weight: 600; letter-spacing: -0.03em; }
.brand span { color: var(--muted); font-size: var(--size-secondary); white-space: nowrap; }

.head-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-inline-start: auto;
}

.head-nav a {
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
}

.head-nav a:hover { background: color-mix(in oklab, var(--text) 7%, transparent); color: var(--text); }

.theme-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  background: var(--card);
  flex: none;
}

.theme-switch button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--radius-chip);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.theme-switch button .ico { font-size: 15px; }
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-pressed="true"] {
  background: var(--band);
  color: var(--band-text);
}

/* ------------------------------------------------------------------ hero */

.hero { padding-block: 46px 10px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 34px;
  align-items: start;
}

.hero h1 {
  font-size: clamp(34px, 5vw, 50px);
  letter-spacing: -0.03em;
  font-weight: 600;
}

.hero-sub {
  margin-block: 16px 0;
  font-size: 17px;
  color: var(--muted);
  max-inline-size: 46ch;
}

.read-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-inline-start: 4px solid oklch(0.55 calc(0.13 * var(--chroma)) 250);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  box-shadow: var(--shadow);
}

/* Both hero blocks ship closed, in every viewport. Deliberately not a
   media-query "open on desktop, closed on mobile" trick: that is the exact
   pattern Chrome broke on this site once already, and a reader who opens one
   should find it open on their phone too. */
.read-card > h2,
.read-card > summary {
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.026em;
}

.read-card > summary::-webkit-details-marker { display: none; }

/* The disclosure chevron, on the far edge so the label stays flush to the
   start. A real glyph rather than a rotated CSS box: a bordered square has to
   be rotated toward a physical corner, which points the wrong way the moment
   the writing direction flips. Rotates a half-turn when the block opens. */
.read-card > summary .chev,
.starts > summary .chev {
  margin-inline-start: auto;
  font-size: 18px;
  color: var(--muted);
  transition: transform var(--motion) ease;
}

.read-card[open] > summary .chev,
.starts[open] > summary .chev { transform: rotate(180deg); }

.starts > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  cursor: pointer;
  list-style: none;
}

.starts > summary::-webkit-details-marker { display: none; }

.read-card ul {
  margin: 12px 0 0;
  padding-inline-start: 18px;
  color: var(--muted);
  font-size: var(--size-secondary);
  line-height: 1.75;
}

.read-card li + li { margin-block-start: 6px; }

.starts { margin-block-start: 26px; }

.starts-label {
  font-size: var(--size-secondary);
  letter-spacing: 0.09em;
  color: var(--muted);
  text-transform: none;
  margin-block-end: 10px;
}

.starts-row { display: flex; flex-wrap: wrap; gap: 9px; padding-block-start: 12px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding: 10px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-chip);
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  flex: none;
  box-shadow: var(--shadow);
  transition: transform var(--motion) ease, box-shadow var(--motion) ease;
}

.pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.pill .ico { font-size: 16px; color: var(--muted); }

/* ------------------------------------------------------------- task list */

.tasks { padding-block: 42px 8px; display: grid; gap: 18px; scroll-margin-block-start: 76px; }

.panel {
  border-radius: var(--radius-panel);
  background: oklch(0.952 calc(0.018 * var(--chroma)) var(--cat-h));
  padding: var(--pad-panel) var(--pad-panel) calc(var(--pad-panel) + 4px);
  scroll-margin-block-start: 84px;
}

[data-theme="fashion"] .panel { background: oklch(0.178 calc(0.026 * var(--chroma)) var(--cat-h)); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clouds"]):not([data-theme="zebra"]) .panel {
    background: oklch(0.178 calc(0.026 * var(--chroma)) var(--cat-h));
  }
}

.panel-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-block-end: 18px;
}

.panel-head h2 {
  font-size: 22px;
  color: oklch(0.47 calc(0.095 * var(--chroma)) var(--cat-h));
  white-space: nowrap;
  flex: none;
}

[data-theme="fashion"] .panel-head h2 { color: oklch(0.8 calc(0.1 * var(--chroma)) var(--cat-h)); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clouds"]):not([data-theme="zebra"]) .panel-head h2 {
    color: oklch(0.8 calc(0.1 * var(--chroma)) var(--cat-h));
  }
}

.panel-blurb {
  flex: 1;
  min-inline-size: 12ch;
  color: var(--muted);
  font-size: var(--size-secondary);
}

.panel-count {
  flex: none;
  white-space: nowrap;
  color: var(--muted);
  font-size: var(--size-secondary);
  font-variant-numeric: tabular-nums;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--col-card), 1fr));
  gap: var(--gap-card);
}

/* ------------------------------------------------------------- app cards */

/* The whole card is one click target, but the quick-entry chips inside it
   are links of their own - and an <a> inside an <a> is not valid HTML. So the
   card is an <article>, the title carries the link, and that link's ::after
   is stretched over the card. Chips sit above it on their own layer. */
.card {
  position: relative;
  /* Grid items default to min-width:auto, so ANY nowrap child (the fact
     line) becomes the track's minimum and pushes the whole panel past the
     viewport on a phone. This is the one line that stops it. */
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px 17px 13px;
  text-align: start;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform var(--motion) ease, box-shadow var(--motion) ease, border-color var(--motion) ease;
}

.card:hover {
  transform: translateY(-3px) scale(1.012);
  box-shadow: var(--shadow-lift);
  border-color: oklch(0.6 calc(0.11 * var(--chroma)) var(--cat-h));
}

.card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-top .ico {
  font-size: 26px;
  color: var(--ico);
}

/* The card body. Ships open, and src/home.js closes it under the mobile
   breakpoint - so a phone shows a scannable list of titles and everything
   else is one tap away, while desktop and any no-JS reader see the whole
   card. Deliberately not "closed in the markup, forced open by CSS on
   desktop": that is the pattern Chrome broke on this site before. */
/* `display` is deliberately never set on this element. Chrome hides a closed
   <details>'s content through the UA's own slot; override the display and the
   element still reports open=false while rendering everything - which is what
   both `contents` and `flex` did here. Only the children are styled. */
.card-more { min-inline-size: 0; }
.card-more > * { margin-block: 0; }
.card-more > * + * { margin-block-start: 9px; }
.card-more > summary { display: none; }

@media (max-width: 640px) {
  .card-more > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    margin-block-start: 2px;
    border-block-start: 1px dashed var(--border);
    cursor: pointer;
    list-style: none;
    position: relative;
    z-index: 2;
  }

  .card-more > summary::-webkit-details-marker { display: none; }

  /* The real glyph again, for the same reason as the hero: a bordered box has
     to be rotated toward a physical corner and points the wrong way in RTL. */
  .card-more > summary .chev {
    font-size: 18px;
    color: var(--muted);
    transition: transform var(--motion) ease;
  }

  .card-more[open] > summary .chev { transform: rotate(180deg); }
  .card { gap: 0; padding-block-end: 0; }
  .card > .card-top { padding-block-end: 12px; }
  .card-more[open] > summary { margin-block-start: 9px; }
}

.card-link { text-decoration: none; color: inherit; }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-chips, .card-foot { position: relative; z-index: 1; }
.card-chips a { position: relative; z-index: 1; }

.card-title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15.5px;
  letter-spacing: -0.022em;
  line-height: 1.35;
}

.card-desc {
  color: var(--muted);
  font-size: var(--size-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Deliberately not a flex row: a flex container's anonymous text item
   cannot be given min-width:0, so the line would never ellipsize and its
   min-content width would leak out to the grid track. Block with an
   inline-block dot ellipsizes properly and measures as zero. */
.card-fact {
  min-inline-size: 0;
  font-size: var(--size-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.card-fact::before {
  content: "";
  display: inline-block;
  inline-size: 7px;
  block-size: 7px;
  margin-inline-end: 8px;
  vertical-align: 0.08em;
  border-radius: 50%;
  background: oklch(0.55 calc(0.12 * var(--chroma)) var(--cat-h));
}

[data-theme="fashion"] .card-fact::before { background: oklch(0.75 calc(0.12 * var(--chroma)) var(--cat-h)); }

.card-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 30px;
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  background: color-mix(in oklab, var(--paper) 60%, var(--card));
  color: var(--muted);
  font-size: var(--size-secondary);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}

.chip:hover {
  border-color: oklch(0.6 calc(0.11 * var(--chroma)) var(--cat-h));
  color: var(--text);
}

.card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-block-start: auto;
  padding-block-start: 11px;
  border-block-start: 1px dashed var(--border);
  font-size: var(--size-secondary);
  color: var(--muted);
}

.card-src { flex: 1; min-inline-size: 0; }
.card-src b { font-weight: 500; color: var(--text); }

.kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  white-space: nowrap;
  flex: none;
  font-size: var(--size-secondary);
}

.kind::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--kind-dot, var(--muted));
}

/* One dot color per delivery mode - the state a visitor should be able to
   read without opening the app. Never the same string as the source line
   beside it. */
.kind[data-kind="נשלף חי"]      { --kind-dot: oklch(0.62 calc(0.19 * var(--chroma)) 150); }
.kind[data-kind="מחושב מראש"]   { --kind-dot: oklch(0.62 calc(0.19 * var(--chroma)) 250); }
.kind[data-kind="דוח תקופתי"]   { --kind-dot: oklch(0.66 calc(0.17 * var(--chroma)) 85); }
.kind[data-kind="טופס דיווח"]   { --kind-dot: oklch(0.62 calc(0.2 * var(--chroma)) 25); }
.kind[data-kind="התראות"]       { --kind-dot: oklch(0.62 calc(0.19 * var(--chroma)) 320); }
.kind[data-kind="כלי בדפדפן"]   { --kind-dot: oklch(0.6 calc(0.02 * var(--chroma)) 250); }
.kind[data-kind="אתר חיצוני"]   { --kind-dot: oklch(0.7 0 0); }
/* Only ever rendered for a browser already flagged as a manager - see
   injectManagerTile() in src/home.js. */
.kind[data-kind="ניהול"]        { --kind-dot: oklch(0.55 calc(0.2 * var(--chroma)) 300); }

/* ------------------------------------------------------------ trust band */

.trust {
  scroll-margin-block-start: 76px;
  margin-block-start: 46px;
  background: var(--band);
  color: var(--band-text);
  padding-block: 52px;
}

.trust h2 {
  font-size: clamp(23px, 3.4vw, 31px);
  max-inline-size: 22ch;
}

.trust > .wrap > p {
  margin-block: 14px 0;
  color: var(--band-muted);
  max-inline-size: 60ch;
  font-size: 15px;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-block-start: 30px;
}

.stat {
  background: var(--band-card);
  border: 1px solid oklch(1 0 0 / 0.09);
  border-radius: var(--radius-card);
  padding: 18px 18px 16px;
}

.stat b {
  display: block;
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.stat span { display: block; margin-block-start: 5px; color: var(--band-muted); font-size: var(--size-secondary); }

.not-box {
  margin-block-start: 20px;
  border: 1px solid oklch(1 0 0 / 0.14);
  border-inline-start: 4px solid oklch(0.7 calc(0.15 * var(--chroma)) 60);
  border-radius: var(--radius-card);
  padding: 18px 20px;
}

.not-box h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.not-box ul { margin: 11px 0 0; padding-inline-start: 18px; color: var(--band-muted); font-size: var(--size-secondary); line-height: 1.75; }
.not-box li + li { margin-block-start: 6px; }
.not-box a { color: var(--band-text); }

/* --------------------------------------------------------- app preview */

.section { padding-block: 52px; scroll-margin-block-start: 76px; }
.section > .wrap > h2 { font-size: clamp(22px, 3.2vw, 30px); }
.section-lead { margin-block: 12px 26px; color: var(--muted); max-inline-size: 62ch; }

.window {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-panel);
  background: var(--card);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.window-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-block-end: 1px solid var(--border);
  background: color-mix(in oklab, var(--paper) 70%, var(--card));
}

.window-dots { display: flex; gap: 6px; flex: none; }
.window-dots i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--border-strong); }
.window-bar h3 { font-size: 14.5px; white-space: nowrap; flex: none; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  font-size: var(--size-secondary);
  color: var(--muted);
  white-space: nowrap;
  flex: none;
}

.window-bar .stamp { margin-inline-start: auto; font-size: var(--size-secondary); color: var(--muted); white-space: nowrap; flex: none; }

.window-body { display: grid; grid-template-columns: 300px 1fr; min-block-size: 380px; }
.window-rail { border-inline-end: 1px solid var(--border); padding: 18px; display: flex; flex-direction: column; gap: 15px; }

.field label { display: block; font-size: var(--size-secondary); color: var(--muted); margin-block-end: 6px; }

.field textarea {
  inline-size: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--paper);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  resize: vertical;
}

.field + .field { margin-block-start: 12px; }

.read-card summary {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  min-block-size: 44px;
  display: flex;
  align-items: center;
}

.read-card pre {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.field input {
  inline-size: 100%;
  min-block-size: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--paper);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.seg { display: flex; border: 1px solid var(--border-strong); border-radius: var(--radius-chip); padding: 3px; gap: 3px; }

.seg button {
  flex: 1;
  min-block-size: 38px;
  border: 0;
  border-radius: var(--radius-chip);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.seg button[aria-pressed="true"] { background: var(--band); color: var(--band-text); }

.headline-n {
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.headline-n small { display: block; font-size: var(--size-secondary); font-weight: 400; color: var(--muted); letter-spacing: 0; margin-block-start: 4px; }

.method {
  border-block-start: 1px dashed var(--border);
  padding-block-start: 13px;
  color: var(--muted);
  font-size: var(--size-secondary);
  line-height: 1.7;
  margin: 0;
}

.window-map { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.map-slot { flex: 1; min-block-size: 240px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.map-slot svg { display: block; inline-size: 100%; block-size: 100%; }
.map-slot text { font-family: var(--font-mono); }

.legend { display: flex; flex-wrap: wrap; gap: 4px; }
.legend-step { flex: 1 1 90px; min-inline-size: 84px; }
.legend-sw { block-size: 12px; border-radius: 3px; }
.legend-step span { display: block; margin-block-start: 5px; font-size: var(--size-secondary); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- mobile */

.mobile-grid { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: center; }
.mobile-points { margin: 0; padding-inline-start: 18px; color: var(--muted); line-height: 1.8; }
.mobile-points b { color: var(--text); font-weight: 500; }

/* The bezel is intentionally dark in BOTH variants - it is a physical
   object, not a surface of the page. Inverting it for the dark theme would
   put a white slab where a phone should be. */
.phone {
  border: 10px solid oklch(0.2 calc(0.01 * var(--chroma)) 245);
  border-radius: 34px;
  background: var(--paper);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  margin-inline: auto;
  /* Not a flat 300px: at large text sizes the available width drops below
     that and a fixed-width mock is enough to push the page sideways. */
  inline-size: min(300px, 100%);
}

.phone-notch { block-size: 24px; background: oklch(0.2 calc(0.01 * var(--chroma)) 245); border-end-start-radius: 12px; border-end-end-radius: 12px; inline-size: 46%; margin-inline: auto; }
.phone-body { padding: 14px 12px 18px; display: grid; gap: 10px; }
.phone-cat { font-family: var(--font-head); font-size: 15px; color: oklch(0.47 calc(0.095 * var(--chroma)) 246); }
.phone-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; display: grid; gap: 5px; box-shadow: var(--shadow); }
.phone-card .card-title { font-size: 13.5px; }
.phone-card .card-fact, .phone-card .card-foot { font-size: 11.5px; }
.phone-card .card-foot { padding-block-start: 8px; }
.phone-warn {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text);
  background: oklch(0.93 calc(0.06 * var(--chroma)) 75);
  border: 1px solid oklch(0.8 calc(0.09 * var(--chroma)) 75);
}

[data-theme="fashion"] .phone-warn { background: oklch(0.3 calc(0.05 * var(--chroma)) 75); border-color: oklch(0.45 calc(0.07 * var(--chroma)) 75); }

/* -------------------------------------------------------------- api map */

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); }

table.api { inline-size: 100%; border-collapse: collapse; font-size: 13.5px; }
table.api th, table.api td { padding: 11px 14px; text-align: start; border-block-end: 1px solid var(--border); white-space: nowrap; }
table.api thead th { font-family: var(--font-head); font-weight: 500; font-size: var(--size-secondary); color: var(--muted); background: color-mix(in oklab, var(--paper) 65%, var(--card)); position: sticky; inset-block-start: 0; }
table.api tbody tr:last-child td { border-block-end: 0; }
table.api td.mono { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
table.api td.pub { white-space: normal; min-inline-size: 14ch; }
table.api th[scope="row"] { white-space: normal; min-inline-size: 20ch; }

.state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.state::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  flex: none;
  background: var(--state-c);
  border-radius: 50%;
}

.state[data-state="live"]    { --state-c: oklch(0.62 calc(0.19 * var(--chroma)) 150); }
.state[data-state="slow"]    { --state-c: oklch(0.68 calc(0.17 * var(--chroma)) 80); }
.state[data-state="slow"]::before { border-radius: 2px; }
.state[data-state="stopped"] { --state-c: oklch(0.58 calc(0.2 * var(--chroma)) 25); }
.state[data-state="stopped"]::before { border-radius: 0; transform: rotate(45deg); }

/* The state key. `nowrap` belongs on the table cells, not here: these carry a
   label plus a sentence of explanation, and at large text sizes one of them
   was wider than a phone - which is enough to push the whole page sideways. */
.legend-states { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-block-start: 14px; font-size: var(--size-secondary); color: var(--muted); }
.legend-states .state { white-space: normal; align-items: flex-start; max-inline-size: 100%; }
.legend-states .state::before { margin-block-start: 0.45em; }

/* ---------------------------------------------------------------- footer */

/* Two elements, one band. `.site-foot` is this page's own (project
   disclaimer + site links); `.site-legal` is the block tools/footer_inject.py
   writes onto all 58 pages and owns the markup of - so it is styled to sit
   flush underneath rather than restyled at the source. */
.site-foot, .site-legal {
  background: var(--band);
  color: var(--band-text);
  padding-block: 32px;
  margin-block-start: 10px;
}

.site-legal { padding-block: 0 40px; margin-block-start: 0; }
.site-legal .wrap { border-block-start: 1px solid oklch(1 0 0 / 0.12); padding-block-start: 26px; }

.site-foot p, .site-legal p { color: var(--band-muted); font-size: var(--size-secondary); max-inline-size: 70ch; }
.site-foot nav, .site-legal nav { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 14px; }

.site-foot nav a, .site-legal nav a {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 9px;
  color: var(--band-text);
  text-decoration: none;
  font-size: 13.5px;
  white-space: nowrap;
}

.site-foot nav a:hover, .site-legal nav a:hover { background: oklch(1 0 0 / 0.09); }

/* ------------------------------------------------- accessibility toolbar */

.a11y-open {
  position: fixed;
  inset-block-end: 18px;
  inset-inline-start: 18px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  block-size: 48px;
  padding-inline: 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-chip);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  box-shadow: var(--shadow-lift);
  cursor: pointer;
}

.a11y-panel {
  position: fixed;
  inset-block-end: 76px;
  inset-inline-start: 18px;
  z-index: 61;
  inline-size: min(340px, calc(100vw - 36px));
  max-block-size: min(70vh, 620px);
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lift);
  padding: 18px;
}

.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; gap: 10px; margin-block-end: 14px; }
.a11y-head h2 { font-size: 16px; flex: 1; }

.a11y-close {
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: none;
  color: var(--text);
  cursor: pointer;
  flex: none;
}

.a11y-group + .a11y-group { margin-block-start: 15px; padding-block-start: 15px; border-block-start: 1px solid var(--border); }
.a11y-group > h3 { font-size: var(--size-secondary); color: var(--muted); font-weight: 500; margin-block-end: 8px; }
.a11y-row { display: flex; align-items: center; gap: 8px; }

.a11y-row button, .a11y-seg button, .a11y-toggle {
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--paper);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
}

.a11y-row output { flex: 1; text-align: center; font-variant-numeric: tabular-nums; font-size: 14px; }
.a11y-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.a11y-seg button[aria-pressed="true"], .a11y-toggle[aria-pressed="true"] { background: var(--band); color: var(--band-text); border-color: var(--band); }
.a11y-toggles { display: grid; gap: 6px; }
.a11y-toggle { inline-size: 100%; text-align: start; display: flex; align-items: center; gap: 8px; }
.a11y-toggle .ico { font-size: 16px; }
.a11y-reset { margin-block-start: 15px; inline-size: 100%; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .hero-grid, .mobile-grid, .window-body { grid-template-columns: 1fr; }
  .window-rail { border-inline-end: 0; border-block-end: 1px solid var(--border); }
  .hero { padding-block-start: 30px; }
  .site-head .wrap { min-block-size: 0; }
  .head-nav { order: 3; inline-size: 100%; margin-inline-start: 0; }
}

@media (max-width: 640px) {
  .wrap { padding-inline: 14px; }
  /* Content-first: the first app card should be reachable without scrolling
     past a screenful of introduction. The two hero blocks are already closed
     summaries; this shrinks what is left around them. */
  .hero { padding-block: 18px 0; }
  .hero h1 { font-size: 28px; }
  .hero-sub { margin-block-start: 10px; font-size: 15px; }
  .hero-grid { gap: 16px; }
  .read-card { padding: 4px 14px; }
  .starts { margin-block-start: 14px; }
  .tasks { padding-block-start: 22px; }
  /* Nothing between the section heading and its cards. On a phone the blurb
     wrapped into three ragged lines and the count added a number nobody came
     for; both are context a desktop reader can afford and a standing one
     cannot. The heading, then the apps. */
  .panel-blurb, .panel-count { display: none; }
  .panel-head { margin-block-end: 12px; }
  /* The heading is nowrap so it cannot break mid-phrase beside the blurb.
     With the blurb gone there is nothing to protect, and at large text sizes
     an unbreakable heading is wider than the phone. */
  /* `flex: none` sizes to max-content, so allowing wrapping is not enough on
     its own - the item has to be allowed to shrink before it will use it. */
  .panel-head h2 { white-space: normal; flex: 1 1 auto; min-inline-size: 0; }
  /* The header wraps to two rows down here, so an anchor jump needs more
     clearance than the desktop 76-84px or the heading lands underneath it. */
  .panel, .section, .trust, .tasks { scroll-margin-block-start: 128px; }
  :root { --pad-panel: 16px; }
  /* One column, stated outright. `--col-card: 100%` inside
     minmax(100%, 1fr) resolves the percentage against a width the grid is
     itself deriving from its tracks - circular, and every panel ended up
     58px wider than the viewport. */
  .cards { grid-template-columns: 1fr; }
  .head-nav { display: none; }

  /* The header is one row on a phone: name, then the switch. The tagline is
     `nowrap`, so at large text sizes it could not shrink and pushed the whole
     page into sideways scroll - it is the first thing to go here. */
  .site-head .wrap { padding-block: 6px; gap: 10px; min-block-size: 0; }
  .brand span { display: none; }
  .brand b { font-size: 17px; }

  /* Icons only. The labels tripled the width of the switch; the tap target
     stays at 44px, which is the part that actually matters. */
  .theme-switch { margin-inline-start: auto; padding: 2px; }
  .theme-switch button { padding-inline: 11px; gap: 0; }
  .theme-switch button span { display: none; }
  .trust { padding-block: 36px; }
  .section { padding-block: 36px; }
}