/* Merit design system: tokens, base, the signed-in shell and every shared component.

   Loaded on every page by app_base.html, before the feedback layer (errorhandling/style.css), the navbar's own
   stylesheet and the page's stylesheet. Pages only add what is particular to them; they never redeclare tokens
   or re-implement a component from this file.

   Contents
     1  Tokens (light), 2  Tokens (dark)
     3  Base and reset, 4  Utilities, 5  Icons
     6  Layout primitives (page, page header, grid, stack, row, cluster, split, spacer)
     7  Shell: skip link, main, signed-out bar, sidebar and drawer, top bar, money mode toggle, engine status
        pill and card, theme toggle, account menu, pop menus, mode ribbon, phone tab bar
     8  Surfaces (card, panel, divider, callout), 9  KPIs, 10 Buttons and spinner
     11 Forms (field, input, select, textarea, input group, form grid, switch, segmented)
     12 Data (table, table cards, badge, chip, dot, empty), 13 Loading and limits (skeleton, progress, meter)
     14 Tabs and pager, 15 Charts (MeritChart markup), 16 Motion (reveal, count-up, view transitions)
     17 Reduced motion, print and forced colours

   State hooks set by theme/script.js:
     html[data-theme=light|dark], html[data-theme-pref=system|light|dark], html[data-mode=paper|live],
     html.drawer-open, [data-pop].is-open, [data-engine-pill|card][data-state], [data-reveal].is-in,
     .chart .mc-anim (first draw). Colours are OKLCH; light and dark share hues at matched lightness. */

/* ==========================================================================================================
   1. Tokens: light
   ========================================================================================================== */

:root {
  color-scheme: light;

  /* Surfaces and lines: cool neutrals with a faint violet tint. */
  --bg: oklch(0.985 0.004 278);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.975 0.005 278);
  --surface-3: oklch(0.951 0.007 278);
  --border: oklch(0.925 0.008 278);
  --border-strong: oklch(0.87 0.011 278);

  /* Text: every step meets WCAG AA on --surface and --bg. */
  --text: oklch(0.235 0.022 278);
  --text-2: oklch(0.44 0.02 278);
  --text-3: oklch(0.545 0.016 278);

  /* The one accent: electric indigo-violet. */
  --accent: oklch(0.535 0.225 282);
  --accent-hover: oklch(0.495 0.225 282);
  --accent-press: oklch(0.455 0.21 282);
  --accent-soft: oklch(0.956 0.024 285);
  --accent-text: oklch(0.49 0.21 282);
  --on-accent: oklch(1 0 0);
  --ring: oklch(0.535 0.225 282 / 0.3);

  /* Status: only ever state, never decoration. Each tone reads at AA on its own soft tint. */
  --success: oklch(0.53 0.125 155);
  --success-soft: oklch(0.962 0.03 158);
  --success-strong: oklch(0.53 0.125 155);
  --danger: oklch(0.54 0.19 25);
  --danger-soft: oklch(0.962 0.018 22);
  --danger-strong: oklch(0.54 0.19 25);
  --warning: oklch(0.54 0.12 58);
  --warning-soft: oklch(0.968 0.034 82);
  --info: oklch(0.52 0.125 245);
  --info-soft: oklch(0.962 0.018 245);

  /* Money: profit and loss, pretend money (amber) and real money (green). */
  --profit: var(--success);
  --loss: var(--danger);
  --paper: oklch(0.545 0.11 72);
  --paper-soft: oklch(0.968 0.038 88);
  --live: oklch(0.52 0.112 162);
  --live-soft: oklch(0.962 0.03 165);
  --mode: var(--paper);
  --mode-soft: var(--paper-soft);

  /* Charts: categorical order validated for colour-blind separation on the light card (viz-1 is the accent). */
  --viz-1: var(--accent);
  --viz-2: oklch(0.62 0.105 195);
  --viz-3: oklch(0.66 0.165 48);
  --viz-4: oklch(0.6 0.2 350);
  --viz-5: oklch(0.58 0.13 240);
  --viz-6: oklch(0.625 0.14 128);
  --viz-grid: oklch(0.93 0.007 278);

  /* Shape and space (4 px grid: --space-n is n x 4 px). */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Elevation: flat by default; shadow only for raised or floating things. */
  --shadow-1: 0 1px 2px oklch(0.3 0.03 278 / 0.06), 0 1px 3px -1px oklch(0.3 0.03 278 / 0.05);
  --shadow-2: 0 2px 4px oklch(0.3 0.03 278 / 0.04), 0 12px 32px -12px oklch(0.3 0.05 278 / 0.2);
  --shadow-3: 0 4px 12px oklch(0.25 0.04 278 / 0.07), 0 28px 64px -20px oklch(0.25 0.06 278 / 0.32);

  /* Type: Outfit for words, JetBrains Mono for figures. Fluid scale from 320 px to 1440 px. */
  --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --step--2: clamp(0.6875rem, 0.67rem + 0.08vw, 0.75rem);
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);
  --step-1: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --step-2: clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);
  --step-3: clamp(1.5rem, 1.3rem + 0.95vw, 2rem);
  --step-4: clamp(1.875rem, 1.55rem + 1.5vw, 2.625rem);
  --step-5: clamp(2.25rem, 1.75rem + 2.4vw, 3.5rem);

  /* Motion: animate transform, opacity, filter and stroke-dashoffset only. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;

  /* Shell geometry and materials. */
  --sidebar-w: 264px;
  --topbar-h: 60px;
  --ribbon-h: 30px;
  --tabbar-h: 66px;
  --page-max: 1360px;
  --gutter: clamp(16px, 3.2vw, 40px);
  --glass: oklch(0.985 0.004 278 / 0.78);
  --glass-border: oklch(0.88 0.01 278 / 0.65);
  --scrim: oklch(0.2 0.03 278 / 0.38);
  --sidebar-bg: var(--surface);
  --field-bg: var(--surface);
  --skeleton: var(--surface-3);
  --skeleton-sheen: oklch(1 0 0 / 0.75);
  --brand-gradient: linear-gradient(140deg, oklch(0.64 0.2 292), oklch(0.5 0.235 274));
}

