/* A copy of frontend/src/app/ds/base.css for the public site (ADR 0147). Generated by scripts/site-ds.mjs: do not edit. */
/* ==========================================================================
 * The `.ds` root: where the design system's look applies (DESIGN.md §3.2, §4, §10).
 *
 * The old kit and the new system live side by side until B6 retires the old one. Everything below is scoped to an
 * element carrying `ds` — the gallery now, the new shell from B2 — so a page that has not moved does not change.
 * In `@layer base`, under the components and the utilities: a component's own focus ring or a heading's `mb-4` wins
 * over these defaults. globals.css keeps its old element rules (`h1`, `.num`, the focus ring, the summary triangle)
 * out of `.ds` with `:not(:where(.ds *))`, so nothing unlayered competes here.
 * ========================================================================== */

@layer base {
  .ds {
    font-family: var(--font-ds);
    font-size: var(--text-body);
    line-height: var(--text-body--line-height);
    font-weight: var(--text-body--font-weight);
    font-variant-numeric: tabular-nums; /* every figure lines up; Plex keeps one digit width at every weight */
    color: var(--color-ink);
    background-color: var(--color-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Hebrew is never tracked; hierarchy comes from size, weight and colour. */
  .ds :is(h1, h2, h3, h4, h5, h6) {
    font-family: inherit;
    margin: 0;
  }

  /* Numbers, dates, money and ranges are LTR islands inside RTL text (§4), in the system's own face. */
  .ds .num {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
  }

  .ds ::selection {
    background-color: var(--color-tint);
    color: var(--color-ink);
  }

  /* One focus ring for everything: 2 px of ink, 2 px away — never the brand, never hidden by sticky chrome. A control
   * on the night layer draws its own ring in the light tone, in its component's CSS. */
  .ds :focus {
    outline: none;
  }
  .ds :focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
  }

  .ds :is(button, a, summary, [role="menuitem"], [role="tab"]) {
    touch-action: manipulation;
  }
}

/* The theme switch is a circular reveal from the button (§3.5): the new theme grows from the chosen option over the old,
 * which holds still. The drawer's switch (components/shell/theme-switch.tsx) marks the root for its length
 * (`data-theme-reveal`) and names the circle (`--ds-reveal-x`, `--ds-reveal-y`, `--ds-reveal-r`); under reduced
 * motion it starts no transition at all and the theme changes at once. */
:root[data-theme-reveal]::view-transition-old(root) {
  animation: none;
  mix-blend-mode: normal;
}
:root[data-theme-reveal]::view-transition-new(root) {
  mix-blend-mode: normal;
  animation: ds-theme-reveal var(--dur-theme) var(--ease-ds-io) both;
}
@keyframes ds-theme-reveal {
  from {
    clip-path: circle(0 at var(--ds-reveal-x, 50%) var(--ds-reveal-y, 0));
  }
  to {
    clip-path: circle(var(--ds-reveal-r, 150vmax) at var(--ds-reveal-x, 50%) var(--ds-reveal-y, 0));
  }
}

/* A page change cross-fades with an 8-px rise (View Transitions; r6 d-ink.css:1250-1256): the old page fades up and out
 * in 180 ms, the new one rises 8 px in 380 ms. The page carries the classes (components/shell/page-transition.tsx);
 * the bar and the drawer around it stay. Reduced motion makes it a 1-ms swap. */
::view-transition-old(*.ds-page-out) {
  animation: ds-page-out 180ms var(--ease-ds-in) both;
}
::view-transition-new(*.ds-page-in) {
  animation: ds-page-in 380ms var(--ease-ds-out) both;
}
@keyframes ds-page-out {
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@keyframes ds-page-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 1ms;
  }
}
:root[data-motion="reduced"]::view-transition-group(*),
:root[data-motion="reduced"]::view-transition-old(*),
:root[data-motion="reduced"]::view-transition-new(*) {
  animation-duration: 1ms;
}

/* The first page of a visit has one orchestrated entrance (DESIGN.md §3.5; r6 P4, d-ink.css:1247-1248, r6-app.js:241-253).
 * While the document carries `data-entrance` (the server's, for a request with no `analat.entered` cookie: @/lib/entrance),
 * the page's sections rise in turn: 10 px and a fade over `--dur-enter` on the ease-out, 55 ms apart, the first at 80 ms.
 * r6 numbers its sections `--i` 0–4; here a page's sections take their order on the page, and where a page sets columns
 * side by side the frame holds still while r6's sections inside it rise at r6's turns: בית's head and hero (0), its
 * horizon (1), its equation and the folds under it (2), then the side's לטיפול (3) and מה השתנה (4), the fold under all (4);
 * ימים' month (0), then the day beside it (1). Only opacity and transform move — no layout shift, and a section answers a
 * click from its first frame. The shell lifts the mark after the entrance (components/shell/entrance.tsx), so another
 * page, a reload or an update never plays it. Under less motion nothing rises. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-entrance]:not([data-motion="reduced"]) #ds-shell-page main :is(
      .ds-page:not(.ds-loading) > :not(.ds-ov-home, .ds-days__desk),
      .ds-ov-home__main :is(.ds-ov-verdict, .ds-ov-horizon, .ds-ov-stack--tight, .ds-ov-folds),
      .ds-ov-home__side > *,
      .ds-days__month-col,
      .ds-days__pane
    ) {
    animation: ds-enter var(--dur-enter) var(--ease-ds-out) backwards;
    animation-delay: calc(var(--ds-enter-i) * 55ms + 80ms);
  }
}
#ds-shell-page main .ds-page > * {
  --ds-enter-i: 4;
}
#ds-shell-page main .ds-page > :nth-child(1),
#ds-shell-page main .ds-ov-home__main .ds-ov-verdict,
#ds-shell-page main .ds-days__month-col {
  --ds-enter-i: 0;
}
#ds-shell-page main .ds-page > :nth-child(2),
#ds-shell-page main .ds-ov-home__main .ds-ov-horizon,
#ds-shell-page main .ds-days__pane {
  --ds-enter-i: 1;
}
#ds-shell-page main .ds-page > :nth-child(3),
#ds-shell-page main .ds-ov-home__main :is(.ds-ov-stack--tight, .ds-ov-folds) {
  --ds-enter-i: 2;
}
#ds-shell-page main .ds-page > :nth-child(4),
#ds-shell-page main .ds-ov-home__side > :nth-child(1) {
  --ds-enter-i: 3;
}
#ds-shell-page main .ds-ov-home__side > :nth-child(2),
#ds-shell-page main .ds-ov > .ds-ov-more {
  --ds-enter-i: 4;
}
@keyframes ds-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}