@font-face {
  font-family: "Onest";
  src: url("/assets/onest.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* depager tokens default --palette ink, plus the few roles this card adds.
   Every colour is written once as light-dark(light, dark); color-scheme picks the side. */
:root {
  color-scheme: light;
  --color-bg: light-dark(oklch(1.000 0 0), oklch(0.17 0 0));
  --color-surface: light-dark(oklch(1.000 0 0), oklch(0.205 0 0));
  --color-surface-2: light-dark(oklch(0.982 0 0), oklch(0.245 0 0));
  --color-border: light-dark(oklch(0.916 0 0), oklch(0.30 0 0));
  --control-border: light-dark(oklch(0.58 0 0), oklch(0.56 0 0));
  --color-text: light-dark(oklch(0.178 0 0), oklch(0.95 0 0));
  --color-text-muted: light-dark(oklch(0.500 0 0), oklch(0.72 0 0));
  --color-primary: light-dark(oklch(0.178 0 0), oklch(0.95 0 0));
  --color-on-primary: light-dark(oklch(1.000 0 0), oklch(0.17 0 0));
  --sev-error-fg: light-dark(oklch(0.46 0.185 27), oklch(0.80 0.11 27));
  --sev-error-bg: light-dark(oklch(0.96 0.018 27), oklch(0.25 0.05 27));
  --sev-error-border: light-dark(oklch(0.85 0.079 27), oklch(0.42 0.10 27));
  --sev-error-solid: light-dark(oklch(0.56 0.190 27), oklch(0.66 0.19 27));
  --sev-warning-fg: light-dark(oklch(0.46 0.095 75), oklch(0.84 0.11 75));
  --sev-warning-bg: light-dark(oklch(0.96 0.030 75), oklch(0.26 0.04 75));
  --sev-warning-border: light-dark(oklch(0.85 0.090 75), oklch(0.45 0.08 75));
  --sev-warning-solid: light-dark(oklch(0.66 0.130 75), oklch(0.78 0.13 75));
  --sev-ok-fg: light-dark(oklch(0.44 0.125 190), oklch(0.82 0.10 190));
  --sev-ok-bg: light-dark(oklch(0.96 0.028 190), oklch(0.25 0.035 190));
  --sev-ok-border: light-dark(oklch(0.85 0.084 190), oklch(0.44 0.07 190));
  --sev-ok-solid: light-dark(oklch(0.53 0.140 190), oklch(0.74 0.11 190));
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ground: light-dark(oklch(0.982 0 0), oklch(0.145 0 0));
  --accent: var(--sev-ok-solid);
  --data-1: light-dark(oklch(0.30 0 0), oklch(0.80 0 0));
  --data-2: light-dark(oklch(0.48 0 0), oklch(0.68 0 0));
  --data-3: light-dark(oklch(0.62 0 0), oklch(0.52 0 0));
  --data-area: light-dark(oklch(0.30 0 0 / 0.12), oklch(0.80 0 0 / 0.16));
  /* series roles, the same in both themes: the largest series takes the mid grey, the strongest grey goes to the next one,
     so in dark the biggest block of bars is not the brightest thing on the page */
  --series-a: var(--data-2);
  --series-f: var(--data-1);
  --series-p: var(--data-3);
  /* tooltip swatches sit on a dark plane in light, so they take the greys that read there; in dark they follow the series */
  --tip-a: light-dark(oklch(0.72 0 0), var(--series-a));
  --tip-f: light-dark(oklch(0.52 0 0), var(--series-f));
  --tip-p: light-dark(oklch(0.92 0 0), var(--series-p));
  --neutral-3: light-dark(oklch(0.958 0 0), oklch(0.30 0 0));
  --cell-quiet: light-dark(oklch(0.87 0 0), oklch(0.34 0 0));
  --seg-off: light-dark(oklch(0.9 0 0), oklch(0.38 0 0));
  --thumb: light-dark(var(--color-surface), oklch(0.38 0 0));
  --rule-strong: light-dark(var(--color-text), oklch(0.56 0 0));
  --avg-line: light-dark(oklch(0.66 0 0), oklch(0.56 0 0));
  --scrollbar: light-dark(oklch(0.8 0 0), oklch(0.42 0 0));
  --selection: light-dark(oklch(0.9 0.06 190), oklch(0.42 0.06 190));
  --mk-ring: light-dark(transparent, oklch(0.40 0 0));
  --stat-hover-bg: light-dark(var(--color-surface), var(--color-surface-2));
  --stat-hover-edge: light-dark(var(--color-border), oklch(0.40 0 0));
  /* raised planes: tooltip and toast. Dark ink on light, a lighter plane with a hairline in dark */
  --float-bg: light-dark(var(--color-text), var(--color-surface-2));
  --float-fg: light-dark(var(--color-on-primary), var(--color-text));
  --float-muted: light-dark(oklch(0.88 0 0), var(--color-text-muted));
  --float-edge: light-dark(transparent, oklch(0.40 0 0));
  --float-control: light-dark(oklch(1 0 0 / 0.65), var(--control-border));
  /* shadow inks: none in dark, where depth comes from the lighter plane */
  --sh-1: light-dark(oklch(0.25 0.01 90 / 0.05), transparent);
  --sh-2: light-dark(oklch(0.25 0.01 90 / 0.20), transparent);
  --sh-3: light-dark(oklch(0.25 0.01 90 / 0.06), transparent);
  --sh-4: light-dark(oklch(0.25 0.01 90 / 0.28), transparent);
  --sh-thumb: light-dark(oklch(0.25 0.01 90 / 0.14), transparent);
  --sh-tip: light-dark(oklch(0.2 0 0 / 0.45), transparent);
  --sh-toast: light-dark(oklch(0.2 0 0 / 0.5), transparent);
  --lift: 0 1px 2px var(--sh-1), 0 12px 28px -16px var(--sh-2);
  --row: 3rem;
  --head: 2.75rem;
  --kcols: minmax(0, 1fr) 5.5rem 4.5rem;
  --pcols: minmax(0, 1fr) 5.5rem 5rem;
  --acols: 2.25rem minmax(0, 1fr) auto;
}
/* the only place the theme is chosen: forced dark, or system dark with no forced light */
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scrollbar-color: var(--scrollbar) transparent; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--color-text);
  font: 400 0.875rem/1.45 var(--font-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--selection); color: var(--color-text); }