/* ==========================================================================================================
   2. Tokens: dark (same hues; lightness matched for a dark canvas)
   ========================================================================================================== */

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

  --bg: oklch(0.16 0.01 278);
  --surface: oklch(0.2 0.012 278);
  --surface-2: oklch(0.232 0.013 278);
  --surface-3: oklch(0.268 0.014 278);
  --border: oklch(0.285 0.013 278);
  --border-strong: oklch(0.365 0.016 278);

  --text: oklch(0.958 0.006 278);
  --text-2: oklch(0.79 0.014 278);
  --text-3: oklch(0.655 0.015 278);

  --accent: oklch(0.585 0.2 282);
  --accent-hover: oklch(0.6 0.21 282);
  --accent-press: oklch(0.55 0.2 282);
  --accent-soft: oklch(0.29 0.07 284);
  --accent-text: oklch(0.8 0.11 284);
  --on-accent: oklch(1 0 0);
  --ring: oklch(0.68 0.17 282 / 0.45);

  --success: oklch(0.74 0.15 155);
  --success-soft: oklch(0.295 0.055 158);
  --success-strong: oklch(0.525 0.12 155);
  --danger: oklch(0.7 0.175 25);
  --danger-soft: oklch(0.3 0.07 22);
  --danger-strong: oklch(0.555 0.185 25);
  --warning: oklch(0.79 0.14 72);
  --warning-soft: oklch(0.31 0.06 72);
  --info: oklch(0.74 0.115 245);
  --info-soft: oklch(0.3 0.055 245);

  --paper: oklch(0.81 0.135 82);
  --paper-soft: oklch(0.31 0.06 82);
  --live: oklch(0.76 0.145 160);
  --live-soft: oklch(0.295 0.055 162);

  --viz-1: oklch(0.62 0.19 282);
  --viz-2: oklch(0.66 0.11 195);
  --viz-3: oklch(0.64 0.16 48);
  --viz-4: oklch(0.62 0.19 350);
  --viz-5: oklch(0.6 0.13 240);
  --viz-6: oklch(0.64 0.15 128);
  --viz-grid: oklch(0.265 0.013 278);

  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.45);
  --shadow-2: 0 2px 6px oklch(0 0 0 / 0.32), 0 16px 36px -14px oklch(0 0 0 / 0.62);
  --shadow-3: 0 8px 20px oklch(0 0 0 / 0.38), 0 32px 80px -24px oklch(0 0 0 / 0.72);

  --glass: oklch(0.16 0.01 278 / 0.74);
  --glass-border: oklch(0.32 0.014 278 / 0.6);
  --scrim: oklch(0.06 0.01 278 / 0.62);
  --sidebar-bg: oklch(0.18 0.011 278);
  --field-bg: oklch(0.175 0.011 278);
  --skeleton: var(--surface-3);
  --skeleton-sheen: oklch(1 0 0 / 0.06);
}

/* Which money the pages show: amber for pretend money, green for real money. */
:root[data-mode="live"] {
  --mode: var(--live);
  --mode-soft: var(--live-soft);
}

/* ==========================================================================================================
   3. Base and reset
   ========================================================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scrollbar-color: var(--border-strong) transparent;
  scroll-padding-top: calc(var(--topbar-h) + var(--ribbon-h) + var(--space-4));
  -webkit-tap-highlight-color: transparent;
}

/* An open modal (status modal, confirmation, busy lock or a page dialog) holds the page still. */
html:has(dialog[open]:modal) {
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(1100px 420px at 78% -160px, color-mix(in oklch, var(--accent) 7%, transparent), transparent 72%),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-3);
  font-weight: 500;
  letter-spacing: -0.028em;
}

h2 { font-size: var(--step-1); }
h3 { font-size: var(--step-0); }
h4, h5, h6 { font-size: var(--step--1); }

p, figure, blockquote, dl, dd {
  margin: 0;
}

p { text-wrap: pretty; }

strong, b { font-weight: 600; }

small { font-size: var(--step--1); }

a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklch, currentColor 32%, transparent);
  text-underline-offset: 3px;
  transition: color var(--dur-1) ease, text-decoration-color var(--dur-1) ease;
}

a:hover { text-decoration-color: currentColor; }

img, video, canvas {
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { cursor: pointer; }

button:disabled { cursor: not-allowed; }

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend { padding: 0; }

table { border-collapse: collapse; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-variant-ligatures: none;
}

:not(pre) > code {
  padding: 0.12em 0.42em;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--text);
  font-size: 0.86em;
}

pre {
  margin: 0;
  overflow: auto;
}

hr {
  height: 0;
  margin: var(--space-5) 0;
  border: 0;
  border-top: 1px solid var(--border);
}

/* The hidden attribute always wins, whatever display a component sets. */
[hidden] {
  display: none !important;
}

::selection {
  background: color-mix(in oklch, var(--accent) 24%, transparent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Page dialogs (a trade's story, a coin, a user's temporary password) share the scrim. */
dialog {
  color: var(--text);
}

dialog::backdrop {
  background: var(--scrim);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* ==========================================================================================================
   4. Utilities
   ========================================================================================================== */

.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.muted { color: var(--text-2); }
.faint { color: var(--text-3); }

.truncate {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Figures: mono, tabular, never ligatures. Right-aligned where they sit in a column (tables). */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-variant-ligatures: none;
  letter-spacing: -0.01em;
}

/* Numbers that count up keep their width while they change. */
[data-count] { font-variant-numeric: tabular-nums; }

/* Profit and loss colours. The sign itself comes from MeritFormat, so colour is never the only cue. */
.pos { color: var(--profit); }
.neg { color: var(--loss); }

/* ==========================================================================================================
   5. Icons: one sprite of 24 x 24 line art, 1.75 stroke, round caps
   ========================================================================================================== */

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 28px; height: 28px; }

/* ==========================================================================================================
   6. Layout primitives
   ========================================================================================================== */

.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: clamp(20px, 2.6vw, 32px) var(--gutter) var(--space-16);
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  min-width: 0;
}

.page-header > :first-child {
  flex: 1 1 20rem;
  min-width: 0;
}

.page-sub {
  max-width: 72ch;
  margin-top: var(--space-2);
  color: var(--text-2);
  font-size: var(--step-0);
  line-height: 1.5;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
}

.page-header > .page-actions:first-child { flex: 0 1 auto; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 240px)), 1fr));
  gap: var(--space-5);
  min-width: 0;
}

.stack,
.stack-sm,
.stack-lg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-4);
  min-width: 0;
}

.stack-sm { gap: var(--space-2); }
.stack-lg { gap: clamp(20px, 2.2vw, 28px); }

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
}

.split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.spacer { flex: 1 1 auto; }

/* ==========================================================================================================
   7. Shell
   ========================================================================================================== */

/* --- skip link and main --------------------------------------------------------------------------------- */

.skip-link {
  position: fixed;
  z-index: 120;
  top: var(--space-3);
  left: var(--space-3);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-3);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}

.skip-link:focus { transform: none; }

.app-main {
  display: block;
  min-width: 0;
  min-height: calc(100dvh - var(--topbar-h) - var(--ribbon-h));
  overflow-x: clip; /* a safety net: nothing inside may widen the page */
  outline: none;
}

/* A layout placed straight into main (the sign-in page) gets the page gutter. Dialogs are left alone. */
:where(.app-main) > :where(div, section, form, article):not(.page) {
  padding-inline: var(--gutter);
}

