/* ---- tokens/fonts.css ---- */
/* ============================================================
   Hawking Discovery — Webfonts
   Red Hat Text + Red Hat Mono (the production typefaces, served
   from Google Fonts). @font-face for these families is declared by
   the imported stylesheet below.
   ============================================================ */


/* ---- tokens/colors.css ---- */
/* ============================================================
   Hawking Discovery — Color tokens
   Primitive ramps mirror the production app (--color-* / --hawking-*).
   Semantic aliases sit on top and flip between dark (default) and light.
   ============================================================ */

:root {
  /* ---- Primitive ramps (constant across themes) ---- */

  /* Space — cool deep navy. The core dark-UI surface ramp. */

  /* Astronaut — the interactive/text blue, rebuilt from ONLY the colours that
     are not part of the Space spine (the shared dark navy now lives in Space and
     is referenced directly). Five steps:
       - 500 is the one interactive accent (primary actions / links / focus,
         and secondary text on light);
       - 400–100 are the light tints Space doesn't reach (secondary & muted text
         on dark, and every light-theme surface & border). */

  /* Sky — bright cyan accent / highlight / links in dark UI. 5-step ramp. */

  /* Grass — success / positive. 5-step ramp. */

  /* Tomato — danger / error / destructive. 5-step ramp. */

  /* Peach — warning / attention. 5-step ramp. */

  /* Canary — caution highlight (timers, soft warnings). */

  /* Orchid — secondary categorical accent (avatars, tags). */

  /* Berry — categorical accent. */

  /* Rose — pink categorical accent (logo pink lives here). One coherent
     warm-pink ramp, dark → light. */

  /* Smoke — cool neutral with a blue undertone. The light theme's neutral
     surface ladder (page / hover / sunken / active) plus the tooltip fill. */


  /* Brand logo swatches */

  /* ============================================================
     SEMANTIC TOKENS — DARK THEME (default)
     ============================================================ */

  /* Surfaces — benoemd naar ROL, niet naar diepte: de diepterichting verschilt
     per thema. In dark is de pagina de diepste laag (kaarten liggen erop, de
     rail staat er een trede lichter naast); in light is de pagina juist licht. */
  /* Hover/active zijn RELATIEF: een doorschijnende sluier, zodat de stap altijd
     één subtiele trede is t.o.v. het vlak eronder (page, inset of raised) in
     plaats van een vaste kleur die op een donker lijf te hard aankomt. */
  --surface-hover:   color-mix(in oklab, var(--color-space-50) 7%, transparent);  /* row / item hover */
  --surface-active:  color-mix(in oklab, var(--color-space-50) 13%, transparent); /* selected row */
  --surface-icon-chip: color-mix(in oklab, var(--color-space-50) 20%, transparent); /* soft blue chip behind list/section/card icons */
  /* Subtle control fill (Button/IconButton variant="subtle") — one notch more
     present than --surface-hover so the hit area reads at rest. */
  --surface-subtle:       color-mix(in oklab, var(--color-space-50) 11%, transparent);
  --surface-subtle-hover: color-mix(in oklab, var(--color-space-50) 18%, transparent);

  /* Borders */

  /* Scrollbars (see tokens/scrollbars.css) */

  /* Text */

  /* Avatar photo ring — stronger in dark (white blends into light photo edges) */
  --avatar-ring: color-mix(in oklab, var(--color-white) 68%, transparent);

  /* Interactive accent (primary actions, links) */
  /* Button fills/edges. Dark: rand een trede lichter dan de vulling (rand-licht).
     Light: rand = donkerste stap, nooit lichter dan de vulling (anders wazige halo);
     hover wordt donkerder i.p.v. lichter zodat witte labels AA blijven halen. */
  --btn-primary-hover:  var(--color-sky-500);
  --btn-primary-border: var(--color-sky-500);
  --btn-grass-hover:    var(--color-grass-500);
  --btn-grass-border:   var(--color-grass-500);
  --btn-tomato-hover:   var(--color-tomato-500);
  --btn-tomato-border:  var(--color-tomato-500);
  --btn-outline-bg:     transparent;
  /* Segmented control (Tabs) — dark: verdiepte input-track + lichte sluier-pill. */
  --seg-track:        var(--surface-input);
  --seg-track-border: var(--border-default);
  --seg-active-bg:    var(--surface-active);
  /* Selected state for form controls (checkbox/radio/switch) — vivid sky */

  /* Status — base color + soft (low-alpha) surface + border + text-on-soft */




  /* ---- Categorical label tints ----
     Non-status hues for category labels (diagnoses, meta chips). Built the
     SAME way as the status tokens above — uniform 14% soft fill, 45% border,
     light-ramp text — so every Label reads as one consistent family. Status
     hues (green/red/orange) are intentionally NOT repeated here: a positive
     status is `success`, not a categorical green. */
  --cat-blue-soft:     color-mix(in oklab, var(--color-space-50) 14%, transparent);
  --cat-blue-border:   color-mix(in oklab, var(--color-space-50) 45%, transparent);

  --cat-sky-soft:      color-mix(in oklab, var(--color-sky-400) 14%, transparent);
  --cat-sky-border:    color-mix(in oklab, var(--color-sky-400) 45%, transparent);

  --cat-orchid-soft:   color-mix(in oklab, var(--color-orchid-400) 14%, transparent);
  --cat-orchid-border: color-mix(in oklab, var(--color-orchid-400) 45%, transparent);

  --cat-berry-soft:    color-mix(in oklab, var(--color-berry-400) 14%, transparent);
  --cat-berry-border:  color-mix(in oklab, var(--color-berry-400) 45%, transparent);

  --cat-pink-soft:     color-mix(in oklab, var(--color-rose-400) 14%, transparent);
  --cat-pink-border:   color-mix(in oklab, var(--color-rose-400) 45%, transparent);

  --cat-canary-soft:   color-mix(in oklab, var(--color-canary-400) 14%, transparent);
  --cat-canary-border: color-mix(in oklab, var(--color-canary-400) 45%, transparent);

  /* Focus ring */

  /* Scrollbar */
  --scrollbar-track: transparent;

  /* Backdrop for modals */

  color-scheme: dark;
}