h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
:where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--color-text-muted); }
@media (max-width: 1099.98px) { .d-only { display: none !important; } }

/* icons: one set, one stroke */
.i { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mk { width: 1.25rem; height: 1.25rem; flex: none; border-radius: 0.3125rem; color: var(--color-text); }
img.mk { box-shadow: 0 0 0 1px var(--mk-ring); }

/* money: symbol and cents smaller and lighter, tabular */
.m { white-space: nowrap; font-variant-numeric: tabular-nums; }
.m .cur { font-size: 0.78em; font-weight: 500; color: var(--color-text-muted); margin-inline-end: 0.16em; }
.m .dec { font-size: 0.86em; font-weight: 500; color: var(--color-text-muted); }
.m.err, .m.err .cur, .m.err .dec { color: var(--sev-error-fg); }
.m.warn, .m.warn .cur, .m.warn .dec { color: var(--sev-warning-fg); }
.m.xl .cur { font-size: 0.46em; }
.m.xl .dec { font-size: 0.58em; letter-spacing: 0; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 1.125rem; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: transform var(--dur-2) var(--ease);
}
.btn .i { width: 1.125rem; height: 1.125rem; }
.btn:hover { background: var(--neutral-3); border-color: var(--color-border); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary); border-color: var(--color-primary); }
.btn-icon { width: 2.75rem; padding: 0; }
.btn-sm { min-height: 2.75rem; padding: 0 0.875rem; font-size: 0.8125rem; }
.btn-sm.btn-icon { width: 2.75rem; }

/* chips */
.chip {
  display: inline-flex; align-items: center; gap: 0.375rem; height: 1.5rem; padding: 0 0.5rem;
  border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface);
  font-size: 0.75rem; font-weight: 500; line-height: 1; white-space: nowrap;
}
.chip i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; }
.chip-ok i { background: var(--accent); }
.chip-err { color: var(--sev-error-fg); background: var(--sev-error-bg); border-color: var(--sev-error-border); }
.chip-warn { color: var(--sev-warning-fg); background: var(--sev-warning-bg); border-color: var(--sev-warning-border); }
.chip-new { color: var(--sev-ok-fg); background: var(--sev-ok-bg); border-color: var(--sev-ok-border); }

/* shell, phone first */
.app { min-height: 100vh; }
.side { display: none; }
.main { min-width: 0; }
.top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 0.5rem;
  height: 3.5rem; padding: 0 1rem; background: var(--color-bg); border-bottom: 1px solid var(--color-border);
}
.brand-mk { width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; color: var(--color-text); flex: none; }
.crumbs { display: flex; align-items: center; gap: 0.625rem; min-width: 0; margin-inline-end: auto; }
.crumbs .root, .crumbs .sep { display: none; }
.crumbs h1 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.today { display: none; }

.page {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem;
  grid-template-areas: "alert" "stats" "products" "chart" "keys" "theme";
  padding: 0.75rem 1rem calc(6rem + env(safe-area-inset-bottom));
}
.alert { grid-area: alert; } .stats { grid-area: stats; } .products { grid-area: products; }
.keys { grid-area: keys; } .chart { grid-area: chart; }

.card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--lift); min-width: 0; padding-bottom: 0.375rem; overflow: hidden;
}
.card-h { display: flex; align-items: center; gap: 0.75rem; min-height: var(--head); padding: 0.25rem 1rem; }
.card-h h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.005em; }
.card-h .count { margin-inline-end: auto; color: var(--color-text-muted); font-size: 0.8125rem; }
.card-h .btn { margin-inline-start: auto; }
.card-h .count + .btn { margin-inline-start: 0; }