/* --- brand ----------------------------------------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  border-radius: var(--radius-md);
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand-tile {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--brand-gradient);
  color: oklch(1 0 0);
  box-shadow:
    0 6px 14px -6px oklch(0.5 0.22 280 / 0.65),
    inset 0 1px 0 oklch(1 0 0 / 0.28),
    inset 0 -1px 0 oklch(0 0 0 / 0.12);
}

.brand-tile .icon {
  width: 21px;
  height: 21px;
  stroke-width: 2.2;
}

.brand-name { font-size: 1.1875rem; }

/* --- signed-out bar ------------------------------------------------------------------------------------- */

.prenav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: calc(1180px + 2 * var(--gutter));
  min-height: 68px;
  margin-inline: auto;
  padding: var(--space-3) var(--gutter);
}

/* --- sidebar (desktop) and drawer (below 1024 px) ------------------------------------------------------ */

.app-sidebar {
  position: fixed;
  z-index: 70;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: var(--sidebar-w);
  padding: var(--space-3) var(--space-3) var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 48px;
  padding: 2px var(--space-2) var(--space-2);
}

.sidebar-nav {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-2);
}

.nav-group {
  display: grid;
  gap: 2px;
}

.nav-group-label {
  padding: 0 var(--space-3) 6px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.nav-form { margin: 0; }

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 40px;
  padding: 8px var(--space-3);
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}

.nav-link .icon {
  color: var(--text-3);
  transition: color var(--dur-1) ease, transform var(--dur-2) var(--ease-spring);
}

.nav-link:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-link:hover .icon { color: var(--text-2); }

.nav-link:active .icon { transform: scale(0.9); }

.nav-link.is-active {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.nav-link.is-active .icon { color: var(--accent-text); }

.nav-link.is-active::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: calc(-1 * var(--space-3));
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.nav-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Active-stop count (the Control centre link, the client's Dashboard link, the phone tab bar). */
.nav-count {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--danger-strong);
  color: oklch(1 0 0);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  animation: count-pop var(--dur-3) var(--ease-spring) both;
}

.sidebar-foot {
  margin-top: auto;
  padding-top: var(--space-3);
}

.sidebar-close { display: none; }

.app-scrim {
  position: fixed;
  z-index: 65;
  inset: 0;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* --- top bar ------------------------------------------------------------------------------------------- */

.app-topbar {
  position: sticky;
  z-index: 55;
  top: 0;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--glass-border);
}

/* A soft shadow under the bar fades in as the page scrolls (where scroll timelines exist). */
.app-topbar::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  height: 14px;
  background: linear-gradient(to bottom, oklch(0.2 0.03 278 / 0.07), transparent);
  opacity: 0;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .app-topbar::after {
    animation: topbar-shadow linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 96px;
  }
}

.topbar-row {
  display: flex;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-height: var(--topbar-h);
  padding-inline: var(--gutter);
}

.topbar-menu,
.topbar-brand { display: none; }

.topbar-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.topbar-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* --- money mode toggle (Pretend | Real) ----------------------------------------------------------------- */

.segmented-mode .seg-thumb {
  background: var(--paper-soft);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--paper) 32%, transparent),
    var(--shadow-1);
}

:root[data-mode="live"] .segmented-mode .seg-thumb {
  transform: translateX(100%);
  background: var(--live-soft);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--live) 32%, transparent),
    var(--shadow-1);
}

.segmented-mode label > span::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  transition: opacity var(--dur-2) ease, transform var(--dur-3) var(--ease-spring);
}

:root:not([data-mode="live"]) .segmented-mode .seg-paper > span {
  color: var(--paper);
}

:root[data-mode="live"] .segmented-mode .seg-live > span {
  color: var(--live);
}

:root:not([data-mode="live"]) .segmented-mode .seg-paper > span::before,
:root[data-mode="live"] .segmented-mode .seg-live > span::before {
  opacity: 1;
  transform: scale(1.15);
}

/* --- engine status: the top bar pill and the card (sidebar foot and pop panel) ----------------------- */

.status-pill,
.engine-card {
  --tone: var(--text-3);
  --tone-soft: var(--surface-2);
}

:is(.status-pill, .engine-card, [data-engine-pill], [data-engine-card])[data-state="running"] {
  --tone: var(--success);
  --tone-soft: var(--success-soft);
}

:is(.status-pill, .engine-card, [data-engine-pill], [data-engine-card])[data-state="paused"] {
  --tone: var(--warning);
  --tone-soft: var(--warning-soft);
}

:is(.status-pill, .engine-card, [data-engine-pill], [data-engine-card])[data-state="stopped"],
:is(.status-pill, .engine-card, [data-engine-pill], [data-engine-card])[data-state="offline"] {
  --tone: var(--danger);
  --tone-soft: var(--danger-soft);
}

:is(.status-pill, .engine-card, [data-engine-pill], [data-engine-card])[data-state="standby"] {
  --tone: var(--info);
  --tone-soft: var(--info-soft);
}

.status-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 13px 0 12px;
  border: 1px solid color-mix(in oklch, var(--tone) 26%, var(--border));
  border-radius: var(--radius-full);
  background: color-mix(in oklch, var(--tone-soft) 78%, transparent);
  color: color-mix(in oklch, var(--tone) 82%, var(--text));
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, color var(--dur-2) ease,
    transform var(--dur-1) var(--ease-out);
}

.status-pill:hover {
  background: var(--tone-soft);
  border-color: color-mix(in oklch, var(--tone) 42%, var(--border));
}

.status-pill:active { transform: scale(0.97); }

:is(.status-pill, [data-engine-pill])[data-state="loading"] {
  color: var(--text-3);
}

/* The dot speaks in shape as well as colour: pulsing circle running, calm circle paused, square stopped,
   hollow ring offline, breathing standby, faint while loading. */
.status-dot,
.engine-dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tone);
  transition: background-color var(--dur-2) ease, border-radius var(--dur-2) ease;
}

.status-dot::after,
.engine-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--tone);
  opacity: 0;
}

[data-state="running"] > .status-dot::after,
[data-state="running"] .engine-dot::after {
  animation: ping 2.2s var(--ease-out) infinite;
}

[data-state="stopped"] > .status-dot,
[data-state="stopped"] .engine-dot {
  border-radius: 2px;
}

[data-state="offline"] > .status-dot,
[data-state="offline"] .engine-dot {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--tone);
}

[data-state="standby"] > .status-dot,
[data-state="standby"] .engine-dot,
[data-state="loading"] > .status-dot,
[data-state="loading"] .engine-dot {
  animation: breathe 2.4s var(--ease-in-out) infinite;
}

