/* ============================================================================
   CALYNT design system — stylesheet
   Brand: CALYNT Visual Identity v2.0. Light is the preferred treatment;
   dark is the identity's approved DARK / REVERSED system.

   Layer 1 primitives -> Layer 2 semantic roles -> Layer 3 components.
   Build UI against the semantic roles, never the primitives.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- Layer 1: brand primitives (approved palette) --------------------- */
  --cal-navy: #0B1F3B;
  --cal-blue: #2563EB;
  --cal-cyan: #22D3EE;
  --cal-cool-gray: #94A3B8;
  --cal-off-white: #F8FAFC;
  --cal-supporting-gray: #536887;

  --cal-navy-950: #071426;
  --cal-navy-900: #0B1F3B;
  --cal-navy-800: #132C50;
  --cal-navy-700: #1D3A63;
  --cal-navy-600: #2A4B78;
  --cal-navy-200: #C7D3E3;
  --cal-navy-100: #DFE6F0;
  --cal-navy-50:  #EEF2F8;

  --cal-mark-gradient: linear-gradient(32deg, #1454D6 0%, #1479F7 56%, #22D3EE 100%); /* @kind color */

  /* ---- Layer 2: semantic roles (LIGHT — preferred) --------------------- */
  --cal-bg: light-dark(var(--cal-off-white), var(--cal-navy-950));
  --cal-surface: light-dark(#FFFFFF, var(--cal-navy-900));
  --cal-surface-sunken: light-dark(var(--cal-navy-50), #05101E);
  --cal-border: light-dark(var(--cal-navy-100), var(--cal-navy-800));
  --cal-border-strong: light-dark(var(--cal-navy-200), var(--cal-navy-700));

  --cal-text: light-dark(var(--cal-navy), var(--cal-off-white));
  --cal-text-secondary: light-dark(var(--cal-supporting-gray), #A9BAD1);
  --cal-text-muted: light-dark(#7C8FA8, #7C8FA8);
  --cal-text-on-accent: light-dark(#FFFFFF, var(--cal-navy-950));

  --cal-accent: light-dark(var(--cal-blue), var(--cal-cyan));
  --cal-accent-hover: light-dark(#1D4ED8, #67E3F6);
  --cal-accent-subtle: light-dark(var(--cal-navy-50), rgba(34, 211, 238, 0.12));
  --cal-focus: light-dark(var(--cal-blue), var(--cal-cyan));

  --cal-positive: light-dark(#0E9F6E, #34D399);
  --cal-caution: light-dark(#B45309, #FBBF24);
  --cal-critical: light-dark(#BE123C, #FB7185);

  /* ---- Data visualisation ----------------------------------------------
     Categorical order is the CVD-safety mechanism, not cosmetic. This order
     was selected by enumerating candidate orderings and keeping only those
     clearing every gate in BOTH modes.
       adjacent pairs: worst CVD dE 9.9, worst normal-vision dE 19.4/19.2
       all-pairs (scatter/bubble/maps/small multiples): first 3 slots only
     Past 3 series on an all-pairs form, fold to "Other" or facet.
     ------------------------------------------------------------------- */
  --cal-viz-surface: light-dark(#FFFFFF, var(--cal-navy-900));
  --cal-series-1: light-dark(#2563EB, #3F7DFF);  /* blue — brand */
  --cal-series-2: light-dark(#B33A6B, #D05583);  /* magenta */
  --cal-series-3: light-dark(#8A6A00, #A28129);  /* yellow */
  --cal-series-4: light-dark(#6D3FC4, #9066EE);  /* violet */
  --cal-series-5: light-dark(#C96A2E, #C7692C);  /* orange */

  /* Sequential — one hue (brand blue), light -> dark */
  --cal-seq-100: #E1ECFF;
  --cal-seq-150: #C8DBFF;
  --cal-seq-200: #AAC8FF;
  --cal-seq-250: #8CB4FF;
  --cal-seq-300: #6E9FFF;
  --cal-seq-350: #4F88FF;
  --cal-seq-400: #3A74F0;
  --cal-seq-450: #3063D2;
  --cal-seq-500: #2B55AE;
  --cal-seq-550: #294786;
  --cal-seq-600: #283A5D;
  --cal-seq-650: #222E45;
  --cal-seq-700: #162137;

  /* Diverging — cool (above plan) <-> warm (below plan), neutral midpoint */
  --cal-div-cool-strong: light-dark(#2B55AE, #6E9FFF);
  --cal-div-cool: light-dark(#6E9FFF, #3A74F0);
  --cal-div-mid: light-dark(#E7EBF1, #2A3950);
  --cal-div-warm: light-dark(#E08A62, #C7692C);
  --cal-div-warm-strong: light-dark(#B23A1F, #E08A62);

  /* Chart chrome */
  --cal-grid: light-dark(#E8EDF4, #16304F);
  --cal-axis: light-dark(var(--cal-navy-200), var(--cal-navy-700));
  --cal-viz-ink: light-dark(var(--cal-navy), var(--cal-off-white));
  --cal-viz-ink-secondary: light-dark(var(--cal-supporting-gray), #A9BAD1);
  --cal-viz-ink-muted: light-dark(#7C8FA8, #7C8FA8);

  /* ---- Typography ------------------------------------------------------- */
  --cal-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --cal-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --cal-text-xs: 0.75rem;
  --cal-text-sm: 0.875rem;
  --cal-text-base: 1rem;
  --cal-text-lg: 1.125rem;
  --cal-text-xl: 1.5rem;
  --cal-text-2xl: 1.953rem;
  --cal-text-3xl: 2.441rem;

  --cal-tracking-wordmark: 0.084em;
  --cal-tracking-label: 0.08em;

  /* ---- Space / radius / elevation / motion ----------------------------- */
  --cal-space-1: 0.25rem;
  --cal-space-2: 0.5rem;
  --cal-space-3: 0.75rem;
  --cal-space-4: 1rem;
  --cal-space-5: 1.5rem;
  --cal-space-6: 2rem;

  --cal-radius-sm: 4px;
  --cal-radius-md: 8px;
  --cal-radius-lg: 14px;
  --cal-radius-pill: 999px;

  --cal-shadow-sm: 0 1px 2px light-dark(rgba(11, 31, 59, 0.06), rgba(0, 0, 0, 0.4));
  --cal-shadow-md: 0 4px 16px light-dark(rgba(11, 31, 59, 0.08), rgba(0, 0, 0, 0.45));

  --cal-ease: cubic-bezier(0.2, 0.7, 0.3, 1); /* @kind other */
  --cal-duration: 160ms; /* @kind other */
}

/* ---- DARK / REVERSED ----------------------------------------------------
   Accent swaps to Soft Cyan: Electric Blue on Deep Navy measures 3.19:1 and
   fails AA for normal text. Series steps are re-stepped for the dark surface
   and validated as a set — not an automatic flip.
   ------------------------------------------------------------------------ */


/* Scoped theme pinning — a .cal-root may force its own theme regardless of
   the OS setting or an ancestor. This is what makes ThemeProvider work when a
   component tree is mounted inside a host page whose theme differs. */


/* ---- Theme pinning -------------------------------------------------------
   Every themed token is declared once in :root via light-dark(), which resolves
   against the color-scheme of the element the token is USED on. So pinning a
   theme is one property, and nesting works: a .cal-root inside a dark tree can
   force light and everything under it follows.
   ------------------------------------------------------------------------- */
:root[data-theme="dark"],
.cal-root[data-theme="dark"] { color-scheme: dark; }

:root[data-theme="light"],
.cal-root[data-theme="light"] { color-scheme: light; }

/* ============================================================================
   Layer 3 — components
   ========================================================================= */

.cal-root {
  font-family: var(--cal-font);
  color: var(--cal-text);
  background: var(--cal-bg);
  font-size: var(--cal-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.cal-root *, .cal-root *::before, .cal-root *::after { box-sizing: border-box; }

/* ---- Button -------------------------------------------------------------- */
.cal-btn {
  font-family: inherit; font-size: var(--cal-text-sm); font-weight: 600;
  letter-spacing: .005em; line-height: 1.2;
  border-radius: var(--cal-radius-md); border: 1px solid transparent;
  padding: 9px 18px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background var(--cal-duration) var(--cal-ease),
              border-color var(--cal-duration) var(--cal-ease),
              color var(--cal-duration) var(--cal-ease);
}
.cal-btn:focus-visible { outline: 2px solid var(--cal-focus); outline-offset: 2px; }
.cal-btn[disabled] { opacity: .45; cursor: not-allowed; }
.cal-btn--primary { background: var(--cal-accent); color: var(--cal-text-on-accent); box-shadow: var(--cal-shadow-sm); }
.cal-btn--primary:hover:not([disabled]) { background: var(--cal-accent-hover); }
.cal-btn--secondary { background: var(--cal-surface); color: var(--cal-text); border-color: var(--cal-border-strong); }
.cal-btn--secondary:hover:not([disabled]) { border-color: var(--cal-accent); color: var(--cal-accent); }
.cal-btn--ghost { background: transparent; color: var(--cal-accent); }
.cal-btn--ghost:hover:not([disabled]) { background: var(--cal-accent-subtle); }
.cal-btn--danger { background: transparent; color: var(--cal-critical); border-color: currentColor; }
.cal-btn--danger:hover:not([disabled]) { background: color-mix(in srgb, var(--cal-critical) 10%, transparent); }
.cal-btn--sm { font-size: 13px; padding: 6px 13px; border-radius: var(--cal-radius-sm); }
.cal-btn--lg { font-size: 15px; padding: 12px 24px; border-radius: 9px; }
.cal-btn--block { width: 100%; }
.cal-btn__icon { display: inline-flex; flex: none; }

/* ---- Field (Input / Select) --------------------------------------------- */
.cal-field { display: flex; flex-direction: column; gap: 6px; }
.cal-field__label { font-size: var(--cal-text-xs); font-weight: 600; letter-spacing: .04em; color: var(--cal-text-secondary); }
.cal-field__hint { font-size: var(--cal-text-xs); color: var(--cal-text-muted); }
.cal-field__error { font-size: var(--cal-text-xs); color: var(--cal-critical); font-weight: 500; }
.cal-input {
  font-family: inherit; font-size: var(--cal-text-sm); color: var(--cal-text);
  background: var(--cal-surface); border: 1px solid var(--cal-border-strong);
  border-radius: var(--cal-radius-md); padding: 9px 12px; width: 100%;
  transition: border-color var(--cal-duration) var(--cal-ease), box-shadow var(--cal-duration) var(--cal-ease);
}
.cal-input::placeholder { color: var(--cal-text-muted); }
.cal-input:hover:not([disabled]) { border-color: var(--cal-accent); }
.cal-input:focus { outline: none; border-color: var(--cal-focus); box-shadow: 0 0 0 3px var(--cal-accent-subtle); }
.cal-input[aria-invalid="true"] { border-color: var(--cal-critical); }
.cal-input[disabled] { background: var(--cal-surface-sunken); color: var(--cal-text-muted); cursor: not-allowed; }
.cal-select {
  appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

/* ---- Choice (Checkbox / Radio / Switch) --------------------------------- */
.cal-choice { display: inline-flex; align-items: center; gap: 8px; font-size: var(--cal-text-sm); color: var(--cal-text); cursor: pointer; }
.cal-choice input { accent-color: var(--cal-accent); width: 16px; height: 16px; cursor: pointer; flex: none; }
.cal-choice input:focus-visible { outline: 2px solid var(--cal-focus); outline-offset: 2px; }
.cal-choice--disabled { opacity: .5; cursor: not-allowed; }

.cal-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--cal-text-sm); color: var(--cal-text); }
.cal-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cal-switch__track { width: 38px; height: 22px; border-radius: var(--cal-radius-pill); background: var(--cal-border-strong); transition: background var(--cal-duration) var(--cal-ease); flex: none; padding: 3px; display: flex; }
.cal-switch__knob { width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; transition: transform var(--cal-duration) var(--cal-ease); box-shadow: 0 1px 2px rgba(11,31,59,.3); }
.cal-switch input:checked + .cal-switch__track { background: var(--cal-accent); }
.cal-switch input:checked + .cal-switch__track .cal-switch__knob { transform: translateX(16px); }
.cal-switch input:focus-visible + .cal-switch__track { outline: 2px solid var(--cal-focus); outline-offset: 2px; }
.cal-switch--disabled { opacity: .5; cursor: not-allowed; }

/* ---- Card ---------------------------------------------------------------- */
.cal-card { background: var(--cal-surface); border: 1px solid var(--cal-border); border-radius: var(--cal-radius-lg); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.cal-card--lead { border-top: 3px solid var(--cal-accent); }
.cal-card--quiet { background: transparent; border-style: dashed; }
.cal-card__title { margin: 0; font-size: var(--cal-text-lg); font-weight: 600; letter-spacing: -.01em; color: var(--cal-text); }
.cal-card__body { margin: 0; font-size: var(--cal-text-sm); color: var(--cal-text-secondary); }
.cal-card__footer { margin-top: auto; padding-top: 14px; font-size: 13px; color: var(--cal-text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- Badge --------------------------------------------------------------- */
.cal-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cal-text-xs); font-weight: 600; padding: 3px 10px; border-radius: var(--cal-radius-pill); letter-spacing: .015em; white-space: nowrap; }
.cal-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.cal-badge--positive { color: var(--cal-positive); background: color-mix(in srgb, var(--cal-positive) 14%, transparent); }
.cal-badge--caution  { color: var(--cal-caution);  background: color-mix(in srgb, var(--cal-caution) 16%, transparent); }
.cal-badge--critical { color: var(--cal-critical); background: color-mix(in srgb, var(--cal-critical) 14%, transparent); }
.cal-badge--info     { color: var(--cal-accent);   background: var(--cal-accent-subtle); }
.cal-badge--neutral  { color: var(--cal-text-muted); background: var(--cal-surface-sunken); }

/* ---- NavBar -------------------------------------------------------------- */
.cal-nav { display: flex; align-items: center; gap: 26px; background: var(--cal-surface); border: 1px solid var(--cal-border); border-radius: 12px; padding: 12px 18px; flex-wrap: wrap; }
.cal-nav__brand { display: flex; align-items: center; gap: 10px; }
.cal-nav__links { display: flex; gap: 22px; flex-wrap: wrap; margin-left: auto; }
.cal-nav__link { font-size: var(--cal-text-sm); font-weight: 500; color: var(--cal-text-secondary); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.cal-nav__link:hover { color: var(--cal-text); }
.cal-nav__link[aria-current] { color: var(--cal-accent); border-bottom-color: var(--cal-accent); }
.cal-nav__link:focus-visible { outline: 2px solid var(--cal-focus); outline-offset: 3px; border-radius: 2px; }

/* ---- Logo ---------------------------------------------------------------- */
.cal-logo { display: inline-flex; align-items: center; gap: 12px; }
.cal-logo__symbol { flex: none; display: block; }
.cal-logo__lettering { display: flex; flex-direction: column; }
.cal-logo__wordmark { font-weight: 750; letter-spacing: var(--cal-tracking-wordmark); line-height: 1; color: var(--cal-text); white-space: nowrap; }
.cal-logo__descriptor { font-weight: 500; color: var(--cal-text-secondary); margin-top: .62em; }

/* ---- DataTable ----------------------------------------------------------- */
.cal-table-wrap { border: 1px solid var(--cal-border); border-radius: var(--cal-radius-lg); overflow: hidden; background: var(--cal-surface); }
.cal-table-head { display: flex; align-items: baseline; gap: 10px; padding: 16px 20px 14px; flex-wrap: wrap; }
.cal-table-head__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--cal-text); }
.cal-table-head__note { font-size: var(--cal-text-xs); color: var(--cal-text-muted); }
.cal-table-scroll { overflow-x: auto; }
.cal-table { width: 100%; border-collapse: collapse; font-size: var(--cal-text-sm); }
.cal-table th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--cal-text-muted); font-weight: 600; padding: 10px 16px; background: var(--cal-surface-sunken); white-space: nowrap; border-top: 1px solid var(--cal-border); border-bottom: 1px solid var(--cal-border); }
.cal-table td { padding: 11px 16px; border-bottom: 1px solid var(--cal-border); white-space: nowrap; color: var(--cal-text); }
.cal-table tbody tr:last-child td { border-bottom: none; }
.cal-table tbody tr:hover { background: var(--cal-surface-sunken); }
.cal-table__num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--cal-font-mono); font-size: 13px; }
.cal-table__delta-up { color: var(--cal-positive); font-weight: 600; }
.cal-table__delta-down { color: var(--cal-critical); font-weight: 600; }

/* ---- EmptyState ---------------------------------------------------------- */
.cal-empty { background: var(--cal-surface); border: 1px dashed var(--cal-border-strong); border-radius: var(--cal-radius-lg); padding: 40px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cal-empty__icon { color: var(--cal-text-muted); margin-bottom: 4px; display: flex; }
.cal-empty__title { margin: 0; font-size: var(--cal-text-lg); font-weight: 600; color: var(--cal-text); }
.cal-empty__body { margin: 0; font-size: var(--cal-text-sm); color: var(--cal-text-secondary); max-width: 44ch; }

/* ============================================================================
   Data visualisation
   ========================================================================= */
.cal-viz { background: var(--cal-viz-surface); color: var(--cal-viz-ink); font-family: var(--cal-font); }
.cal-viz text { font-family: var(--cal-font); }

.cal-chart { border: 1px solid var(--cal-border); border-radius: var(--cal-radius-lg); background: var(--cal-viz-surface); padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 4px; position: relative; }
.cal-chart__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--cal-viz-ink); letter-spacing: -.01em; }
.cal-chart__subtitle { margin: 0; font-size: var(--cal-text-xs); color: var(--cal-viz-ink-muted); }
.cal-chart__plot { margin-top: 10px; position: relative; }
.cal-chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.cal-grid-line { stroke: var(--cal-grid); stroke-width: 1; shape-rendering: crispEdges; }
.cal-axis-line { stroke: var(--cal-axis); stroke-width: 1; shape-rendering: crispEdges; }
.cal-axis-label { fill: var(--cal-viz-ink-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.cal-series-label { font-size: 11px; font-weight: 600; }

/* Legend — always present for >= 2 series; identity never colour-alone */
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.cal-legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: var(--cal-text-xs); color: var(--cal-viz-ink-secondary); }
.cal-legend__swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.cal-legend__swatch--line { height: 3px; width: 14px; border-radius: 2px; }

/* Tooltip */
.cal-tooltip { position: absolute; pointer-events: none; background: var(--cal-surface); border: 1px solid var(--cal-border-strong); border-radius: var(--cal-radius-md); box-shadow: var(--cal-shadow-md); padding: 9px 11px; font-size: var(--cal-text-xs); color: var(--cal-text); min-width: 128px; z-index: 5; }
.cal-tooltip__head { font-weight: 600; margin-bottom: 5px; color: var(--cal-text); }
.cal-tooltip__row { display: flex; align-items: center; gap: 7px; justify-content: space-between; }
.cal-tooltip__key { display: inline-flex; align-items: center; gap: 6px; color: var(--cal-text-secondary); }
.cal-tooltip__val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--cal-text); }
.cal-crosshair { stroke: var(--cal-axis); stroke-width: 1; stroke-dasharray: 3 3; }

/* StatTile — the hero-number form */
.cal-stat { background: var(--cal-surface); border: 1px solid var(--cal-border); border-radius: var(--cal-radius-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-stat__label { font-size: 11px; font-weight: 600; letter-spacing: var(--cal-tracking-label); text-transform: uppercase; color: var(--cal-text-muted); }
.cal-stat__value { font-size: var(--cal-text-2xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--cal-text); }
.cal-stat__row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.cal-stat__delta { font-size: var(--cal-text-xs); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.cal-stat__delta--up { color: var(--cal-positive); }
.cal-stat__delta--down { color: var(--cal-critical); }
.cal-stat__delta--flat { color: var(--cal-text-muted); }
.cal-stat__caption { font-size: var(--cal-text-xs); color: var(--cal-text-muted); }
.cal-stat__spark { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .cal-root *, .cal-root *::before, .cal-root *::after { transition: none !important; animation: none !important; }
}