/* warning */
.alert {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem 0.625rem 1rem; min-height: 3.5rem;
  background: var(--sev-error-bg); border: 1px solid var(--sev-error-border); border-radius: var(--radius-lg);
  color: var(--sev-error-fg);
}
.alert .i { width: 1.375rem; height: 1.375rem; }
.alert-t { flex: 1; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.alert-t b { display: block; font-weight: 600; font-size: 0.9375rem; }
.alert-t span { display: block; font-size: 0.8125rem; }
.alert .btn { border-color: var(--sev-error-border); background: var(--color-surface); color: var(--sev-error-fg); }
.alert .btn:hover { background: var(--color-surface); border-color: var(--sev-error-solid); }
.alert .btn .t { display: none; }

/* stat strip */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.stat { padding: 0.625rem 0.875rem; display: grid; gap: 0.0625rem; align-content: start; }
.stat-label { font-size: 0.8125rem; color: var(--color-text-muted); }
.stat-num { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.stat-note { font-size: 0.75rem; color: var(--color-text-muted); }

/* ledger rows (div tables on one grid so every column lines up) */
.ledger { display: block; }
.row {
  display: grid; align-items: center; column-gap: 0.5rem; padding: 0.4375rem 1rem; min-height: var(--row);
  border-top: 1px solid var(--color-border);
}
.row.head { min-height: 2.25rem; padding-block: 0.4375rem; background: var(--color-surface-2); color: var(--color-text-muted); font-size: 0.75rem; font-weight: 500; }
.row.foot { border-top-color: var(--rule-strong); font-weight: 600; }
.row.foot .name { font-weight: 600; }
.row.foot .m .dec, .row.foot .m .cur { font-weight: 500; }
.row:not(.head):not(.foot):not(.entry):hover, .row.is-hover { background: var(--color-surface-2); }
.c { min-width: 0; }
.c.num { text-align: right; justify-self: end; }
.c.name-c { display: flex; align-items: center; gap: 0.625rem; }
.name { font-weight: 600; font-size: 0.9375rem; line-height: 1.25; display: block; overflow-wrap: anywhere; }
.sub { display: block; font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.3; }
.sub.err { color: var(--sev-error-fg); }
.sub.warn { color: var(--sev-warning-fg); }
.pname { display: inline-flex; align-items: center; gap: 0.5rem; }
.pname .mk { width: 1.125rem; height: 1.125rem; border-radius: 0.25rem; }
.row .name-c .mk { width: 1.5rem; height: 1.5rem; border-radius: 0.375rem; }

.products .row { grid-template-columns: var(--pcols); }
.keys .row { grid-template-columns: var(--kcols); }
.products .c-stage, .products .c-gates, .products .c-cust, .products .c-keys { display: none; }

.stage { display: inline-flex; align-items: center; gap: 0.625rem; }
.segs { display: inline-flex; gap: 3px; }
.segs i { width: 0.875rem; height: 0.25rem; border-radius: 2px; background: var(--seg-off); }
.segs i.on { background: var(--color-text); }

/* keys: bars, composer */
.bar { display: block; position: relative; height: 0.375rem; border-radius: var(--radius-full); background: var(--neutral-3); overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--data-2); transform-origin: left; animation: draw-x 0.7s var(--ease) 0.25s backwards; }
.bar.err i { background: var(--sev-error-solid); }
.bar.warn i { background: var(--sev-warning-solid); }
.c-spent .bar { margin-top: 0.3125rem; width: 100%; min-width: 3.5rem; }
.c-used { display: flex; align-items: center; justify-content: flex-end; gap: 0.625rem; }
.c-used .bar { flex: 1; max-width: 5.5rem; }
.c-used .pct { min-width: 2.5rem; text-align: right; color: var(--color-text-muted); font-size: 0.8125rem; }
.c-used .pct.err { color: var(--sev-error-fg); } .c-used .pct.warn { color: var(--sev-warning-fg); }
.c-state { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.c-state .when { font-size: 0.8125rem; color: var(--color-text-muted); }
.c-state .when.err { color: var(--sev-error-fg); }
.row.rest .name { font-weight: 500; color: var(--color-text-muted); }


/* activity */

/* provider */
.daily { display: flex; flex-direction: column; flex: 1; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.daily-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.8125rem; color: var(--color-text-muted); }
.daily-h b { font-size: 0.875rem; font-weight: 600; color: var(--color-text); }
.bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 0.25rem; align-items: end; flex: 1; min-height: 7rem; margin-top: 0.75rem; border-bottom: 1px solid var(--rule-strong); }
.bars i { display: block; height: var(--h); background: var(--data-2); border-radius: 0.1875rem 0.1875rem 0 0; transform-origin: bottom; animation: grow 0.7s var(--ease) backwards; animation-delay: calc(0.3s + var(--j) * 25ms); }
.axis { display: flex; justify-content: space-between; margin-top: 0.375rem; font-size: 0.75rem; color: var(--color-text-muted); }

/* tab bar, phone */
.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 10; display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 0.375rem 0.5rem calc(0.375rem + env(safe-area-inset-bottom));
  background: var(--color-bg); border-top: 1px solid var(--color-border);
}
.tab { display: grid; justify-items: center; align-content: center; gap: 0.125rem; min-height: 3.25rem; color: var(--color-text-muted); font-size: 0.75rem; font-weight: 500; }
.tab-i { display: grid; place-items: center; width: 3.5rem; height: 1.75rem; border-radius: var(--radius-full); }
.tab:hover .tab-i { background: var(--color-surface-2); }
.tab[aria-current] { color: var(--color-text); font-weight: 600; }
.tab[aria-current] .tab-i { background: var(--neutral-3); }

/* motion: one easing, start from visible, off when reduced */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes draw-x { from { transform: scaleX(0); } }
.rise { animation: rise 0.6s var(--ease) calc(var(--i, 0) * 60ms) backwards; }
@media (prefers-reduced-motion: reduce) {
  .rise, .bar i, .fuse i, .bars i { animation: none; }
  * { transition: none !important; }
}

/* compact rows hold the phone layout up to 1099 px; 720 px and up gets four stat tiles */
@media (min-width: 720px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
  .stat { padding: 0.875rem 1rem; }
  .stat-num { font-size: 1.875rem; }
  .page { padding-inline: 1.5rem; gap: 1rem; }
  .top { padding-inline: 1.5rem; }
  .alert .btn .t { display: inline; }
  .alert .btn { padding: 0 1rem; width: auto; }
}

/* full ledgers from 1100 px */
@media (min-width: 1100px) {
  :root {
    --row: clamp(2.75rem, 4vh, 4.25rem);
    --head: 3rem;
    --pcols: minmax(8.5rem, 1.4fr) minmax(10.5rem, 1.2fr) 5.5rem 5.75rem 6.5rem 6.5rem 3.75rem;
    --kcols: minmax(8.5rem, 1.6fr) 6rem 6.5rem 5.5rem minmax(7rem, 1fr) 5rem 10.5rem 4.75rem;
    --acols: 2.25rem 8rem minmax(0, 1fr) 7rem 6rem;
  }
  .p-only { display: none !important; }
  .products .c-stage, .products .c-gates, .products .c-cust, .products .c-keys { display: revert; }
  .row.head .c { white-space: nowrap; }
  .c-prod { display: flex; align-items: center; }
  .row.head .c-prod, .row.head .c-state { display: block; }
  .c-spent .bar { display: none; }
  .alert { padding-inline: 1.25rem 0.75rem; }
  .alert-t b, .alert-t span { display: inline; }
  .alert-t b { margin-inline-end: 0.5rem; }
  .c-state { padding-inline-start: 0.75rem; }
  .btn, .btn-sm { min-height: 2.25rem; }
  .btn-icon, .btn-sm.btn-icon { width: 2.25rem; }
}