.engine-card {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 70% at 0% 0%, color-mix(in oklch, var(--tone-soft) 70%, transparent), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow-1);
}

.engine-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--tone);
  opacity: 0.85;
  transition: background-color var(--dur-2) ease;
}

.engine-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.engine-card-title {
  min-width: 0;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.engine-facts {
  display: grid;
  gap: 6px;
  margin: 0;
}

.engine-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 13px;
  line-height: 1.35;
}

.engine-facts dt { color: var(--text-3); }

.engine-facts dd {
  margin: 0;
  min-width: 0;
  color: var(--text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

/* --- theme toggle (system / light / dark) ---------------------------------------------------------------- */

.theme-toggle .theme-icon { display: none; }

:root[data-theme-pref="system"] .theme-toggle .theme-icon-system,
:root[data-theme-pref="light"] .theme-toggle .theme-icon-light,
:root[data-theme-pref="dark"] .theme-toggle .theme-icon-dark,
:root:not([data-theme-pref]) .theme-toggle .theme-icon-system {
  display: inline-block;
  animation: icon-swap var(--dur-3) var(--ease-spring) both;
}

/* --- account button and avatar --------------------------------------------------------------------------- */

.avatar-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  height: 40px;
  padding: 0 6px 0 4px;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--text-3);
  transition: background-color var(--dur-1) ease;
}

.avatar-btn:hover,
.pop.is-open > .avatar-btn {
  background: var(--surface-3);
}

.avatar-caret { transition: transform var(--dur-2) var(--ease-out); }

.pop.is-open .avatar-caret { transform: rotate(180deg); }

.avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(0.56 0.18 300), oklch(0.47 0.2 272));
  color: oklch(1 0 0);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.18);
  user-select: none;
}

.avatar-lg {
  width: 44px;
  height: 44px;
  font-size: 15px;
}

/* --- pop menus (engine details, account) ---------------------------------------------------------------- */

.pop {
  position: relative;
  display: inline-flex;
}

.pop-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 10px);
  right: 0;
  width: max-content;
  min-width: 240px;
  max-width: min(340px, calc(100vw - 24px));
  max-height: calc(100dvh - var(--topbar-h) - 24px);
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  transform-origin: top right;
  animation: pop-in var(--dur-2) var(--ease-out) both;
}

.pop-engine { width: 300px; }

.pop-engine .engine-card {
  padding: var(--space-3);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.pop-engine .engine-card::before { display: none; }

.pop-menu { width: 288px; }

.menu-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 10px 8px;
}

.menu-who {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.menu-who strong {
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
}

.menu-who span {
  color: var(--text-3);
  font-size: 13px;
}

.menu-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 10px 8px;
}

.menu-sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--border);
}

.menu-form { margin: 0; }

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-1) ease;
}

.menu-item .icon { color: var(--text-3); }

.menu-item:hover { background: var(--surface-2); }

.menu-theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 6px 10px;
}

.menu-theme-label {
  color: var(--text-2);
  font-size: 0.9375rem;
}

/* --- mode ribbon: a slim band under the top bar that always says which money is on screen ----------- */

.mode-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ribbon-h);
  padding: 4px var(--gutter);
  border-top: 1px solid color-mix(in oklch, var(--mode) 18%, transparent);
  background: color-mix(in oklch, var(--mode-soft) 88%, transparent);
  color: var(--mode);
  font-size: 12.5px;
  line-height: 1.3;
  transition: background-color var(--dur-3) ease, color var(--dur-3) ease;
}

.mode-ribbon p {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  animation: fade-in var(--dur-3) var(--ease-out) both;
}

.mode-ribbon strong {
  font-weight: 600;
  white-space: nowrap;
}

.ribbon-note {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in oklch, var(--mode) 62%, var(--text));
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root:not([data-mode="live"]) .ribbon-live,
:root[data-mode="live"] .ribbon-paper {
  display: none;
}

/* --- phone tab bar (below 640 px) ------------------------------------------------------------------------ */

.app-tabbar { display: none; }

.tab-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 52px;
  padding: 4px 2px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-2) ease;
}

.tab-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 30px;
  border-radius: var(--radius-full);
  transition: background-color var(--dur-2) ease, transform var(--dur-2) var(--ease-spring);
}

.tab-icon .icon {
  width: 22px;
  height: 22px;
}

.tab-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-link.is-active { color: var(--accent-text); }

.tab-link.is-active .tab-icon { background: var(--accent-soft); }

.tab-link:active .tab-icon { transform: scale(0.9); }

.tab-icon .nav-count {
  position: absolute;
  top: -3px;
  right: 6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: 10px;
  box-shadow: 0 0 0 2px var(--surface);
}

/* ==========================================================================================================
   8. Surfaces
   ========================================================================================================== */

.card {
  position: relative;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

:root[data-theme="dark"] .card {
  box-shadow: var(--shadow-1), inset 0 1px 0 oklch(1 0 0 / 0.025);
}

a.card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease, border-color var(--dur-2) ease;
}

a.card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}

.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-5) var(--space-6) 0;
}

.card-header > :first-child:not(.card-actions) {
  flex: 1 1 14rem;
  min-width: 0;
}

.card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.card-sub {
  margin-top: 3px;
  color: var(--text-3);
  font-size: var(--step--1);
  line-height: 1.45;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
}

.card-body {
  min-width: 0;
  padding: var(--space-5) var(--space-6) var(--space-6);
}

.card > .card-body:first-child { padding-top: var(--space-6); }

.card-header + .table-wrap,
.card-header + .chart { margin-top: var(--space-4); }

.card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-top: 1px solid var(--border);
  border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
  background: color-mix(in oklch, var(--surface-2) 60%, var(--surface));
}

.panel {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.divider {
  height: 1px;
  margin: var(--space-4) 0;
  border: 0;
  background: var(--border);
}

/* A callout is a short note with a tone bar on its leading edge. Plain .callout uses the accent. */
.callout {
  --tone: var(--accent);
  --tone-soft: var(--accent-soft);
  --tone-text: var(--accent-text);
  position: relative;
  min-width: 0;
  padding: 14px 16px 14px 20px;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--tone) 20%, var(--border));
  border-radius: var(--radius-md);
  background: var(--tone-soft);
  color: var(--text);
  font-size: var(--step--1);
  line-height: 1.55;
}

.callout::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--tone);
}

.callout strong { color: var(--tone-text); }

.callout-info { --tone: var(--info); --tone-soft: var(--info-soft); --tone-text: var(--info); }
.callout-success { --tone: var(--success); --tone-soft: var(--success-soft); --tone-text: var(--success); }
.callout-warning { --tone: var(--warning); --tone-soft: var(--warning-soft); --tone-text: var(--warning); }
.callout-danger { --tone: var(--danger); --tone-soft: var(--danger-soft); --tone-text: var(--danger); }