/* ============================================================
   SEMANTIC TOKENS — LIGHT THEME
   Derived (the production app ships dark only). Same ramps, inverted.
   ============================================================ */

[data-theme="light"] {
  /* Surfaces — neutral smoke ladder (blue undertone); white for elevated cards
     & fields. Each role gets a distinct step so they never collide. */
  --surface-hover:   color-mix(in oklab, var(--color-space-900) 5%, transparent);  /* row / item hover */
  --surface-active:  color-mix(in oklab, var(--color-space-900) 11%, transparent); /* selected row */
  --surface-icon-chip: color-mix(in oklab, var(--color-space-50) 22%, transparent);
  --surface-subtle:       color-mix(in oklab, var(--color-space-900) 8%, transparent);
  --surface-subtle-hover: color-mix(in oklab, var(--color-space-900) 15%, transparent);

  /* Neutraal smoke i.p.v. lichtblauw: strakkere randen. default haalt 3,5:1 op wit (WCAG 1.4.11). */

  /* Scrollbars (see tokens/scrollbars.css) */

  --avatar-ring: color-mix(in oklab, var(--color-space-900) 42%, transparent);

  --btn-primary-hover:  color-mix(in oklab, var(--color-sky-700) 80%, var(--color-space-950));
  --btn-primary-border: var(--btn-primary-hover);
  --btn-grass-hover:    color-mix(in oklab, var(--color-grass-700) 80%, var(--color-space-950));
  --btn-grass-border:   var(--btn-grass-hover);
  --btn-tomato-hover:   color-mix(in oklab, var(--color-tomato-700) 82%, var(--color-space-950));
  --btn-tomato-border:  var(--btn-tomato-hover);
  --btn-outline-bg:     var(--color-white);
  /* Light: track verdiept via doorschijnende tint (werkt op page, kaart én inset), geen rand;
     witte pill met één rand (3,5:1) markeert de selectie. */
  --seg-track:        color-mix(in oklab, var(--color-space-900) 7%, transparent);
  --seg-track-border: transparent;
  --seg-active-bg:    var(--color-white);





  /* Categorical text steps darken for contrast on light surfaces;
     soft/border keep the same low-alpha tints. */


  --scrollbar-track: transparent;


  color-scheme: light;
}