/* sidebar from 1280 px */
@media (min-width: 1280px) {
  .app { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); }
  .tabbar, .search-btn, .top .brand-mk { display: none; }
  .side {
    display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 0; height: 100vh; padding: 0.875rem 0.75rem;
    background: var(--color-bg); border-right: 1px solid var(--color-border); overflow: hidden;
  }
  .side-brand { display: flex; align-items: center; gap: 0.625rem; padding: 0.25rem 0.5rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
  .side-brand .brand-mk { display: block; }
  .nav { display: grid; gap: 0.125rem; }
  .nav a { display: flex; align-items: center; gap: 0.625rem; min-height: 2.25rem; padding: 0 0.625rem; border-radius: var(--radius-md); color: var(--color-text-muted); font-weight: 500; }
  .nav a:hover { background: var(--color-surface-2); color: var(--color-text); }
  .nav a[aria-current] { background: var(--neutral-3); color: var(--color-text); font-weight: 600; }
  .nav a .n { margin-inline-start: auto; font-size: 0.8125rem; color: var(--color-text-muted); font-weight: 500; }
  .nav .sub-nav { display: grid; gap: 0.125rem; margin: 0.125rem 0 0.375rem 1.0625rem; padding-left: 0.5rem; border-left: 1px solid var(--color-border); }
  .nav .sub-nav a { min-height: 2.125rem; font-weight: 500; }
  .nav .sub-nav .st { margin-inline-start: auto; font-size: 0.75rem; color: var(--color-text-muted); font-weight: 500; }
  .side-foot { margin-top: auto; display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.5rem 0; border-top: 1px solid var(--color-border); font-size: 0.8125rem; }

  .top { gap: 1rem; padding-inline: 1.75rem; }
  .crumbs .root, .crumbs .sep { display: inline; color: var(--color-text-muted); font-weight: 500; font-size: 0.9375rem; }
  .crumbs h1 { font-size: 0.9375rem; }
  .today { display: block; font-size: 0.8125rem; color: var(--color-text-muted); }
  .page {
    padding: 1.25rem 1.75rem 2rem; gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "alert alert" "stats stats" "products products" "keys keys" "activity provider";
  }
  .stat-num { font-size: 2.25rem; }
  .stat { padding: 1rem 1.25rem; gap: 0.25rem; }
  .stat-label { font-size: 0.875rem; }
  .stat-note { font-size: 0.8125rem; }
}

/* wide desktops: a rail beside the ledgers, and the page scales up */
@media (min-width: 1900px) {
  html { font-size: 17px; }
  .page {
    grid-template-columns: minmax(0, 1fr) 30rem;
    grid-template-areas: "alert alert" "stats stats" "products activity" "keys provider";
    padding: 1.5rem 2.5rem 2.5rem; gap: 1.25rem;
  }
  .top { padding-inline: 2.5rem; }
  .stat-num { font-size: 2.5rem; }
  /* the rail is narrow: activity keeps the stacked row, time and product move to its sub line */
  :root { --acols: 2.25rem minmax(0, 1fr) auto; }
}
@media (min-width: 2400px) {
  html { font-size: 19px; }
}
@media (min-width: 3400px) {
  html { font-size: 28px; }
  .page { grid-template-columns: minmax(0, 1fr) 34rem; }
}

/* round 3: more detail, one easing, only transform and opacity animate */
:root {
  --dur-card: 0.46s; --dur-draw: 0.32s; --dur-1: 0.16s; --dur-2: 0.2s; --dur-tip: 0.22s;
  --lift2: 0 2px 4px var(--sh-3), 0 18px 34px -14px var(--sh-4);
  --pcols: minmax(0, 1fr) 5.75rem 5rem;
  --kcols: minmax(0, 1fr) 5.5rem 5rem;
}
[hidden] { display: none !important; }
html.boot *, html.boot *::before, html.boot *::after { transition: none !important; }
@keyframes fade { from { opacity: 0; } }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.rise { animation: rise var(--dur-card) var(--ease) calc(var(--i, 0) * 50ms) backwards; }
.bar i { animation: draw-x var(--dur-draw) var(--ease) calc(0.2s + var(--k, 0) * 45ms) backwards; }

/* no colour or shadow transitions: only transform and opacity move */
.field, .search, .nav a, .tab-i { transition: none; }
.btn { position: relative; transition: transform var(--dur-1) var(--ease); }
.btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease); }
.btn:hover { background: var(--color-surface); border-color: var(--color-border); }
.btn:hover::after { opacity: 0.07; }
.btn-primary:hover { background: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover::after { opacity: 0.18; }
.alert .btn:hover { border-color: var(--sev-error-border); }
.btn:active { transform: scale(0.98); }
.btn[data-state="creating"] { pointer-events: none; opacity: 0.72; }
.m.xl .cur { font-size: max(0.46em, 0.75rem); }

/* row hover: a tonal step that fades in */
.row, .ai { position: relative; }
.row::before, .ai::before { content: ""; position: absolute; inset: 0; background: var(--color-surface-2); opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease); }
.row > *, .ai > * { position: relative; }
.row:not(.head):not(.foot):not(.entry), .row:not(.head):not(.foot):not(.entry):hover, .row.is-hover, .row.just:hover { background: transparent; transition: none; }
.row:not(.head):not(.foot):hover::before, .row.is-hover::before, .ai:hover::before { opacity: 1; }

/* stat tiles */
.stats { gap: 0.5rem; }
.stat { position: relative; overflow: visible; padding: 0.75rem 0.875rem; gap: 0.125rem; transition: transform var(--dur-2) var(--ease); }
.stat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--lift2); opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease); }
.stat:hover { transform: translateY(-2px); background: var(--stat-hover-bg); border-color: var(--stat-hover-edge); }
.stat:hover::after { opacity: 1; }
.stat-delta { font-size: 0.8125rem; line-height: 1.3; color: var(--color-text-muted); }
.stat-delta b { font-weight: 600; }
.up { color: var(--sev-ok-fg); } .hot { color: var(--sev-warning-fg); } .bad { color: var(--sev-error-fg); }
.stat-note { margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.3; }
.stat .bar { margin-top: 0.5rem; }
.stat .spark { margin-top: 0.5rem; }
.wk { display: grid; gap: 0.1875rem; margin-top: 0.5rem; }
.wk.x { margin-top: 0.625rem; padding-top: 0.5rem; border-top: 1px solid var(--color-border); }
.wk-s { margin: 0; font-size: 0.8125rem; line-height: 1.3; color: var(--color-text-muted); }
.wk-r { display: flex; justify-content: space-between; align-items: baseline; gap: 0.25rem; font-size: 0.8125rem; color: var(--color-text-muted); white-space: nowrap; }
.wk-r b { font-weight: 600; color: var(--color-text); }
.bar.split i { display: flex; background: none; }
.bar.split u { display: block; height: 100%; text-decoration: none; }
.bar.split u:first-child { background: var(--series-f); }
/* a 2px gap in the surface colour: an inset edge, so the segment widths keep their figures */
.bar.split u:last-child { background: var(--series-a); box-shadow: inset 2px 0 0 var(--color-surface); }