/* ==========================================================================================================
   9. KPIs: numbers are the hero
   ========================================================================================================== */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 200px)), 1fr));
  gap: var(--space-4);
  min-width: 0;
}

.kpi {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  container-type: inline-size;
}

.kpi-label {
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Large, light figures that scale with the tile, so long ringgit amounts still fit. */
.kpi-value {
  min-width: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: clamp(1.25rem, 12cqi, 2.25rem);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  font-variant-ligatures: none;
  line-height: 1.12;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: start;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kpi-delta.up { background: var(--success-soft); color: var(--profit); }
.kpi-delta.down { background: var(--danger-soft); color: var(--loss); }

.kpi-delta .icon { width: 14px; height: 14px; stroke-width: 2; }

.kpi-foot {
  color: var(--text-3);
  font-size: var(--step--1);
  line-height: 1.45;
}

/* ==========================================================================================================
   10. Buttons
   ========================================================================================================== */

.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
  --btn-hover: var(--surface-2);
  --btn-shadow: var(--shadow-1);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--btn-bd);
  border-radius: 10px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
  font-family: var(--font);
  font-size: 0.90625rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease,
    box-shadow var(--dur-2) ease, transform var(--dur-1) var(--ease-out), opacity var(--dur-1) ease;
}

.btn:hover {
  background: var(--btn-hover);
  color: var(--btn-fg);
}

.btn:active { transform: translateY(1px) scale(0.985); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn .icon,
.btn > svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.btn-primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  --btn-bd: transparent;
  --btn-hover: var(--accent-hover);
  --btn-shadow: 0 1px 2px oklch(0.3 0.15 282 / 0.28), 0 6px 14px -6px oklch(0.5 0.2 282 / 0.55),
    inset 0 1px 0 oklch(1 0 0 / 0.16);
}

.btn-primary:active { --btn-bg: var(--accent-press); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-2);
  --btn-bd: transparent;
  --btn-hover: var(--surface-3);
  --btn-shadow: none;
}

.btn-ghost:hover { color: var(--text); }

.btn-subtle {
  --btn-bg: var(--accent-soft);
  --btn-fg: var(--accent-text);
  --btn-bd: transparent;
  --btn-hover: color-mix(in oklch, var(--accent-soft), var(--accent) 12%);
  --btn-shadow: none;
}

.btn-danger {
  --btn-bg: var(--danger-strong);
  --btn-fg: oklch(1 0 0);
  --btn-bd: transparent;
  --btn-hover: color-mix(in oklch, var(--danger-strong), oklch(0 0 0) 12%);
  --btn-shadow: 0 1px 2px oklch(0.3 0.12 25 / 0.3), 0 6px 14px -6px oklch(0.5 0.18 25 / 0.5);
}

.btn-success {
  --btn-bg: var(--success-strong);
  --btn-fg: oklch(1 0 0);
  --btn-bd: transparent;
  --btn-hover: color-mix(in oklch, var(--success-strong), oklch(0 0 0) 12%);
  --btn-shadow: 0 1px 2px oklch(0.3 0.1 155 / 0.3), 0 6px 14px -6px oklch(0.5 0.12 155 / 0.5);
}

.btn-sm {
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
}

.btn-sm .icon,
.btn-sm > svg {
  width: 16px;
  height: 16px;
}

.btn-lg {
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-md);
  font-size: 1rem;
}

.btn-icon {
  width: 40px;
  padding: 0;
}

.btn-sm.btn-icon { width: 32px; }
.btn-lg.btn-icon { width: 48px; }

.btn-block {
  display: flex;
  width: 100%;
}

/* Busy: api() sets aria-busy and disables the button while its request runs; only then the spinner shows. */
.spinner {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.15em;
  animation: spin 0.7s linear infinite;
}

.btn .spinner {
  display: none;
  width: 16px;
  height: 16px;
}

.btn[aria-busy="true"] {
  opacity: 1;
  cursor: progress;
}

.btn[aria-busy="true"] .spinner { display: inline-block; }

.btn[aria-busy="true"] .spinner ~ .icon { display: none; }

/* ==========================================================================================================
   11. Forms
   ========================================================================================================== */

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field > label,
.field > legend,
.label {
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.35;
}

fieldset.field > legend { margin-bottom: 6px; }

.hint {
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 1.45;
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background-color: var(--field-bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.4;
  box-shadow: inset 0 1px 1px oklch(0.2 0.02 278 / 0.03);
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-2) ease, background-color var(--dur-1) ease;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-3);
  opacity: 1;
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: color-mix(in oklch, var(--border-strong), var(--text-3) 40%);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 4px var(--ring);
}

.input[readonly],
.textarea[readonly] {
  background-color: var(--surface-2);
  color: var(--text-2);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.textarea {
  min-height: 104px;
  padding: 10px 14px;
  resize: vertical;
}

.select {
  padding-right: 40px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

.input[type="date"],
.input[type="time"],
.input[type="datetime-local"] {
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.input[type="search"] { -webkit-appearance: none; appearance: none; }

.input-group {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  min-width: 0;
}

.input-group > .input,
.input-group > .select {
  flex: 1 1 auto;
  min-width: 0;
}

.input-group > .btn { flex: none; min-height: 42px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-4) var(--space-5);
  min-width: 0;
}

/* Switch: <label class="switch"><input type="checkbox"> Text</label> or <input type="checkbox" class="switch">. */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  color: var(--text);
  font-size: var(--step--1);
  cursor: pointer;
}

.switch input[type="checkbox"],
input[type="checkbox"].switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background-color: var(--surface-3);
  background-image:
    radial-gradient(circle at 11px 50%, oklch(1 0 0) 8.5px, transparent 9.5px),
    radial-gradient(circle at 11px 60%, oklch(0 0 0 / 0.18) 8.5px, transparent 11px);
  background-position: 0 0;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: background-color var(--dur-2) ease, background-position var(--dur-3) var(--ease-spring),
    border-color var(--dur-2) ease;
}

.switch input[type="checkbox"]:checked,
input[type="checkbox"].switch:checked {
  border-color: transparent;
  background-color: var(--accent);
  background-position: 18px 0;
}

.switch input[type="checkbox"]:disabled,
input[type="checkbox"].switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Segmented: radio buttons as one control. With a .seg-thumb inside, the highlight slides between choices;
   the mode toggle's thumb follows html[data-mode], every other thumb follows the checked radio. */