/* ---- tokens/typography.css ---- */
/* ============================================================
   Hawking Discovery — Typography tokens
   Red Hat Text (body/UI) + Red Hat Mono (numerals/meta).
   ============================================================ */

:root {
  /* Families */

  /* Weights */

  /* Type scale — UI-dense; px values match the product (10–24px range). */

  /* Line heights */

  /* Letter spacing */
}

/* Base text rendering — match the product: antialiased smoothing makes
   Red Hat Text render at its intended (lighter) weight instead of the
   heavier subpixel default on macOS/Chrome. Inherits to all descendants. */
.hdw {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---- tokens/spacing.css ---- */
/* ============================================================
   Hawking Discovery — Spacing & layout tokens
   4px base grid.
   ============================================================ */

:root {

  /* Form stack rhythm — the vertical gaps a builder-composed form uses.
     Controls carry NO external margin: the stacking container owns the space
     via `gap`, so any control (incl. Button) drops into any context unchanged.
     Four steps, small → large:
       field     label ↔ control, inside one field
       control   control ↔ control, inside one container
       container container ↔ container, inside one section (also .hd-grid gap)
       section   section ↔ section */
  --stack-field:     var(--space-4);   /*  8px */
  --stack-container: var(--space-8);   /* 16px */
  --stack-section:   var(--space-8);   /* 16px */

  /* Layout */

  /* Radii — form controls follow the app (4/8px); popups & cards round more. */

  /* Control sizing — one consistent family. 40px is the standard height for
     both form fields (Input/Select/Picker) and the default (md) button, so a
     button sits flush next to a field. */
  /* Segmented Tabs — 32px op desktop, hoger op mobiel (aanraakdoel). */
  --seg-height: var(--control-height-sm);
}
@media (max-width: 720px) {
  :root { --seg-height: var(--control-height-lg); }
}

/* ---- tokens/effects.css ---- */
/* ============================================================
   Hawking Discovery — Effects: shadows, motion, blur
   ============================================================ */

:root {
  /* Elevation — soft, cool-tinted shadows over deep navy. */
  /* Rest-schaduw voor omlijnde controls (outline buttons): alleen in light. */
  --shadow-control: none;
  /* Rand-schaduw (rail-rand, sticky tabelkolommen) en slider-knoppen. */

  /* Active-rail accent bar (the bright tick on a selected nav item) */

  /* Motion — quick, restrained. Ease-out for enters; spring for popups. */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */

  --dur-fast:   0.12s; /* @kind other */
  --dur-base:   0.15s; /* @kind other */
  --dur-medium: 0.2s; /* @kind other */
  --dur-slow:   0.34s; /* @kind other */

  /* Blur for backdrops / frosted toolbars */
}

/* Light: twee lagen, navy-getint, lage dekking — consistent oplopend. */
[data-theme="light"] {
  --shadow-control: var(--shadow-xs);
}

/* ---- Keyboard focus ---- */
/* Custom (non-native) controls that opt in with [data-kbd] show the focus ring
   only for keyboard navigation, never on mouse click. Native inputs keep their
   own in-component focus styling. box-shadow follows the element's border-radius,
   so pills/circles get a correctly-shaped ring. */
[data-kbd] { outline: none; }
[data-kbd]:focus-visible { box-shadow: var(--focus-ring) !important; }

/* ---- Shared keyframes (available to all consumers) ---- */
@keyframes hd-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes hd-pop-in    { from { opacity: 0; transform: translateY(-10px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes hd-dd-in     { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes hd-crumb-fwd  { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes hd-crumb-back { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes hd-toast-in  { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes hd-spin      { to { transform: rotate(360deg); } }
@keyframes hd-wave      { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@keyframes hd-batch-in  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hd-skeleton  { from { background-position: -200px 0; } to { background-position: 200px 0; } }
@keyframes hd-batch-fill { from { width: 0%; } to { width: 100%; } }
@keyframes hd-dot-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes hd-pulse-rec { 0% { box-shadow: 0 0 0 0 rgba(254, 91, 80, 0.55); } 70% { box-shadow: 0 0 0 7px rgba(254, 91, 80, 0); } 100% { box-shadow: 0 0 0 0 rgba(254, 91, 80, 0); } }

/* ---- tokens/layout.css ---- */
/* ============================================================
   Hawking Discovery — Layout grids
   Responsive grids used by builder-composed pages. Two utilities:

   .hd-grid   — the form grid on a 12-unit base (divisible by both 4 and 3).
                Children set a width via data-w:
                  "1"=1/4 (span 3)  "2"=1/2 (span 6)  "3"=3/4 (span 9)
                  "4"=full (span 12)   "third"=1/3 (span 4)
                Collapses to a 6-unit then 1-unit base as the *container*
                narrows (container queries, not viewport) so side-by-side
                controls stack under each other on small screens.
                Wrap it in an element carrying .hd-cq to establish the query
                container:  <div class="hd-cq"><div class="hd-grid">…</div></div>

                A container of view-only content (a block carrying
                .hd-fullwidth, e.g. RepeatResults) is not a form column and keeps
                the full section width; input blocks — the repeater container
                included — stay within the readable measure.

   .hd-page   — the page canvas: outer whitespace plus a readable maximum
                measure. Content never grows past --page-max-width and is
                centred in the space left over by the nav rail, so a wide
                monitor adds whitespace on both sides instead of stretching the
                layout. Put it on the scrolling <main>; its direct children are
                the ones centred, so the scrollbar stays at the window edge.
                A <main> that brings its own padding uses .hd-measure instead —
                the same cap and centring without the page margin; .hd-bleed
                when the rows have their own background or border that must run
                edge to edge (the content is then held in by side padding).

                A grid that actually holds INPUT elements caps at
                --form-max-width, so a full-width field on a wide sheet (bijv.
                de tabs-weergave van een template) never grows past a readable
                line length. Grids of view-only content (dashboard tiles, cards,
                result lists) are never capped. Opt out per grid with
                .hd-grid--wide or style={{ maxWidth: 'none' }}.
   ============================================================ */

:root {
}

/* ============================================================
   Page canvas — margins + centred, capped content measure.
   ============================================================ */
.hd-page { padding: var(--space-12) var(--space-16) 200px; }
.hd-page > *,
.hd-measure > * { max-width: var(--page-max-width); margin-inline: auto; width: 100%; box-sizing: border-box; }
/* Full-bleed variant — for pages whose rows carry their own background or
   border (a sticky patient bar, a detail bar): the row itself spans the window
   so its fill and rules run edge to edge, while its CONTENT stays inside
   --page-max-width via side padding. --bleed-pad is the normal page margin. */
.hd-bleed { --bleed-inline: max(var(--bleed-pad, var(--space-14)), calc((100% - var(--page-max-width)) / 2)); }
.hd-bleed > * { max-width: none; padding-inline: var(--bleed-inline) !important; }
/* Een doorgeefluik (bijv. een sticky wrapper) neemt de marge niet zelf: zijn
   rijen doen dat met padding-inline: var(--bleed-inline), zodat hun achtergrond
   en randen van rand tot rand lopen en de inhoud dezelfde witruimte houdt. */
.hd-bleed > .hd-bleed-pass { padding-inline: 0 !important; }
@media (max-width: 680px) {
  .hd-page { padding: var(--space-8) var(--space-6) 160px; }
  /* Zelfde mobiele marge als .hd-page: de bleed-inhoud krijgt op smalle schermen
     12px in plaats van --bleed-pad (28-30px). We herdefinièren --bleed-inline
     zelf, zodat een per-pagina ingestelde --bleed-pad hier niet doorwerkt. */
  .hd-bleed { --bleed-inline: max(var(--space-6), calc((100% - var(--page-max-width)) / 2)); }
}

/* Query container for .hd-grid — size is measured on this element. */
.hd-cq { container-type: inline-size; }

/* Readable-width cap — on the CONTAINER (grid cell), never on the grid itself.
   A container keeps its share of the track (a ½ container stays 50% of the
   sheet) and caps its own content at --form-max-width, wherever it sits: a
   top-level section, a pop-up, or a template-in-template. The hook is
   .hd-container (every BuilderContainer), so it never depends on which controls
   happen to render a native input. View-only grids (tiles, cards, results,
   dossier) hold no BuilderContainer and are never capped; .hd-grid--wide and a
   container wrapping a template-in-template opt out. */
.hd-grid > .hd-container { max-width: var(--form-max-width); }
.hd-grid--wide > *,
.hd-grid > *:has(.hd-no-cap) { max-width: none; }
/* Een container met alleen view-only inhoud (bijv. een resultatenlijst — alles
   dat .hd-fullwidth draagt) is geen formulierkolom en gebruikt de volle
   sectiebreedte. Invoerblokken, ook de repeater-container, blijven binnen de
   leesbare maat. */
.hd-grid > .hd-container:has(> .hd-fullwidth:only-child) { max-width: none; }

.hd-grid {
  display: grid;
  align-items: start;
  gap: var(--stack-container);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.hd-grid > * { min-width: 0; }
.hd-grid > [data-w="1"] { grid-column: span 3; }
.hd-grid > [data-w="2"] { grid-column: span 6; }
.hd-grid > [data-w="3"] { grid-column: span 9; }
.hd-grid > [data-w="4"] { grid-column: span 12; }
.hd-grid > [data-w="third"] { grid-column: span 4; }

/* Half base — quarter cells become halves; wider cells clamp; thirds pair up. */
@container (max-width: 620px) {
  .hd-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hd-grid > [data-w="1"] { grid-column: span 3; }
  .hd-grid > [data-w="2"],
  .hd-grid > [data-w="3"],
  .hd-grid > [data-w="4"] { grid-column: span 6; }
  .hd-grid > [data-w="third"] { grid-column: span 3; }
}

/* Single column — everything stacks. */
@container (max-width: 360px) {
  .hd-grid { grid-template-columns: 1fr; }
  .hd-grid > [data-w] { grid-column: 1 / -1; }
}

/* ============================================================
   Builder section header — responsive.
   Icon + chevron stay pinned; title truncates with ellipsis;
   the status label collapses to icon-only when space runs out.
   ============================================================ */
.hd-sec-header { container-type: inline-size; }
.hd-sec-title {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hd-sec-label-full { display: inline-flex; flex: none; }
.hd-sec-label-compact { display: none; flex: none; }
@container (max-width: 680px) {
  .hd-sec-label-full { display: none; }
  .hd-sec-label-compact { display: inline-flex; }
}
.hd-sec-action { display: inline-flex; flex: none; margin-right: 4px; }
/* Narrow header: the header action hides and BuilderSection falls back to the
   same action at the end of the body instead. */
.hd-sec-action-fallback { display: none; padding-top: 22px; }
@container (max-width: 560px) {
  .hd-sec-action { display: none; }
  .hd-sec-action-fallback { display: block; }
}

/* ---- tokens/scrollbars.css ---- */
/* ============================================================
   Scrollbars — one consistent, theme-aware look on macOS, Windows
   and Linux. Applied globally to EVERY scroll container so it can
   never be forgotten. Colours come from tokens/colors.css
   (--scrollbar-thumb / --scrollbar-thumb-hover), per theme.

   Opt out on a single element with class="native-scrollbar" when the
   OS-native scrollbar is genuinely wanted.
   ============================================================ */

/* Standard properties — Firefox + modern Chromium */
.hdw, .hdw * {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* WebKit / Blink — Chromium + Safari */
.hdw::-webkit-scrollbar, .hdw *::-webkit-scrollbar { width: 10px; height: 10px; }
.hdw::-webkit-scrollbar-track, .hdw *::-webkit-scrollbar-track { background: transparent; }
.hdw::-webkit-scrollbar-thumb, .hdw *::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;   /* inset so the thumb reads slimmer */
  background-clip: padding-box;
}
.hdw::-webkit-scrollbar-thumb:hover, .hdw *::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}
.hdw::-webkit-scrollbar-corner, .hdw *::-webkit-scrollbar-corner { background: transparent; }

/* Escape hatch: keep the OS-native scrollbar on this element */
.native-scrollbar {
  scrollbar-width: auto;
  scrollbar-color: auto;
}
.native-scrollbar::-webkit-scrollbar { width: initial; height: initial; }
.native-scrollbar::-webkit-scrollbar-track { background: initial; }
.native-scrollbar::-webkit-scrollbar-thumb { background: initial; border: 0; border-radius: 0; }