/* sparklines draw left to right */
.spark { display: block; width: 100%; height: 2rem; overflow: visible; stroke-dashoffset: 0; animation: draw var(--dur-draw) var(--ease) calc(0.16s + var(--k, 0) * 45ms) backwards; }
.spark.sm { height: 1.5rem; }
.spark .ln { fill: none; stroke: var(--data-2); stroke-width: 1.5; stroke-linejoin: round; stroke-dasharray: 1; }
.spark .ar { fill: var(--data-area); stroke: none; }

/* products */
.exp { display: flex; align-items: center; gap: 0.625rem; width: 100%; min-height: 2.75rem; padding: 0; border: 0; background: none; text-align: left; border-radius: var(--radius-md); }
button.exp { cursor: pointer; transition: transform var(--dur-1) var(--ease); }
button.exp:active { transform: scale(0.99); }
.exp .mk { width: 1.5rem; height: 1.5rem; border-radius: 0.375rem; }
.exp .nm { min-width: 0; }
.exp .chev { margin-inline-start: auto; display: grid; color: var(--color-text-muted); }
.exp .chev .i { transition: transform var(--dur-2) var(--ease); }
.exp[aria-expanded="true"] .chev .i { transform: rotate(90deg); }
.row.foot .exp { min-height: 0; }
.ledger { position: relative; }
/* the one element that animates layout: grid rows 1fr to 0fr, so the card edge and the rows below move together */
.detail { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-2) var(--ease); }
.detail[data-open="false"] { grid-template-rows: 0fr; }
.detail-clip { min-height: 0; overflow: hidden; }
.detail-in { display: grid; gap: 1rem; padding: 0.875rem 1rem 1rem; background: var(--color-surface-2); border-top: 1px solid var(--color-border); transition: opacity var(--dur-1) var(--ease); }
.detail[data-open="false"] .detail-in { opacity: 0; }
.gd-t { font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); }
.gd-t span { margin-inline-start: 0.5rem; color: var(--color-text); font-weight: 600; }
.gd-t2 { margin-top: 0.875rem; }
.stages { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.25rem; margin: 0.5rem 0 0; padding: 0; }
.stages li { display: grid; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); }
.stages li i { height: 0.25rem; border-radius: 2px; background: var(--seg-off); }
.stages li[aria-current] { color: var(--color-text); font-weight: 600; }
.stages li[aria-current] i { background: var(--color-text); }
.gcells { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px; margin-top: 0.5rem; transform-origin: bottom; animation: grow var(--dur-draw) var(--ease) 0.22s backwards; }
.gcells i { height: 0.5rem; border-radius: 2px; background: var(--seg-off); }
.gcells i.on { background: var(--data-2); }
.gd-done { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.375rem; font-size: 0.875rem; font-weight: 500; line-height: 1.35; }
.gd-done .i { width: 1.25rem; height: 1.25rem; color: var(--sev-ok-fg); }
.gd-next { list-style: none; margin: 0.375rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.gd-next li { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); gap: 0.5rem; font-size: 0.875rem; line-height: 1.35; }
.gd-next .n { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); }
.c-sales, .c-ai, .c-net, .c-req, .c-share, .c-wk1, .c-wk2, .c-new, .c-gates, .c-cust, .c-keys { font-variant-numeric: tabular-nums; }
.c-spark { padding-inline: 0.25rem; }
@media (max-width: 1365.98px) { .products .l-only { display: none !important; } }

/* keys */
.ref { display: none; }
.c-meta { grid-column: 1 / -1; display: grid; gap: 0.0625rem; padding-inline-start: 0.125rem; font-size: 0.8125rem; line-height: 1.3; color: var(--color-text-muted); }
.prow .c-meta { padding-inline-start: 2.125rem; }
.c-meta .err { color: var(--sev-error-fg); } .c-meta .warn { color: var(--sev-warning-fg); }
.row:has(.c-meta) { row-gap: 0.125rem; }
.c-created, .c-last { font-size: 0.8125rem; color: var(--color-text-muted); white-space: nowrap; }
.stage { white-space: nowrap; }
.c-prod { justify-content: flex-start; }
.c-state { padding-inline-start: 0; }
.kbar { display: grid; gap: 0.75rem; padding: 0.75rem 1rem; border-top: 1px solid var(--color-border); }
.seg { --n: 4; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; padding: 3px; border-radius: var(--radius-full); background: var(--neutral-3); isolation: isolate; }
.seg.sm { --n: 2; display: inline-grid; width: auto; }
.seg .thumb { position: absolute; inset: 3px auto 3px 3px; width: calc((100% - 6px) / var(--n)); z-index: -1; border-radius: inherit; background: var(--thumb); box-shadow: 0 1px 2px var(--sh-thumb), 0 0 0 1px var(--color-border); transform: translateX(calc(var(--si, 0) * 100%)); transition: transform var(--dur-2) var(--ease); }
.seg button { min-height: 2.75rem; padding: 0 0.375rem; border: 0; border-radius: inherit; background: none; font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); white-space: nowrap; cursor: pointer; }
.seg button b { margin-inline-start: 0.25rem; font-weight: 600; }
.seg button[aria-checked="true"] { color: var(--color-text); }
.seg.sm button { padding: 0 0.75rem; }
.kstrip { display: grid; gap: 0.5rem; min-width: 0; }
.cells { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; height: 1.5rem; align-items: end; transform-origin: bottom; animation: grow var(--dur-draw) var(--ease) 0.2s backwards; }
.cells i { display: block; height: var(--hh); border-radius: 2px; }
.s4 { --hh: 100%; background: var(--sev-error-solid); }
.s3 { --hh: 88%; background: var(--sev-warning-solid); }
.s2 { --hh: 68%; background: var(--data-2); }
.s1 { --hh: 44%; background: var(--cell-quiet); }
.legend { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.8125rem; color: var(--color-text-muted); }
.legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.legend i { display: block; width: 0.625rem; height: 0.625rem; border-radius: 2px; }
.legend b { font-weight: 600; color: var(--color-text); }