.segmented {
  --seg-n: 2;
  --seg-i: 0;
  --seg-pad: 3px;
  position: relative;
  display: inline-grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  align-items: stretch;
  max-width: 100%;
  padding: var(--seg-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  isolation: isolate;
  vertical-align: middle;
}

.segmented:has(> label:nth-of-type(3)) { --seg-n: 3; }
.segmented:has(> label:nth-of-type(4)) { --seg-n: 4; }
.segmented:has(> label:nth-of-type(5)) { --seg-n: 5; }

.segmented:not(.segmented-mode):has(> label:nth-of-type(2) > input:checked) { --seg-i: 1; }
.segmented:not(.segmented-mode):has(> label:nth-of-type(3) > input:checked) { --seg-i: 2; }
.segmented:not(.segmented-mode):has(> label:nth-of-type(4) > input:checked) { --seg-i: 3; }
.segmented:not(.segmented-mode):has(> label:nth-of-type(5) > input:checked) { --seg-i: 4; }

.segmented > label {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.segmented input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.segmented label > span {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 34px;
  padding: 0 14px;
  border-radius: calc(var(--radius-md) - var(--seg-pad));
  color: var(--text-2);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: color var(--dur-2) ease, background-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}

.segmented label:hover > span { color: var(--text); }

.segmented input:checked + span {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--border);
}

:root[data-theme="dark"] .segmented input:checked + span { background: var(--surface-3); }

.segmented:has(> .seg-thumb) input:checked + span {
  background: transparent;
  box-shadow: none;
}

.segmented input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.segmented input:disabled + span {
  opacity: 0.5;
  cursor: not-allowed;
}

.seg-thumb {
  position: absolute;
  z-index: 0;
  top: var(--seg-pad);
  bottom: var(--seg-pad);
  left: var(--seg-pad);
  width: calc((100% - 2 * var(--seg-pad)) / var(--seg-n));
  border-radius: calc(var(--radius-md) - var(--seg-pad));
  background: var(--surface);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--border);
  transform: translateX(calc(100% * var(--seg-i)));
  transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-3) ease,
    box-shadow var(--dur-3) ease;
  pointer-events: none;
}

:root[data-theme="dark"] .seg-thumb { background: var(--surface-3); }

.segmented-sm label > span {
  min-width: 34px;
  min-height: 28px;
  padding: 0 10px;
}

/* ==========================================================================================================
   12. Data
   ========================================================================================================== */

/* Tables live in cards: the wrap scrolls sideways when a table is wider than its card, and keeps its
   header in view on long tables. */
.table-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.90625rem;
  font-variant-numeric: tabular-nums;
}

.table th,
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.table thead th {
  position: sticky;
  z-index: 1;
  top: 0;
  padding-block: 10px;
  background: var(--surface);
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

.table th:first-child,
.table td:first-child { padding-left: var(--space-6); }

.table th:last-child,
.table td:last-child { padding-right: var(--space-6); }

.table tbody tr { transition: background-color var(--dur-1) ease; }

.table tbody tr:hover { background: color-mix(in oklch, var(--surface-2) 75%, transparent); }

.table tbody tr:last-child > * { border-bottom: 0; }

.table tbody th {
  color: var(--text);
  font-weight: 500;
}

.table tfoot td,
.table tfoot th {
  border-top: 1px solid var(--border-strong);
  border-bottom: 0;
  background: color-mix(in oklch, var(--surface-2) 60%, var(--surface));
  color: var(--text);
  font-weight: 600;
}

.table .num {
  text-align: right;
  white-space: nowrap;
}

.table thead th.num {
  font-family: var(--font);
  letter-spacing: 0.07em;
}

/* Long tables scroll inside their card so the header (and any totals row) stays in view. Pages may set
   --table-max (for example none) on the wrap. Below 720 px rows become stacked cards instead. */
@media (min-width: 720px) {
  .table-wrap { max-height: var(--table-max, min(76vh, 880px)); }

  .table tfoot > tr > * {
    position: sticky;
    z-index: 1;
    bottom: 0;
  }
}

/* Badges: small status words. Status tones only ever mean state. */
.badge {
  --tone: var(--text-2);
  --tone-soft: var(--surface-3);
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-full);
  background: var(--tone-soft);
  color: var(--tone);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  vertical-align: middle;
}

.badge .icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.2;
}

.badge-success { --tone: var(--success); --tone-soft: var(--success-soft); }
.badge-danger { --tone: var(--danger); --tone-soft: var(--danger-soft); }
.badge-warning { --tone: var(--warning); --tone-soft: var(--warning-soft); }
.badge-info { --tone: var(--info); --tone-soft: var(--info-soft); }
.badge-neutral { --tone: var(--text-2); --tone-soft: var(--surface-3); }
.badge-accent { --tone: var(--accent-text); --tone-soft: var(--accent-soft); }
.badge-paper { --tone: var(--paper); --tone-soft: var(--paper-soft); }
.badge-live { --tone: var(--live); --tone-soft: var(--live-soft); }

.chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.chip .icon { width: 14px; height: 14px; }

.dot {
  position: relative;
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

.dot-live { background: var(--success); }

.dot-live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: ping 2.2s var(--ease-out) infinite;
}

/* Empty state: icon, title, text, action. */
.empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-6);
  color: var(--text-2);
  text-align: center;
}

.empty > .icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-2);
  padding: 12px;
  border-radius: 15px;
  background: var(--surface-2);
  color: var(--text-3);
  box-shadow: inset 0 0 0 1px var(--border);
}

.empty-title {
  color: var(--text);
  font-size: var(--step-0);
  font-weight: 600;
}

.empty-text {
  max-width: 46ch;
  color: var(--text-3);
  font-size: var(--step--1);
  line-height: 1.5;
}

.empty > .muted {
  max-width: 46ch;
  font-size: var(--step--1);
}

.empty .btn { margin-top: var(--space-2); }

/* ==========================================================================================================
   13. Loading and limits
   ========================================================================================================== */

/* Skeleton: a placeholder with a sheen sweeping across it (transform only). Size with --w / --h. */
.skeleton {
  position: relative;
  display: block;
  width: var(--w, 100%);
  max-width: 100%;
  height: var(--h, 1em);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--skeleton);
  color: transparent;
  pointer-events: none;
  user-select: none;
}

span.skeleton {
  display: inline-block;
  width: var(--w, 6em);
  vertical-align: middle;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--skeleton-sheen) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: shimmer 1.5s var(--ease-in-out) infinite;
}

/* Progress: <div class="progress" style="--value:42"> (0 to 100). */
.progress,
.meter {
  --v: clamp(0, var(--value, 0), 100);
  position: relative;
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  isolation: isolate;
}

.progress::after,
.meter::after,
.meter > span {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in oklch, var(--accent) 78%, var(--viz-4)), var(--accent));
  transform: translateX(calc((var(--v) - 100) * 1%));
  transition: transform 700ms var(--ease-out), background-color var(--dur-3) ease;
}

