/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../design-system-src/src/tokens/tokens.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * ORGNAIM design tokens.
 * Color/type values are inherited directly from the brand guidelines document —
 * do not fork them here; update the brand kit first, then mirror the change.
 *
 * Every color-bearing token below is a single declaration built on the
 * `light-dark()` CSS function: `light-dark(lightValue, darkValue)`. It
 * resolves per *usage site* based on the inherited `color-scheme` in effect
 * there, not per declaration site — so a token declared once in :root still
 * renders correctly under a `data-theme="dark"` ancestor. This replaces an
 * older two-block scheme (light values in :root, dark overrides repeated in
 * :root[data-theme="dark"]) that required a custom script to catch drift
 * between the two copies. `light-dark()` removes the second copy entirely,
 * so there's nothing left to drift.
 *
 * `:root` sets `color-scheme: light` (the explicit default — this brand
 * kit's theme is an opt-in toggle, not something that should silently follow
 * the OS/browser's `prefers-color-scheme`); `:root[data-theme="dark"]`
 * overrides that one property to `dark`. That's the only thing the dark
 * block needs to contain: once `color-scheme` flips, every `light-dark()`
 * call anywhere under that root re-resolves to its dark branch automatically.
 *
 * `node scripts/check-theme-tokens.mjs` (wired into `npm run check:tokens`,
 * run in CI) now enforces the new contract: every token below the "Themed"
 * marker must use `light-dark(...)` (a hardcoded literal there is a token
 * someone forgot to theme), and :root[data-theme="dark"] must contain
 * nothing but `color-scheme` (a stray property there is dead weight —
 * light-dark() already resolves it wherever it's *used*, not where it's
 * declared).
 */

/* Base box model — every component in this package that pairs `width: 100%`
   (or another percentage width) with its own padding (Container, Select,
   and others) is written assuming that padding is drawn from inside that
   width, not added on top of it. Without this reset, the platform default
   (`content-box`) adds the padding outside the declared width instead,
   so e.g. Container's `width: 100%; padding-inline: var(--space-5)` renders
   `2 * var(--space-5)` wider than its own parent — invisible whenever a
   max-width cap already keeps the box narrower than its parent regardless,
   but genuine horizontal page overflow at any viewport narrower than that
   cap, where `width: 100%` is the binding constraint. Caught via a real
   `document.documentElement.scrollWidth` vs. `clientWidth` measurement in a
   live browser at ~777px (Container specifically, on a page using Hero),
   not assumed — every consumer already loads this file first (tokens before
   component styles, per the README's usage snippet), so this is the one
   place a fix here reaches every component without a new import. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Anchors default to the browser's own blue/underline unless something
   overrides them. This package has no dedicated "Link" component — routed
   links come from the consumer's own router (react-router's <Link>, etc.)
   — so any <a> a consumer drops inside a styled component (a List item, a
   Footer column, plain body Text) keeps that UA default instead of picking
   up the surrounding --ink color, because the browser's own `a:link {
   color: ... }` rule is more specific than an ancestor's inherited `color`
   and wins over it. Reset it once here so a plain link matches its context
   by default, the same way it would if it were rendered as plain text;
   a component that genuinely wants a distinct "this is a link" affordance
   (underline, an accent color) still applies that itself on top. */
a {
  color: inherit;
  text-decoration: none;
}

:root {
  /* ── Theme-invariant ──────────────────────────────────────────────── */

  /* Radius */
  --radius-s: 3px;
  --radius-m: 6px;
  --radius-l: 10px;
  --radius-full: 999px;

  /* Motion — shared so a timing change doesn't have to be hunted down
     component by component. duration-spin is kept separate from the
     fast/base pair: spinners handle prefers-reduced-motion by slowing
     down (see Button/Spinner), not by shrinking toward zero. */
  --duration-fast: .1s;
  --duration-base: .15s;
  --duration-spin: .6s;
  /* Entrance animations that play once as content scrolls into view (see
     ScrollReveal) read as a deliberate reveal at fast/base's micro-interaction
     speed — kept as its own token rather than reusing --duration-base so a
     future retiming of hover/focus transitions doesn't also retime this. */
  --duration-slow: .4s;
  --ease-standard: ease;

  /* A darkening treatment for text placed over an arbitrary photo (Hero's
     `overlay` prop) — fixed literals, not light-dark(): the photo itself is
     theme-invariant, so the scrim reading correctly against it can't depend
     on the site's light/dark toggle either, the same reasoning
     --chart-fg-dark/light above uses for text drawn on a fixed chart fill. */
  --overlay-scrim: rgba(20, 18, 15, .45);
  --overlay-gradient: linear-gradient(to top, rgba(20, 18, 15, .75), rgba(20, 18, 15, 0) 65%);

  /* Z-index — overlay stacking order, low to high. Toast sits above Modal
     deliberately: a background action's toast should stay visible even
     with a dialog open. */
  --z-tooltip: 20;
  --z-dropdown: 30;
  --z-modal: 100;
  --z-toast: 200;

  /* Spacing scale — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Type */
  --font-heading: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-heading-ar: 'Noto Kufi Arabic', 'Segoe UI', sans-serif;
  --font-body-ar: 'IBM Plex Sans Arabic', 'Segoe UI', sans-serif;

  --text-xs: 12px;
  --text-sm: 13.5px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-2xl: 40px;

  /* The system's one emphasis weight — headings, labels, active states.
     Brand guidelines: "Use 600–700 only; never light weights for headlines." */
  --font-weight-semibold: 600;

  /* Disabled-state dimming — every disabled interactive control uses this
     one value, so it changes in one place if it ever needs to. */
  --opacity-disabled: .5;

  /* Aliases, not independent literals — each already resolves correctly
     per theme because the tokens it references (--green, --paper,
     --green-tint) are themselves themed below, so the formula itself never
     changes. */
  --color-success: var(--green);
  --color-success-bg: var(--green-tint);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--green);

  /* Data visualization — sequential ramp. Same 13 steps in both themes;
     only the surface it's read against changes. Full validation record:
     src/tokens/dataviz-palette.md. For a discrete ordinal ramp (funnel
     stages, tiers), start no lighter than step 300 on light. */
  --chart-seq-100: #c7e9da;
  --chart-seq-150: #addcc8;
  --chart-seq-200: #8fd2b7;
  --chart-seq-250: #71c6a5;
  --chart-seq-300: #4bbb94;
  --chart-seq-350: #0aaf84;
  --chart-seq-400: #00a472;
  --chart-seq-450: #009564;
  --chart-seq-500: #008558;
  --chart-seq-550: #00754c;
  --chart-seq-600: #006541;
  --chart-seq-650: #005636;
  --chart-seq-700: #00472c;

  /* Text drawn directly on a --chart-seq-* fill (Heatmap's cell values) —
     fixed literals, not light-dark(--ink)/light-dark(--paper): the fill
     itself is theme-invariant, so the text choice must be too, or it would
     flip to the wrong (low-contrast) side of the ramp in dark mode even
     though the background never changed. Pure black/white rather than the
     brand's own --ink literal (#36322F): that warm dark brown only clears
     WCAG's 4.5:1 text-contrast minimum through step 350 against this ramp,
     two steps short of where --chart-fg-light picks up — verified by
     computing real contrast ratios for all 13 --chart-seq-* steps, not
     assumed. --chart-fg-dark holds >=4.5:1 through step 450, -light holds
     >=4.5:1 from step 500 on — see Heatmap.tsx for the per-step cutover. */
  --chart-fg-dark: #000000;
  --chart-fg-light: #ffffff;

  /* ── Themed — light-dark(lightValue, darkValue) ──────────────────── */

  /* Color — brand */
  --ink: light-dark(#36322F, #EEE9DF);
  --ink-2: light-dark(#36322F, #EEE9DF); /* no lighter secondary tier for body text — see brand kit voice rule */
  --ink-3: light-dark(#675F53, #9C947F); /* muted — reserved for inactive/unselected states only, never body text */
  --paper: light-dark(#FFFFFF, #201C18);
  --paper-raised: light-dark(#FFFFFF, #29241E);
  --hairline: light-dark(#E0E0E0, #3E3E3E);

  --green: light-dark(#00674F, #2EAE86);
  --green-dark: light-dark(#004D3B, #86D6B7);
  --green-tint: light-dark(#DCEEE8, #113A2D);
  --gold: light-dark(#A6791F, #D9AC5C);
  --gold-tint: light-dark(#F1E6CC, #372B17);

  /* Color — semantic (not part of the brand palette; introduced for product UI feedback states) */
  --color-warning: light-dark(#8A6000, #E0B347);
  --color-warning-bg: light-dark(#FBEFD1, #3A2E10);
  --color-danger: light-dark(#B23A3A, #E08787);
  --color-danger-bg: light-dark(#F7E2E2, #3A1F1F);
  --color-info: light-dark(#2B5FA3, #7FA8D6);
  --color-info-bg: light-dark(#E1EAF5, #1B2A3A);

  /* Elevation */
  --shadow-s: 0 1px 2px light-dark(rgba(54,50,47,.06), rgba(0,0,0,.3)), 0 2px 6px -2px light-dark(rgba(54,50,47,.12), rgba(0,0,0,.4));
  --shadow-m: 0 1px 2px light-dark(rgba(54,50,47,.06), rgba(0,0,0,.3)), 0 8px 24px -12px light-dark(rgba(54,50,47,.18), rgba(0,0,0,.5));
  --shadow-l: 0 4px 12px light-dark(rgba(54,50,47,.10), rgba(0,0,0,.35)), 0 16px 40px -16px light-dark(rgba(54,50,47,.24), rgba(0,0,0,.6));

  /* Data visualization — categorical (8 slots — see dataviz-palette.md) and
     diverging pair. Order is the CVD-safety mechanism — never reorder or
     cycle categorical slots. */
  --chart-1: light-dark(#2a78d6, #3987e5); /* blue */
  --chart-2: light-dark(#eb6834, #d95926); /* orange */
  --chart-3: light-dark(#1baf7a, #199e70); /* aqua */
  --chart-4: light-dark(#a6791f, #af7c00); /* gold — brand accent */
  --chart-5: light-dark(#e87ba4, #d55181); /* magenta */
  --chart-6: light-dark(#008965, #00865e); /* green — brand accent */
  --chart-7: light-dark(#4a3aa7, #9085e9); /* violet */
  --chart-8: light-dark(#e34948, #e66767); /* red */

  --chart-div-neg-3: light-dark(#7c2525, #a43b39);
  --chart-div-neg-2: light-dark(#b94643, #bb5753);
  --chart-div-neg-1: light-dark(#ea9891, #c87974);
  --chart-div-neutral: light-dark(#efebe3, #332e29);
  --chart-div-pos-1: light-dark(#6dc6a4, #4ca685);
  --chart-div-pos-2: light-dark(#008c5e, #00926a);
  --chart-div-pos-3: light-dark(#005b39, #007b52);

  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../design-system-src/dist/index.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
.Popover-module__root___vEMon {
  position: relative;
  display: inline-block;
}

.Popover-module__trigger___QvCU1 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard);
}
.Popover-module__trigger___QvCU1:hover {
  background: var(--hairline);
}
.Popover-module__trigger___QvCU1:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.Popover-module__panel___eUJ2E {
  position: absolute;
  z-index: var(--z-dropdown);
  width: max-content;
  max-width: 320px;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  padding: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  /* Mount-triggered, not a transition — same reasoning as Menu's .list:
     Popover.tsx only renders this element while open, so there's never an
     existing element to change a property on. --slide-from-y makes the
     panel grow out from whichever edge of the trigger it's anchored to,
     rather than always sliding the same physical direction. */
  --slide-from-y: -4px;
  animation: Popover-module__popoverIn___5Q2pS var(--duration-base) var(--ease-standard);
}

@keyframes Popover-module__popoverIn___5Q2pS {
  from {
    opacity: 0;
    transform: translateY(var(--slide-from-y));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .Popover-module__panel___eUJ2E { animation: none; }
}

.Popover-module__bottom___wGs70 { top: calc(100% + var(--space-2)); }
.Popover-module__top___TYlrh { bottom: calc(100% + var(--space-2)); --slide-from-y: 4px; }
.Popover-module__left___h7fCr { left: 0; }
.Popover-module__right___--bJW { right: 0; }

.Spinner-module__wrapper___bf6EE {
  display: inline-flex;
}

.Spinner-module__spinner___GpFZS {
  border-radius: var(--radius-full);
  border: 2px solid var(--hairline);
  border-top-color: var(--green);
  animation: Spinner-module__spin___LFfLH var(--duration-spin) linear infinite;
}

.Spinner-module__sm___3sIoD { width: 16px; height: 16px; }
.Spinner-module__md___M2sPj { width: 24px; height: 24px; border-width: 3px; }
.Spinner-module__lg___IxTw2 { width: 36px; height: 36px; border-width: 4px; }

@media (prefers-reduced-motion: reduce) {
  .Spinner-module__spinner___GpFZS { animation-duration: 1.5s; }
}

@keyframes Spinner-module__spin___LFfLH {
  to { transform: rotate(360deg); }
}

.Spinner-module__srOnly___8vcVB {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.Badge-module__badge___RsuMz {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.Badge-module__neutral___lulSm { background: var(--hairline); color: var(--ink); }
.Badge-module__success___u9JiS { background: var(--color-success-bg); color: var(--color-success); }
.Badge-module__warning___nsGp- { background: var(--color-warning-bg); color: var(--color-warning); }
.Badge-module__danger___PD2hz { background: var(--color-danger-bg); color: var(--color-danger); }
.Badge-module__info___na6DQ { background: var(--color-info-bg); color: var(--color-info); }
.Badge-module__gold___LxXCH { background: var(--gold-tint); color: var(--gold); }

.Divider-module__horizontal___pZ05Y {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 0;
  width: 100%;
}

.Divider-module__vertical___p-jD4 {
  border: none;
  border-inline-start: 1px solid var(--hairline);
  width: 0;
  align-self: stretch;
}

.Divider-module__withLabel___Mi3EC {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.Divider-module__line___CX4-v {
  flex: 1 1;
  height: 1px;
  background: var(--hairline);
}

.Divider-module__label___PwL54 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--ink-2);
  white-space: nowrap;
}

.Stack-module__stack___yUU-B {
  display: flex;
}

.Stack-module__row___HFi6a { flex-direction: row; }
.Stack-module__column___0kaMf { flex-direction: column; }
.Stack-module__wrap___HGDoE { flex-wrap: wrap; }

.Stack-module__align-start___zxfDk { align-items: flex-start; }
.Stack-module__align-center___x4n6z { align-items: center; }
.Stack-module__align-end___e4TOl { align-items: flex-end; }
.Stack-module__align-stretch___57Rda { align-items: stretch; }
.Stack-module__align-baseline___mZAsw { align-items: baseline; }

.Stack-module__justify-start___IrENT { justify-content: flex-start; }
.Stack-module__justify-center___kKsWn { justify-content: center; }
.Stack-module__justify-end___Aey-M { justify-content: flex-end; }
.Stack-module__justify-between___UTD1D { justify-content: space-between; }
.Stack-module__justify-around___uFPsy { justify-content: space-around; }

.Stack-module__gap-1___1Oz3z { gap: var(--space-1); }
.Stack-module__gap-2___CDATk { gap: var(--space-2); }
.Stack-module__gap-3___TMPKh { gap: var(--space-3); }
.Stack-module__gap-4___ssHvs { gap: var(--space-4); }
.Stack-module__gap-5___CuOzO { gap: var(--space-5); }
.Stack-module__gap-6___jwJzR { gap: var(--space-6); }
.Stack-module__gap-7___Hc0FA { gap: var(--space-7); }
.Stack-module__gap-8___zM-vo { gap: var(--space-8); }

.LineChart-module__wrapper___LVAcD {
  margin: 0;
  font-family: var(--font-body);
}

.LineChart-module__title___su4mf {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
  margin-bottom: var(--space-4);
  text-align: start;
}

.LineChart-module__plotArea___uB5al {
  display: flex;
  flex-direction: column;
}

.LineChart-module__plotInner___MwH57 {
  position: relative;
  flex: 1 1;
  min-height: 0;
}

.LineChart-module__plot___bae3X {
  display: block;
  width: 100%;
  height: 100%;
}

.LineChart-module__markers___sPDmu {
  position: absolute;
  inset: 0;
}

.LineChart-module__marker___ZALoR {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
}

/* The plot is positioned via explicit x/y math (not flexbox), so unlike
   BarChart's columns it doesn't mirror under RTL on its own. .plotInner
   (svg + markers) is flipped as one unit so the dots stay aligned with the
   line; .categories sits outside it and reverses on its own via flexbox,
   same :dir(rtl) technique Pagination's chevron uses for the svg itself. */
.LineChart-module__plotInner___MwH57:dir(rtl) {
  transform: scaleX(-1);
}

.LineChart-module__categories___1U3mo {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
}

.LineChart-module__category___U5D3k {
  font-size: var(--text-xs);
  color: var(--ink-2);
  text-align: center;
}

.LineChart-module__legend___4Ic-i {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.LineChart-module__legendItem___N0-Xg {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-2);
}

.LineChart-module__swatch___QFLSV {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex: none;
}

.LineChart-module__srOnly___zJSf0 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.Card-module__card___Cb1o4 {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
}

.Card-module__elevated___5VEDw {
  border-color: transparent;
  box-shadow: var(--shadow-m);
}

.Card-module__padding-none___OI9cD { padding: 0; }
.Card-module__padding-sm___zE1jj { padding: var(--space-3); }
.Card-module__padding-md___ndH23 { padding: var(--space-5); }
.Card-module__padding-lg___l9K5D { padding: var(--space-6); }

.Kbd-module__key___EPWad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  padding: 1px var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  font-style: normal;
  line-height: 1.4;
  color: var(--ink-2);
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  box-shadow: 0 1px 0 var(--hairline);
}

.Kbd-module__combo___-PG-o {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-style: normal;
}

.Kbd-module__separator___Qh9zw {
  color: var(--ink-3);
  font-size: var(--text-xs);
}

.OtpInput-module__fieldset___RSJ6- {
  display: inline-flex;
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.OtpInput-module__fieldset___RSJ6-:disabled {
  opacity: var(--opacity-disabled);
}

.OtpInput-module__group___ExRCd {
  display: inline-flex;
  gap: var(--space-2);
}

.OtpInput-module__box___uWAR5 {
  width: 40px;
  height: 48px;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.OtpInput-module__box___uWAR5:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: var(--focus-ring);
}

.OtpInput-module__box___uWAR5:disabled {
  cursor: not-allowed;
}

.OtpInput-module__srOnly___pM5Sv {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.MessageBubble-module__bubble___bzJ1B {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 75%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-l);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.MessageBubble-module__sender___ao7AA {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
}

.MessageBubble-module__timestamp___SBfea {
  font-size: var(--text-xs);
}

/* The other party's messages: neutral surface, aligned to the reading
   start, with the tail corner squared off on the start side — the corner
   nearest where the message "points from". Logical properties mean the
   tail flips to the correct physical corner under dir="rtl" for free. */
.MessageBubble-module__start___J-0uO {
  align-self: flex-start;
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-end-start-radius: var(--radius-s);
}
.MessageBubble-module__start___J-0uO .MessageBubble-module__sender___ao7AA {
  color: var(--ink-2);
}
.MessageBubble-module__start___J-0uO .MessageBubble-module__timestamp___SBfea {
  color: var(--ink-3);
}

/* The current user's own messages: accent surface, aligned to the reading
   end, tail corner squared off on the end side. */
.MessageBubble-module__end___b8X4G {
  align-self: flex-end;
  background: var(--green);
  color: var(--paper);
  border-end-end-radius: var(--radius-s);
}
/* Same solid --paper as the message content, not a dimmed opacity — on the
   green fill, dimming white far enough to read as "muted" drops below
   WCAG AA's 4.5:1 text contrast (verified via Storybook's a11y addon). */
.MessageBubble-module__end___b8X4G .MessageBubble-module__sender___ao7AA,
.MessageBubble-module__end___b8X4G .MessageBubble-module__timestamp___SBfea {
  color: var(--paper);
}

.Tooltip-module__wrapper___D1A0A {
  position: relative;
  display: inline-flex;
}

.Tooltip-module__bubble___TPGHB {
  position: absolute;
  z-index: var(--z-tooltip);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.4;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-s);
  /* A short label (the common case) still renders as one line — `nowrap`
     used to be unconditional, which let a longer sentence-length `content`
     stretch the bubble to its full unwrapped width with nothing to stop it.
     Real bug, not hypothetical: caught live via `document.documentElement.
     scrollWidth` vs. `clientWidth` at a 375px viewport, where a `top`-placed
     bubble centered (`inset-inline-start: 50%`) over a trigger near the
     edge pushed hundreds of pixels past the viewport — and still counted
     toward the page's scrollable overflow even at `opacity: 0`/unhovered,
     since neither removes a box from layout the way `display: none` would.
     Capping the width and letting it wrap keeps every bubble on-screen
     regardless of trigger position or content length. */
  max-width: min(220px, calc(100vw - 2 * var(--space-4)));
  white-space: normal;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.Tooltip-module__wrapper___D1A0A:hover .Tooltip-module__bubble___TPGHB,
.Tooltip-module__wrapper___D1A0A:focus-within .Tooltip-module__bubble___TPGHB,
.Tooltip-module__wrapper___D1A0A.Tooltip-module__open___cK0c- .Tooltip-module__bubble___TPGHB {
  opacity: 1;
  transform: translateY(0);
}

.Tooltip-module__top___m2tnn {
  bottom: calc(100% + var(--space-2));
  inset-inline-start: 50%;
  transform: translate(-50%, 2px);
}
.Tooltip-module__wrapper___D1A0A:hover .Tooltip-module__top___m2tnn,
.Tooltip-module__wrapper___D1A0A:focus-within .Tooltip-module__top___m2tnn,
.Tooltip-module__wrapper___D1A0A.Tooltip-module__open___cK0c- .Tooltip-module__top___m2tnn {
  transform: translate(-50%, 0);
}

.Tooltip-module__bottom___9Twz4 {
  top: calc(100% + var(--space-2));
  inset-inline-start: 50%;
  transform: translate(-50%, -2px);
}
.Tooltip-module__wrapper___D1A0A:hover .Tooltip-module__bottom___9Twz4,
.Tooltip-module__wrapper___D1A0A:focus-within .Tooltip-module__bottom___9Twz4,
.Tooltip-module__wrapper___D1A0A.Tooltip-module__open___cK0c- .Tooltip-module__bottom___9Twz4 {
  transform: translate(-50%, 0);
}

.Tooltip-module__left___UPdrG {
  right: calc(100% + var(--space-2));
  top: 50%;
  transform: translate(2px, -50%);
}
.Tooltip-module__wrapper___D1A0A:hover .Tooltip-module__left___UPdrG,
.Tooltip-module__wrapper___D1A0A:focus-within .Tooltip-module__left___UPdrG,
.Tooltip-module__wrapper___D1A0A.Tooltip-module__open___cK0c- .Tooltip-module__left___UPdrG {
  transform: translate(0, -50%);
}

.Tooltip-module__right___CV--T {
  left: calc(100% + var(--space-2));
  top: 50%;
  transform: translate(-2px, -50%);
}
.Tooltip-module__wrapper___D1A0A:hover .Tooltip-module__right___CV--T,
.Tooltip-module__wrapper___D1A0A:focus-within .Tooltip-module__right___CV--T,
.Tooltip-module__wrapper___D1A0A.Tooltip-module__open___cK0c- .Tooltip-module__right___CV--T {
  transform: translate(0, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .Tooltip-module__bubble___TPGHB { transition: opacity var(--duration-fast) var(--ease-standard); }
}

.AvatarGroup-module__group___qCSYk {
  display: inline-flex;
  align-items: center;
}

/* Overlap toward the end so a later avatar sits on top (see the inline
   zIndex in AvatarGroup.tsx) — inset-inline-start, not a physical
   margin-left, so the overlap direction flips correctly under dir="rtl". */
.AvatarGroup-module__item___uF8bZ {
  position: relative;
  margin-inline-start: -10px;
  border: 2px solid var(--paper);
  border-radius: var(--radius-full);
  box-sizing: content-box;
}
.AvatarGroup-module__item___uF8bZ:first-child {
  margin-inline-start: 0;
}

.AvatarGroup-module__overflow___JZIo- {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--hairline);
  color: var(--ink-2);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
}

.AvatarGroup-module__sm___ptoRA { width: 28px; height: 28px; font-size: var(--text-xs); }
.AvatarGroup-module__md___YbE61 { width: 40px; height: 40px; font-size: var(--text-sm); }
.AvatarGroup-module__lg___oAEMY { width: 56px; height: 56px; font-size: var(--text-md); }

.Accordion-module__accordion___LVhhv {
  border-top: 1px solid var(--hairline);
}

.Accordion-module__item___7ryVk {
  border-bottom: 1px solid var(--hairline);
  /* Lets `block-size: auto` below participate in a transition — without
     this, the browser can't interpolate to/from an intrinsic size and the
     panel would just snap open/closed regardless of the transition rules. */
  interpolate-size: allow-keywords;
}

.Accordion-module__summary___a0kpN {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-2);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  color: var(--ink);
}
.Accordion-module__summary___a0kpN::-webkit-details-marker {
  display: none;
}
.Accordion-module__summary___a0kpN:hover {
  color: var(--green);
}
.Accordion-module__summary___a0kpN:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-s);
}

.Accordion-module__title___-w5py {
  min-width: 0;
}

.Accordion-module__chevron___i-HVZ {
  flex: none;
  color: var(--ink-3);
  transition: transform var(--duration-base) var(--ease-standard);
}
.Accordion-module__item___7ryVk[open] > .Accordion-module__summary___a0kpN .Accordion-module__chevron___i-HVZ {
  transform: rotate(180deg);
}

/* The panel: everything after <summary>, which the browser renders inside
   an internal `::details-content` box. Closed state starts collapsed to
   zero block-size so opening animates a real expand instead of the native
   instant reveal. `allow-discrete` lets the transition cover
   `content-visibility` too, which is what keeps the closed panel out of
   layout/hit-testing/tab order between transitions rather than merely
   clipping it. Browsers without `::details-content` support just keep
   today's instant toggle — pure progressive enhancement, nothing to
   feature-detect. */
.Accordion-module__item___7ryVk::details-content {
  overflow: hidden;
  block-size: 0;
  opacity: 0;
  transition:
    block-size var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard),
    content-visibility var(--duration-base) var(--ease-standard) allow-discrete;
}
.Accordion-module__item___7ryVk[open]::details-content {
  block-size: auto;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .Accordion-module__chevron___i-HVZ { transition: none; }
  .Accordion-module__item___7ryVk::details-content { transition: none; }
}

.Accordion-module__content___PEM9t {
  padding: 0 var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.6;
}

.Modal-module__overlay___dd9h1 {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(32, 28, 24, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  /* Mount-triggered, not a transition — Modal.tsx returns null while
     closed, so there's no existing element to change a property on; an
     animation plays regardless, same reasoning Drawer's slide-in uses. */
  animation: Modal-module__modalOverlayIn___ygcbP var(--duration-base) var(--ease-standard);
}

.Modal-module__dialog___ptM-K {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  background: var(--paper-raised);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
  font-family: var(--font-body);
  animation: Modal-module__modalDialogIn___pe54- var(--duration-base) var(--ease-standard);
}

.Modal-module__dialog___ptM-K:focus {
  outline: none;
}

@keyframes Modal-module__modalOverlayIn___ygcbP {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes Modal-module__modalDialogIn___pe54- {
  from {
    opacity: 0;
    transform: scale(.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .Modal-module__overlay___dd9h1,
  .Modal-module__dialog___ptM-K {
    animation: none;
  }
}

/* Below md (768px, same breakpoint Navbar/AppShell/Grid/Container collapse
   at), the dialog takes over the full screen instead of floating as a
   centered card — a fixed-width dialog reads cramped at phone widths, and a
   full-screen sheet gives touch scrolling and the close button more room. */
@media (max-width: 768px) {
  .Modal-module__overlay___dd9h1 {
    padding: 0;
  }
  .Modal-module__dialog___ptM-K {
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
}

.Modal-module__header___ILG9i {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) 0;
}

.Modal-module__title___A5OeE {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-lg);
  color: var(--ink);
  margin: 0;
}

.Modal-module__close___-ER1C {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-s);
  color: var(--ink-3);
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}
.Modal-module__close___-ER1C:hover { background: var(--hairline); color: var(--ink); }
.Modal-module__close___-ER1C svg { width: 16px; height: 16px; }
.Modal-module__close___-ER1C:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.Modal-module__content___dWO-B {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--ink);
  line-height: 1.6;
}

.Modal-module__footer___rro2w {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.Grid-module__grid___h49fk {
  display: grid;
}

.Grid-module__cols-1___2Sbp9 { grid-template-columns: repeat(1, 1fr); }
.Grid-module__cols-2___HBTqH { grid-template-columns: repeat(2, 1fr); }
.Grid-module__cols-3___ifJfK { grid-template-columns: repeat(3, 1fr); }
.Grid-module__cols-4___FX3yW { grid-template-columns: repeat(4, 1fr); }
.Grid-module__cols-6___Baxo0 { grid-template-columns: repeat(6, 1fr); }
.Grid-module__cols-12___6DD-0 { grid-template-columns: repeat(12, 1fr); }

.Grid-module__align-stretch___M4BTs { align-items: stretch; }
.Grid-module__align-start___-tHCS { align-items: start; }
.Grid-module__align-center___BRE-K { align-items: center; }
.Grid-module__align-end___AkLlS { align-items: end; }

.Grid-module__gap-1___6xaJC { gap: var(--space-1); }
.Grid-module__gap-2___vGPZZ { gap: var(--space-2); }
.Grid-module__gap-3___kPBru { gap: var(--space-3); }
.Grid-module__gap-4___bURyC { gap: var(--space-4); }
.Grid-module__gap-5___tpzjl { gap: var(--space-5); }
.Grid-module__gap-6___nGIvF { gap: var(--space-6); }
.Grid-module__gap-7___QJsAL { gap: var(--space-7); }
.Grid-module__gap-8___Vz86z { gap: var(--space-8); }

/* Breakpoints match tokens.ts's `breakpoints.md`/`breakpoints.sm` (768px / 640px) —
   duplicated as literals since CSS custom properties can't stand in for a media
   query condition. Below md, dense grids collapse to two columns; below sm,
   every column count collapses to one. */
@media (max-width: 768px) {
  .Grid-module__cols-3___ifJfK, .Grid-module__cols-4___FX3yW, .Grid-module__cols-6___Baxo0, .Grid-module__cols-12___6DD-0 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .Grid-module__cols-2___HBTqH, .Grid-module__cols-3___ifJfK, .Grid-module__cols-4___FX3yW, .Grid-module__cols-6___Baxo0, .Grid-module__cols-12___6DD-0 { grid-template-columns: 1fr; }
}

.Logo-module__wrapper___QBy9M {
  display: inline-flex;
  line-height: 0;
}

.Logo-module__mark___Qf3pc {
  display: block;
  width: auto;
  filter: none;
}

/* The mark is a single flat charcoal shape, not a themed token — a CSS
   filter is the only way to flip it light for dark surfaces without
   shipping a second raster asset. This is the one place in the package that
   still keys off :root[data-theme="dark"] directly instead of light-dark():
   light-dark() only resolves <color> values, and a filter chain isn't one. */
:root[data-theme="dark"] .Logo-module__mark___Qf3pc {
  filter: invert(1) brightness(1.2);
}

/* Higher source-order than the dark-mode rule above (same specificity, one
   attribute selector + one class each), so an explicit white tone wins
   regardless of the current theme. */
.Logo-module__mark___Qf3pc.Logo-module__markWhite___qieiZ {
  filter: invert(1) brightness(1.2);
}

.Logo-module__lockup___ycxZ2 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.Logo-module__lockupRow___HgjeF {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.Logo-module__wordmark___V5Rnh {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1;
}

.Logo-module__rule___Xo83H {
  align-self: stretch;
  height: 2px;
  background: var(--ink);
}

.Logo-module__tagline___kLgLQ {
  font-family: var(--font-body-ar);
  font-size: var(--text-sm);
  color: var(--ink);
  line-height: 1.4;
}

.Logo-module__textWhite___nRFkx {
  color: var(--paper);
}

.Logo-module__ruleWhite___v4d0I {
  background: var(--paper);
}

.Breadcrumbs-module__list___hXiqr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.Breadcrumbs-module__item___O4g3P {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.Breadcrumbs-module__link___7WM67 {
  color: var(--ink-3);
  text-decoration: none;
}

.Breadcrumbs-module__link___7WM67:hover {
  color: var(--green);
  text-decoration: underline;
}

.Breadcrumbs-module__current___JdlcS {
  color: var(--ink);
  font-weight: var(--font-weight-semibold);
}

.Breadcrumbs-module__chevron___f8Med {
  width: 14px;
  height: 14px;
  color: var(--ink-3);
}

.Breadcrumbs-module__chevron___f8Med:dir(rtl) {
  transform: scaleX(-1);
}

.Table-module__scrollArea___R5s3C {
  overflow-x: auto;
}

.Table-module__table___Dkosn {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.Table-module__th___PNuEx {
  text-align: start;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: var(--font-weight-semibold);
  color: var(--ink-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}

.Table-module__td___jv9tA {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  vertical-align: middle;
}

.Table-module__row___DD8Km:last-child .Table-module__td___jv9tA {
  border-bottom: none;
}

.Table-module__row___DD8Km:hover .Table-module__td___jv9tA {
  background: var(--paper-raised);
}

.Table-module__sortButton___V9clQ {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.Table-module__sortButton___V9clQ:hover {
  color: var(--ink);
}
.Table-module__sortButton___V9clQ:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-s);
}

.Table-module__sortIcon___V3-dH {
  flex: none;
  width: 12px;
  height: 12px;
}
.Table-module__sortIconIdle___ob3v0 {
  opacity: 0.35;
}

.Waterfall-module__wrapper___ETGRp {
  margin: 0;
  font-family: var(--font-body);
}

.Waterfall-module__title___DKASt {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
  margin-bottom: var(--space-4);
  text-align: start;
}

.Waterfall-module__plot___ivZF1 {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
}

.Waterfall-module__zeroLine___I1AbJ {
  position: absolute;
  inset-inline: 0;
  border-block-start: 1px dashed var(--hairline);
}

.Waterfall-module__column___JlIBf {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1;
  min-width: 0;
  height: 100%;
}

.Waterfall-module__value___fgpyr {
  font-size: var(--text-xs);
  color: var(--ink-2);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.Waterfall-module__barTrack___ki6Jx {
  position: relative;
  width: 100%;
  flex: 1 1;
}

.Waterfall-module__bar___2YiC8 {
  position: absolute;
  inset-inline: 0;
  min-height: 2px;
  border-radius: var(--radius-s);
  transition:
    height var(--duration-base) var(--ease-standard),
    bottom var(--duration-base) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  .Waterfall-module__bar___2YiC8 { transition: none; }
}

.Waterfall-module__total___LZYiH { background: var(--ink-3); }
.Waterfall-module__increase___QY6vC { background: var(--color-success); }
.Waterfall-module__decrease___qm2Fj { background: var(--color-danger); }

.Waterfall-module__label___pXJPL {
  font-size: var(--text-xs);
  color: var(--ink-2);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.Waterfall-module__srOnly___KIW3U {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A plain <div> (like Card) has no accessible grouping semantics. This is a
   native <fieldset>/<legend> instead — the legend is the fieldset's own
   accessible name, and the browser already breaks the top border to make
   room for it (the whole reason the element pair exists), so no
   position/transform hack is needed to get the "labeled outline" look. */
.LabelCard-module__fieldset___nqvT8 {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  background: var(--paper-raised);
}

.LabelCard-module__legend___rBSF1 {
  margin-inline-start: var(--space-3);
  padding-inline: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.LabelCard-module__neutral___1RyeM { color: var(--ink-3); }
.LabelCard-module__success___I6Tq1 { color: var(--color-success); }
.LabelCard-module__warning___T-0aL { color: var(--color-warning); }
.LabelCard-module__danger___1HUtr { color: var(--color-danger); }
.LabelCard-module__info___ifUYG { color: var(--color-info); }
.LabelCard-module__gold___O6RVI { color: var(--gold); }

.LabelCard-module__padding-none___JScsO { padding: 0; }
.LabelCard-module__padding-sm___rFtmB { padding: var(--space-3); }
.LabelCard-module__padding-md___Gr2Tx { padding: var(--space-5); }
.LabelCard-module__padding-lg___M9PPU { padding: var(--space-6); }

.Heatmap-module__wrapper___2h77C {
  margin: 0;
  font-family: var(--font-body);
}

.Heatmap-module__title___acaF1 {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
  margin-bottom: var(--space-4);
  text-align: start;
}

.Heatmap-module__scrollArea___hCIOM {
  overflow-x: auto;
}

.Heatmap-module__table___-9aG1 {
  border-collapse: collapse;
  font-size: var(--text-xs);
}

.Heatmap-module__corner___STdGE {
  background: transparent;
}

.Heatmap-module__colHeader___6iPqg,
.Heatmap-module__rowHeader___KEovM {
  padding: var(--space-2) var(--space-3);
  font-weight: var(--font-weight-semibold);
  color: var(--ink-2);
  text-align: start;
  white-space: nowrap;
}

.Heatmap-module__cell___QYh-x {
  min-width: 48px;
  padding: var(--space-2) var(--space-3);
  text-align: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.Heatmap-module__srOnly___4Z86z {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.TimePicker-module__field___lOxtw {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-body);
}

.TimePicker-module__label___FUecv {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
}

.TimePicker-module__required___cJ-Q4 {
  color: var(--color-danger);
}

.TimePicker-module__input___-gbIe {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: var(--space-3);
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

/* WebKit/Blink render the picker glyph as a fixed dark-on-transparent icon
   with no currentColor support, so it disappears against a dark background
   without an explicit invert — the same non-color, non-light-dark()-able
   case Logo's mark filter documents. */
.TimePicker-module__input___-gbIe::-webkit-calendar-picker-indicator {
  cursor: pointer;
}
:root[data-theme="dark"] .TimePicker-module__input___-gbIe::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

.TimePicker-module__input___-gbIe:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-tint);
}

.TimePicker-module__input___-gbIe:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.TimePicker-module__input___-gbIe.TimePicker-module__hasError___pVI8w {
  border-color: var(--color-danger);
}
.TimePicker-module__input___-gbIe.TimePicker-module__hasError___pVI8w:focus-visible {
  box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.TimePicker-module__helperText___ce42t {
  font-size: var(--text-xs);
  color: var(--ink-2);
  margin: 0;
}

.TimePicker-module__errorText___a2F4v {
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin: 0;
}

.EmptyState-module__wrapper___gzyTd {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-5);
  font-family: var(--font-body);
}

.EmptyState-module__icon___qVCyh {
  width: 48px;
  height: 48px;
  color: var(--ink-3);
  margin-bottom: var(--space-4);
}
.EmptyState-module__icon___qVCyh svg {
  width: 100%;
  height: 100%;
}

.EmptyState-module__title___xPfUf {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-md);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.EmptyState-module__description___oWwH1 {
  font-size: var(--text-sm);
  color: var(--ink-2);
  max-width: 40ch;
  margin: 0;
}

.EmptyState-module__action___dqxw1 {
  margin-top: var(--space-5);
}

.PieChart-module__wrapper___iENWb {
  margin: 0;
  font-family: var(--font-body);
}

.PieChart-module__title___GgM6F {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
  margin-bottom: var(--space-4);
  text-align: start;
}

.PieChart-module__row___F3maN {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

/* A pie chart is radial, not linear — it has no left-to-right axis the way
   BarChart/LineChart do, so unlike LineChart's plot this one is
   deliberately not mirrored under RTL. The legend beside it still reverses
   naturally (flexbox), same as everywhere else in this package. */
.PieChart-module__slice___9jzga {
  transition: opacity var(--duration-base) var(--ease-standard);
}
.PieChart-module__slice___9jzga:hover {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .PieChart-module__slice___9jzga { transition: none; }
}

.PieChart-module__legend___CJJl8 {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.PieChart-module__legendItem___EBMsq {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.PieChart-module__swatch___pkR3E {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex: none;
}

.PieChart-module__legendLabel___P4HAT {
  color: var(--ink);
}

.PieChart-module__legendValue___tN68a {
  color: var(--ink-2);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  margin-inline-start: auto;
  padding-inline-start: var(--space-4);
}

.PieChart-module__srOnly___J4--Q {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.Heading-module__heading___2pnHW {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
  text-align: start;
}

.Heading-module__xxl___JB3KD { font-size: var(--text-2xl); line-height: 1.15; }
.Heading-module__xl___1WQmT { font-size: var(--text-xl); line-height: 1.2; }
.Heading-module__lg___LZdYs { font-size: var(--text-lg); line-height: 1.25; }
.Heading-module__md___-B-e3 { font-size: var(--text-md); line-height: 1.3; }
.Heading-module__base___2P-lX { font-size: var(--text-base); line-height: 1.35; }
.Heading-module__sm___0p2sS { font-size: var(--text-sm); line-height: 1.4; }
.Heading-module__xs___FFLYL { font-size: var(--text-xs); line-height: 1.4; }

.Sparkline-module__wrapper___f24dA {
  display: inline-block;
  vertical-align: middle;
}

.Sparkline-module__svg___mpG9R {
  display: block;
  width: 100%;
  height: 100%;
}

/* A sparkline plots a trend over time, same reading-direction reasoning as
   LineChart's .plotInner — earlier-to-later should still map to
   start-to-end under dir="rtl". */
.Sparkline-module__wrapper___f24dA:dir(rtl) .Sparkline-module__svg___mpG9R {
  transform: scaleX(-1);
}

.NotificationBadge-module__wrapper___hHYig {
  position: relative;
  display: inline-flex;
  flex: none;
}

.NotificationBadge-module__badge___rPWMh {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  transform: translate(35%, -35%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: var(--radius-full);
  border: 2px solid var(--paper);
  background: var(--color-danger);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.NotificationBadge-module__dot___AYyHg {
  min-width: 10px;
  width: 10px;
  height: 10px;
  padding: 0;
}

.NotificationBadge-module__srOnly___IjXEi {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.Stepper-module__nav___syRCH {
  font-family: var(--font-body);
}

.Stepper-module__list___41uJy {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.Stepper-module__horizontal___USHT1 .Stepper-module__list___41uJy {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
}

.Stepper-module__vertical___d4mOs .Stepper-module__list___41uJy {
  flex-direction: column;
  gap: var(--space-3);
}

.Stepper-module__item___naVxf {
  position: relative;
  flex: 1 1;
  min-width: 0;
}

.Stepper-module__vertical___d4mOs .Stepper-module__item___naVxf {
  flex: none;
}

/* The marker circle and its label sit side by side (not stacked), so a
   connector reaching all the way to the next circle's center would run
   straight through this item's own label text — which is exactly the
   overlap this previously had. Two segments meet edge-to-edge at the
   item's own right edge (100%) instead of one line spanning the whole
   item: `.marker::after` below fills the item's own *trailing* space —
   from wherever this item's label/description actually ends up to the
   item's right edge — using `flex: 1` so it stops exactly at the content,
   regardless of label length, instead of guessing a fixed offset; this
   piece then only needs to cover the small fixed flex `gap` the rest of
   the way to the next marker, guaranteed empty since flex items can't
   render into it. (An earlier version confined the *entire* connector to
   just this `gap` segment, which was overlap-safe but left the line
   looking like a short, disconnected stub floating in the item's own
   unused trailing space whenever a label was shorter than the item's
   flex-stretched width — not "too short" from bad math, but genuinely
   only 16px of a connector that needs to span however much whitespace
   the item's own content didn't use.) Drawn as ::after on the item
   *before* the gap, not ::before on the one after it — inset-inline-
   start: 100% only needs this item's own box, not the neighbor's width. */
.Stepper-module__horizontal___USHT1 .Stepper-module__item___naVxf:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  inset-inline-start: 100%;
  width: var(--space-4);
  height: 2px;
  background: var(--hairline);
}
.Stepper-module__horizontal___USHT1 .Stepper-module__item___naVxf:not(:last-child) .Stepper-module__marker___KMnQy::after {
  content: "";
  flex: 1 1;
  align-self: flex-start;
  margin-top: 13px;
  height: 2px;
  background: var(--hairline);
}
.Stepper-module__horizontal___USHT1 .Stepper-module__item___naVxf:not(:last-child):has(+ .Stepper-module__item___naVxf.Stepper-module__filled___c7eyh)::after,
.Stepper-module__horizontal___USHT1 .Stepper-module__item___naVxf:not(:last-child):has(+ .Stepper-module__item___naVxf.Stepper-module__filled___c7eyh) .Stepper-module__marker___KMnQy::after {
  background: var(--green);
}

/* Same reasoning as the horizontal connector above: ::after on the item
   before the gap, sized off that item's own height rather than a fixed
   length matching just the list `gap` — a label/description can wrap to
   more than one line, and a fixed-length line reaching up from the next
   item would fall short of the previous item's marker whenever that item
   is taller than the shortest case. Runs edge-to-edge between the two
   28px markers (this one's bottom to the next one's top), not
   center-to-center, so it doesn't visibly cut across either circle. */
.Stepper-module__vertical___d4mOs .Stepper-module__item___naVxf:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  inset-inline-start: 13px;
  width: 2px;
  height: calc(100% + var(--space-3) - 28px);
  background: var(--hairline);
}
.Stepper-module__vertical___d4mOs .Stepper-module__item___naVxf:not(:last-child):has(+ .Stepper-module__item___naVxf.Stepper-module__filled___c7eyh)::after {
  background: var(--green);
}

.Stepper-module__marker___KMnQy {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: start;
  cursor: default;
  position: relative;
  z-index: 1;
  width: 100%;
}
button.Stepper-module__marker___KMnQy {
  cursor: pointer;
}
button.Stepper-module__marker___KMnQy:hover .Stepper-module__index___msFWV {
  background: var(--hairline);
}
button.Stepper-module__marker___KMnQy:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-s);
}

.Stepper-module__index___msFWV {
  flex: none;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-raised);
  border: 1.5px solid var(--hairline);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--ink-3);
}

/* .active comes first so that a step which is *both* active and completed
   (e.g. a final "review" step marked done) resolves to the filled,
   completed look rather than the outlined, in-progress one — the two
   selectors share the same specificity, so the one declared last wins the
   tie when a step carries both classes. */
.Stepper-module__active___kL-CH .Stepper-module__index___msFWV {
  border-color: var(--green);
  color: var(--green);
  background: var(--paper);
}

.Stepper-module__completed___gcFHM .Stepper-module__index___msFWV {
  background: var(--green);
  border-color: var(--green);
  color: var(--paper);
}

.Stepper-module__text___KujR4 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
  min-width: 0;
}

.Stepper-module__label___8irAI {
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.Stepper-module__active___kL-CH .Stepper-module__label___8irAI,
.Stepper-module__completed___gcFHM .Stepper-module__label___8irAI {
  color: var(--ink);
  font-weight: var(--font-weight-semibold);
}

.Stepper-module__description___xHXx3 {
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.Text-module__text___78lq0 {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.6;
  text-align: start;
}

.Text-module__lg___dTh7Q { font-size: var(--text-base); }
.Text-module__base___WgU-t { font-size: var(--text-sm); }
.Text-module__sm___PbTAI { font-size: var(--text-xs); }
.Text-module__xs___5PMhJ { font-size: var(--text-xs); line-height: 1.4; }

.Text-module__default___C-mll { color: var(--ink); }
.Text-module__muted___upr8w { color: var(--ink-3); }
.Text-module__success___cfUZi { color: var(--color-success); }
.Text-module__warning___vlZQ5 { color: var(--color-warning); }
.Text-module__danger___0zsNi { color: var(--color-danger); }

.Text-module__regular___Lo8tB { font-weight: normal; }
.Text-module__semibold___yUnFf { font-weight: var(--font-weight-semibold); }

.Timeline-module__list___RrNB1 {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
}

.Timeline-module__item___T5xdQ {
  position: relative;
  display: flex;
  gap: var(--space-3);
}

/* Drawn as ::after on the item *before* the gap, sized off that item's own
   height (100%), not a fixed length matching just the list `gap` — items
   vary in height (a description adds a wrapped line or two), and a
   fixed-length line reaching up from the *next* item would fall short of
   the *previous* item's marker whenever that item is taller than the
   shortest case. Runs edge-to-edge between the two markers (this item's
   marker bottom, 16px — its 4px margin-top plus the 12px marker itself —
   down to the next marker's top, 4px into the next item) rather than
   center-to-center: a center-to-center line would visibly cut across each
   marker's own circle, which reads as "inside" it, especially for the
   hollow current/upcoming markers where the line would show straight
   through the middle. */
.Timeline-module__connected___WV-Sz::after {
  content: "";
  position: absolute;
  top: 16px;
  inset-inline-start: 5px;
  width: 2px;
  height: calc(100% + var(--space-5) - 12px);
  background: var(--hairline);
}
/* Green once the *next* step has been reached at all (complete or still
   in progress) — not only once it's fully complete. Matches Stepper's
   equivalent "filled" rule: the segment you've already walked past reads
   as traveled the moment you arrive at its far end, not only once you've
   also left that step behind. */
.Timeline-module__connected___WV-Sz:has(+ .Timeline-module__item___T5xdQ:not(.Timeline-module__upcoming___NbKdt))::after {
  background: var(--green);
}

.Timeline-module__marker___kmPV- {
  flex: none;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: var(--radius-full);
  background: var(--paper);
  border: 2px solid var(--hairline);
}

.Timeline-module__complete___1zJBw .Timeline-module__marker___kmPV- {
  background: var(--green);
  border-color: var(--green);
}

.Timeline-module__current___7v3OX .Timeline-module__marker___kmPV- {
  border-color: var(--green);
}

.Timeline-module__content___CSC1i {
  min-width: 0;
  padding-bottom: 2px;
}

.Timeline-module__heading___yksAG {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.Timeline-module__title___DxfAX {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
}

.Timeline-module__upcoming___NbKdt .Timeline-module__title___DxfAX {
  color: var(--ink-3);
  font-weight: normal;
}

.Timeline-module__timestamp___owiRu {
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.Timeline-module__description___f9sxV {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.FeatureGrid-module__section___d2EwT {
  font-family: var(--font-body);
}

.FeatureGrid-module__header___e0MrG {
  max-width: 640px;
  margin-bottom: var(--space-6);
}
.FeatureGrid-module__align-center___z-tab {
  margin-inline: auto;
  text-align: center;
}

.FeatureGrid-module__eyebrow___eUToK {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
}

.FeatureGrid-module__heading___NavaA {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-xl);
  color: var(--ink);
}

.FeatureGrid-module__subheading___i98ly {
  margin: var(--space-3) 0 0;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--ink-2);
}

.FeatureGrid-module__grid___6sW6f {
  display: grid;
  gap: var(--space-6);
}
.FeatureGrid-module__cols-2___BDTXr {
  grid-template-columns: repeat(2, 1fr);
}
.FeatureGrid-module__cols-3___BVpBs {
  grid-template-columns: repeat(3, 1fr);
}
.FeatureGrid-module__cols-4___aMCHu {
  grid-template-columns: repeat(4, 1fr);
}

.FeatureGrid-module__feature___Mz9sV {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.FeatureGrid-module__icon___rQCzd {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-m);
  background: var(--green-tint);
  color: var(--green);
}
.FeatureGrid-module__icon___rQCzd svg {
  width: 22px;
  height: 22px;
}

.FeatureGrid-module__featureTitle___exfN7 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-md);
  color: var(--ink);
}

.FeatureGrid-module__featureDescription___E-qzB {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-2);
}

/* Same breakpoints Grid's own `cols-*` collapse uses. */
@media (max-width: 768px) {
  .FeatureGrid-module__cols-3___BVpBs,
  .FeatureGrid-module__cols-4___aMCHu {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .FeatureGrid-module__cols-2___BDTXr,
  .FeatureGrid-module__cols-3___BVpBs,
  .FeatureGrid-module__cols-4___aMCHu {
    grid-template-columns: 1fr;
  }
}

.List-module__list___9aWGq {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
}

.List-module__divided___F1ey- .List-module__item___PzRr9:not(:last-child) {
  border-bottom: 1px solid var(--hairline);
}

.List-module__item___PzRr9 {
  color: var(--ink);
}
.List-module__item___PzRr9.List-module__disabled___pOIfE {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.List-module__row___I9MZU {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-s);
  transition: background-color var(--duration-base) var(--ease-standard);
}

a.List-module__row___I9MZU {
  cursor: pointer;
}
a.List-module__row___I9MZU:hover {
  background: var(--paper-raised);
}
a.List-module__row___I9MZU:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.List-module__start___z2mib {
  flex: none;
  display: inline-flex;
  color: var(--ink-3);
}

.List-module__content___mGq6P {
  flex: 1 1;
  min-width: 0;
  font-size: var(--text-sm);
}

.List-module__end___lGdOu {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.SidebarNav-module__nav___VTXRh {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-body);
}

.SidebarNav-module__item___EDnYp {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-3);
  text-decoration: none;
  background: transparent;
  border: none;
  text-align: start;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-s);
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

.SidebarNav-module__item___EDnYp:hover:not(.SidebarNav-module__active___UqcKf) {
  background: var(--paper-raised);
  color: var(--ink);
}

.SidebarNav-module__item___EDnYp:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.SidebarNav-module__active___UqcKf {
  background: var(--green);
  color: var(--paper);
  font-weight: var(--font-weight-semibold);
}

.SidebarNav-module__icon___wdYCf {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: none;
}

.AreaChart-module__wrapper___8kry7 {
  margin: 0;
  font-family: var(--font-body);
}

.AreaChart-module__title___kZUxx {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
  margin-bottom: var(--space-4);
  text-align: start;
}

.AreaChart-module__plotArea___oNVPh {
  display: flex;
  flex-direction: column;
}

.AreaChart-module__plotInner___UXs5R {
  position: relative;
  flex: 1 1;
  min-height: 0;
}

.AreaChart-module__plot___6-JdL {
  display: block;
  width: 100%;
  height: 100%;
}

/* The plot is positioned via explicit x/y math, so unlike BarChart's
   columns it doesn't mirror under RTL on its own — same :dir(rtl) technique
   LineChart's .plotInner uses; a filled area mirrors just as correctly as a
   bare polyline does. */
.AreaChart-module__plotInner___UXs5R:dir(rtl) {
  transform: scaleX(-1);
}

.AreaChart-module__categories___draon {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
}

.AreaChart-module__category___OOEM4 {
  font-size: var(--text-xs);
  color: var(--ink-2);
  text-align: center;
}

.AreaChart-module__legend___HGUCS {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.AreaChart-module__legendItem___Pefk8 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-2);
}

.AreaChart-module__swatch___RyaEN {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex: none;
}

.AreaChart-module__srOnly___hqbmR {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.Container-module__container___JMoiT {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* Sizes match tokens.ts's `breakpoints` (sm 640 / md 768 / lg 1024 / xl 1280) —
   a Container caps a page at the breakpoint it's named after, it doesn't query it. */
.Container-module__sm___9xZWj { max-width: 640px; }
.Container-module__md___boT6i { max-width: 768px; }
.Container-module__lg___CrVSD { max-width: 1024px; }
.Container-module__xl___48dOD { max-width: 1280px; }
.Container-module__full___JUHqy { max-width: none; }

@media (max-width: 640px) {
  .Container-module__container___JMoiT { padding-inline: var(--space-4); }
}

.ScatterChart-module__wrapper___JNsKa {
  margin: 0;
  font-family: var(--font-body);
}

.ScatterChart-module__title___PN5pU {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
  margin-bottom: var(--space-4);
  text-align: start;
}

.ScatterChart-module__plotRow___BqWqE {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
}

.ScatterChart-module__yLabel___Yuz2k {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--text-xs);
  color: var(--ink-2);
  flex: none;
  text-align: center;
}

.ScatterChart-module__xLabel___y9SzM {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-2);
  text-align: center;
}

/* Deliberately physical (not border-inline-start/border-block-end): a
   scatter plot's x/y axes are a graphing convention, not a reading-direction
   one — same reasoning PieChart's radial layout gives for skipping RTL
   mirroring entirely. Flipping these to the "other side" under dir="rtl"
   would make the plot read as a different, wrong graph, not a mirrored one. */
.ScatterChart-module__plotInner___02xEZ {
  position: relative;
  flex: 1 1;
  min-width: 0;
  border-left: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.ScatterChart-module__point___mtxZJ {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
  opacity: 0.85;
}

.ScatterChart-module__legend___OceTo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.ScatterChart-module__legendItem___NhGkK {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-2);
}

.ScatterChart-module__swatch___XIpwY {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex: none;
}

.ScatterChart-module__srOnly___v7gSz {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.Footer-module__footer___A76NF {
  font-family: var(--font-body);
  background: var(--paper-raised);
  border-block-start: 1px solid var(--hairline);
  padding: var(--space-7) var(--space-5) var(--space-5);
}

.Footer-module__top___oMBPr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-7);
  padding-bottom: var(--space-6);
}

.Footer-module__brandBlock___IYAj9 {
  max-width: 320px;
}

.Footer-module__brand___EmGiM {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
}

.Footer-module__description___gSSA8 {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-2);
}

.Footer-module__columns___yPGWV {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
}

.Footer-module__column___-B2Ii {
  min-width: 120px;
}

.Footer-module__columnHeading___4tX4a {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.Footer-module__linkList___723It {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.Footer-module__link___bhnLP {
  font-size: var(--text-sm);
  color: var(--ink-2);
  text-decoration: none;
}
.Footer-module__link___bhnLP:hover {
  color: var(--ink);
}
.Footer-module__link___bhnLP:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-s);
}

.Footer-module__bottom___np3Xe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-block-start: 1px solid var(--hairline);
}

.Footer-module__bottomText___dEdAZ {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.Footer-module__bottomLinks___9y0z3 {
  display: flex;
  gap: var(--space-4);
}

.Footer-module__bottomLink___ZCHdL {
  font-size: var(--text-xs);
  color: var(--ink-3);
  text-decoration: none;
}
.Footer-module__bottomLink___ZCHdL:hover {
  color: var(--ink-2);
}
.Footer-module__bottomLink___ZCHdL:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-s);
}

.Footer-module__social___w7t-P {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
/* Scoped to `<a>` descendants only, not a constraint on what `social` can
   hold — an icon-link row is the overwhelmingly common case, so it gets
   sensible default styling for free; anything else passed to the slot
   simply never matches this selector. */
.Footer-module__social___w7t-P a {
  display: inline-flex;
  color: var(--ink-3);
  transition: color var(--duration-base) var(--ease-standard);
}
.Footer-module__social___w7t-P a:hover {
  color: var(--ink);
}
.Footer-module__social___w7t-P a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-s);
}

/* Same breakpoint Navbar/AppShell/Grid/Container collapse at. */
@media (max-width: 768px) {
  .Footer-module__top___oMBPr {
    grid-template-columns: 1fr;
  }
  .Footer-module__columns___yPGWV {
    gap: var(--space-6);
  }
  .Footer-module__bottom___np3Xe {
    justify-content: flex-start;
  }
}

.Banner-module__banner___oyoWE {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-5);
  border-block-end: 1px solid transparent;
  box-sizing: border-box;
}

.Banner-module__icon___vzKmx {
  width: 18px;
  height: 18px;
  flex: none;
}

.Banner-module__message___uepT5 {
  flex: 1 1;
  min-width: 200px;
  color: var(--ink);
}

.Banner-module__action___47P8e {
  flex: none;
}

.Banner-module__dismiss___K2bzH {
  flex: none;
  width: 28px;
  height: 28px;
  margin: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-s);
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
}
.Banner-module__dismiss___K2bzH:hover { opacity: 1; }
.Banner-module__dismiss___K2bzH svg { width: 16px; height: 16px; }
.Banner-module__dismiss___K2bzH:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.Banner-module__success___uLYQ3 { background: var(--color-success-bg); color: var(--color-success); border-color: currentColor; }
.Banner-module__warning___9rua8 { background: var(--color-warning-bg); color: var(--color-warning); border-color: currentColor; }
.Banner-module__danger___Uzb-6 { background: var(--color-danger-bg); color: var(--color-danger); border-color: currentColor; }
.Banner-module__info___s2q0P { background: var(--color-info-bg); color: var(--color-info); border-color: currentColor; }

.Treemap-module__wrapper___SGuH1 {
  margin: 0;
  font-family: var(--font-body);
}

.Treemap-module__title___3sv12 {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
  margin-bottom: var(--space-4);
  text-align: start;
}

.Treemap-module__plot___obeFC {
  position: relative;
  max-width: 100%;
}

.Treemap-module__cell___iBKmx {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--paper);
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  overflow: hidden;
}

/*
 * Categorical fills range from near-black-on-white contrast (blue, violet)
 * to fairly washed-out (aqua, magenta — the two the palette's own
 * validation flags as sub-3:1 on light surfaces). No single fixed text
 * color would clear WCAG against all eight, the way --chart-fg-dark/light
 * do against the sequential ramp's *known* lightness order — so instead of
 * picking text color per token, the text sits on its own near-opaque chip.
 * The chip's contrast against --ink is fixed and independent of whatever
 * color is directly underneath it.
 */
.Treemap-module__cellLabel___1DS25,
.Treemap-module__cellValue___qN73x {
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  background: light-dark(rgba(255, 255, 255, 0.82), rgba(32, 28, 24, 0.78));
  color: var(--ink);
  border-radius: var(--radius-s);
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Treemap-module__cellLabel___1DS25 {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
}

.Treemap-module__cellValue___qN73x {
  font-size: var(--text-xs);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.Treemap-module__srOnly___mrS7r {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.AppShell-module__shell___-xp0O {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main";
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  background: var(--paper);
}

.AppShell-module__noSidebar___vxQy4 {
  grid-template-areas:
    "header"
    "main";
  grid-template-columns: 1fr;
}

.AppShell-module__header___HLKUY {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 56px;
  padding-inline: var(--space-5);
  border-block-end: 1px solid var(--hairline);
  background: var(--paper-raised);
}

.AppShell-module__sidebar___wyx-V {
  grid-area: sidebar;
  padding: var(--space-4);
  border-inline-end: 1px solid var(--hairline);
  overflow-y: auto;
}

.AppShell-module__main___O3GFv {
  grid-area: main;
  min-width: 0;
  padding: var(--space-5);
  overflow-y: auto;
}

/* Matches tokens.ts's breakpoints.md (768px), same convention Grid/Container
   already use — literal px since custom properties can't stand in for a
   media query condition. Below it, the sidebar stacks above main instead
   of sitting beside it. */
@media (max-width: 768px) {
  .AppShell-module__shell___-xp0O {
    grid-template-areas:
      "header"
      "sidebar"
      "main";
    grid-template-columns: 1fr;
  }
  /* Without this, `.noSidebar`'s own (unconditional, higher-up-in-the-file)
     2-row override loses the cascade to the rule right above once this
     media query is active -- same class, equal specificity, later in
     source wins regardless of viewport. That resurrected a phantom
     "sidebar" grid row even for a header+main-only shell (no <aside>
     rendered at all), which -- since `.shell`'s row track list still only
     defines 2 explicit tracks ("auto 1fr") for what's now 3 named areas --
     let that empty row claim the `1fr` track's share of the viewport
     height as blank space, pushing `main` down to the bottom of the
     screen below this breakpoint. */
  .AppShell-module__noSidebar___vxQy4 {
    grid-template-areas:
      "header"
      "main";
  }
  .AppShell-module__sidebar___wyx-V {
    border-inline-end: none;
    border-block-end: 1px solid var(--hairline);
  }
}

.ButtonGroup-module__group___Tgazn {
  display: inline-flex;
}

.ButtonGroup-module__horizontal___ayP77 {
  flex-direction: row;
}

.ButtonGroup-module__vertical___3XLPp {
  flex-direction: column;
}

.ButtonGroup-module__fullWidth___yPPcb {
  display: flex;
  width: 100%;
}
.ButtonGroup-module__fullWidth___yPPcb > button {
  flex: 1 1;
}

/* Every child button loses its own corners; the group re-applies them only
   to the two outer edges, and squares off the seam in between. Selecting
   the plain `button` element (not a class) means this works on whatever
   Button renders without either component knowing about the other. */
.ButtonGroup-module__group___Tgazn > button {
  border-radius: 0;
  position: relative;
}

.ButtonGroup-module__horizontal___ayP77 > button:not(:first-child) {
  margin-inline-start: -1px;
}
.ButtonGroup-module__vertical___3XLPp > button:not(:first-child) {
  margin-block-start: -1px;
}

.ButtonGroup-module__horizontal___ayP77 > button:first-child {
  border-start-start-radius: var(--radius-m);
  border-end-start-radius: var(--radius-m);
}
.ButtonGroup-module__horizontal___ayP77 > button:last-child {
  border-start-end-radius: var(--radius-m);
  border-end-end-radius: var(--radius-m);
}
.ButtonGroup-module__vertical___3XLPp > button:first-child {
  border-start-start-radius: var(--radius-m);
  border-start-end-radius: var(--radius-m);
}
.ButtonGroup-module__vertical___3XLPp > button:last-child {
  border-end-start-radius: var(--radius-m);
  border-end-end-radius: var(--radius-m);
}

/* A button's own focus ring/hover state would otherwise sit half-hidden
   under the next button's overlapping edge. */
.ButtonGroup-module__group___Tgazn > button:hover,
.ButtonGroup-module__group___Tgazn > button:focus-visible {
  z-index: 1;
}

.LogoCloud-module__section___idb6t {
  font-family: var(--font-body);
  text-align: center;
}

.LogoCloud-module__heading___5UXI7 {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.LogoCloud-module__row___DIuJ6 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
}

.LogoCloud-module__logoLink___8L3SB {
  display: inline-flex;
  border-radius: var(--radius-s);
}
.LogoCloud-module__logoLink___8L3SB:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.LogoCloud-module__logo___JVNQm {
  display: block;
  height: 28px;
  width: auto;
  /* Dimmed and desaturated by default so a row of arbitrary partner-logo
     colors doesn't compete with the page's own brand palette — full color
     on hover/focus is the reveal, not the resting state. */
  filter: grayscale(1);
  opacity: 0.6;
  transition:
    opacity var(--duration-base) var(--ease-standard),
    filter var(--duration-base) var(--ease-standard);
}
.LogoCloud-module__logoLink___8L3SB:hover .LogoCloud-module__logo___JVNQm,
.LogoCloud-module__logoLink___8L3SB:focus-visible .LogoCloud-module__logo___JVNQm {
  filter: none;
  opacity: 1;
}

.Skeleton-module__skeleton___CB4uF {
  display: block;
  background: var(--hairline);
  animation: Skeleton-module__pulse___8RWFn 1.6s var(--ease-standard) infinite;
}

.Skeleton-module__text___-A8IF {
  width: 100%;
  border-radius: var(--radius-s);
}

.Skeleton-module__circular___GVslN {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
}

.Skeleton-module__rectangular___g9Ypy {
  width: 100%;
  height: 80px;
  border-radius: var(--radius-m);
}

@keyframes Skeleton-module__pulse___8RWFn {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  .Skeleton-module__skeleton___CB4uF { animation-duration: 3s; }
}

.Tag-module__tag___16VPH {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease-standard);
}

.Tag-module__label___ZBPfO {
  padding: 3px var(--space-2);
}

.Tag-module__toggle___8KGep {
  appearance: none;
  background: transparent;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
}
.Tag-module__toggle___8KGep:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.Tag-module__toggle___8KGep:disabled {
  cursor: not-allowed;
}

.Tag-module__neutral___jAd-x { background: var(--hairline); color: var(--ink); }
.Tag-module__success___56lz4 { background: var(--color-success-bg); color: var(--color-success); }
.Tag-module__warning___UK7SC { background: var(--color-warning-bg); color: var(--color-warning); }
.Tag-module__danger___kJ-yx { background: var(--color-danger-bg); color: var(--color-danger); }
.Tag-module__info___hmHE- { background: var(--color-info-bg); color: var(--color-info); }
.Tag-module__gold___xYd0O { background: var(--gold-tint); color: var(--gold); }

.Tag-module__selected___gCWgJ {
  border-color: currentColor;
}

.Tag-module__disabled___Dvhpn {
  opacity: var(--opacity-disabled);
}

.Tag-module__remove___UEwgr {
  flex: none;
  width: 28px;
  height: 28px;
  margin: -6px -6px -6px -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.Tag-module__remove___UEwgr:hover {
  opacity: 1;
}
.Tag-module__remove___UEwgr svg {
  width: 12px;
  height: 12px;
}
.Tag-module__remove___UEwgr:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.Tag-module__remove___UEwgr:disabled {
  cursor: not-allowed;
}

/* Grow the real button box on touch — tags sit close together, so an
   invisible hit-slop overlay would risk reaching into a neighboring tag. */
@media (pointer: coarse) {
  .Tag-module__remove___UEwgr {
    width: 40px;
    height: 40px;
    margin: 0;
  }
}

.BarChart-module__wrapper___3jEyF {
  margin: 0;
  font-family: var(--font-body);
}

.BarChart-module__title___P-dZh {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
  margin-bottom: var(--space-4);
  text-align: start;
}

.BarChart-module__plot___c94nP {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
}

.BarChart-module__column___aMAHL {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1;
  min-width: 0;
  height: 100%;
}

.BarChart-module__value___cmuMb {
  font-size: var(--text-xs);
  color: var(--ink-2);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.BarChart-module__barTrack___aufhd {
  display: flex;
  align-items: flex-end;
  width: 100%;
  flex: 1 1;
}

.BarChart-module__bar___i74EO {
  width: 100%;
  min-height: 2px;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  transition: height var(--duration-base) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  .BarChart-module__bar___i74EO { transition: none; }
}

.BarChart-module__label___UErtE {
  font-size: var(--text-xs);
  color: var(--ink-2);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.BarChart-module__srOnly___rwDTh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ScrollReveal-module__reveal___PV3Cy {
  opacity: 0;
  transition:
    opacity var(--duration-slow) var(--ease-standard),
    transform var(--duration-slow) var(--ease-standard);
}

.ScrollReveal-module__up___X3SXG {
  transform: translateY(24px);
}
.ScrollReveal-module__down___Q3pKF {
  transform: translateY(-24px);
}
.ScrollReveal-module__start___10ogM {
  transform: translateX(-24px);
}
.ScrollReveal-module__start___10ogM:dir(rtl) {
  transform: translateX(24px);
}
.ScrollReveal-module__end___MMF-N {
  transform: translateX(24px);
}
.ScrollReveal-module__end___MMF-N:dir(rtl) {
  transform: translateX(-24px);
}
.ScrollReveal-module__none___9Kaeu {
  transform: none;
}

.ScrollReveal-module__revealed___f8YS4 {
  opacity: 1;
  transform: none;
}

/* Content stays fully visible and unmoving regardless of scroll position or
   the `revealed` state above — same "already at rest" treatment Modal/Drawer/
   CommandPalette's own entrance animations fall back to. */
@media (prefers-reduced-motion: reduce) {
  .ScrollReveal-module__reveal___PV3Cy {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.Gauge-module__wrapper___Ca4yY {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-body);
}

.Gauge-module__svg___dZwja {
  display: block;
  overflow: visible;
}

.Gauge-module__track___HW5lv {
  stroke: var(--hairline);
}

.Gauge-module__fill___ZEeoq {
  transition: stroke-dashoffset var(--duration-base) var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) {
  .Gauge-module__fill___ZEeoq { transition: none; }
}

.Gauge-module__target___Te1QR {
  stroke: var(--ink);
}

.Gauge-module__value___7-4IL {
  margin-top: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.Gauge-module__label___O4n5V {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--ink-2);
}

.Gauge-module__srOnly___SZk5d {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.RangeSlider-module__wrapper___o1aOo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-body);
}

.RangeSlider-module__header___b2gnv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.RangeSlider-module__label___jaBOA {
  font-size: var(--text-sm);
  color: var(--ink);
}

.RangeSlider-module__values___O7vlN {
  font-size: var(--text-xs);
  color: var(--ink-2);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.RangeSlider-module__trackWrap___dr95S {
  position: relative;
  height: 20px;
}
.RangeSlider-module__trackWrap___dr95S:has(.RangeSlider-module__input___1MASw:disabled) {
  opacity: var(--opacity-disabled);
}

.RangeSlider-module__track___j-2iy {
  position: absolute;
  top: 50%;
  inset-inline: 0;
  transform: translateY(-50%);
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--hairline);
}

.RangeSlider-module__fill___1pbqj {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--green);
  border-radius: var(--radius-full);
}

/* Layered on top of .track/.fill at the same box, each capturing pointer
   events only on its own thumb (below) so the two inputs never fight over
   which one a track click belongs to — there simply is no click-the-track
   gesture, only drag-the-handle. */
.RangeSlider-module__input___1MASw {
  position: absolute;
  inset-inline: 0;
  top: 0;
  width: 100%;
  margin: 0;
  height: 20px;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}
.RangeSlider-module__input___1MASw:dir(rtl) { direction: rtl; }
.RangeSlider-module__input___1MASw:disabled { cursor: not-allowed; }

.RangeSlider-module__input___1MASw::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}
.RangeSlider-module__input___1MASw::-moz-range-track {
  height: 4px;
  background: transparent;
}

.RangeSlider-module__input___1MASw::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  margin-top: -6px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--paper);
  border: 2px solid var(--green);
  box-shadow: var(--shadow-s);
  cursor: pointer;
}
.RangeSlider-module__input___1MASw::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--paper);
  border: 2px solid var(--green);
  box-shadow: var(--shadow-s);
  cursor: pointer;
}
.RangeSlider-module__input___1MASw:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--focus-ring);
}
.RangeSlider-module__input___1MASw:focus-visible::-moz-range-thumb {
  box-shadow: var(--focus-ring);
}

.Alert-module__alert___7cYyI {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-4);
  border-radius: var(--radius-m);
  border: 1px solid transparent;
}

.Alert-module__icon___Zg6SB {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
}

.Alert-module__body___B60Rk {
  flex: 1 1;
  min-width: 0;
}

.Alert-module__title___abGgF {
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.Alert-module__description___pXPvw {
  margin-top: 2px;
  color: inherit;
}

.Alert-module__dismiss___dQPPE {
  flex: none;
  align-self: center;
  width: 28px;
  height: 28px;
  margin: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-s);
  color: inherit;
  cursor: pointer;
  opacity: .7;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.Alert-module__dismiss___dQPPE:hover { opacity: 1; }
.Alert-module__dismiss___dQPPE svg { width: 16px; height: 16px; }
.Alert-module__dismiss___dQPPE:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.Alert-module__success___1bzoB { background: var(--color-success-bg); color: var(--color-success); border-color: currentColor; }
.Alert-module__warning___q-j1Q { background: var(--color-warning-bg); color: var(--color-warning); border-color: currentColor; }
.Alert-module__danger___CiZkW { background: var(--color-danger-bg); color: var(--color-danger); border-color: currentColor; }
.Alert-module__info___9r3r1 { background: var(--color-info-bg); color: var(--color-info); border-color: currentColor; }

.Alert-module__title___abGgF, .Alert-module__description___pXPvw { color: var(--ink); }

.Menu-module__root___Hh-vp {
  position: relative;
  display: inline-block;
}

.Menu-module__trigger___czBaL {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard);
}

.Menu-module__trigger___czBaL:hover {
  background: var(--hairline);
}

.Menu-module__trigger___czBaL:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.Menu-module__list___SVGZL {
  position: absolute;
  top: calc(100% + var(--space-2));
  z-index: var(--z-dropdown);
  min-width: 180px;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  /* A real transition can't play here — the list is only ever in the DOM
     while open (see Menu.tsx's `{open && ...}`), so there's no "before"
     state for a property change to animate from. An animation plays on
     mount regardless, same reasoning Drawer's slide-in uses. */
  animation: Menu-module__menuIn___BxtSO var(--duration-base) var(--ease-standard);
}

@keyframes Menu-module__menuIn___BxtSO {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .Menu-module__list___SVGZL { animation: none; }
}

.Menu-module__left___1TSxe { left: 0; }
.Menu-module__right___OAEQl { right: 0; }

.Menu-module__item___NMXha {
  display: block;
  width: 100%;
  text-align: start;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: var(--radius-s);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

.Menu-module__item___NMXha:hover:not(:disabled) {
  background: var(--green-tint);
  color: var(--green-dark);
}

.Menu-module__item___NMXha:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.Menu-module__item___NMXha.Menu-module__danger___-VLkc {
  color: var(--color-danger);
}
.Menu-module__item___NMXha.Menu-module__danger___-VLkc:hover:not(:disabled) {
  background: var(--color-danger-bg);
}

.ProgressBar-module__wrapper___EQ-vF {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-body);
}

.ProgressBar-module__label___vO584 {
  font-size: var(--text-xs);
  color: var(--ink-2);
}

/* flex (not absolute positioning) so the fill grows from the inline-start
   side under dir="rtl" without needing a separate mirrored rule. */
.ProgressBar-module__track___5Fp2t {
  display: flex;
  width: 100%;
  height: 8px;
  background: var(--hairline);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.ProgressBar-module__fill___6W-EK {
  background: var(--green);
  border-radius: var(--radius-full);
  transition: width var(--duration-base) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  .ProgressBar-module__fill___6W-EK { transition: none; }
}

.ColorPicker-module__field___heB-N {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-body);
}

.ColorPicker-module__label___fR5Ph {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
}

.ColorPicker-module__required___rC2sN {
  color: var(--color-danger);
}

.ColorPicker-module__row___c5yRp {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}

.ColorPicker-module__swatch___YW0ad {
  flex: none;
  width: 40px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  background: var(--paper-raised);
  cursor: pointer;
  position: relative;
}
.ColorPicker-module__swatch___YW0ad:has(.ColorPicker-module__nativeInput___6alDo:disabled) {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}
.ColorPicker-module__swatch___YW0ad:has(.ColorPicker-module__nativeInput___6alDo:focus-visible) {
  outline: none;
  box-shadow: var(--focus-ring);
}

.ColorPicker-module__nativeInput___6alDo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ColorPicker-module__srOnly___oF0Q1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ColorPicker-module__hexInput___kEFrT {
  flex: 1 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: var(--space-3);
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}
.ColorPicker-module__hexInput___kEFrT:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-tint);
}
.ColorPicker-module__hexInput___kEFrT:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.ColorPicker-module__row___c5yRp.ColorPicker-module__hasError___3AYOT .ColorPicker-module__hexInput___kEFrT {
  border-color: var(--color-danger);
}
.ColorPicker-module__row___c5yRp.ColorPicker-module__hasError___3AYOT .ColorPicker-module__hexInput___kEFrT:focus-visible {
  box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.ColorPicker-module__helperText___tOHdJ {
  font-size: var(--text-xs);
  color: var(--ink-2);
  margin: 0;
}

.ColorPicker-module__errorText___zf7Vg {
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin: 0;
}

.Avatar-module__avatar___3xMuZ {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
}

.Avatar-module__sm___sZ2bk { width: 28px; height: 28px; font-size: var(--text-xs); }
.Avatar-module__md___Fdkbz { width: 40px; height: 40px; font-size: var(--text-sm); }
.Avatar-module__lg___pTTUA { width: 56px; height: 56px; font-size: var(--text-md); }

/* Circular clip lives on this inner wrapper, not .avatar itself — .status is
   a sibling positioned against .avatar's own box so the badge at the corner
   isn't cut off by the same clip that rounds off the image/initials. */
.Avatar-module__content___Bs3Ta {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--green-tint);
  color: var(--green-dark);
  overflow: hidden;
}

.Avatar-module__image___ieqGp {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Avatar-module__status___ISBnL {
  position: absolute;
  inset-inline-end: -1px;
  bottom: -1px;
  width: 30%;
  height: 30%;
  min-width: 8px;
  min-height: 8px;
  border-radius: var(--radius-full);
  border: 2px solid var(--paper);
}

.Avatar-module__online___-aWoW { background: var(--color-success); }
.Avatar-module__offline___-StX3 { background: var(--ink-3); }

/* Same shrink technique as Accordion.module.css, but scoped to a single
   standalone <details> with full Card-style chrome (border on every side,
   its own radius/elevation) rather than a list item sharing one container
   with border-top/border-bottom dividers. */
.CollapsibleCard-module__details___eF79h {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  background: var(--paper-raised);
  /* Lets `block-size: auto` below participate in a transition — without
     this, the browser can't interpolate to/from an intrinsic size and the
     panel would just snap open/closed regardless of the transition rules. */
  interpolate-size: allow-keywords;
}

.CollapsibleCard-module__elevated___LSVzb {
  border-color: transparent;
  box-shadow: var(--shadow-m);
}

.CollapsibleCard-module__summary___c1Xh4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-base);
  color: var(--ink);
}
.CollapsibleCard-module__summary___c1Xh4::-webkit-details-marker {
  display: none;
}
.CollapsibleCard-module__summary___c1Xh4:hover {
  color: var(--green);
}
.CollapsibleCard-module__summary___c1Xh4:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-s);
}

.CollapsibleCard-module__title___1uYiM {
  min-width: 0;
}

.CollapsibleCard-module__chevron___BxViI {
  flex: none;
  color: var(--ink-3);
  transition: transform var(--duration-base) var(--ease-standard);
}
.CollapsibleCard-module__details___eF79h[open] > .CollapsibleCard-module__summary___c1Xh4 .CollapsibleCard-module__chevron___BxViI {
  transform: rotate(180deg);
}

/* The panel: everything after <summary>, which the browser renders inside
   an internal `::details-content` box. Closed state starts collapsed to
   zero block-size so opening animates a real expand instead of the native
   instant reveal. `allow-discrete` lets the transition cover
   `content-visibility` too, which is what keeps the closed panel out of
   layout/hit-testing/tab order between transitions rather than merely
   clipping it. */
.CollapsibleCard-module__details___eF79h::details-content {
  overflow: hidden;
  block-size: 0;
  opacity: 0;
  transition:
    block-size var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard),
    content-visibility var(--duration-base) var(--ease-standard) allow-discrete;
}
.CollapsibleCard-module__details___eF79h[open]::details-content {
  block-size: auto;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .CollapsibleCard-module__chevron___BxViI { transition: none; }
  .CollapsibleCard-module__details___eF79h::details-content { transition: none; }
}

.CollapsibleCard-module__content___iw-z5 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.6;
}

.CollapsibleCard-module__padding-none___h-LL1 { padding: 0; }
.CollapsibleCard-module__padding-sm___V-WwS { padding: 0 var(--space-3) var(--space-3); }
.CollapsibleCard-module__padding-md___diz5O { padding: 0 var(--space-5) var(--space-5); }
.CollapsibleCard-module__padding-lg___pcccg { padding: 0 var(--space-6) var(--space-6); }

.Tabs-module__list___qRVME {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
}

.Tabs-module__tab___IdDYc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-s);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

.Tabs-module__tab___IdDYc:hover:not(.Tabs-module__active___PTNtG):not(:disabled) {
  color: var(--ink);
  background: var(--hairline);
}

.Tabs-module__tab___IdDYc:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.Tabs-module__tab___IdDYc:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.Tabs-module__active___PTNtG {
  background: var(--green);
  color: var(--paper);
  font-weight: var(--font-weight-semibold);
}

.SegmentedControl-module__fieldset___LIZ8R {
  display: inline-flex;
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.SegmentedControl-module__group___mYyFC {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
}

.SegmentedControl-module__option___8voVw {
  display: inline-flex;
}

.SegmentedControl-module__input___IEP3u {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.SegmentedControl-module__label___mS17q {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-3);
  background: transparent;
  border-radius: var(--radius-s);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

.SegmentedControl-module__input___IEP3u:not(:disabled):not(:checked) + .SegmentedControl-module__label___mS17q:hover {
  color: var(--ink);
  background: var(--hairline);
}

.SegmentedControl-module__input___IEP3u:checked + .SegmentedControl-module__label___mS17q {
  background: var(--green);
  color: var(--paper);
  font-weight: var(--font-weight-semibold);
}

.SegmentedControl-module__input___IEP3u:focus-visible + .SegmentedControl-module__label___mS17q {
  outline: none;
  box-shadow: var(--focus-ring);
}

.SegmentedControl-module__input___IEP3u:disabled + .SegmentedControl-module__label___mS17q {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.SegmentedControl-module__srOnly___qnGcR {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.Textarea-module__field___Tt-SB {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-body);
}

.Textarea-module__label___cWLXP {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
}

.Textarea-module__required___rDZXE {
  color: var(--color-danger);
}

.Textarea-module__textarea___Z-y6g {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: var(--space-3);
  min-height: 96px;
  resize: vertical;
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.Textarea-module__textarea___Z-y6g::placeholder {
  color: var(--ink-3);
}

.Textarea-module__textarea___Z-y6g:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-tint);
}

.Textarea-module__textarea___Z-y6g:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.Textarea-module__textarea___Z-y6g.Textarea-module__hasError___FSCc9 {
  border-color: var(--color-danger);
}
.Textarea-module__textarea___Z-y6g.Textarea-module__hasError___FSCc9:focus-visible {
  box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.Textarea-module__helperText___DLA81 {
  font-size: var(--text-xs);
  color: var(--ink-2);
  margin: 0;
}

.Textarea-module__errorText___ey07q {
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin: 0;
}

.TextField-module__field___HpBiu {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-body);
}

.TextField-module__label___aAOss {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
}

.TextField-module__required___zeNXP {
  color: var(--color-danger);
}

.TextField-module__srOnly___Ldx-w {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.TextField-module__input___RL-My {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.TextField-module__input___RL-My::placeholder {
  color: var(--ink-3);
}

.TextField-module__input___RL-My:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-tint);
}

.TextField-module__input___RL-My:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.TextField-module__input___RL-My.TextField-module__hasError___uAQIM {
  border-color: var(--color-danger);
}
.TextField-module__input___RL-My.TextField-module__hasError___uAQIM:focus-visible {
  box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.TextField-module__sm___fmqZ5 { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }
.TextField-module__md___fIzHt { font-size: var(--text-sm); padding: var(--space-3) var(--space-3); }
.TextField-module__lg___fOSc9 { font-size: var(--text-base); padding: var(--space-4) var(--space-4); }

.TextField-module__helperText___Ujp2M {
  font-size: var(--text-xs);
  color: var(--ink-2);
  margin: 0;
}

.TextField-module__errorText___6csLM {
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin: 0;
}

.Radio-module__wrapper___P-gFm {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
}

.Radio-module__wrapper___P-gFm:has(.Radio-module__input___7R8ZN:disabled) {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.Radio-module__input___7R8ZN {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.Radio-module__dot___P7ejP {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius-full);
  background: var(--paper);
  transition: border-color var(--duration-base) var(--ease-standard);
}

.Radio-module__dot___P7ejP::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: var(--radius-full);
  background: var(--green);
  transform: scale(0);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.Radio-module__input___7R8ZN:checked + .Radio-module__dot___P7ejP {
  border-color: var(--green);
}
.Radio-module__input___7R8ZN:checked + .Radio-module__dot___P7ejP::after {
  transform: scale(1);
}

.Radio-module__input___7R8ZN:focus-visible + .Radio-module__dot___P7ejP {
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .Radio-module__dot___P7ejP::after { transition: none; }
}

/* Same reasoning as Checkbox: grow the real row height on touch instead of
   an invisible overlay that could bleed into an adjacent row. */
@media (pointer: coarse) {
  .Radio-module__wrapper___P-gFm {
    min-height: 44px;
  }
}

.Radio-module__label___vAFIP {
  -webkit-user-select: none;
          user-select: none;
}

.Pagination-module__nav___RKxKa {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
}

.Pagination-module__step___B5YFK,
.Pagination-module__page___WjG0l {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

.Pagination-module__step___B5YFK svg {
  width: 16px;
  height: 16px;
}

.Pagination-module__step___B5YFK svg:dir(rtl) {
  transform: scaleX(-1);
}

.Pagination-module__step___B5YFK:hover:not(:disabled),
.Pagination-module__page___WjG0l:hover:not(.Pagination-module__active___1kqsJ) {
  background: var(--paper-raised);
  border-color: var(--hairline);
  color: var(--ink);
}

.Pagination-module__step___B5YFK:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.Pagination-module__step___B5YFK:focus-visible,
.Pagination-module__page___WjG0l:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.Pagination-module__active___1kqsJ {
  background: var(--green);
  color: var(--paper);
  font-weight: var(--font-weight-semibold);
}

.Pagination-module__ellipsis___V294k {
  min-width: 32px;
  text-align: center;
  color: var(--ink-3);
}

.Checkbox-module__wrapper___rpthW {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
}

.Checkbox-module__wrapper___rpthW:has(.Checkbox-module__input___2kt-h:disabled) {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.Checkbox-module__input___2kt-h {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.Checkbox-module__box___OCPee {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius-s);
  background: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

.Checkbox-module__input___2kt-h:checked + .Checkbox-module__box___OCPee,
.Checkbox-module__input___2kt-h:indeterminate + .Checkbox-module__box___OCPee {
  background: var(--green);
  border-color: var(--green);
}

.Checkbox-module__check___4HYWn {
  width: 12px;
  height: 12px;
  color: var(--paper);
  opacity: 0;
  transform: scale(.6);
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.Checkbox-module__input___2kt-h:checked + .Checkbox-module__box___OCPee .Checkbox-module__check___4HYWn {
  opacity: 1;
  transform: scale(1);
}

.Checkbox-module__dash___5Dkdl {
  position: absolute;
  width: 8px;
  height: 2px;
  background: var(--paper);
  border-radius: 1px;
  opacity: 0;
}

.Checkbox-module__input___2kt-h:indeterminate + .Checkbox-module__box___OCPee .Checkbox-module__dash___5Dkdl {
  opacity: 1;
}
.Checkbox-module__input___2kt-h:indeterminate + .Checkbox-module__box___OCPee .Checkbox-module__check___4HYWn {
  opacity: 0;
}

.Checkbox-module__input___2kt-h:focus-visible + .Checkbox-module__box___OCPee {
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .Checkbox-module__check___4HYWn { transition: opacity var(--duration-fast) var(--ease-standard); }
}

/* Touch has no hover/cursor precision to lean on, so grow the real,
   in-flow hit area rather than the visible glyph — an invisible overlay
   would risk overlapping adjacent rows in a tight list. */
@media (pointer: coarse) {
  .Checkbox-module__wrapper___rpthW {
    min-height: 44px;
  }
}

.Checkbox-module__label___cwRtI {
  -webkit-user-select: none;
          user-select: none;
}

.Switch-module__wrapper___kudO9 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
}

.Switch-module__wrapper___kudO9:has(.Switch-module__input___5BPNu:disabled) {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.Switch-module__input___5BPNu {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.Switch-module__track___7ObdZ {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--hairline);
  transition: background-color var(--duration-base) var(--ease-standard);
}

.Switch-module__input___5BPNu:checked + .Switch-module__track___7ObdZ {
  background: var(--green);
}

.Switch-module__thumb___-FTeK {
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--paper);
  box-shadow: var(--shadow-s);
  transition: inset-inline-start var(--duration-base) var(--ease-standard);
}

.Switch-module__input___5BPNu:checked + .Switch-module__track___7ObdZ .Switch-module__thumb___-FTeK {
  inset-inline-start: 18px;
}

.Switch-module__input___5BPNu:focus-visible + .Switch-module__track___7ObdZ {
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .Switch-module__thumb___-FTeK { transition: none; }
}

/* Same reasoning as Checkbox: grow the real row height on touch instead of
   an invisible overlay that could bleed into an adjacent row. */
@media (pointer: coarse) {
  .Switch-module__wrapper___kudO9 {
    min-height: 44px;
  }
}

.Switch-module__label___LrH7V {
  -webkit-user-select: none;
          user-select: none;
}

.Button-module__button___2ZuB7 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-m);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard);
  white-space: nowrap;
}

.Button-module__button___2ZuB7:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.Button-module__button___2ZuB7:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

/* Sizes */
.Button-module__sm___NhG0g { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }
.Button-module__md___hH4h3 { font-size: var(--text-sm); padding: var(--space-3) var(--space-4); }
.Button-module__lg___2plQf { font-size: var(--text-base); padding: var(--space-4) var(--space-5); }

/* `sm`'s padding alone lands under the touch-target minimum. Growing
   min-height (not padding) keeps it a real, in-flow box — safe even in a
   ButtonGroup, where adjacent buttons touch edge-to-edge with no gap. */
@media (pointer: coarse) {
  .Button-module__sm___NhG0g { min-height: 44px; }
}

/* Variants */
.Button-module__primary___s1sM6 {
  background: var(--green);
  color: var(--paper);
}
.Button-module__primary___s1sM6:hover:not(:disabled) { background: var(--green-dark); }

.Button-module__secondary___R0waJ {
  background: var(--paper-raised);
  color: var(--ink);
  border-color: var(--hairline);
}
.Button-module__secondary___R0waJ:hover:not(:disabled) { background: var(--hairline); }

.Button-module__ghost___1KINV {
  background: transparent;
  color: var(--ink);
}
.Button-module__ghost___1KINV:hover:not(:disabled) { background: var(--hairline); }

.Button-module__danger___V4fX8 {
  background: var(--color-danger);
  color: var(--paper);
}
.Button-module__danger___V4fX8:hover:not(:disabled) { filter: brightness(0.9); }

.Button-module__icon___-43u5 {
  display: inline-flex;
  width: 1em;
  height: 1em;
}

.Button-module__labelHidden___JlWR- {
  opacity: 0;
}

.Button-module__spinner___ZExvW {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: Button-module__spin___JvkZu var(--duration-spin) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .Button-module__spinner___ZExvW { animation-duration: 1.5s; }
}

@keyframes Button-module__spin___JvkZu {
  to { transform: rotate(360deg); }
}

.Hero-module__hero___IB2tg {
  font-family: var(--font-body);
}

/* ── Bleed ─────────────────────────────────────────────────────────── */

.Hero-module__bleed___4qAK4 {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 60vh;
  padding: var(--space-8) var(--space-5);
  overflow: hidden;
  background: var(--paper-raised);
}

.Hero-module__mediaLayer___TKxl- {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.Hero-module__overlay___WnYNm {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.Hero-module__overlay-scrim___fjRza {
  background: var(--overlay-scrim);
}
.Hero-module__overlay-gradient___6s-qe {
  background: var(--overlay-gradient);
}

/* Text sitting on a photo backdrop stays a fixed near-white regardless of
   the site's light/dark toggle — same reasoning tokens.css's
   --chart-fg-dark/light comment gives for text drawn on a theme-invariant
   fill: the photo behind it doesn't re-theme, so the text reading correctly
   against it can't depend on --ink either. */
.Hero-module__onMedia___Grmxo .Hero-module__eyebrow___enSNb,
.Hero-module__onMedia___Grmxo .Hero-module__heading___diryy,
.Hero-module__onMedia___Grmxo .Hero-module__subheading___Jc1PU {
  color: #fff;
}

/* ── Split ─────────────────────────────────────────────────────────── */

.Hero-module__split___t-dXi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-7);
  padding: var(--space-7) var(--space-5);
}
.Hero-module__split___t-dXi .Hero-module__content___rkkfQ {
  max-width: none;
}

.Hero-module__splitMedia___eYPuo {
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.Hero-module__splitMedia___eYPuo .Hero-module__mediaEl___M-YXN {
  display: block;
}

/* `order` places a grid item at the container's logical start/end — already
   direction-aware, so this needs no separate `:dir(rtl)` mirror the way a
   physical `transform: translateX` would (see Drawer's `.end`/`.start`). */
.Hero-module__mediaStart___VnPWL {
  order: -1;
}

/* ── Content ───────────────────────────────────────────────────────── */

.Hero-module__content___rkkfQ {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 640px;
}

.Hero-module__align-center___0F7LP {
  margin-inline: auto;
  align-items: center;
  text-align: center;
}
.Hero-module__align-center___0F7LP .Hero-module__actions___gvqd- {
  justify-content: center;
}

.Hero-module__eyebrow___enSNb {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
}

.Hero-module__heading___diryy {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-2xl);
  line-height: 1.15;
  color: var(--ink);
}

.Hero-module__subheading___Jc1PU {
  margin: 0;
  max-width: 60ch;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--ink-2);
}

.Hero-module__actions___gvqd- {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.Hero-module__mediaEl___M-YXN {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Same breakpoint Navbar/AppShell/Grid/Container collapse at. */
@media (max-width: 768px) {
  .Hero-module__bleed___4qAK4 {
    min-height: 50vh;
    padding: var(--space-6) var(--space-4);
  }
  .Hero-module__split___t-dXi {
    grid-template-columns: 1fr;
    padding: var(--space-6) var(--space-4);
    gap: var(--space-5);
  }
  .Hero-module__heading___diryy {
    font-size: var(--text-xl);
  }
}

.ThemeToggle-module__wrapper___mM62t {
  display: inline-flex;
}

.StatCard-module__card___dZtiA {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-family: var(--font-body);
  min-width: 160px;
}

.StatCard-module__header___VjN26 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.StatCard-module__label___7x2Ut {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.StatCard-module__icon___1cpgd {
  display: flex;
  color: var(--ink-3);
  font-size: var(--text-lg);
}

.StatCard-module__value___EpcEa {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.StatCard-module__footer___mUi4- {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.StatCard-module__trend___KgOS1 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
}
.StatCard-module__trendIcon___n6iTi {
  width: 12px;
  height: 12px;
}

.StatCard-module__success___DT5xV { color: var(--color-success); }
.StatCard-module__danger___l70q0 { color: var(--color-danger); }
.StatCard-module__neutral___zQUKZ { color: var(--ink-3); }

.StatCard-module__helperText___vyMrB {
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.Slider-module__wrapper___KCCs1 {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-body);
}

.Slider-module__label___N4ak- {
  font-size: var(--text-sm);
  color: var(--ink);
}

.Slider-module__trackWrap___r7xDC {
  position: relative;
  display: flex;
  align-items: center;
  padding-block-start: 28px;
}

.Slider-module__bubble___bSUEB {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  min-width: 28px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-s);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.Slider-module__bubble___bSUEB:dir(rtl) { transform: translateX(50%); }

.Slider-module__input___J48Um {
  width: 100%;
  margin: 0;
  height: 20px;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* Range inputs default to `direction: ltr` in the UA stylesheet regardless
   of the document's dir — this override is required for the browser's own
   thumb placement (and Firefox's ::-moz-range-progress fill) to mirror
   under RTL at all. */
.Slider-module__input___J48Um:dir(rtl) { direction: rtl; }

.Slider-module__input___J48Um:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.Slider-module__input___J48Um::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: linear-gradient(
    to right,
    var(--green) var(--slider-fill),
    var(--hairline) var(--slider-fill)
  );
}
.Slider-module__input___J48Um:dir(rtl)::-webkit-slider-runnable-track {
  background: linear-gradient(
    to left,
    var(--green) var(--slider-fill),
    var(--hairline) var(--slider-fill)
  );
}
.Slider-module__input___J48Um::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -6px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--paper);
  border: 2px solid var(--green);
  box-shadow: var(--shadow-s);
}
.Slider-module__input___J48Um:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--focus-ring);
}

.Slider-module__input___J48Um::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--hairline);
}
.Slider-module__input___J48Um::-moz-range-progress {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--green);
}
.Slider-module__input___J48Um::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--paper);
  border: 2px solid var(--green);
  box-shadow: var(--shadow-s);
}
.Slider-module__input___J48Um:focus-visible::-moz-range-thumb {
  box-shadow: var(--focus-ring);
}

.CircularProgress-module__wrapper___J01iI {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* Rotated so the fill starts at 12 o'clock instead of the SVG default of
   3 o'clock. */
.CircularProgress-module__svg___TUYPH {
  transform: rotate(-90deg);
}

.CircularProgress-module__track___ISyM5 {
  stroke: var(--hairline);
}

.CircularProgress-module__fill___dJGtW {
  stroke: var(--green);
  transition: stroke-dashoffset var(--duration-base) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  .CircularProgress-module__fill___dJGtW { transition: none; }
}

.CircularProgress-module__value___QNMzL {
  position: absolute;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-xs);
  color: var(--ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.CircularProgress-module__visuallyHidden___ZhXHw {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.Combobox-module__field___BenH0 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-body);
}

.Combobox-module__label___KVkZO {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
}

.Combobox-module__control___SuuEQ {
  position: relative;
  display: flex;
  align-items: center;
}

.Combobox-module__input___-HTv1 {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: var(--space-3);
  padding-inline-end: var(--space-7);
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}
.Combobox-module__input___-HTv1::placeholder {
  color: var(--ink-3);
}
.Combobox-module__input___-HTv1:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-tint);
}
.Combobox-module__input___-HTv1:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}
.Combobox-module__input___-HTv1.Combobox-module__hasError___cktzm {
  border-color: var(--color-danger);
}
.Combobox-module__input___-HTv1.Combobox-module__hasError___cktzm:focus-visible {
  box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.Combobox-module__chevron___NVqyn {
  position: absolute;
  inset-inline-end: var(--space-3);
  width: 14px;
  height: 14px;
  color: var(--ink-3);
  pointer-events: none;
}

.Combobox-module__listbox___2wSrg {
  position: absolute;
  top: calc(100% + var(--space-1));
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: var(--z-dropdown);
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
}

.Combobox-module__option___vhhn5 {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-s);
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: pointer;
}
.Combobox-module__option___vhhn5[aria-disabled="true"] {
  color: var(--ink-3);
  cursor: not-allowed;
}
.Combobox-module__option___vhhn5.Combobox-module__active___XCgtX {
  background: var(--hairline);
}
.Combobox-module__option___vhhn5.Combobox-module__selected___T6nm2 {
  font-weight: var(--font-weight-semibold);
  color: var(--green);
}
.Combobox-module__option___vhhn5.Combobox-module__selected___T6nm2.Combobox-module__active___XCgtX {
  background: var(--green-tint);
}

.Combobox-module__empty___Ahw5K {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-3);
}

.Combobox-module__helperText___foSBX {
  font-size: var(--text-xs);
  color: var(--ink-2);
  margin: 0;
}

.Combobox-module__errorText___X18sQ {
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin: 0;
}

/* ── Interactive (native radio group) ─────────────────────────────────
   Row-reverse + the general sibling combinator is the standard CSS-only
   star-rating trick: DOM order is max→1, so a later sibling in markup is a
   lower star value, but row-reverse renders it visually *before* (to the
   inline-start of) higher values — meaning "~" naturally selects every star
   from the checked/hovered one back to the first, which is exactly the fill
   this widget needs, with zero JS beyond the onChange call itself. */
.Rating-module__rating___ovR5H {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 2px;
  border: none;
  padding: 0;
  margin: 0;
}

.Rating-module__rating___ovR5H.Rating-module__disabled___BwXHB {
  opacity: var(--opacity-disabled);
}

.Rating-module__input___M6sdT {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.Rating-module__star___ClpM5 {
  display: flex;
  color: var(--hairline);
  cursor: pointer;
  border-radius: var(--radius-s);
  transition: color var(--duration-base) var(--ease-standard);
}

.Rating-module__rating___ovR5H.Rating-module__disabled___BwXHB .Rating-module__star___ClpM5 {
  cursor: not-allowed;
}

.Rating-module__input___M6sdT:checked ~ .Rating-module__star___ClpM5 {
  color: var(--gold);
}

.Rating-module__rating___ovR5H:not(.Rating-module__disabled___BwXHB) .Rating-module__star___ClpM5:hover,
.Rating-module__rating___ovR5H:not(.Rating-module__disabled___BwXHB) .Rating-module__star___ClpM5:hover ~ .Rating-module__star___ClpM5 {
  color: var(--gold);
}

.Rating-module__input___M6sdT:focus-visible + .Rating-module__star___ClpM5 {
  box-shadow: var(--focus-ring);
}

.Rating-module__srOnly___W3OgY {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Read-only display (supports fractional values) ───────────────── */
.Rating-module__readOnly___aYCZR {
  display: inline-flex;
  gap: 2px;
}

.Rating-module__starTrack___TFITP {
  position: relative;
  display: inline-flex;
  color: var(--hairline);
}

.Rating-module__starFill___lAOQX {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--gold);
}

.TagsInput-module__field___EHD64 {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-body);
}

.TagsInput-module__label___4S-Wz {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
}

.TagsInput-module__control___mM6NJ {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  box-sizing: border-box;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: var(--space-2);
  cursor: text;
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}
.TagsInput-module__control___mM6NJ:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-tint);
}
.TagsInput-module__control___mM6NJ.TagsInput-module__hasError___BNy1e {
  border-color: var(--color-danger);
}
.TagsInput-module__control___mM6NJ.TagsInput-module__hasError___BNy1e:focus-within {
  box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.TagsInput-module__tag___JR38f {
  flex: none;
}

.TagsInput-module__input___hbPw2 {
  flex: 1 1;
  min-width: 120px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
}
.TagsInput-module__input___hbPw2::placeholder {
  color: var(--ink-3);
}
.TagsInput-module__input___hbPw2:focus {
  outline: none;
}
.TagsInput-module__input___hbPw2:disabled {
  cursor: not-allowed;
}

.TagsInput-module__helperText___ibR59 {
  font-size: var(--text-xs);
  color: var(--ink-2);
  margin: 0;
}

.TagsInput-module__errorText___HWBL6 {
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin: 0;
}

.FileUpload-module__wrapper___E0qHs {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-family: var(--font-body);
}

.FileUpload-module__dropzone___jqua0 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
  padding: var(--space-6) var(--space-5);
  border: 1.5px dashed var(--hairline);
  border-radius: var(--radius-l);
  background: var(--paper-raised);
  cursor: pointer;
  transition:
    border-color var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard);
}
.FileUpload-module__dropzone___jqua0:hover {
  border-color: var(--green);
}
.FileUpload-module__dropzone___jqua0.FileUpload-module__dragging___T14Yo {
  border-color: var(--green);
  background: var(--green-tint);
}
.FileUpload-module__dropzone___jqua0.FileUpload-module__disabled___WNUUl {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}
.FileUpload-module__dropzone___jqua0:has(.FileUpload-module__input___QwBxm:focus-visible) {
  outline: none;
  box-shadow: var(--focus-ring);
}

.FileUpload-module__input___QwBxm {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.FileUpload-module__instructions___AT-8B {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ink);
  font-size: var(--text-sm);
}

.FileUpload-module__subtext___GKGRO {
  color: var(--ink-3);
  font-size: var(--text-xs);
}

.FileUpload-module__hint___8dXlk {
  color: var(--ink-3);
  font-size: var(--text-xs);
}

.FileUpload-module__fileList___XIWLl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.FileUpload-module__fileItem___Fvpd1 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  font-size: var(--text-sm);
  color: var(--ink);
}

.FileUpload-module__fileName___xhFK5 {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.FileUpload-module__fileSize___dpTJf {
  flex: none;
  color: var(--ink-3);
  font-size: var(--text-xs);
}

.FileUpload-module__remove___jskra {
  flex: none;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-s);
  color: var(--ink-3);
  cursor: pointer;
}
.FileUpload-module__remove___jskra:hover {
  color: var(--ink);
}
.FileUpload-module__remove___jskra svg {
  width: 14px;
  height: 14px;
}
.FileUpload-module__remove___jskra:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.NumberInput-module__field___9qRru {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-body);
}

.NumberInput-module__label___fyNSO {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
}

.NumberInput-module__required___1ewMt {
  color: var(--color-danger);
}

.NumberInput-module__srOnly___C2YJH {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.NumberInput-module__control___Qre9- {
  display: flex;
  align-items: stretch;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.NumberInput-module__control___Qre9-:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-tint);
}

.NumberInput-module__control___Qre9-.NumberInput-module__hasError___98-ue {
  border-color: var(--color-danger);
}
.NumberInput-module__control___Qre9-.NumberInput-module__hasError___98-ue:focus-within {
  box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.NumberInput-module__input___Ss8p7 {
  flex: 1 1;
  min-width: 0;
  width: 100%;
  font-family: var(--font-body);
  color: var(--ink);
  background: transparent;
  border: none;
  text-align: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.NumberInput-module__input___Ss8p7:focus {
  outline: none;
}

/* Hide the browser's native spinner so the custom stepper buttons are the
   only increment/decrement affordance — two different-looking steppers on
   one field would be a worse experience than either alone. */
.NumberInput-module__input___Ss8p7::-webkit-outer-spin-button,
.NumberInput-module__input___Ss8p7::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.NumberInput-module__input___Ss8p7[type="number"] {
  -moz-appearance: textfield;
}

.NumberInput-module__input___Ss8p7:disabled {
  cursor: not-allowed;
}

.NumberInput-module__stepper___JRmoV {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  background: transparent;
  border: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard);
}
.NumberInput-module__stepper___JRmoV:first-child {
  border-inline-end: 1px solid var(--hairline);
  border-start-start-radius: var(--radius-m);
  border-end-start-radius: var(--radius-m);
}
.NumberInput-module__stepper___JRmoV:last-child {
  border-inline-start: 1px solid var(--hairline);
  border-start-end-radius: var(--radius-m);
  border-end-end-radius: var(--radius-m);
}
.NumberInput-module__stepper___JRmoV:hover:not(:disabled) {
  background: var(--hairline);
}
.NumberInput-module__stepper___JRmoV:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.NumberInput-module__sm___p2G3q { font-size: var(--text-xs); }
.NumberInput-module__sm___p2G3q .NumberInput-module__input___Ss8p7 { padding: var(--space-2) var(--space-2); }
.NumberInput-module__md___8J0Mb { font-size: var(--text-sm); }
.NumberInput-module__md___8J0Mb .NumberInput-module__input___Ss8p7 { padding: var(--space-3) var(--space-2); }
.NumberInput-module__lg___oLOi- { font-size: var(--text-base); }
.NumberInput-module__lg___oLOi- .NumberInput-module__input___Ss8p7 { padding: var(--space-4) var(--space-2); }

.NumberInput-module__helperText___0tllq {
  font-size: var(--text-xs);
  color: var(--ink-2);
  margin: 0;
}

.NumberInput-module__errorText___FDg9z {
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin: 0;
}

.DateRangePicker-module__wrapper___YucT6 {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-body);
}

.DateRangePicker-module__label___aelRb {
  font-size: var(--text-sm);
  color: var(--ink);
}

.DateRangePicker-module__trigger___RqG4K {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: var(--space-2) var(--space-4);
  text-align: start;
  cursor: pointer;
}
.DateRangePicker-module__trigger___RqG4K:hover:not(:disabled) {
  background: var(--hairline);
}
.DateRangePicker-module__trigger___RqG4K:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.DateRangePicker-module__trigger___RqG4K:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.DateRangePicker-module__panel___jzq7P {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-start: 0;
  z-index: var(--z-dropdown);
  display: flex;
  width: max-content;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  padding: var(--space-4);
  gap: var(--space-5);
}

.DateRangePicker-module__month___0WfUc {
  display: flex;
  flex-direction: column;
}

.DateRangePicker-module__header___sTdRM {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
}

.DateRangePicker-module__monthLabel___kEhI5 {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
}

.DateRangePicker-module__monthYearButton___zUMB7 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: var(--radius-s);
  padding: 2px var(--space-2);
  cursor: pointer;
}
.DateRangePicker-module__monthYearButton___zUMB7:hover {
  background: var(--hairline);
}
.DateRangePicker-module__monthYearButton___zUMB7:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.DateRangePicker-module__navButton___rDtDd {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-s);
  color: var(--ink-3);
  cursor: pointer;
}
.DateRangePicker-module__navButton___rDtDd:hover {
  color: var(--ink);
  background: var(--hairline);
}
.DateRangePicker-module__navButton___rDtDd:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.DateRangePicker-module__navButton___rDtDd svg {
  width: 14px;
  height: 14px;
}
.DateRangePicker-module__navButton___rDtDd:dir(rtl) svg {
  transform: scaleX(-1);
}

.DateRangePicker-module__navSpacer___myN4i {
  width: 24px;
  height: 24px;
}

.DateRangePicker-module__grid___O0eUF {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.DateRangePicker-module__weekRow___gN6ZI {
  display: grid;
  grid-template-columns: repeat(7, 32px);
  gap: 2px;
}

.DateRangePicker-module__weekday___cy-Mz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.DateRangePicker-module__day___-V6FX {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: var(--radius-s);
  background: transparent;
  border: none;
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: pointer;
}
.DateRangePicker-module__day___-V6FX:hover:not([aria-disabled="true"]) {
  background: var(--hairline);
}
.DateRangePicker-module__day___-V6FX:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.DateRangePicker-module__emptyDay___ej0Vw {
  display: inline-block;
  height: 32px;
}

.DateRangePicker-module__today___gwmhs {
  font-weight: var(--font-weight-semibold);
  box-shadow: inset 0 0 0 1px var(--green);
}

/* A hovered/focused in-progress range previews in the same tint as a
   committed one — the only difference is whether `value`'s second date is
   actually set yet. */
.DateRangePicker-module__inRange___iQJYA {
  background: var(--green-tint);
  border-radius: 0;
}
.DateRangePicker-module__inRange___iQJYA.DateRangePicker-module__today___gwmhs {
  box-shadow: inset 0 0 0 1px var(--green);
}

/* Squares off the side of the start/end cell that faces into the range, so
   the tinted band reads as one continuous shape with rounded caps only at
   its two true ends — not applied when start and end are the same day,
   which renders as an ordinary single rounded "selected" day instead. */
.DateRangePicker-module__rangeStart___-Oe1u {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.DateRangePicker-module__rangeEnd___mUaKW {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.DateRangePicker-module__selected___DRsBO {
  background: var(--green);
  color: var(--paper);
  font-weight: var(--font-weight-semibold);
}
.DateRangePicker-module__selected___DRsBO:hover {
  background: var(--green);
}

.DateRangePicker-module__outOfRange___vHFJA {
  color: var(--ink-3);
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* Shared by both the year grid and the month grid — same 3x4 shape as
   DatePicker's own, 12 cells either way. */
.DateRangePicker-module__pickerGrid___nq-Kp {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.DateRangePicker-module__pickerRow___4jt1b {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  gap: 4px;
}

.DateRangePicker-module__pickerCell___d-QyA {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: var(--radius-s);
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: pointer;
}
.DateRangePicker-module__pickerCell___d-QyA:hover:not([aria-disabled="true"]) {
  background: var(--hairline);
}
.DateRangePicker-module__pickerCell___d-QyA:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* The two-month grid is ~500px+ wide — well past a phone viewport. Stack the
   months instead of shrinking them, and cap the panel to the viewport so it
   can never force horizontal scroll. */
@media (max-width: 640px) {
  .DateRangePicker-module__panel___jzq7P {
    flex-direction: column;
    width: min(320px, calc(100vw - var(--space-6)));
    gap: var(--space-4);
  }

  .DateRangePicker-module__weekRow___gN6ZI {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .DateRangePicker-module__pickerRow___4jt1b {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Same reasoning as Checkbox/Button: grow the real hit area on touch. The
   day grid has almost no gap between cells, so this has to be a real size
   increase — an invisible overlay would swallow the neighboring cell. */
@media (pointer: coarse) {
  .DateRangePicker-module__navButton___rDtDd,
  .DateRangePicker-module__navSpacer___myN4i {
    width: 40px;
    height: 40px;
  }
  .DateRangePicker-module__day___-V6FX,
  .DateRangePicker-module__emptyDay___ej0Vw {
    height: 40px;
  }
  .DateRangePicker-module__pickerCell___d-QyA {
    height: 44px;
  }
}

.Select-module__field___h-wBy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-body);
}

.Select-module__label___Lmgos {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
}

.Select-module__required___PvDVJ {
  color: var(--color-danger);
}

.Select-module__control___OqOfI {
  position: relative;
  display: flex;
  align-items: center;
}

.Select-module__select___cjdcr {
  width: 100%;
  appearance: none;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding-inline-end: var(--space-7);
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.Select-module__select___cjdcr:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-tint);
}

.Select-module__select___cjdcr:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.Select-module__select___cjdcr.Select-module__hasError___BavwR {
  border-color: var(--color-danger);
}

.Select-module__sm___TPJwf { font-size: var(--text-xs); padding-top: var(--space-2); padding-bottom: var(--space-2); padding-inline-start: var(--space-3); }
.Select-module__md___nOV6u { font-size: var(--text-sm); padding-top: var(--space-3); padding-bottom: var(--space-3); padding-inline-start: var(--space-3); }
.Select-module__lg___NGPOa { font-size: var(--text-base); padding-top: var(--space-4); padding-bottom: var(--space-4); padding-inline-start: var(--space-4); }

.Select-module__chevron___PLUsh {
  position: absolute;
  inset-inline-end: var(--space-3);
  width: 16px;
  height: 16px;
  color: var(--ink-3);
  pointer-events: none;
}

.Select-module__helperText___RJnFj {
  font-size: var(--text-xs);
  color: var(--ink-2);
  margin: 0;
}

.Select-module__errorText___-zd6i {
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin: 0;
}

.DatePicker-module__wrapper___92H5x {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-body);
}

.DatePicker-module__label___NTrPW {
  font-size: var(--text-sm);
  color: var(--ink);
}

.DatePicker-module__trigger___JSHzo {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: var(--space-2) var(--space-4);
  text-align: start;
  cursor: pointer;
}
.DatePicker-module__trigger___JSHzo:hover:not(:disabled) {
  background: var(--hairline);
}
.DatePicker-module__trigger___JSHzo:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.DatePicker-module__trigger___JSHzo:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.DatePicker-module__panel___G7KoF {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-start: 0;
  z-index: var(--z-dropdown);
  width: max-content;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  padding: var(--space-4);
}

.DatePicker-module__header___mefTN {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
}

.DatePicker-module__monthLabel___5iC8q {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
}

.DatePicker-module__monthYearButton___XJHVA {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: var(--radius-s);
  padding: 2px var(--space-2);
  cursor: pointer;
}
.DatePicker-module__monthYearButton___XJHVA:hover {
  background: var(--hairline);
}
.DatePicker-module__monthYearButton___XJHVA:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.DatePicker-module__navButton___mv6Ll {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-s);
  color: var(--ink-3);
  cursor: pointer;
}
.DatePicker-module__navButton___mv6Ll:hover {
  color: var(--ink);
  background: var(--hairline);
}
.DatePicker-module__navButton___mv6Ll:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.DatePicker-module__navButton___mv6Ll svg {
  width: 14px;
  height: 14px;
}
.DatePicker-module__navButton___mv6Ll:dir(rtl) svg {
  transform: scaleX(-1);
}
.DatePicker-module__navButton___mv6Ll:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}
.DatePicker-module__navButton___mv6Ll:disabled:hover {
  background: transparent;
  color: var(--ink-3);
}

.DatePicker-module__grid___hoqeQ {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.DatePicker-module__weekRow___lrLoG {
  display: grid;
  grid-template-columns: repeat(7, 32px);
  gap: 2px;
}

.DatePicker-module__weekday___H5lIj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.DatePicker-module__day___U03J2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: var(--radius-s);
  background: transparent;
  border: none;
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: pointer;
}
.DatePicker-module__day___U03J2:hover:not([aria-disabled="true"]) {
  background: var(--hairline);
}
.DatePicker-module__day___U03J2:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.DatePicker-module__emptyDay___qu-U4 {
  display: inline-block;
  height: 32px;
}

.DatePicker-module__today___Fq949 {
  font-weight: var(--font-weight-semibold);
  box-shadow: inset 0 0 0 1px var(--green);
}

.DatePicker-module__selected___RnlS9 {
  background: var(--green);
  color: var(--paper);
  font-weight: var(--font-weight-semibold);
}
.DatePicker-module__selected___RnlS9:hover {
  background: var(--green);
}

.DatePicker-module__outOfRange___1mrRn {
  color: var(--ink-3);
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* Shared by both the year grid and the month grid — same 3x4 shape,
   12 cells either way. */
.DatePicker-module__pickerGrid___3LC9D {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.DatePicker-module__pickerRow___dYJrt {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  gap: 4px;
}

.DatePicker-module__pickerCell___-T-L0 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: var(--radius-s);
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: pointer;
}
.DatePicker-module__pickerCell___-T-L0:hover:not([aria-disabled="true"]) {
  background: var(--hairline);
}
.DatePicker-module__pickerCell___-T-L0:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Caps the panel to the viewport on very narrow phones — a single month is
   normally narrow enough to fit already, this is just a safety net. */
@media (max-width: 640px) {
  .DatePicker-module__panel___G7KoF {
    width: min(320px, calc(100vw - var(--space-6)));
  }
  .DatePicker-module__weekRow___lrLoG {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .DatePicker-module__pickerRow___dYJrt {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Same reasoning as Checkbox/Button: grow the real hit area on touch. The
   day grid has almost no gap between cells, so this has to be a real size
   increase — an invisible overlay would swallow the neighboring cell. */
@media (pointer: coarse) {
  .DatePicker-module__navButton___mv6Ll {
    width: 40px;
    height: 40px;
  }
  .DatePicker-module__day___U03J2,
  .DatePicker-module__emptyDay___qu-U4 {
    height: 40px;
  }
  .DatePicker-module__pickerCell___-T-L0 {
    height: 44px;
  }
}

.Tree-module__tree___vgfcM, .Tree-module__children___7H5j3 {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
}

.Tree-module__item___JnH1L {
  display: flex;
  flex-direction: column;
}

/* Indent scales with --tree-level (set inline per row) rather than nesting
   padding per <ul>, so it works out to the same inset regardless of how
   deep the recursion goes. inset-inline-start-flavored via padding-inline,
   not padding-left, so a deep RTL tree indents from the right. */
.Tree-module__row___sq5ff {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-inline-start: calc(var(--tree-level, 0) * 20px);
}

.Tree-module__toggle___niB3F,
.Tree-module__togglePlaceholder___LB-lG {
  flex: none;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.Tree-module__toggle___niB3F {
  background: transparent;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: var(--radius-s);
}
.Tree-module__toggle___niB3F:hover {
  background: var(--paper-raised);
  color: var(--ink);
}
.Tree-module__toggle___niB3F:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.Tree-module__chevron___umezQ {
  width: 12px;
  height: 12px;
  transition: transform var(--duration-base) var(--ease-standard);
}
.Tree-module__chevron___umezQ:dir(rtl) {
  transform: scaleX(-1);
}
.Tree-module__chevronOpen___E-liw {
  transform: rotate(90deg);
}
.Tree-module__chevronOpen___E-liw:dir(rtl) {
  transform: scaleX(-1) rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .Tree-module__chevron___umezQ { transition: none; }
}

.Tree-module__label___zJDit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1;
  min-width: 0;
  text-align: start;
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-s);
  transition: background-color var(--duration-base) var(--ease-standard);
}
.Tree-module__label___zJDit:hover {
  background: var(--paper-raised);
}
.Tree-module__label___zJDit:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.Tree-module__label___zJDit.Tree-module__selected___1-SA8 {
  background: var(--green-tint);
  color: var(--green-dark);
  font-weight: var(--font-weight-semibold);
}

.Tree-module__icon___QoVqr {
  flex: none;
  display: inline-flex;
  color: var(--ink-3);
}

.CopyButton-module__srOnly___WDwjl {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.MultiSelect-module__field___GpA0V {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-body);
}

.MultiSelect-module__label___Jwj7I {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
}

.MultiSelect-module__control___1nxmr {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  box-sizing: border-box;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: var(--space-2);
  padding-inline-end: var(--space-7);
  cursor: text;
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}
.MultiSelect-module__control___1nxmr:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-tint);
}
.MultiSelect-module__control___1nxmr.MultiSelect-module__hasError___tMXUi {
  border-color: var(--color-danger);
}
.MultiSelect-module__control___1nxmr.MultiSelect-module__hasError___tMXUi:focus-within {
  box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.MultiSelect-module__tag___c8A72 {
  flex: none;
}

.MultiSelect-module__input___SjOXU {
  flex: 1 1;
  min-width: 80px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
}
.MultiSelect-module__input___SjOXU::placeholder {
  color: var(--ink-3);
}
.MultiSelect-module__input___SjOXU:focus {
  outline: none;
}
.MultiSelect-module__input___SjOXU:disabled {
  cursor: not-allowed;
}

.MultiSelect-module__chevron___zHRu7 {
  position: absolute;
  inset-inline-end: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--ink-3);
  pointer-events: none;
}

.MultiSelect-module__listbox___M6lOU {
  position: absolute;
  top: calc(100% + var(--space-1));
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: var(--z-dropdown);
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
}

.MultiSelect-module__option___lqEl1 {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-s);
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: pointer;
}
.MultiSelect-module__option___lqEl1[aria-disabled="true"] {
  color: var(--ink-3);
  cursor: not-allowed;
}
.MultiSelect-module__option___lqEl1.MultiSelect-module__active___S9sQ- {
  background: var(--hairline);
}

.MultiSelect-module__empty___-5B16 {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-3);
}

.MultiSelect-module__helperText___Q6R37 {
  font-size: var(--text-xs);
  color: var(--ink-2);
  margin: 0;
}

.MultiSelect-module__errorText___qZR9s {
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin: 0;
}

.Toast-module__stack___Fj6Cx {
  position: fixed;
  bottom: var(--space-5);
  inset-inline-end: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(340px, calc(100vw - var(--space-6)));
}

.Toast-module__toast___FLdHz {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-inline-start: 3px solid currentColor;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  /* Mount-triggered, not a transition — each toast is only ever in the DOM
     while it exists (see Toast.tsx's `toasts.map`), so there's no "before"
     state for a property change to animate from. Slides in from the same
     edge .stack is anchored to (inset-inline-end), so it reads as arriving
     from off-screen rather than from a fixed physical direction. */
  --slide-from-x: 16px;
  animation: Toast-module__toastIn___7fNyA var(--duration-base) var(--ease-standard);
}
.Toast-module__toast___FLdHz:dir(rtl) {
  --slide-from-x: -16px;
}

.Toast-module__toast___FLdHz.Toast-module__exiting___HzXQ4 {
  /* `forwards` holds the animation's end state (opacity: 0) — Toast.tsx
     removes the element from state ~150ms later, on a plain timeout, but
     that removal only unmounts the node; without `forwards` the toast
     would snap back to fully opaque the instant this animation finishes,
     right before disappearing. */
  animation: Toast-module__toastOut___A1dp4 var(--duration-base) var(--ease-standard) forwards;
}

@keyframes Toast-module__toastIn___7fNyA {
  from {
    opacity: 0;
    transform: translateX(var(--slide-from-x));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes Toast-module__toastOut___A1dp4 {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .Toast-module__toast___FLdHz,
  .Toast-module__toast___FLdHz.Toast-module__exiting___HzXQ4 {
    animation: none;
  }
}

.Toast-module__body___VLkXA { flex: 1 1; min-width: 0; }

.Toast-module__title___-H6R2 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
}

.Toast-module__description___-QwfC {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  color: var(--ink);
}

.Toast-module__dismiss___fj0MP {
  flex: none;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-s);
  color: var(--ink-3);
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-standard);
}
.Toast-module__dismiss___fj0MP:hover { color: var(--ink); }
.Toast-module__dismiss___fj0MP svg { width: 14px; height: 14px; }
.Toast-module__dismiss___fj0MP:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.Toast-module__success___Oy694 { color: var(--color-success); }
.Toast-module__warning___84GC8 { color: var(--color-warning); }
.Toast-module__danger___zx8Tv { color: var(--color-danger); }
.Toast-module__info___eq5bQ { color: var(--color-info); }

.Navbar-module__navbar___Ey25T {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  min-height: 56px;
  padding-inline: var(--space-5);
  background: var(--paper-raised);
  border-block-end: 1px solid var(--hairline);
  font-family: var(--font-body);
  /* A top bar spans edge to edge full stop -- but a plain flex *item* (this
     `<header>` nested inside a consumer's own flex/grid container, e.g.
     AppShell's `.header` slot) defaults to shrink-to-fit content width, not
     100% of its container, unless something stretches it. That's invisible
     whenever brand + links + actions are already wide enough to reach the
     far edge on their own (the common desktop case) -- but hide `.links`
     and `.actions` below the hamburger breakpoint (this component's own
     mobile behavior) and there's nothing left to make up that width: the
     bar visibly shrinks to hug the brand, taking the hamburger trigger
     with it away from the corner it belongs in. The explicit `width: 100%`
     above already covers a block-level container; this covers the flex/grid
     case the same way. */
  flex: 1 1 auto;
}

/* Three tracks — brand's own content stays start-aligned and actions' own
   content stays end-aligned inside their `1fr` columns purely from their
   internal flex `justify-content`, so the middle `auto` column (the links)
   lands exactly in the bar's true center regardless of how the two flanking
   slots' widths compare to each other.

   Every track is wrapped in `minmax(0, ...)`: a grid track's automatic
   minimum is otherwise its content's min-content size, which for the middle
   `auto` track means the full unwrapped width of every link. Between the
   hamburger breakpoint below and however wide the viewport needs to be for
   that to fit unsqueezed (~750-950px for a typical link set, depending on
   brand/actions width and how many links there are), that content-based
   minimum forced the whole bar wider than the viewport — a grid "blowout"
   overflow, not a wrap. `minmax(0, ...)` lets every track shrink past its
   content size instead, so `.links`' own `overflow-x: auto` below can take
   over and scroll rather than the header pushing past the viewport edge. */
.Navbar-module__center___jMJEH {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-5);
}

.Navbar-module__brand___P5uLt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
}

.Navbar-module__links___bvmeC {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1 1;
  min-width: 0;
  /* Falls back to a horizontally-scrollable single line rather than wrapping
     link text or blowing out the grid track above when brand + links +
     actions don't all fit — see the `.center` comment. Scrollbar hidden
     since the row already reads as a nav, not a scroll region; still fully
     usable via touch swipe, trackpad, or shift+wheel. */
  overflow-x: auto;
  scrollbar-width: none;
}
.Navbar-module__links___bvmeC::-webkit-scrollbar {
  display: none;
}

.Navbar-module__link___UwJZv {
  font-size: var(--text-sm);
  color: var(--ink-2);
  text-decoration: none;
  text-wrap: nowrap;
  padding-block: var(--space-2);
  border-block-end: 2px solid transparent;
  transition:
    color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}
.Navbar-module__link___UwJZv:hover {
  color: var(--ink);
}
.Navbar-module__link___UwJZv:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-s);
}
.Navbar-module__link___UwJZv.Navbar-module__active___Rf9bv {
  color: var(--green);
  border-block-end-color: var(--green);
  font-weight: var(--font-weight-semibold);
}

.Navbar-module__dropdown___i-mzH {
  flex: none;
}

.Navbar-module__dropdownTrigger___s-ust {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.Navbar-module__dropdownChevron___nFCXx {
  flex: none;
  transition: transform var(--duration-base) var(--ease-standard);
}
.Navbar-module__dropdownChevronOpen___Y8X8k {
  transform: rotate(180deg);
}

.Navbar-module__dropdownPanel___nNcdE {
  /* Fixed, not absolute — see Navbar.tsx's comment on why the panel is
     portaled to <body> and positioned from real viewport coordinates rather
     than anchored via CSS relative to `.dropdown`. `top`/`left` come from
     that JS measurement as an inline style, not from here. */
  position: fixed;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: var(--space-1);
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  font-family: var(--font-body);
  /* Mount-triggered, not a transition — the panel is only ever in the DOM
     while open, same reasoning Menu's identical `.list` entrance uses. */
  animation: Navbar-module__navDropdownIn___8HQLw var(--duration-base) var(--ease-standard);
}

@keyframes Navbar-module__navDropdownIn___8HQLw {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .Navbar-module__dropdownPanel___nNcdE {
    animation: none;
  }
}

.Navbar-module__dropdownItem___1BWqg {
  display: block;
  border-radius: var(--radius-s);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-2);
  text-decoration: none;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}
.Navbar-module__dropdownItem___1BWqg:hover {
  background: var(--green-tint);
  color: var(--green-dark);
}
.Navbar-module__dropdownItem___1BWqg:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.Navbar-module__dropdownItem___1BWqg.Navbar-module__active___Rf9bv {
  color: var(--green);
  font-weight: var(--font-weight-semibold);
}

.Navbar-module__actions___8BNWJ {
  display: flex;
  align-items: center;
  /* `safe`, not plain `flex-end`: pins content to the end while there's
     room to spare (the common case), but per the CSS Box Alignment spec
     falls back to start alignment instead of overflowing "unsafely" the
     instant it doesn't fit — which matters a lot combined with
     `overflow-x: auto` below. A real live-browser check caught why: plain
     `flex-end` packs overflow toward the *start* of the box once content
     is wider than it, which in this LTR bar means growing in the negative
     direction — off the box's own left edge, not the right. `overflow-x:
     auto`/`scrollWidth` only ever account for positive (rightward)
     overflow, so that negative-direction content was both genuinely
     unreachable by scrolling *and* invisible to the very
     `document.documentElement.scrollWidth` check used to confirm the fix
     above — the language switcher silently scrolled out of reach with no
     scrollbar and no page-overflow signal that anything was wrong. `safe`
     keeps the common case identical (nothing is unsafe when it already
     fits) and only changes behavior exactly where the unsafe version was
     broken. */
  justify-content: safe flex-end;
  /* `.actions` itself is not the right layer to make squeezed content wrap
     or scroll: it's a single-slot passthrough (`actions?: ReactNode`, one
     child) exactly like `.brand`, not a list `.actions` itself lays out —
     whatever multi-item layout ends up inside (a `Stack` of buttons, say)
     is the consumer's own composition, with its own `wrap`/scroll opinion
     to set if it wants one (`Stack`'s own `wrap` prop, for instance). Tried
     `flex-wrap: wrap` here first and it visibly did nothing — confirmed via
     `getComputedStyle` showing `height` unchanged after switching a real
     two-control `actions` slot from one line to a still-single 42px line —
     because with exactly one flex child, "wrap" has nothing to wrap;
     that child's own internal layout decides whether *it* wraps. What
     `.actions` *can* own regardless of what's inside: never blow out the
     grid track (`min-width: 0`, `margin-inline-start` below), and degrade
     to the same scrollable fallback `.links` uses if its content still
     doesn't fit however the consumer laid it out — `safe flex-end` +
     `overflow-x: auto` below. */
  gap: var(--space-3);
  flex: none;
  /* Pushes `.actions` to the end when it's a plain flex sibling of
     `.brand`/`.links` — `linksAlign="start"` (this component never switches
     to a grid layout) and the mobile fallback below, which puts `.center`
     back into `display: flex` too. Explicitly cancelled in `.center` (the
     desktop grid layout) right below: on a *grid* item specifically, an
     auto margin overrides the default `justify-self: stretch` and switches
     it to fit-content sizing instead, which is allowed to exceed its own
     track's available space whenever the content's min-content width (the
     language switcher + button, neither of which can shrink below their own
     text) is wider than what's left — that turned out to be the actual
     overflow here: at a squeezed width the header itself fit the viewport
     (its grid track sized down correctly) while this fit-content box still
     painted past its allotted track, overflowing the page. Flexbox's own
     auto-margin doesn't have that failure mode (it just consumes leftover
     space within the normal flex-shrink accounting), so it stays safe to
     keep for the two flex contexts. */
  margin-inline-start: auto;
  /* `justify-content: safe flex-end` above already keeps content pinned to
     the end once the grid override below zeroes the auto margin;
     `min-width: 0` plus `overflow-x: auto` give this the same scrollable
     fallback `.links` already has for whatever still doesn't fit. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.Navbar-module__actions___8BNWJ::-webkit-scrollbar {
  display: none;
}
/* See `.actions`' own comment above: only the grid layout needs this
   cancelled, since only a grid item's auto margin switches to
   overflow-prone fit-content sizing. */
.Navbar-module__center___jMJEH > .Navbar-module__actions___8BNWJ {
  margin-inline-start: 0;
}

.Navbar-module__menuToggle___zTzmM {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--ink);
  cursor: pointer;
  /* `--text-xl` icon + this padding lands the whole button at 44x44 --
     the WCAG/platform-HIG minimum touch target -- rather than the 36px box
     `--text-lg` + the same padding used to produce. */
  padding: var(--space-2);
  border-radius: var(--radius-s);
  font-size: var(--text-xl);
  transition: background-color var(--duration-base) var(--ease-standard);
}
.Navbar-module__menuToggle___zTzmM:hover {
  background: var(--hairline);
}
.Navbar-module__menuToggle___zTzmM:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Same 768px breakpoint as AppShell/Grid/Container. */
@media (max-width: 768px) {
  .Navbar-module__links___bvmeC {
    display: none;
  }
  .Navbar-module__menuToggle___zTzmM {
    display: inline-flex;
  }
  /* Centering a now-empty middle grid track buys nothing — with the links
     hidden behind the hamburger trigger, brand/actions/toggle just need to
     lay out left-to-right like the "start" layout already does. */
  .Navbar-module__center___jMJEH {
    display: flex;
  }
  /* `.center > .actions` zeroed this above specifically for the grid
     layout; back in flex here (same as `linksAlign="start"`), the auto
     margin is what pushes `.actions` to the end again. */
  .Navbar-module__center___jMJEH > .Navbar-module__actions___8BNWJ {
    margin-inline-start: auto;
  }
  /* `.actions`' base `flex: none` (shrink: 0) is correct while `.links` is
     a `flex: 1` sibling absorbing any squeeze — but below this breakpoint
     `.links` is `display: none` (hidden behind the hamburger trigger) in
     *both* layouts, `linksAlign="center"` and `"start"` alike, leaving
     nothing else in the row able to compress. A wide actions cluster (a
     multi-option control plus a button, say) then has nowhere to go but
     past the viewport edge, the exact overflow this is fixing. Letting it
     shrink here re-enables the `min-width: 0` + `overflow-x: auto`
     fallback already on the base rule, the same graceful degradation
     `.links` itself falls back to when it runs out of room. */
  .Navbar-module__actions___8BNWJ {
    flex-shrink: 1;
  }
}

.Drawer-module__overlay___hcG1G {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(32, 28, 24, .5);
  display: flex;
}

.Drawer-module__panel___wUX0N {
  width: 100%;
  max-width: 400px;
  height: 100%;
  background: var(--paper-raised);
  box-shadow: var(--shadow-l);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  animation: Drawer-module__slideIn___P47o2 var(--duration-base) var(--ease-standard);
}
.Drawer-module__panel___wUX0N:focus {
  outline: none;
}

.Drawer-module__end___aJxa5 { margin-inline-start: auto; --slide-from: 100%; }
.Drawer-module__start___MS4bt { margin-inline-end: auto; --slide-from: -100%; }
/* :dir() reflects resolved directionality regardless of where dir="rtl" was
   set, same technique Pagination's chevron flip already uses — a logical
   "end" that's the page's trailing edge slides in from the opposite physical
   side under RTL. */
.Drawer-module__end___aJxa5:dir(rtl) { --slide-from: -100%; }
.Drawer-module__start___MS4bt:dir(rtl) { --slide-from: 100%; }

@keyframes Drawer-module__slideIn___P47o2 {
  from { transform: translateX(var(--slide-from)); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .Drawer-module__panel___wUX0N { animation: none; }
}

/* Below md (768px, same breakpoint Navbar/AppShell/Grid/Container collapse
   at), the side panel becomes a bottom sheet — pinned to the bottom edge,
   full width, capped height rather than full height so there's a visible
   scrim above it. `.end`/`.start`'s side-panel margins/slide direction no
   longer apply once there's only one edge to dock to. */
@media (max-width: 768px) {
  .Drawer-module__overlay___hcG1G {
    flex-direction: column;
    justify-content: flex-end;
  }
  .Drawer-module__panel___wUX0N {
    max-width: none;
    height: auto;
    max-height: 85vh;
    margin: 0;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
  }
  .Drawer-module__panel___wUX0N::before {
    content: "";
    align-self: center;
    flex: none;
    width: 36px;
    height: 4px;
    margin-block: var(--space-2) 0;
    border-radius: var(--radius-full);
    background: var(--hairline);
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .Drawer-module__panel___wUX0N {
    animation: Drawer-module__slideUpMobile___zY9Ky var(--duration-base) var(--ease-standard);
  }
}

@keyframes Drawer-module__slideUpMobile___zY9Ky {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.Drawer-module__header___sYoP1 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) 0;
  flex: none;
}

.Drawer-module__title___LqUOu {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-lg);
  color: var(--ink);
  margin: 0;
}

.Drawer-module__close___tYPhU {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-s);
  color: var(--ink-3);
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}
.Drawer-module__close___tYPhU:hover { background: var(--hairline); color: var(--ink); }
.Drawer-module__close___tYPhU svg { width: 16px; height: 16px; }
.Drawer-module__close___tYPhU:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.Drawer-module__content___hXFVS {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--ink);
  line-height: 1.6;
  overflow-y: auto;
  flex: 1 1;
}

.Drawer-module__footer___AuvUP {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5);
  flex: none;
}

.CommandPalette-module__overlay___n5F0u {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  padding-top: 12vh;
  /* Mount-triggered, not a transition — CommandPalette.tsx returns null
     while closed, so there's no existing element to change a property on;
     an animation plays regardless, same reasoning Drawer's slide-in uses. */
  animation: CommandPalette-module__paletteOverlayIn___-latb var(--duration-base) var(--ease-standard);
}

.CommandPalette-module__dialog___aObpm {
  width: min(560px, calc(100% - var(--space-6)));
  max-height: min(60vh, 480px);
  background: var(--paper-raised);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: fit-content;
  animation: CommandPalette-module__paletteDialogIn___UNh-5 var(--duration-base) var(--ease-standard);
}

@keyframes CommandPalette-module__paletteOverlayIn___-latb {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes CommandPalette-module__paletteDialogIn___UNh-5 {
  from {
    opacity: 0;
    transform: scale(.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .CommandPalette-module__overlay___n5F0u,
  .CommandPalette-module__dialog___aObpm {
    animation: none;
  }
}

/* Below md (768px, same breakpoint Navbar/AppShell/Grid/Container collapse
   at), the palette takes over the full screen instead of floating near the
   top — the fluid `min()` sizing already kept it from overflowing a narrow
   viewport, but a full-screen listbox gives touch scrolling and the result
   list more room than a small floating panel would. Full-screen also means
   there's no visible backdrop left to tap-to-dismiss and no physical Escape
   key on a touch device — `.mobileClose` below is what replaces both; its
   own `display: inline-flex` override lives in a second media query further
   down, after its base rule, not here (a `.mobileClose` override placed
   here would lose the cascade tie to its own later base rule — same
   specificity, later source order wins regardless of which media query
   actually matched). */
@media (max-width: 768px) {
  .CommandPalette-module__overlay___n5F0u {
    padding-top: 0;
  }
  .CommandPalette-module__dialog___aObpm {
    width: 100%;
    max-height: none;
    height: 100%;
    border-radius: 0;
  }
  .CommandPalette-module__listbox___pq-qP {
    flex: 1 1;
  }
}

.CommandPalette-module__inputRow___gmRWl {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}

.CommandPalette-module__input___BDjec {
  flex: 1 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink);
  background: transparent;
  border: none;
  padding: var(--space-4) var(--space-5);
}
.CommandPalette-module__input___BDjec:focus-visible {
  outline: none;
}
.CommandPalette-module__input___BDjec::placeholder {
  color: var(--ink-3);
}

/* Hidden on desktop — Escape and the backdrop click both already close the
   palette there, so a persistent close button would just clutter the
   deliberately title-less, search-first header. See the media query above
   for where it turns on. */
.CommandPalette-module__mobileClose___lI3no {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-inline-end: var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-s);
  color: var(--ink-3);
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}
.CommandPalette-module__mobileClose___lI3no:hover {
  background: var(--hairline);
  color: var(--ink);
}
.CommandPalette-module__mobileClose___lI3no:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.CommandPalette-module__mobileClose___lI3no svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 768px) {
  .CommandPalette-module__mobileClose___lI3no {
    display: inline-flex;
  }
}

.CommandPalette-module__listbox___pq-qP {
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  overflow-y: auto;
}

.CommandPalette-module__option___ii6Mj {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-m);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background-color var(--duration-base) var(--ease-standard);
}

.CommandPalette-module__option___ii6Mj.CommandPalette-module__active___4HCR5 {
  background: var(--green-tint);
}

.CommandPalette-module__option___ii6Mj.CommandPalette-module__disabled___DIJDa {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.CommandPalette-module__optionText___xjrVJ {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.CommandPalette-module__optionLabel___Xr1Y7 {
  font-size: var(--text-sm);
  color: var(--ink);
}

.CommandPalette-module__optionDescription___GQb0j {
  font-size: var(--text-xs);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.CommandPalette-module__shortcut___P8BIR {
  flex: none;
}

.CommandPalette-module__empty___oSIlh {
  padding: var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--ink-3);
  font-family: var(--font-body);
}

/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/globals.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}