/* activity */

/* provider */
.daily-h { align-items: center; }
.plot { position: relative; flex: 1; min-height: 10rem; margin-top: 0.75rem; touch-action: pan-y; }
.plot::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 1px; background: var(--rule-strong); }
.m .cur { font-size: max(0.78em, 0.6875rem); }
.days { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 0.25rem; }
.day { position: relative; height: 100%; transform-origin: bottom; animation: grow var(--dur-draw) var(--ease) calc(0.22s + var(--j, 0) * 14ms) backwards; transition: opacity var(--dur-1) var(--ease); }
/* Each day owns its stagger so both chart views grow together. */
.day:nth-child(2) { --j: 1; } .day:nth-child(3) { --j: 2; } .day:nth-child(4) { --j: 3; }
.day:nth-child(5) { --j: 4; } .day:nth-child(6) { --j: 5; } .day:nth-child(7) { --j: 6; }
.day:nth-child(8) { --j: 7; } .day:nth-child(9) { --j: 8; } .day:nth-child(10) { --j: 9; }
.day:nth-child(11) { --j: 10; } .day:nth-child(12) { --j: 11; } .day:nth-child(13) { --j: 12; }
.day:nth-child(14) { --j: 13; }
.plot.hov .day { opacity: 0.4; }
.plot.hov .day.on { opacity: 1; }
.stk, .tot { position: absolute; inset: auto 0 0 0; height: var(--h); border-radius: 3px 3px 0 0; overflow: hidden; transition: opacity var(--dur-2) var(--ease); }
.stk { display: flex; flex-direction: column; }
.stk u { display: block; min-height: 0; text-decoration: none; }
.tot { background: var(--series-a); opacity: 0; }
.plot[data-view="total"] .stk { opacity: 0; }
.plot[data-view="total"] .tot { opacity: 1; }
.g-a { background: var(--series-a); } .g-f { background: var(--series-f); } .g-p { background: var(--series-p); }
.avg { position: absolute; left: 0; right: 0; bottom: var(--b); border-top: 1px dashed var(--avg-line); pointer-events: none; z-index: 1; animation: fade var(--dur-draw) var(--ease) 0.48s backwards; }
/* The average is named in the legend: a label on the line covered the tops of the tallest bars. */
.legend i.k-avg { width: 0.875rem; height: 0; border-radius: 0; border-top: 1px dashed var(--avg-line); }
.tip { position: absolute; left: 0; top: 0; z-index: 3; width: max-content; pointer-events: none; transform: translate(var(--tx, 0px), var(--ty, 0px)); transition: transform var(--dur-2) var(--ease); }
.tip-in { min-width: 9.5rem; padding: 0.5rem 0.625rem; border-radius: var(--radius-md); background: var(--float-bg); color: var(--float-fg); font-size: 0.8125rem; line-height: 1.4; box-shadow: 0 0 0 1px var(--float-edge), 0 8px 24px -8px var(--sh-tip); opacity: 0; transform: translateY(8px); transition: opacity var(--dur-tip) var(--ease), transform var(--dur-tip) var(--ease); }
.tip.on .tip-in { opacity: 1; transform: none; }
.tip-in b { font-weight: 600; }
.tip-in .tt { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.25rem; }
.tip-in .tr { display: flex; align-items: center; gap: 0.375rem; color: var(--float-muted); }
.tip-in .tr i { width: 0.5rem; height: 0.5rem; border-radius: 2px; }
.tip-in .tr .g-a { background: var(--tip-a); } .tip-in .tr .g-f { background: var(--tip-f); } .tip-in .tr .g-p { background: var(--tip-p); }
.tip-in .tr span { margin-inline-start: auto; padding-inline-start: 1rem; color: var(--float-fg); }
.lg-chart { margin-top: 0.625rem; }

/* sliding markers */
.nav { position: relative; }
.nav .mark { display: none; }
.tabbar .tab-mark { position: absolute; top: 0; left: 0; width: 3.5rem; height: 1.75rem; border-radius: var(--radius-full); background: var(--neutral-3); transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform var(--dur-2) var(--ease); }
.tab { position: relative; }
.tab-i { position: relative; }
.tab[aria-current] .tab-i { background: none; }

/* toast */

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

@media (min-width: 720px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
  .stat-num { font-size: 1.75rem; }
  .kbar { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); align-items: center; gap: 1.5rem; }
}