@starting-style {
  .progress::after,
  .meter::after,
  .meter > span {
    transform: translateX(-100%);
  }
}

/* Meter: how much of a limit is used. Accent below 70, warning from 70, danger from 90. */
.meter {
  --w1: clamp(0, (var(--v) - 69.999) * 1000, 1);
  --w2: clamp(0, (var(--v) - 89.999) * 1000, 1);
  --meter-color: color-mix(in oklch, var(--danger) calc(var(--w2) * 100%),
    color-mix(in oklch, var(--warning) calc(var(--w1) * 100%), var(--accent)));
  background: color-mix(in oklch, var(--meter-color) 16%, var(--surface-2));
}

.meter::after,
.meter > span {
  background: var(--meter-color);
}

.meter:has(> span)::after { display: none; }

.meter.is-warning,
.meter[data-level="warning"] { --meter-color: var(--warning); }

.meter.is-danger,
.meter[data-level="danger"] { --meter-color: var(--danger); }

/* ==========================================================================================================
   14. Tabs and pager
   ========================================================================================================== */

.tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  font-size: var(--step--1);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}

.tab:hover { color: var(--text); }

.tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--border);
}

:root[data-theme="dark"] .tab[aria-selected="true"] { background: var(--surface-3); }

.tab:focus-visible { outline-offset: 0; }

.tab .badge { height: 20px; padding: 0 7px; font-size: 11px; }

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
  font-size: var(--step--1);
}

.pager:empty { display: none; }

.pager > .muted,
.pager > span {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================================================
   15. Charts: hand-written SVG from MeritChart, themed by tokens
   ========================================================================================================== */

.chart {
  position: relative;
  width: 100%;
  min-width: 0;
}

.mc {
  display: block;
  width: 100%;
  overflow: visible;
  font-family: var(--font-mono);
  font-size: 11px;
  user-select: none;
  -webkit-user-select: none;
}

.mc-grid {
  stroke: var(--viz-grid);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.mc-axis {
  fill: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.mc-line {
  fill: none;
  stroke: var(--viz-1);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mc-spark .mc-line { stroke-width: 1.75; }

.mc-area {
  fill: var(--viz-1);
  fill-opacity: 0.11;
  stroke: none;
}

.mc-spark .mc-area { fill-opacity: 0.09; }

.mc-peak {
  fill: none;
  stroke: var(--text-3);
  stroke-width: 1.25;
  stroke-dasharray: 4 4;
  opacity: 0.75;
}

.mc-target {
  stroke: var(--text-2);
  stroke-width: 1.25;
  stroke-dasharray: 5 4;
  opacity: 0.8;
}

.mc-bar { rx: 3px; }

.mc-bar.pos { fill: var(--profit); }
.mc-bar.neg { fill: var(--loss); }

.mc-bar:hover { opacity: 0.85; }

.mc-cross {
  stroke: var(--text-3);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  pointer-events: none;
}

.mc-dot {
  fill: var(--viz-1);
  stroke: var(--surface);
  stroke-width: 2;
}

.mc-ring-track {
  fill: none;
  stroke: var(--surface-3);
}

.mc-ring-value {
  fill: none;
  stroke: var(--viz-1);
  stroke-linecap: round;
}

.mc-donut-seg { fill: none; }

.mc-tip {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  min-width: 140px;
  max-width: 240px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in oklch, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-2);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
  transition: opacity var(--dur-1) ease;
}

.mc-tip-title {
  margin-bottom: 4px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
}

.mc-tip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mc-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 120px;
  padding: var(--space-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-3);
  font-size: var(--step--1);
  text-align: center;
}

/* First draw: lines and areas wipe in from the left, bars grow from the baseline, rings sweep. */
.mc-anim .mc-line,
.mc-anim .mc-area,
.mc-anim .mc-peak {
  animation: mc-wipe 1100ms var(--ease-out) both;
}

.mc-anim .mc-area { animation-duration: 1300ms; }

.mc-anim .mc-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: mc-grow 720ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 14ms);
}

.mc-anim .mc-bar.neg { transform-origin: 50% 0%; }

.mc-anim .mc-ring-value,
.mc-anim .mc-donut-seg {
  animation: mc-sweep 1100ms var(--ease-out) both;
}

.mc-anim .mc-dot,
.mc-anim .mc-target {
  animation: fade-in 420ms var(--ease-out) 650ms both;
}

/* ==========================================================================================================
   16. Motion
   ========================================================================================================== */

/* Reveal: content fades and rises the first time it scrolls into view, staggered by --i. If the runtime never
   marks it (no script), it shows by itself after a moment. */
.js [data-reveal] {
  transition-property: opacity, transform, border-color, box-shadow, background-color;
  transition-duration: 640ms, 760ms, var(--dur-2), var(--dur-2), var(--dur-2);
  transition-timing-function: var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s, 0s;
}

.js [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(14px);
  animation: reveal-failsafe 1ms linear 2.5s forwards;
}

@view-transition {
  navigation: auto;
}

/* The shell stays put while a navigation fades the page between it. */
.app-sidebar { view-transition-name: merit-sidebar; }
.app-topbar { view-transition-name: merit-topbar; }
.app-tabbar { view-transition-name: merit-tabbar; }

::view-transition-group(merit-sidebar),
::view-transition-group(merit-topbar),
::view-transition-group(merit-tabbar) {
  animation-duration: 0s;
}

::view-transition-old(root) { animation: vt-out 160ms var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in 300ms var(--ease-out) both; }

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes shimmer { to { transform: translateX(100%); } }

@keyframes ping {
  0% { opacity: 0.55; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(2.6); }
}

@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes fade-in { from { opacity: 0; } }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
}

@keyframes icon-swap {
  from { opacity: 0; transform: rotate(-70deg) scale(0.6); }
}

@keyframes count-pop {
  from { opacity: 0; transform: scale(0.5); }
}

@keyframes topbar-shadow { to { opacity: 1; } }

@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }

@keyframes vt-out { to { opacity: 0; } }

@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

@keyframes mc-wipe {
  from { clip-path: polygon(-12px -12px, -12px -12px, -12px calc(100% + 12px), -12px calc(100% + 12px)); }
  to {
    clip-path: polygon(-12px -12px, calc(100% + 12px) -12px, calc(100% + 12px) calc(100% + 12px),
      -12px calc(100% + 12px));
  }
}

@keyframes mc-grow { from { transform: scaleY(0); } }

@keyframes mc-sweep { from { stroke-dasharray: 0 1000; } }

/* ==========================================================================================================
   Responsive shell
   ========================================================================================================== */

/* Desktop: the sidebar is fixed on the left and everything else moves over. */
@media (min-width: 1024px) {
  .app-sidebar ~ .app-topbar,
  .app-sidebar ~ .app-main {
    margin-left: var(--sidebar-w);
  }

  .app-scrim { display: none !important; }
}

/* Below 1024 px: the sidebar becomes a drawer behind the menu button. */
@media (max-width: 1023.98px) {
  .app-sidebar {
    width: min(304px, 86vw);
    padding-left: max(var(--space-3), env(safe-area-inset-left));
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    box-shadow: var(--shadow-3);
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
  }

  .drawer-open .app-sidebar {
    transform: none;
    visibility: visible;
    transition: transform var(--dur-3) var(--ease-out), visibility 0s;
  }

  .sidebar-close { display: inline-flex; }

  .app-scrim {
    opacity: 0;
    transition: opacity var(--dur-3) var(--ease-out), display var(--dur-3) allow-discrete;
  }

  .drawer-open .app-scrim {
    display: block !important;
    opacity: 1;
  }

  @starting-style {
    .drawer-open .app-scrim { opacity: 0; }
  }

  html.drawer-open { overflow: hidden; }

  .topbar-menu { display: inline-flex; }

  .topbar-brand { display: inline-flex; }

  .topbar-brand .brand-tile {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  .topbar-brand .brand-tile .icon { width: 19px; height: 19px; }

  .topbar-brand .brand-name { font-size: 1.0625rem; }
}

/* Phones: the tab bar replaces the menu button, the top bar keeps only what thumbs need. */
@media (max-width: 639.98px) {
  :root {
    --topbar-h: 56px;
    --ribbon-h: 26px;
  }

  .page {
    gap: var(--space-5);
    padding-bottom: var(--space-10);
  }

  .topbar-row { gap: var(--space-2); }

  .topbar-menu,
  .topbar-title,
  .topbar-actions .theme-toggle,
  .ribbon-note {
    display: none;
  }

  .segmented-mode label > span {
    min-height: 32px;
    padding: 0 10px;
  }

  .avatar-caret { display: none; }

  .avatar-btn { padding: 0 4px; }

  /* Pop panels hang under the top bar, full width, instead of from their button. */
  .pop { position: static; }

  .pop-panel,
  .pop-engine,
  .pop-menu {
    top: calc(100% + 8px);
    right: var(--gutter);
    left: var(--gutter);
    width: auto;
    max-width: none;
    transform-origin: top center;
  }

  .app-tabbar {
    position: fixed;
    z-index: 50;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: var(--tabbar-h);
    padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left));
    background: var(--glass);
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
    backdrop-filter: saturate(1.6) blur(18px);
    border-top: 1px solid var(--glass-border);
  }

  .app-tabbar ~ .app-main {
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  }

  .card-header { padding: var(--space-4) var(--space-4) 0; }

  .card-body { padding: var(--space-4) var(--space-4) var(--space-5); }

  .card > .card-body:first-child { padding-top: var(--space-5); }

  .card-footer { padding: var(--space-3) var(--space-4); }

  .table th:first-child,
  .table td:first-child { padding-left: var(--space-4); }

  .table th:last-child,
  .table td:last-child { padding-right: var(--space-4); }

  .kpi { padding: var(--space-4); }
}

@media (max-width: 479.98px) {
  .status-label { display: none; }

  .status-pill {
    width: 36px;
    padding: 0;
    justify-content: center;
  }
}

@media (max-width: 379.98px) {
  .topbar-brand .brand-name { display: none; }
}

/* Inputs never smaller than 16 px on phones (no zoom on focus). */
@media (max-width: 639.98px), (pointer: coarse) {
  .input,
  .select,
  .textarea {
    font-size: 1rem;
  }
}

/* Touch: 44 px targets without changing how compact controls look. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }

  .btn-icon { width: 44px; }

  .btn-sm,
  .btn-sm.btn-icon,
  .tab,
  .gm-copy {
    position: relative;
  }

  .btn-sm::after,
  .tab::after {
    content: "";
    position: absolute;
    inset: -6px -2px;
  }

  .nav-link,
  .menu-item { min-height: 44px; }

  .segmented label > span { min-height: 38px; }

  .segmented-sm label > span { min-height: 36px; }
}

/* Tables become stacked rows (each cell labelled by its data-label) below 720 px. */
@media (max-width: 719.98px) {
  .table-wrap:has(> .table-cards) { overflow: visible; }

  .table-cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .table-cards,
  .table-cards tbody,
  .table-cards tfoot,
  .table-cards tr {
    display: block;
    width: 100%;
  }

  .table-cards tbody tr,
  .table-cards tfoot tr {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
  }

  .table-cards tbody tr:last-child { border-bottom: 0; }

  .table-cards tbody tr:hover { background: none; }

  .table-cards td,
  .table-cards tbody th,
  .table-cards tfoot th {
    position: relative;
    display: block;
    min-height: 30px;
    padding: 5px 0 5px 44%;
    border: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .table-cards th:first-child,
  .table-cards td:first-child,
  .table-cards th:last-child,
  .table-cards td:last-child {
    padding-right: 0;
  }

  .table-cards td:first-child,
  .table-cards th:first-child { padding-left: 44%; }

  .table-cards td[data-label]::before,
  .table-cards th[data-label]::before {
    content: attr(data-label);
    position: absolute;
    top: 6px;
    left: 0;
    width: 41%;
    color: var(--text-3);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
  }

  .table-cards td:not([data-label]),
  .table-cards th:not([data-label]),
  .table-cards td[colspan] {
    padding-left: 0;
    text-align: left;
  }

  .table-cards td:empty { display: none; }

  .table-cards tfoot tr { border-top: 1px solid var(--border-strong); }

  .table-cards tfoot td,
  .table-cards tfoot th { background: none; }
}

/* Very wide screens: let the page breathe a little more. */
@media (min-width: 1920px) {
  :root { --page-max: 1560px; }
}

/* ==========================================================================================================
   17. Reduced motion, print and forced colours
   ========================================================================================================== */

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

  .skeleton::after { display: none; }

  @view-transition {
    navigation: none;
  }
}

@media print {
  .app-sidebar,
  .app-scrim,
  .app-topbar,
  .app-tabbar,
  .skip-link {
    display: none !important;
  }

  .app-sidebar ~ .app-main {
    margin: 0;
    padding: 0;
  }

  body { background: oklch(1 0 0); }

  .card,
  .kpi {
    box-shadow: none;
    break-inside: avoid;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

@media (forced-colors: active) {
  .btn,
  .tab[aria-selected="true"],
  .segmented input:checked + span,
  .seg-thumb,
  .status-pill,
  .badge,
  .chip {
    border: 1px solid CanvasText;
  }

  .nav-link.is-active,
  .tab-link.is-active { outline: 2px solid Highlight; }

  .status-dot,
  .engine-dot,
  .dot { forced-color-adjust: none; }
}