@media (min-width: 1100px) {
  :root {
    --pcols: minmax(8.5rem, 1.7fr) minmax(8.5rem, 1.2fr) minmax(4.25rem, 0.6fr) minmax(5.25rem, 0.9fr) minmax(4.25rem, 0.8fr) minmax(5rem, 1fr) minmax(4.25rem, 0.8fr) minmax(5.25rem, 0.9fr) minmax(3.75rem, 0.6fr) minmax(2.75rem, 0.5fr);
    --kcols: minmax(7rem, 1.6fr) 3.25rem 6rem 6.5rem 4.5rem 5rem minmax(5.5rem, 1.2fr) 4.75rem 9rem 2.5rem;
  }
  /* four columns, two rows: Sales spans both rows, AI spend spans two columns, so no tile is squeezed */
  .stats { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
  .stat { padding: 0.875rem 1rem; align-content: space-between; }
  .stat-num { font-size: 1.75rem; }
  .stat .spark { height: 2.5rem; }
  .ref { display: inline; font-size: 0.75rem; line-height: 1.2; color: var(--sev-error-fg); }
  .row .c { white-space: nowrap; }
  .c-prod { justify-content: flex-start; }
  .row.head .c-prod { display: block; }
  .kbar { padding-block: 0.625rem; }
  .seg { width: auto; display: inline-grid; }
  .seg button { min-height: 2rem; padding: 0 0.625rem; }
  .detail-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 2rem; padding: 0.875rem 1rem 1rem 3.5rem; }
}
@media (min-width: 1366px) {
  :root {
    --pcols: minmax(8.5rem, 1.7fr) minmax(8.5rem, 1.2fr) minmax(4.25rem, 0.6fr) minmax(4.25rem, 0.7fr) minmax(5.25rem, 0.9fr) minmax(4.25rem, 0.8fr) minmax(5rem, 1fr) minmax(4.25rem, 0.8fr) minmax(5.25rem, 0.9fr) minmax(3.75rem, 0.6fr) minmax(2.75rem, 0.5fr);
  }
}
@media (min-width: 1280px) {
  .nav a { position: relative; z-index: 1; }
  .nav a[aria-current] { background: none; }
  .nav .mark { display: block; position: absolute; left: 0; top: 0; width: 100%; height: var(--mh, 2.25rem); border-radius: var(--radius-md); background: var(--neutral-3); transform: translateY(var(--my, 0px)); transition: transform var(--dur-2) var(--ease); z-index: 0; }
}
@media (min-width: 1900px) {
  .page { grid-template-columns: minmax(0, 1fr) 28rem; }
  .stat-num { font-size: 2.125rem; }
}
@media (min-width: 2400px) {
  :root {
    --pcols: minmax(8.5rem, 1.6fr) minmax(8.5rem, 1.2fr) minmax(4.25rem, 0.6fr) minmax(4.25rem, 0.7fr) minmax(5.25rem, 0.9fr) minmax(4.25rem, 0.8fr) minmax(5rem, 1fr) minmax(4.25rem, 0.8fr) minmax(5.25rem, 0.9fr) minmax(3.75rem, 0.6fr) minmax(2.75rem, 0.5fr) minmax(5.25rem, 0.9fr) minmax(5.25rem, 0.9fr) minmax(3.75rem, 0.6fr);
  }
}

/* Accessibility refinements retain the existing palette and layout. */
.skip { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 50; padding: 0.75rem 1rem; background: var(--color-surface); border: 1px solid var(--control-border); border-radius: var(--radius-md); transform: translateY(-200%); }
.skip:focus { transform: none; }
.btn:not(.btn-primary), .btn:not(.btn-primary):hover, .alert .btn, .alert .btn:hover,
/* The field wrapper paints the single visible focus ring. */
.m .cur, .m .dec { font-size: 0.75rem; }
.m.xl .cur, .m.xl .dec { font-size: 1.125rem; }
.wk .legend { margin-top: 0.125rem; font-size: 0.75rem; gap: 0.75rem; }
@media (max-width: 1099.98px) {
}
@media (min-width: 1100px) {
  .keys .c-key .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
}

/* theme switch: System, Light, Dark. One radio group per layout: the sidebar footer from 1280 px, a row at the end of the page below it */
.seg.theme-seg { --n: 3; }
.themebar { grid-area: theme; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.25rem; font-size: 0.8125rem; color: var(--color-text-muted); }
.themebar .seg button { min-height: 2.75rem; padding: 0 0.875rem; }
.side-foot { flex-wrap: wrap; }
.side-foot .theme-seg { display: grid; flex: 1 0 100%; width: 100%; margin-bottom: 0.25rem; }
.side-foot .theme-seg button { padding: 0 0.25rem; }
@media (min-width: 1280px) { .themebar { display: none; } }

/* ---- the service page: what the database can fill, and nothing else ---- */
.sprite { position: absolute; }
[id] { scroll-margin-top: 4.5rem; }
.tabbar { grid-template-columns: repeat(3, 1fr); }
.nav .sub-nav .mk { width: 1.125rem; height: 1.125rem; border-radius: 0.25rem; }

/* one monogram tile for every product: the first letter of its name */
.mk.mono { display: grid; place-items: center; background: var(--color-text); color: var(--color-surface); font-size: 0.75rem; font-weight: 600; line-height: 1; text-transform: uppercase; }
.mk.mono.none { background: var(--neutral-3); color: var(--color-text-muted); }

/* tiles: two, side by side on a phone */
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-num { font-size: 1.5rem; }
.stat .spark { height: 2rem; }
.stat-delta .flat { color: var(--color-text-muted); }

/* products: Product, Stage, Gates, Keys, AI spend, 14 days, Requests */
:root { --pcols: minmax(0, 1fr) 6rem; --kcols: minmax(0, 1fr) 5.5rem 5rem; }
.products .row.head .c-stage { display: none; }
.stage-none { color: var(--color-text-muted); }
.sub .gap { color: var(--color-text-muted); }
.gcells { grid-template-columns: repeat(var(--n, 13), minmax(0, 1fr)); }
.gd-bar { margin-top: 0.5rem; }
.gd-none { margin: 0.375rem 0 0; font-size: 0.875rem; color: var(--color-text-muted); }
.gd-more { margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.gd-done { margin-top: 0.375rem; }
.gd-done + .gd-done { margin-top: 0.5rem; }
.snap { margin: 0; padding: 0 1rem 0.625rem; color: var(--color-text-muted); font-size: 0.8125rem; }
.card-h .count { margin-inline-end: auto; }

/* keys: the ledger is read-only, so no action column */
.keys .c-product { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.keys .c-product .nm { overflow: hidden; text-overflow: ellipsis; }
/* long names: wrap on a phone, one line with an ellipsis (and a title) in a table, never into the next column */
.exp .nm, .nav .sub-nav a, .nav .sub-nav .nm-t { min-width: 0; }
.nav .sub-nav .nm-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav { min-height: 0; overflow-y: auto; }
@media (min-width: 1100px) {
  .products .c-name .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
}
.keys .c-state { padding-inline-start: 0.75rem; }
.products .c-spark { padding-inline-start: 0.875rem; }
.chip-ok { color: var(--color-text-muted); }
.chip-ok i { background: var(--data-3); }
.c-meta .new { color: var(--sev-ok-fg); }
.row.rest .name, .row.rest .c-product { color: var(--color-text-muted); }
.kbar .seg { --n: 4; }
.krow .c-last .muted, .krow .c-last { white-space: nowrap; }
/* only the first rows animate, so the entrance stays short */
.krow:nth-child(n+7) .bar i { animation: none; }

/* the keys past the first ten: one native disclosure, its summary a ledger row with the summed figures */
.kmore > summary { list-style: none; cursor: pointer; }
.kmore > summary::-webkit-details-marker { display: none; }
.kmore > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kmore > summary .c-key { display: flex; align-items: center; gap: 0.5rem; }
.kmore > summary .chev { width: 1rem; height: 1rem; color: var(--color-text-muted); transition: transform var(--dur-2) var(--ease); }
.kmore[open] > summary .chev { transform: rotate(90deg); }
/* a filter shows its matches in one list: the summary steps aside while it is on */
.kmore.filtering > summary { display: none; }

/* empty states, in the ledger's own language */
.empty { display: grid; gap: 0.25rem; padding: 1.25rem 1rem 1.5rem; border-top: 1px solid var(--color-border); }
.empty b { font-size: 0.9375rem; font-weight: 600; }
.empty span { font-size: 0.8125rem; color: var(--color-text-muted); }
.empty code { font: inherit; font-weight: 500; color: var(--color-text); padding: 0.0625rem 0.375rem; border: 1px solid var(--color-border); border-radius: 0.375rem; background: var(--color-surface-2); }
.plot.flat { flex: 0 0 auto; min-height: 5rem; }
.flat-note { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--color-text-muted); }

/* the chart card: the daily AI spend, alone */
.chart { display: flex; flex-direction: column; }
.chart-body { display: flex; flex-direction: column; flex: 1; padding: 0 1rem 1rem; }
.chart .daily { margin-top: 0; padding-top: 0; border-top: 0; }
.g-o { background: var(--cell-quiet); }
.tip-in .tr .g-o { background: var(--cell-quiet); }

@media (min-width: 720px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-num { font-size: 1.75rem; }
}
@media (min-width: 1100px) {
  :root {
    --pcols: minmax(9rem, 1.7fr) minmax(9.5rem, 1.2fr) minmax(4.5rem, 0.6fr) minmax(3.5rem, 0.5fr) minmax(5.5rem, 0.9fr) minmax(5rem, 1fr) minmax(4.5rem, 0.8fr);
    --kcols: minmax(8rem, 1.6fr) minmax(6.5rem, 1fr) 5.75rem 8.75rem 5rem 5.5rem minmax(7rem, 1.2fr) 5rem 6.5rem;
  }
  .page { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-areas: "alert alert" "stats chart" "products products" "keys keys" "theme theme"; }
  .stats { grid-template-columns: minmax(0, 1fr); align-content: stretch; grid-auto-rows: 1fr; }
  .stat { align-content: start; }
  .products .row.head .c-stage { display: block; }
  .c-meta { display: none; }
}
@media (min-width: 1280px) {
  .page { grid-template-areas: "alert alert" "stats chart" "products products" "keys keys"; }
}
@media (min-width: 1900px) {
  .page { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
@media (min-width: 3400px) {
  .page { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

/* ---- sign-in and the no-password page: one calm card, the Overview's tokens ---- */
.gate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1rem; }
.gate-card { width: 100%; max-width: 24rem; display: grid; gap: 1rem; padding: 1.5rem 1.25rem; }
.gate-brand { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.gate-card h1 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.gate-note { color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.5; }
.gate-cmd code { display: block; padding: 0.75rem 0.875rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); font: 500 0.9375rem/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.gate-form { display: grid; gap: 0.5rem; }
.gate-form label { font-size: 0.8125rem; font-weight: 500; }
.gate-form input { width: 100%; min-height: 2.75rem; padding: 0 0.875rem; border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: 1rem; }
.gate-form input[aria-invalid="true"] { border-color: var(--sev-error-solid); }
.gate-error { padding: 0.5rem 0.75rem; border: 1px solid var(--sev-error-border); border-radius: var(--radius-md); background: var(--sev-error-bg); color: var(--sev-error-fg); font-size: 0.8125rem; font-weight: 500; line-height: 1.35; }
.gate-btn { width: 100%; min-height: 2.75rem; margin-top: 0.5rem; padding: 0 1.125rem; border: 1px solid var(--color-primary); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-primary); font-weight: 500; cursor: pointer; transition: transform var(--dur-1) var(--ease); }
.gate-btn:active { transform: scale(0.98); }
@media (min-width: 1900px) { .gate-card { max-width: 26rem; } }

/* sign out: a quiet text control, 44 px tall on the phone */
.signout { margin: 0; }
.signout button { display: flex; align-items: center; width: 100%; min-height: 2.75rem; padding: 0 0.625rem; border: 0; border-radius: var(--radius-md); background: none; color: var(--color-text-muted); font-size: 0.8125rem; font-weight: 500; cursor: pointer; }
.signout button:hover { background: var(--color-surface-2); color: var(--color-text); }
/* on the phone Sign out sits in the theme row, 44 px tall; the row holds down to 320 px, so below 390 px the "Theme" word steps aside */
.themebar { gap: 0.5rem; }
.themebar .seg button { padding: 0 0.5rem; }
.themebar .signout { flex: none; }
.themebar .signout button { width: auto; justify-content: center; padding: 0 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); }
@media (max-width: 389.98px) { .themebar > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.side-foot .signout { flex: 1 0 100%; }
@media (min-width: 1100px) { .signout button { min-height: 2.25rem; } }

/* long text in a key's or product's meta line wraps inside its row, as the names above it do */
.c-meta, .c-meta span { overflow-wrap: anywhere; }

/* the at-cap alert, several keys: each label is cut at about 24 characters, its full text in its title, and the
   sub line stays one line, so the banner is two lines tall at any phone width. A label takes at most 46% of the line. */
.alert-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert-t .lbl { display: inline-block; max-width: min(24ch, 46%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* phone, found in the screenshots: with many keys the cap strip has no room for its 2 px gaps and draws empty, so past 60
   cells the gaps go; and at 360 px or less the value columns give the names room, so "35 more keys" and "Product number 4" hold one line */
@media (max-width: 1099.98px) { .cells:has(> i:nth-child(60)) { gap: 0; } }
@media (max-width: 389.98px) { :root { --kcols: minmax(0, 1fr) 5rem 4.5rem; --pcols: minmax(0, 1fr) 5.25rem; } }
.kmore > summary .name { white-space: nowrap; }