/* Token Larper: one theme, defined by tokens. Light is the default; dark swaps the
   tokens on html[data-theme="dark"] (set before first paint by index.html). */

:root, [data-style="grove"] {
  color-scheme: light;
  --bg: #f7f8f6;
  --surface: #ffffff;
  --surface-2: #f2f5f1;
  --surface-3: #e8eee7;
  --border: #e1e6de;
  --border-strong: #c7d1c5;
  --text: #1f2a23;
  --text-2: #4b5950;
  --text-3: #5f6d64;
  --accent: #2f5a43;
  --accent-ink: #ffffff;
  --accent-soft: #e5eee6;
  --gold: #a5761c;
  --focus: #2f5a43;
  --shadow-pop: 0 12px 36px rgb(20 34 26 / 16%);
  --warning-bg: #fff5e2;
  --warning-border: #ebc47a;
  --warning-text: #6f4600;
  --error-bg: #fff1ef;
  --error-border: #e6b8ae;
  --error-text: #8d3227;

  /* Validated categorical slots (color-blind separation checked in this order). */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-other: #a3a29a;
  --flame: #e8590c;
  --freeze: #1c7ed6;
  --live: #e03131;
  /* One-hue ramp for the activity calendar. */
  --heat-0: #edf1eb;
  --heat-1: #c6dcc9;
  --heat-2: #8dbb97;
  --heat-3: #4d8a5e;
  --heat-4: #24563a;

  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Code", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --radius: 10px;
  --radius-sm: 6px;
}

html[data-theme="dark"], [data-theme="dark"] [data-style="grove"] {
  color-scheme: dark;
  --bg: #141916;
  --surface: #1b221e;
  --surface-2: #222b25;
  --surface-3: #2b362f;
  --border: #2e3932;
  --border-strong: #45524a;
  --text: #e8eee7;
  --text-2: #b5c1b7;
  --text-3: #98a59b;
  --accent: #9fcaa8;
  --accent-ink: #11261a;
  --accent-soft: #24392b;
  --gold: #e1b75c;
  --focus: #b5dcbd;
  --shadow-pop: 0 14px 40px rgb(0 0 0 / 45%);
  --warning-bg: #3a2f1b;
  --warning-border: #7a5d25;
  --warning-text: #f4d08e;
  --error-bg: #3c2926;
  --error-border: #915c53;
  --error-text: #ffc4b8;

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-other: #72716b;
  --flame: #ff922b;
  --freeze: #74c0fc;
  --live: #ff8787;
  --heat-0: #252e28;
  --heat-1: #2d4a35;
  --heat-2: #3f714d;
  --heat-3: #62a172;
  --heat-4: #a6d8b0;
}

/* ---------- Styles ----------
   A style is the whole look: fonts, radius, spacing, borders, shadows and label casing,
   plus its own light and dark colors. These blocks also match the preview tiles in
   Settings (an element with data-style), which is how each tile renders in its own style.
   Grove's structure tokens are the defaults for every style (and tile); the style layer
   further down applies them. */

:root, [data-style] {
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-heading: var(--font);
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --heading-weight: 700;
  --heading-tracking: -0.01em;
  --label-transform: none;
  --label-tracking: 0;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-control: 6px;
  --radius-pill: 999px;
  --bar-radius: 4px 4px 0 0;
  --border-w: 1px;
  --panel-border: var(--border);
  --shadow-card: none;
  --shadow-control: none;
  --pad: 20px 22px;
  --kpi-pad: 18px 20px 16px;
  --gap: 20px;
  --control-h: 34px;
  --cell-y: 10px;
}

/* Terminal: monospace everywhere, square corners, dense rows, uppercase labels. */
[data-style="terminal"] {
  --font: "Cascadia Code", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --font-heading: var(--font);
  --font-display: var(--font);
  --heading-weight: 700;
  --heading-tracking: 0;
  --label-transform: uppercase;
  --label-tracking: 0.06em;
  --radius: 2px;
  --radius-sm: 2px;
  --radius-control: 2px;
  --radius-pill: 2px;
  --bar-radius: 0;
  --pad: 16px 18px;
  --kpi-pad: 14px 16px 12px;
  --gap: 14px;
  --control-h: 30px;
  --cell-y: 7px;
  --bg: #f4f6f1; --surface: #fbfcf8; --surface-2: #eef2ea; --surface-3: #e3e9dd;
  --border: #d3dccd; --border-strong: #aab8a3; --panel-border: var(--border);
  --text: #121a13; --text-2: #34473a; --text-3: #4b5f50;
  --accent: #146c36; --accent-ink: #ffffff; --accent-soft: #dcecdf; --focus: #146c36; --gold: #8a6412;
}
[data-theme="dark"][data-style="terminal"], [data-theme="dark"] [data-style="terminal"] {
  --bg: #0b0f0c; --surface: #0f1511; --surface-2: #141c16; --surface-3: #1b261e;
  --border: #1f3024; --border-strong: #2f4a36; --panel-border: var(--border);
  --text: #c8f7d0; --text-2: #8fd19a; --text-3: #74b481;
  --accent: #5cf08a; --accent-ink: #06140a; --accent-soft: #123020; --focus: #5cf08a; --gold: #e8c35a;
}

/* Paper: serif headings on warm paper, hairlines, and generous spacing. */
[data-style="paper"] {
  --font-heading: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --font-display: var(--font-heading);
  --heading-weight: 600;
  --heading-tracking: 0;
  --radius: 4px;
  --radius-sm: 3px;
  --radius-control: 3px;
  --bar-radius: 1px 1px 0 0;
  --pad: 26px 28px;
  --kpi-pad: 22px 24px 20px;
  --gap: 28px;
  --control-h: 36px;
  --cell-y: 12px;
  --bg: #f5efe3; --surface: #fbf7ee; --surface-2: #f1e9d9; --surface-3: #e7dcc6;
  --border: #e2d6bf; --border-strong: #cbb994; --panel-border: var(--border);
  --text: #2a2118; --text-2: #5b4c3a; --text-3: #6b5a46;
  --accent: #8c2f2b; --accent-ink: #ffffff; --accent-soft: #f1dfd6; --focus: #8c2f2b; --gold: #9a6b16;
}
[data-theme="dark"][data-style="paper"], [data-theme="dark"] [data-style="paper"] {
  --bg: #1b1712; --surface: #221d17; --surface-2: #2a241c; --surface-3: #342c22;
  --border: #3a3127; --border-strong: #56483a; --panel-border: var(--border);
  --text: #f1e8da; --text-2: #cdbca4; --text-3: #b3a189;
  --accent: #e0907f; --accent-ink: #2a120e; --accent-soft: #3a2520; --focus: #e0907f; --gold: #e2b867;
}

/* Brutal: thick ink outlines, hard offset shadows, no rounding, heavy headings. */
[data-style="brutal"] {
  --font-heading: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font-heading);
  --heading-weight: 800;
  --heading-tracking: -0.02em;
  --label-transform: uppercase;
  --label-tracking: 0.04em;
  --radius: 0;
  --radius-sm: 0;
  --radius-control: 0;
  --radius-pill: 0;
  --bar-radius: 0;
  --border-w: 2px;
  --pad: 18px 20px;
  --gap: 22px;
  --control-h: 36px;
  --cell-y: 9px;
  --bg: #fff8e7; --surface: #ffffff; --surface-2: #fff1c9; --surface-3: #ffe79c;
  --border: #111111; --border-strong: #111111; --panel-border: #111111;
  --text: #111111; --text-2: #333333; --text-3: #474747;
  --accent: #d81b60; --accent-ink: #ffffff; --accent-soft: #ffd6e6; --focus: #111111; --gold: #a06d00;
  --shadow-card: 4px 4px 0 #111111;
  --shadow-control: 2px 2px 0 #111111;
}
[data-theme="dark"][data-style="brutal"], [data-theme="dark"] [data-style="brutal"] {
  --bg: #121212; --surface: #1c1c1c; --surface-2: #262626; --surface-3: #333333;
  --border: #f5f5f5; --border-strong: #f5f5f5; --panel-border: #f5f5f5;
  --text: #f5f5f5; --text-2: #d4d4d4; --text-3: #bdbdbd;
  --accent: #ff79b0; --accent-ink: #1a0010; --accent-soft: #3d1628; --focus: #ff79b0; --gold: #ffd166;
  --shadow-card: 4px 4px 0 #ff79b0;
  --shadow-control: 2px 2px 0 #ff79b0;
}

/* Soft: big radii, pill controls, borderless cards on soft shadows. */
[data-style="soft"] {
  --font: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-heading: var(--font);
  --heading-weight: 650;
  --heading-tracking: -0.015em;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-control: 999px;
  --bar-radius: 999px 999px 0 0;
  --pad: 24px 26px;
  --kpi-pad: 20px 22px 18px;
  --gap: 24px;
  --control-h: 36px;
  --cell-y: 11px;
  --bg: #f4f2fb; --surface: #ffffff; --surface-2: #f1eefa; --surface-3: #e6e1f5;
  --border: #e7e2f3; --border-strong: #d4cdea; --panel-border: transparent;
  --text: #26213a; --text-2: #585173; --text-3: #635c80;
  --accent: #6d5bd0; --accent-ink: #ffffff; --accent-soft: #ece8fb; --focus: #6d5bd0; --gold: #a86d12;
  --shadow-card: 0 1px 2px rgb(38 33 58 / 6%), 0 10px 30px rgb(38 33 58 / 8%);
}
[data-theme="dark"][data-style="soft"], [data-theme="dark"] [data-style="soft"] {
  --bg: #16141f; --surface: #1f1c2b; --surface-2: #272337; --surface-3: #302b42;
  --border: #2e2940; --border-strong: #443d5c; --panel-border: transparent;
  --text: #efecf8; --text-2: #c3bddb; --text-3: #a59fc0;
  --accent: #b3a6ff; --accent-ink: #1b1535; --accent-soft: #2c2645; --focus: #b3a6ff; --gold: #e8b95c;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px rgb(0 0 0 / 35%);
}

/* Mono: black on white in light mode, white on black in dark; the accent is the ink.
   Chart series keep their colors, since tools must stay distinguishable. */
[data-style="mono"] {
  --radius: 8px;
  --radius-sm: 6px;
  --radius-control: 6px;
  --bar-radius: 2px 2px 0 0;
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f4f4f4; --surface-3: #e8e8e8;
  --border: #e2e2e2; --border-strong: #c4c4c4; --panel-border: var(--border);
  --text: #0a0a0a; --text-2: #404040; --text-3: #595959;
  --accent: #0a0a0a; --accent-ink: #ffffff; --accent-soft: #efefef; --focus: #0a0a0a; --gold: #3a3a3a;
}
[data-theme="dark"][data-style="mono"], [data-theme="dark"] [data-style="mono"] {
  --bg: #000000; --surface: #0a0a0a; --surface-2: #161616; --surface-3: #222222;
  --border: #262626; --border-strong: #3d3d3d; --panel-border: var(--border);
  --text: #fafafa; --text-2: #c4c4c4; --text-3: #a3a3a3;
  --accent: #fafafa; --accent-ink: #0a0a0a; --accent-soft: #1f1f1f; --focus: #fafafa; --gold: #d4d4d4;
}

/* Styles other than Grove, and any accent override, derive the calendar ramp from the accent. */
html[data-style]:not([data-style="grove"]), html[data-accent="custom"] {
  --heat-0: color-mix(in srgb, var(--bg) 94%, var(--text));
  --heat-1: color-mix(in srgb, var(--bg) 78%, var(--accent));
  --heat-2: color-mix(in srgb, var(--bg) 55%, var(--accent));
  --heat-3: color-mix(in srgb, var(--bg) 30%, var(--accent));
  --heat-4: var(--accent);
}

/* ---------- Base ---------- */

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

* { margin: 0; padding: 0; }

html { background: var(--bg); }

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
button:disabled { cursor: default; opacity: 0.55; }
code { font-family: var(--mono); font-size: 0.92em; }
img { display: block; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.muted { color: var(--text-3); }
.nowrap { white-space: nowrap; }
.strong { font-weight: 650; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Shell ---------- */

.app {
  max-width: 1240px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 0 32px 24px;
}

.app-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 4px;
  margin-top: auto;
  padding-top: 64px;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}
.app-footer a { color: var(--text-2); text-decoration: none; }
.app-footer a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.app-footer a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.footer-source { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.footer-separator { color: var(--text-3); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 -32px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.brand-logo { width: 32px; height: 32px; color: var(--text); }
.brand h1 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }

.topbar-actions { display: flex; align-items: center; gap: 8px; }
.updated { color: var(--text-3); font-size: 12px; margin-right: 4px; white-space: nowrap; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 600;
}
.pill-warning { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-border); }
.pill-button { border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-2); cursor: pointer; }
.pill-button:hover { color: var(--text); border-color: var(--text-3); }
@media (max-width: 700px) { .pill-label { display: none; } }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--surface-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-2);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

.tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  min-height: 42px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
  box-shadow: inset 0 -2px transparent;
}
.tab:hover { color: var(--text); }
.tab[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px var(--accent); }

.intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0 20px;
}
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.intro h2 { margin: 6px 0 4px; font-size: clamp(26px, 3vw, 32px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.intro p { color: var(--text-2); }

.inline-error {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--error-border);
  border-radius: var(--radius-sm);
  background: var(--error-bg);
  color: var(--error-text);
  font-size: 13px;
}

/* ---------- Update banner ---------- */
.update-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 13px;
}
.update-banner > svg { flex: none; color: var(--accent); }
.update-banner p { flex: 1; min-width: 0; }
.update-banner p span { color: var(--text-2); }
.update-banner-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.update-banner .btn { min-height: 30px; padding: 0 12px; }
.update-link { color: var(--text-2); font-weight: 500; padding: 0 6px; text-decoration: none; }
.update-link:hover { color: var(--text); text-decoration: underline; }
.setting-copy code { font-size: 11.5px; }
.setting-copy a { color: inherit; white-space: nowrap; }

/* ---------- Filters ---------- */

.filters {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 -32px 20px;
  padding: 10px 32px 12px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { color: var(--text-2); font-size: 11.5px; font-weight: 600; }
.select-menu-trigger,
.cost-segmented,
.range-trigger,
.search {
  height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}
.select-menu { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.select-menu-trigger { display: flex; align-items: center; gap: 9px; min-width: 150px; padding: 0 10px; text-align: left; }
.select-menu-trigger:hover, .range-trigger:hover { border-color: var(--text-3); }
.select-menu-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.select-menu-copy strong { overflow: hidden; font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.select-menu-copy small { overflow: hidden; color: var(--text-3); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.select-menu-chevron { flex: 0 0 auto; color: var(--text-2); transition: transform 0.18s ease; }
.select-menu-trigger[aria-expanded="true"] .select-menu-chevron { transform: rotate(180deg); }
.select-menu-list {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 50;
  width: max(100%, 220px);
  max-height: min(360px, calc(100dvh - 200px));
  padding: 5px;
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.select-menu-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 7px 9px; border-radius: 4px; text-align: left; }
.select-menu-option:hover, .select-menu-option:focus-visible { background: var(--surface-2); }
.select-menu-option[aria-selected="true"] { background: var(--accent-soft); }
.select-menu-check { flex: 0 0 auto; margin-left: auto; color: var(--accent); }
.tool-filter-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 3px; background: var(--accent); }
.tool-filter-dot.is-all { background: linear-gradient(135deg, var(--series-1) 0 33%, var(--series-2) 33% 66%, var(--series-3) 66%); }
.cost-segmented { display: flex; align-items: center; gap: 2px; padding: 2px; }
.cost-segmented button { height: 32px; padding: 0 10px; border-radius: 4px; color: var(--text-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cost-segmented button:hover { color: var(--text); }
.cost-segmented button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.field-search { margin-left: auto; }
.search { display: flex; align-items: center; gap: 8px; min-width: 240px; padding: 0 10px; color: var(--text-3); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); }
.search:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }

.range-picker { position: relative; display: flex; flex-direction: column; gap: 5px; }
.range-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 230px;
  padding: 0 10px 0 11px;
  text-align: left;
  color: var(--text-2);
}
.range-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.range-value strong { font-weight: 650; }
.range-subspan { color: var(--text-3); font-size: 12.5px; }
.range-chevron {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-2);
  transition: transform 0.18s ease;
}
.range-trigger[aria-expanded="true"] .range-chevron {
  transform: rotate(180deg);
}

.range-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 150px 285px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.range-presets-title {
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.range-options {
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.range-option {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px 0 6px;
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: 12.5px;
}
.range-option:hover { background: var(--surface-2); }
.range-option[aria-pressed="true"] { font-weight: 650; }
.range-check { display: inline-grid; place-items: center; width: 16px; color: var(--accent); }

.range-custom {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  background: var(--surface);
  gap: 10px;
}

/* ---------- Shadcn-style Calendar ---------- */
.cal-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  user-select: none;
}
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.cal-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
}
.cal-nav {
  display: flex;
  align-items: center;
  gap: 3px;
}
.cal-nav-btn {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cal-nav-btn:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}
.cal-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 0;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
}
.cal-day {
  position: relative;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.cal-day > span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  z-index: 1;
}
.cal-day:hover:not(.is-disabled) > span {
  background: var(--surface-2);
}
.cal-day.is-other-month {
  opacity: 0.28;
}
.cal-day.is-disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}
.cal-day.is-today > span {
  font-weight: 750;
  border: 1px solid var(--border-strong);
}

/* Continuous range selection band (shadcn style) */
.cal-day.is-in-range {
  background: var(--accent-soft);
  color: var(--text);
}
.cal-day.is-range-start {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}
.cal-day.is-range-end {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}
.cal-day.is-single {
  background: transparent !important;
}
.cal-day.is-range-start > span,
.cal-day.is-range-end > span {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  font-weight: 700;
}

/* Calendar footer & actions */
.range-custom-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  gap: 8px;
}
.range-custom-span-text {
  font-size: 11.5px;
  color: var(--text-2);
  font-weight: 600;
}
.range-apply-btn {
  height: 28px;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 650;
  border-radius: var(--radius-sm);
}

/* ---------- Layout ---------- */

.content { display: grid; gap: 20px; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.overview-split { align-items: stretch; }

.panel {
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 16px; }
.panel-head h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.panel-head p { margin-top: 3px; color: var(--text-2); font-size: 12.5px; max-width: 70ch; }
.panel-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.subsection { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.subhead { margin-bottom: 10px; color: var(--text-2); font-size: 12px; font-weight: 650; }
.empty-state, .table-empty { padding: 28px 0; text-align: center; }

.segmented { display: inline-flex; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.segmented button { padding: 5px 10px; border-radius: 4px; color: var(--text-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / 12%); }

/* ---------- Stats: header streak chip ---------- */

.streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 11px 0 9px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-3);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.streak-chip.is-lit { border-color: color-mix(in srgb, var(--flame) 45%, var(--border-strong)); background: color-mix(in srgb, var(--flame) 10%, var(--surface)); color: var(--flame); }
.streak-chip-days { color: var(--text-2); }
.streak-chip.is-lit .streak-chip-days { color: var(--text); }
.streak-chip:hover, .streak-chip.is-active { border-color: var(--text-3); }
.streak-chip.is-lit:hover, .streak-chip.is-lit.is-active { border-color: var(--flame); }

/* ---------- Rank: minimal sheet ----------
   Rank, four numbers, the next rival, and a row of badges. Details live behind a click.
   Gold marks only experience and earned badges. */

.sheet {
  --sheet-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  max-width: 860px;
  margin: 44px auto 0;
}

.sheet-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.sheet-flame { width: 44px; height: 44px; color: var(--text-3); }
.sheet-flame.is-lit { color: var(--flame); }
.sheet-identity { display: grid; min-width: 0; }
.sheet-identity h2 { font-family: var(--sheet-serif); font-size: clamp(24px, 3.2vw, 32px); font-weight: 700; line-height: 1.15; }
.xp-label { margin-top: 12px; color: var(--text-3); font-size: 12.5px; }
.week { display: flex; gap: 12px; margin-top: 14px; list-style: none; }
.week-day { display: grid; justify-items: center; gap: 5px; }
.week-dot { width: 16px; height: 16px; border: 2px solid var(--border-strong); border-radius: 50%; }
.week-day.is-today .week-dot { border-color: var(--text-2); }
.week-day.is-goal .week-dot { --dot: var(--flame); border-color: var(--dot); background: var(--dot); }
.week-day.is-used .week-dot { --dot: color-mix(in srgb, var(--flame) 45%, var(--surface)); border-color: var(--dot); background: var(--dot); }
.week-day.is-frozen .week-dot { --dot: var(--freeze); border-color: var(--dot); background: color-mix(in srgb, var(--freeze) 25%, transparent); }
:is(.week-day.is-goal, .week-day.is-used, .week-day.is-frozen).is-today .week-dot { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--dot); }
.week-name { color: var(--text-3); font-size: 11px; font-weight: 600; line-height: 1; }
.week-day.is-today .week-name { color: var(--text); }
.sheet-share { align-self: start; border-color: transparent; background: transparent; }
.sheet-share:hover { background: var(--surface-2); }

.sheet-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; padding: 20px 0; border-block: 1px solid var(--border); }
.sheet-numbers dt { color: var(--text-3); font-size: 12px; }
.sheet-numbers dd { font-family: var(--sheet-serif); font-size: 26px; font-weight: 700; line-height: 1.2; font-variant-numeric: lining-nums; }

.sheet-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--border); }
.sheet-row:last-of-type { border-bottom: 0; }
.sheet-row-label { color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.sheet-row-label span { font-weight: 500; }
.sheet-row-value { color: var(--text-2); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sheet-rival { min-width: 0; }
.sheet-rival strong { display: block; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.rival-bar { display: block; height: 4px; margin-top: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.rival-bar span { display: block; height: 100%; background: var(--series-7); }
.rank-bar span { background: var(--series-4); }
.freeze-bar span { background: var(--freeze); }
.freeze-count { display: inline-flex !important; align-items: center; gap: 6px; }
.freeze-count svg { color: var(--freeze); }
.rank-level { margin-left: 6px; color: var(--text-3); font-size: 12.5px; font-weight: 500; }

.sheet-badges { grid-template-columns: 110px minmax(0, 1fr); align-items: start; }
.sheet-badges .sheet-row-label { padding-top: 9px; }
.seals { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.seal {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 50%;
  color: var(--text-3);
}
.seal.is-earned { border-style: solid; border-color: var(--seal, var(--gold)); background: color-mix(in srgb, var(--seal, var(--gold)) 14%, transparent); color: var(--seal, var(--gold)); }
.seal:hover { border-color: var(--text-3); }
.seal.is-earned:hover { border-color: var(--seal, var(--gold)); }
.seal[aria-pressed="true"] { outline: 2px solid var(--text); outline-offset: 2px; }
.seal-detail { margin-top: 12px; color: var(--text-2); font-size: 13px; }
.seal-detail strong { color: var(--text); font-weight: 650; }
.seal-detail span { color: var(--text-3); }

.share-dialog { width: min(780px, 100%); }
.share-body { padding: 18px 22px 6px; }
.share-preview { display: block; width: 100%; height: auto; border-radius: 12px; }
.share-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 22px 18px; }
.share-status { flex: 1; min-width: 120px; color: var(--text-2); font-size: 12.5px; }
.check { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--accent); }

/* ---------- KPI cards ---------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.kpi { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px 20px 16px; }
.kpi + .kpi { border-left: 1px solid var(--border); }
.kpi-label { color: var(--text-2); font-size: 12px; font-weight: 650; }
.kpi-value { margin-top: 4px; font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.kpi-of { color: var(--text-3); font-size: 0.55em; font-weight: 600; letter-spacing: 0; }
.kpi-sub { color: var(--text-3); font-size: 12px; overflow-wrap: anywhere; }
.kpi-delta { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--text-2); font-size: 12px; font-weight: 550; }
.spark { width: 100%; height: 28px; margin-top: auto; padding-top: 8px; overflow: visible; }
.spark-empty { height: 28px; margin-top: auto; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.spark-area { fill: var(--accent); opacity: 0.1; }
.spark-dot { fill: var(--accent); }
.kpi-meter { height: 6px; margin-top: auto; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.kpi-meter span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

/* ---------- Tables ---------- */

/* position: relative keeps absolutely positioned children (e.g. .sr-only) inside the scroller. */
.table-scroll { position: relative; overflow-x: auto; margin: 0 -22px; padding: 0 12px; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.table th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 650;
  text-align: left;
  white-space: nowrap;
}
.table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; white-space: nowrap; }
.table-compact td { padding-top: 8px; padding-bottom: 8px; }
.bar-col { width: 22%; min-width: 80px; }
.row-button { cursor: pointer; }
.row-button:hover td { background: var(--surface-2); }
.row-button.is-selected td, .row-button.is-open td { background: var(--accent-soft); }
.cell-button { display: inline-flex; align-items: center; gap: 6px; text-align: left; font-size: inherit; }
.cell-button:focus-visible { outline-offset: 3px; }
.cell-note { display: block; margin-top: 2px; color: var(--text-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36ch; }
.table-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; font-size: 12.5px; }

.detail-row > td { padding: 14px 0 18px; background: var(--surface-2); }
.detail-row .table-scroll { margin: 0; padding: 0 4px; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; padding: 0 14px; }
.detail-card { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12.5px; }
.detail-head span:not(.tool-tag) { color: var(--text-2); }
.detail-head span:last-child { margin-left: auto; }
.detail-card ul { list-style: none; display: grid; gap: 5px; }
.detail-card li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; font-size: 12px; }
.detail-card li code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-card li span { color: var(--text-2); text-align: right; }

.tool-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.tag-row { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.model-name { color: var(--text); font-size: 12px; }
.tag-row .model-name { padding: 1px 6px; border-radius: 4px; background: var(--surface-2); }
.tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 650;
  vertical-align: 1px;
}
.project-cell strong { font-weight: 650; }

.share-bar { display: block; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.share-bar span { display: block; height: 100%; border-radius: inherit; background: var(--text-3); }

.idle-list { list-style: none; display: grid; }
.idle-list li {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.idle-list li:first-child { border-top: 0; }
.idle-list li > div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.idle-list code { color: var(--text-3); font-size: 12px; }
.status { color: var(--text-2); font-size: 12px; white-space: nowrap; }
.status-missing { color: var(--text-3); }

/* ---------- Token mix ---------- */

.mix-bar { display: flex; gap: 2px; height: 10px; border-radius: 3px; overflow: hidden; background: var(--surface-2); }
.mix-bar span { min-width: 2px; }
.mix-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: 14px; }
.mix-list > div { display: grid; gap: 2px; }
.mix-list dt { display: flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 12px; }
.mix-list dt i { width: 9px; height: 9px; border-radius: 2px; }
.mix-list .swatch-none { border: 1px dashed var(--border-strong); }
.mix-list dd { display: flex; align-items: baseline; gap: 8px; padding-left: 16px; font-variant-numeric: tabular-nums; }
.mix-list dd strong { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.mix-list dd span { color: var(--text-3); font-size: 12px; }

/* ---------- Usage chart ---------- */

.uchart { --axis-w: 44px; display: flex; flex-direction: column; gap: 8px; }
.uchart-plot { position: relative; height: 230px; margin-top: 6px; }
.uchart-grid { position: absolute; inset: 0; pointer-events: none; }
.uchart-gridline { position: absolute; left: var(--axis-w); right: 0; border-top: 1px solid var(--border); }
.uchart-gridline:first-child { border-top-color: var(--border-strong); }
.uchart-gridline span {
  position: absolute;
  right: calc(100% + 8px);
  top: 0;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.uchart-bars { position: absolute; inset: 0 0 0 var(--axis-w); display: flex; align-items: flex-end; cursor: pointer; }
.uchart-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; border-radius: 3px 3px 0 0; }
.uchart-col.is-active { background: var(--surface-2); }
.uchart-stack { width: min(24px, 72%); display: flex; flex-direction: column-reverse; gap: 2px; border-radius: 4px 4px 0 0; overflow: hidden; }
.uchart-seg { flex: 1 1 0; min-height: 1px; }
.uchart-tip {
  position: absolute;
  top: 2px;
  z-index: 5;
  min-width: 190px;
  max-width: 260px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  color: var(--text);
  font-size: 12px;
  pointer-events: none;
}
.uchart-tip.side-right { transform: translateX(16px); }
.uchart-tip.side-left { transform: translateX(calc(-100% - 16px)); }
.uchart-tip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.uchart-tip-head strong { font-weight: 650; }
.uchart-tip-head span { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.uchart-tip ul { list-style: none; display: grid; gap: 5px; }
.uchart-tip li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.uchart-tip li i { width: 8px; height: 8px; border-radius: 2px; }
.uchart-tip li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.uchart-tip li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.uchart-tip-foot { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); color: var(--text-2); }
.uchart-tip-empty { color: var(--text-2); }
.uchart-xaxis { display: flex; height: 14px; margin-left: var(--axis-w); color: var(--text-3); font-size: 10.5px; }
.uchart-xaxis span { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
.uchart-xaxis em { font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lchart-area { position: absolute; inset: 0 0 0 var(--axis-w); }
.lchart-area svg { display: block; overflow: visible; }
.lchart-hit { cursor: crosshair; }
.lchart-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lchart-dot { fill: currentColor; stroke: var(--surface); stroke-width: 2; }
.lchart-crosshair { stroke: var(--border-strong); stroke-width: 1; }
.speed-head { justify-content: flex-end; font-weight: 650; }
.uchart-empty { display: grid; place-items: center; height: 230px; color: var(--text-3); }

.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-2); font-size: 12px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-item i { width: 10px; height: 10px; border-radius: 3px; }

/* ---------- Activity calendar ---------- */

.cal { display: grid; gap: 6px; width: 100%; min-width: 0; }
.cal-months, .cal-grid { display: grid; column-gap: 3px; }
.cal-months { height: 13px; color: var(--text-3); font-size: 10.5px; }
.cal-months span { white-space: nowrap; }
.cal-grid { grid-template-rows: repeat(7, auto); row-gap: 3px; }
.cal-cell { aspect-ratio: 1; border-radius: 2px; background: var(--heat-0); }
.cal-cell.lvl-1 { background: var(--heat-1); }
.cal-cell.lvl-2 { background: var(--heat-2); }
.cal-cell.lvl-3 { background: var(--heat-3); }
.cal-cell.lvl-4 { background: var(--heat-4); }
.cal-cell.is-outside { opacity: 0.35; }
.cal-cell.is-future { background: transparent; }
.cal-cell.is-hovered { outline: 1.5px solid var(--text); outline-offset: 1px; opacity: 1; }
.cal-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 14px; color: var(--text-3); font-size: 11.5px; }
.cal-readout strong { color: var(--text); font-weight: 650; }
.cal-scale { display: inline-flex; align-items: center; gap: 3px; }
.cal-scale .cal-cell { display: inline-block; width: 10px; height: 10px; }

/* ---------- Dialogs ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(15 25 19 / 55%);
}
.modal {
  width: min(540px, 100%);
  max-height: min(680px, calc(100dvh - 32px));
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-size: 19px; letter-spacing: -0.02em; }
.modal-header p { margin-top: 3px; color: var(--text-2); font-size: 12.5px; }
.modal-body { padding: 6px 22px 0; }
.settings-section { padding: 12px 0 4px; }
.settings-section + .settings-section { border-top: 1px solid var(--border); }
.settings-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.settings-section-heading h4 { font-size: 12.5px; }
.settings-section-heading span { color: var(--text-3); font-size: 12px; }
.theme-import { margin-top: 14px; border-top: 1px solid var(--border); }
.theme-import > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.theme-import > summary::-webkit-details-marker { display: none; }
.theme-import > summary svg { transition: transform 0.18s ease; }
.theme-import[open] > summary svg { transform: rotate(180deg); }
.theme-import-body { display: grid; gap: 10px; padding-bottom: 14px; }
.theme-import-body > p { color: var(--text-2); font-size: 12px; line-height: 1.5; }
.theme-import-body > label { color: var(--text-2); font-size: 11.5px; font-weight: 600; }
.theme-import-body textarea {
  width: 100%;
  min-height: 132px;
  padding: 10px;
  border: 1px solid var(--text-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font: 11px/1.5 var(--mono);
  resize: vertical;
}
.theme-import-body textarea::placeholder { color: var(--text-3); }
.theme-import-feedback { color: var(--accent); font-size: 12px; }
.theme-import-feedback.is-error { color: var(--error-text); }
.theme-import-actions { display: flex; align-items: center; }
.theme-format { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.theme-format > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; padding: 0 11px; color: var(--text-2); font-size: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.theme-format > summary::-webkit-details-marker { display: none; }
.theme-format > summary svg { transition: transform 0.18s ease; }
.theme-format[open] > summary svg { transform: rotate(180deg); }
.theme-format-body { display: grid; gap: 9px; padding: 0 11px 11px; }
.theme-format-body p { color: var(--text-3); font-size: 11.5px; }
.theme-format-body pre { width: 100%; padding: 12px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); font: 11px/1.5 var(--mono); white-space: pre; }
.setting-row { display: flex; align-items: center; gap: 18px; min-height: 66px; padding: 10px 0; }
.setting-row + .setting-row { border-top: 1px solid var(--border); }
.setting-copy { flex: 1; min-width: 0; }
.setting-copy strong { display: block; font-size: 13.5px; font-weight: 650; }
.setting-copy p { margin-top: 2px; color: var(--text-2); font-size: 12.5px; }

.toggle { position: relative; flex: 0 0 auto; width: 46px; height: 40px; }
.toggle::before {
  content: "";
  position: absolute;
  inset: 8px 0;
  border-radius: 12px;
  background: var(--border-strong);
  transition: background 0.18s ease;
}
.toggle.on::before { background: var(--accent); }
.toggle-knob {
  position: absolute;
  top: 11px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
  transition: transform 0.18s ease;
}
.toggle.on .toggle-knob { transform: translateX(22px); }
html[data-theme="dark"] .toggle.on .toggle-knob { background: var(--accent-ink); }

.settings-details { border-top: 1px solid var(--border); }
.settings-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.settings-details summary::-webkit-details-marker { display: none; }
.settings-details summary svg { transition: transform 0.18s ease; }
.settings-details[open] summary svg { transform: rotate(180deg); }
.settings-details dl { display: grid; gap: 10px; padding-bottom: 14px; }
.settings-details dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; font-size: 12px; }
.settings-details dt { color: var(--text-3); }
.settings-details code { overflow-wrap: anywhere; }
.settings-empty { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 24px 0; color: var(--text-2); }
.settings-quit { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 8px; border-radius: var(--radius-sm); color: var(--text-2); font-size: 13px; font-weight: 600; }
.settings-quit:hover { background: var(--surface-2); color: var(--error-text); }

/* ---------- Settings page ---------- */

/* Settings are a page of their own, not an overlay: a search field and the section list on
   the left, the open section beside it. Search results replace the section while a query is typed. */
.settings-page { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 980px; margin: 0 auto; padding-bottom: 8px; }
.sp-head { display: flex; align-items: center; gap: 14px; padding: 22px 0 18px; }
.sp-head h2 { font-size: 22px; letter-spacing: -0.02em; }
.sp-head h2:focus { outline: none; }
.sp-back { gap: 4px; padding-left: 8px; }
.sp-search { width: min(320px, 100%); min-width: 0; margin-left: auto; }
.sp-search input::-webkit-search-cancel-button { cursor: pointer; }
.sp-search kbd {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 1px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--text-3);
  font: 11px/1.5 var(--mono);
  text-align: center;
}
.sp-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; padding: 4px 0 40px; }
.sp-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.sp-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
}
.sp-nav button:hover { background: var(--surface-2); color: var(--text); }
.sp-nav button[aria-current] { background: var(--surface-2); color: var(--text); }
.sp-nav button[aria-current] svg { color: var(--accent); }
.sp-content { min-width: 0; max-width: 720px; padding-bottom: 8px; }
.sp-section-head { padding: 2px 0 12px; }
.sp-section-head h3 { font-size: 18px; letter-spacing: -0.015em; }
.sp-section-head p { margin-top: 3px; color: var(--text-2); font-size: 13px; }
.sp-group + .sp-group { margin-top: 12px; border-top: 1px solid var(--border); }
.sp-group-label { padding: 16px 0 0; color: var(--text-3); font-size: 11.5px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.sp-empty { display: grid; gap: 4px; padding: 48px 8px; text-align: center; }
.sp-empty strong { font-size: 14px; }
.sp-empty p { color: var(--text-2); font-size: 13px; }
.sp-content .settings-section { padding-top: 6px; }
.sp-content .settings-section + .settings-section { margin-top: 6px; }
.sp-content .settings-details { border-top: 1px solid var(--border); }
.sp-content .inline-error { margin-bottom: 14px; }
.sp-content .style-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 14px 0; border-top: 1px solid var(--border); }
.sp-foot > span { color: var(--text-3); font-size: 12px; }
.setting-copy .setting-meta { margin-top: 5px; color: var(--text-3); font-size: 12px; }
.setting-error { color: var(--error-text); }
.settings-btn[aria-pressed="true"] { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }

@media (max-width: 760px) {
  .sp-head { flex-wrap: wrap; gap: 10px 12px; padding: 16px 0 14px; }
  .sp-search { flex: 1 0 100%; width: 100%; margin-left: 0; order: 3; }
  .sp-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sp-nav { position: static; flex-direction: row; gap: 4px; margin: 0 -16px; padding: 0 16px 10px; overflow-x: auto; border-bottom: 1px solid var(--border); }
  .sp-nav button { flex: 0 0 auto; }
}
@media (max-width: 480px) {
  .sp-nav button svg { display: none; }
}

/* ---------- Credit ---------- */


/* ---------- Splash screens ---------- */

.splash { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.splash-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: min(420px, 100%);
  padding: 32px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-2);
  text-align: center;
}
.splash-card h2 { color: var(--text); font-size: 19px; }
.splash-logo { width: 64px; height: 64px; color: var(--text); }

/* ---------- Style layer ----------
   Maps the style tokens onto components. It sits after the component rules so a style
   can change them, and before the responsive rules so small screens still win. */

.brand h1, .intro h2, .panel-head h2, .kpi-value, .mix-list dd strong, .modal-header h3, .sp-head h2, .sp-section-head h3, .splash-card h2 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
}
.sheet { --sheet-serif: var(--font-display); }
.field-label, .kpi-label, .table th, .subhead, .sheet-row-label, .sheet-numbers dt, .settings-section-heading h4, .theme-row-label, .sp-group-label {
  text-transform: var(--label-transform);
  letter-spacing: var(--label-tracking);
}

.content, .split { gap: var(--gap); }
.panel, .kpi-grid {
  border-width: var(--border-w);
  border-color: var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.panel { padding: var(--pad); }
.kpi { padding: var(--kpi-pad); }
.kpi + .kpi { border-left-width: var(--border-w); border-left-color: var(--panel-border); }
.table td { padding-top: var(--cell-y); padding-bottom: var(--cell-y); }
.uchart-stack { border-radius: var(--bar-radius); }

.btn, .icon-btn, .field select, .range-trigger, .search, .select-menu-trigger, .segmented {
  border-width: var(--border-w);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-control);
}
.btn { min-height: var(--control-h); }
.icon-btn { width: var(--control-h); height: var(--control-h); }
.segmented button { border-radius: max(0px, calc(var(--radius-control) - 2px)); }
.pill, .streak-chip { border-radius: var(--radius-pill); }
.streak-chip { border-width: var(--border-w); }
.modal, .range-popover, .uchart-tip, .splash-card { border-width: var(--border-w); border-radius: var(--radius); }

/* Brutal controls press into their shadow. */
[data-style="brutal"] .btn:active, [data-style="brutal"] .icon-btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* ---------- Appearance settings ---------- */

.theme-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 10px; }
.theme-row-label { color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.theme-block { display: grid; gap: 8px; padding: 8px 0 10px; }

.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.style-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  text-align: left;
}
.style-card:hover { border-color: var(--border-strong); }
.style-card[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.style-card-text { display: grid; gap: 1px; padding: 0 3px 2px; }
.style-card-text strong { color: var(--text); font-size: 12.5px; font-weight: 650; }
.style-card-text span { color: var(--text-3); font-size: 11.5px; line-height: 1.35; }
.style-card-check { position: absolute; top: 12px; right: 12px; padding: 2px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }

/* Everything inside the preview reads the tile's own style tokens. */
.style-preview {
  display: block;
  height: 66px;
  padding: 8px;
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-heading);
  overflow: hidden;
}
.sp-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  height: 100%;
  padding: 6px 9px;
  border: var(--border-w) solid var(--panel-border);
  border-radius: min(var(--radius), 10px);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.sp-title { align-self: center; font-size: 19px; font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); line-height: 1; }
.sp-bars { display: flex; align-items: flex-end; gap: 3px; height: 100%; }
.sp-bars i { width: 8px; border-radius: var(--bar-radius); background: var(--accent); }
.sp-button { align-self: center; width: 26px; height: 12px; border-radius: min(var(--radius-control), 6px); background: var(--accent); box-shadow: var(--shadow-control); }

.accent-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.accent-default {
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}
.accent-default[aria-checked="true"] { border-color: var(--text); color: var(--text); }
.accent-swatch { width: 28px; height: 28px; border: 2px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--border-strong); }
.accent-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--text); }
.accent-custom {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px dashed var(--border-strong);
  border-radius: 50%;
  color: var(--text-2);
  cursor: pointer;
  overflow: hidden;
}
.accent-custom.is-selected { border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--text); color: #fff; }
.accent-custom.is-selected svg { mix-blend-mode: difference; }
.accent-custom:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.accent-custom:disabled { cursor: not-allowed; }

/* Fixed to the viewport and rendered inside the dialog, so the dialog's scrolling never clips it. */
.color-popover {
  position: fixed;
  z-index: 120;
  width: min(300px, calc(100vw - 16px));
  padding: 14px;
  border: var(--border-w, 1px) solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.color-picker { display: grid; gap: 14px; }
.color-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 52px;
  padding: 0 14px;
  border-radius: min(var(--radius-sm), 8px);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 14%);
}
.color-preview-sample { font-family: var(--font-display, var(--font)); font-size: 26px; font-weight: 700; line-height: 1; }
.color-preview-note { font: 600 12px/1 var(--mono); font-variant-numeric: tabular-nums; }
.color-slider { display: grid; gap: 7px; }
.color-slider-head { display: flex; justify-content: space-between; align-items: baseline; color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.color-slider-head output { color: var(--text-3); font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; }
.color-slider input[type="range"] {
  width: 100%;
  height: 10px;
  margin: 0;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 18%);
  appearance: none;
  cursor: pointer;
}
.color-slider input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  border-radius: 50%;
  appearance: none;
  background: var(--picked);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 40%), 0 2px 5px rgb(0 0 0 / 35%);
}
.color-slider input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--picked);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 40%), 0 2px 5px rgb(0 0 0 / 35%);
}
.color-slider input[type="range"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.color-hex-row { display: flex; align-items: center; gap: 8px; }
.color-hex {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: 500 13px/1 var(--mono);
  text-transform: lowercase;
}
.color-hex[aria-invalid="true"] { border-color: var(--error-border, #a9342b); }
.color-dropper { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-2); }
.color-dropper:hover { border-color: var(--text-2); color: var(--text); }

.theme-block-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.theme-row-hint { color: var(--text-3); font-size: 12px; }
.accent-row[aria-disabled="true"] { opacity: 0.45; }
.accent-row[aria-disabled="true"] .accent-custom { cursor: not-allowed; }

/* ---------- Model prices ---------- */
.tag-warning { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning-text); }
.price-table td { white-space: nowrap; }
.price-table .tag { margin-left: 0; }
.price-info { max-width: 80ch; }
.panel-head + .price-info { margin-bottom: 16px; }
.table-scroll + .price-info { margin-top: 16px; }
.price-info h3 { font-size: 12.5px; font-weight: 700; }
.price-info p, .price-info li { margin-top: 4px; color: var(--text-2); font-size: 12.5px; line-height: 1.5; }
.price-info ul { padding-left: 18px; }
.price-info code { color: var(--text); }
.price-info a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.kpi-link {
  align-self: flex-start;
  color: var(--text-2);
  font-size: 12px;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
.kpi-link:hover { color: var(--text); text-decoration-color: currentColor; }
.kpi-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* ---------- Live mode ---------- */

.app.is-live { max-width: 1680px; }

.live-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--live) 40%, var(--border-strong));
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 650;
}
.live-toggle svg { color: var(--live); }
.live-toggle:hover { border-color: color-mix(in srgb, var(--live) 65%, var(--border-strong)); background: color-mix(in srgb, var(--live) 6%, var(--surface)); color: var(--text); }
.live-toggle[aria-pressed="true"] { border-color: var(--live); background: color-mix(in srgb, var(--live) 14%, var(--surface)); color: var(--text); }
.live-toggle[aria-pressed="true"]:hover { filter: brightness(1.06); }
.live-toggle[aria-pressed="true"] svg { animation: lm-breathe 2.4s ease-in-out infinite; }

.lm { display: grid; gap: var(--gap); padding: 22px 0 28px; }
.lm-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.lm-status { display: flex; align-items: center; gap: 14px; }
.lm-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lm-tools button { display: inline-flex; align-items: center; gap: 6px; }

.lm-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lm-badge i { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); }
.lm-badge.is-live i { background: var(--live); animation: live-pulse 1.6s ease-out infinite; }
.lm-badge.is-reconnecting { color: var(--warning-text); }
.lm-badge.is-reconnecting i { background: currentColor; }
.lm-clock { color: var(--text-2); font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }

.lm-label { color: var(--text-3); font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.lm-note { color: var(--text-3); font-size: 12.5px; }
.lm-dim { color: var(--text-3); }
.lm-figure { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.lm-figure small { margin-left: 0.22em; color: var(--text-3); font-size: 0.5em; letter-spacing: 0; }
/* "5.5 K/min": a unit that follows K, M or B joins it rather than standing apart. */
.lm-figure:has(small) + em { margin-left: 1px; }
.lm-readout-value em, .lm-session dd em {
  margin-left: 4px;
  color: var(--text-3);
  font-family: var(--font);
  font-size: 0.48em;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

/* The instrument: one surface for the number, its trace, and the response tape. */
.lm-instrument, .lm-panel {
  min-width: 0;
  border: var(--border-w) solid var(--panel-border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.lm-instrument { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: clamp(18px, 2.4vw, 34px); }
.lm-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; }
/* The hero figure sizes to its own column and its length (--fig-chars), so a long amount shrinks rather than spills. */
.lm-hero-main { display: grid; gap: 8px; min-width: 0; container-type: inline-size; }
/* A normal line height leaves room for glyphs that rise above the digits, like "$", in every style's font. */
.lm-hero-figure { color: var(--text); font-size: clamp(40px, min(10vw, calc(100cqi / (var(--fig-chars, 6) * 0.66))), 148px); font-weight: 650; line-height: 1.04; white-space: nowrap; }
.lm-readouts { display: grid; grid-template-columns: repeat(3, minmax(150px, auto)); row-gap: 22px; }
.lm-readout { display: grid; align-content: start; gap: 4px; padding: 2px 22px; border-left: 1px solid var(--border); }
.lm-hero-pair { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 44px; }
.lm-hero-pair > div { display: grid; gap: 8px; }
.lm-hero-side-value { color: var(--text-2); font-family: var(--mono); font-size: clamp(28px, 3.4vw, 48px); font-weight: 600; line-height: 1; white-space: nowrap; }
.lm-hero-side-value em { margin-left: 4px; color: var(--text-3); font-family: var(--font); font-size: 0.4em; font-style: normal; font-weight: 600; }
.lm-hero-main > .lm-note { max-width: 62ch; }
.lm-trace-title { display: block; margin-bottom: 8px; color: var(--text-3); font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.lm-lead { display: inline-flex; align-items: center; gap: 8px; }
.lm-lead-label { color: var(--text-3); font-size: 12px; font-weight: 600; white-space: nowrap; }
.lm-readout-value { font-family: var(--mono); font-size: clamp(22px, 2.2vw, 32px); font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }

.lm-trace, .lm-tape, .lm-speed { position: relative; }
/* Charts fill their box and scale to it until the next measurement redraws them at the new width. */
.lm-trace > svg, .lm-tape > svg, .lm-speed > svg { display: block; width: 100%; height: auto; overflow: visible; }
.lm-grid { stroke: var(--border); stroke-width: 1; }
.lm-grid.is-base { stroke: var(--border-strong); }
.lm-axis { fill: var(--text-3); font-family: var(--mono); font-size: 11px; }
.lm-area { fill: currentColor; fill-opacity: 0.16; }
.lm-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lm-crosshair { stroke: var(--text-3); stroke-width: 1; }
.lm-hit { position: absolute; inset: 0; cursor: crosshair; }
.lm-trace .uchart-tip.side-right { transform: translateX(14px); }
.lm-trace .uchart-tip.side-left { transform: translateX(calc(-100% - 14px)); }
.lm-timeaxis { position: relative; height: 16px; margin-top: 8px; color: var(--text-3); font-family: var(--mono); font-size: 11px; }
.lm-timeaxis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.lm-timeaxis .is-start { transform: none; }
.lm-timeaxis .is-now { right: 0; transform: none; color: var(--text-2); }

.lm-tape { padding-top: 12px; border-top: 1px solid var(--border); }
.lm-tick.is-new { transform-box: fill-box; transform-origin: bottom; animation: lm-drop 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lm-tape-empty { position: absolute; inset: 12px 0 0; display: grid; place-items: center; color: var(--text-3); font-size: 12.5px; }

.lm-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.lm-grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.lm-panel { display: flex; flex-direction: column; gap: 16px; padding: var(--pad); }
.lm-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.lm-panel-head h2 { font-family: var(--font-heading); font-size: 15px; font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); }
.lm-empty { padding: 18px 0; color: var(--text-3); font-size: 13px; }

.lm-ranks { display: grid; gap: 18px; list-style: none; }
.lm-rank-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lm-rank-name strong { font-size: 14px; }
.lm-rank-name code { min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.lm-rank-name .lm-note { white-space: nowrap; }
.lm-rank-value { margin-left: auto; font-size: 20px; font-weight: 600; }
.lm-bar { display: block; height: 6px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.lm-bar span { display: block; height: 100%; border-radius: inherit; transition: width 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.lm-rank-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.lm-more { margin-top: auto; }

.lm-speed-dot { fill-opacity: 0.85; stroke: var(--surface); stroke-width: 1.5; }
.lm-speed-dot.is-hover { fill-opacity: 1; stroke: var(--text); stroke-width: 2; }
.lm-speed, .lm-tape { cursor: default; }
.lm-tick.is-hover { stroke: var(--text); stroke-width: 1.5; }

/* The hover card for one response, on the speed dots and the tape. */
.lm-tip {
  position: absolute;
  z-index: 6;
  width: max-content;
  min-width: 200px;
  max-width: 280px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  color: var(--text);
  font-size: 12px;
  pointer-events: none;
}
.lm-tip.side-right { transform: translate(16px, -50%); }
.lm-tip.side-left { transform: translate(calc(-100% - 16px), -50%); }
.lm-tip-head { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text-2); }
.lm-tip-head code { min-width: 0; overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lm-tip-head time { margin-left: auto; padding-left: 10px; color: var(--text-3); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.lm-tip-value { margin-top: 8px; font-family: var(--mono); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.lm-tip-value em { margin-left: 5px; color: var(--text-3); font-family: var(--font); font-size: 0.5em; font-style: normal; font-weight: 600; letter-spacing: 0; }
.lm-tip dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.lm-tip dt { color: var(--text-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.lm-tip dd { margin-top: 1px; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.lm-tip-foot { margin-top: 10px; overflow: hidden; color: var(--text-2); text-overflow: ellipsis; white-space: nowrap; }

/* A coding tool's mark (see ToolMark.tsx), or a lettered badge for tools without one. */
.tool-mark { display: inline-block; flex: 0 0 auto; color: var(--text); }
.tool-mark-letter {
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  font-family: var(--font);
  font-weight: 750;
  line-height: 1;
}
/* A color swatch for chart series that aren't a tool (token types, "Other"). */
.series-swatch { display: inline-block; width: 10px; height: 10px; flex: 0 0 10px; border-radius: 3px; }
/* A tool series' key in charts: the swatch carries the series color, the mark its brand colors. */
.series-key { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.lm-median { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; opacity: 0.7; }

.lm-session-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.lm-session { display: grid; gap: 10px; min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.lm-session header { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lm-session header strong { min-width: 0; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.lm-session header .lm-note { margin-left: auto; white-space: nowrap; }
.lm-session-tool { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-2); font-size: 12.5px; white-space: nowrap; }
.lm-session-tool code { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lm-session dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.lm-session dt { color: var(--text-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.lm-session dd { margin-top: 2px; font-family: var(--mono); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lm-session header .lm-note.is-recent { color: var(--accent); }

.lm-feed ol { display: grid; list-style: none; }
/*
 * Capped lists scroll inside their panel. The scrollbar sits out in the panel's side padding,
 * clear of the numbers, while the rows stay lined up with the heading; its space is kept
 * reserved so rows don't shift when it appears.
 */
.lm-feed ol, .lm-session-grid {
  max-height: 420px;
  min-height: 0;
  margin-right: -14px;
  padding-right: 14px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
/* A fade pinned to the bottom of the list hints at more rows without fading the scrollbar.
   At the end of the list it sits below the last row, so that row is never dimmed. */
.lm-feed ol::after {
  content: "";
  position: sticky;
  bottom: 0;
  height: 28px;
  background: linear-gradient(to bottom, transparent, var(--surface));
  pointer-events: none;
}
.lm-feed-row {
  display: grid;
  grid-template-columns: auto 8px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  animation: live-arrive 1.2s ease-out;
}
.lm-feed-row:last-child { border-bottom: 0; }
.lm-feed-row time { color: var(--text-3); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lm-feed-row code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-feed-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }



.lm-limits-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 6px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
}
.lm-limits-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.lm-limits { scroll-margin-top: 24px; }
.lm-limits { max-width: 860px; margin: 0 auto; padding: 4px 0; color: var(--text-2); font-size: 13px; }
.lm-limits summary { width: fit-content; margin: 0 auto; color: var(--text-2); font-weight: 650; cursor: pointer; }
.lm-limits summary:hover { color: var(--text); }
.lm-limits summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.lm-limits ul { display: grid; gap: 10px; margin: 16px 0 12px; padding-left: 18px; line-height: 1.5; }
.lm-limits strong { color: var(--text); font-weight: 650; }
.lm-limits .lm-note { padding-left: 18px; }
.lm-connecting { min-height: 50vh; place-items: center; align-content: center; gap: 14px; color: var(--text-2); text-align: center; }

@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); }
  100% { box-shadow: 0 0 0 8px transparent; }
}
@keyframes live-arrive {
  from { background: var(--accent-soft); }
  to { background: transparent; }
}
@keyframes lm-drop {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes lm-breathe {
  50% { opacity: 0.55; }
}

@media (max-width: 1180px) {
  .lm-hero { grid-template-columns: 1fr; }
  .lm-readouts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lm-readout:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .lm-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lm-grid-3 > :last-child { grid-column: 1 / -1; }
  .lm-grid-2 { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 760px) {
  .lm-grid-3 { grid-template-columns: 1fr; }
  .lm-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .lm-readout:nth-child(3n + 1) { padding-left: 22px; border-left: 1px solid var(--border); }
  .lm-readout:nth-child(odd) { padding-left: 0; border-left: 0; }
  .lm-feed-row { grid-template-columns: auto 8px minmax(0, 1fr) auto; }
  .lm-feed-row .lm-feed-num:nth-of-type(n + 2) { display: none; }
}

/* ---------- Switching in and out of Live mode ---------- */

.dash-stage { display: flex; flex: 1 0 auto; flex-direction: column; min-width: 0; }

.live-toggle.is-arming svg { animation: lm-breathe 0.9s ease-in-out infinite; }

/*
 * lib/liveSwitch.ts sets data-vt (the direction) and data-vt-style (pulse, or morph, which is kept
 * for later) only while a switch runs, so these names never create stacking contexts the rest of
 * the time. The brand and the buttons both screens share glide to their new places.
 */
html[data-vt] .brand { view-transition-name: lt-brand; }
html[data-vt] .live-toggle { view-transition-name: lt-toggle; }
html[data-vt] .theme-btn { view-transition-name: lt-theme; }
html[data-vt] .settings-btn { view-transition-name: lt-settings; }

:root { --vt-ease: cubic-bezier(0.16, 1, 0.3, 1); --vt-ease-in: cubic-bezier(0.5, 0, 0.75, 0); }

::view-transition-group(lt-brand),
::view-transition-group(lt-toggle),
::view-transition-group(lt-theme),
::view-transition-group(lt-settings) { animation-duration: 560ms; animation-timing-function: var(--vt-ease); }
::view-transition-old(root) { animation: 220ms var(--vt-ease-in) both lt-fade-out; }
::view-transition-new(root) { animation: 420ms var(--vt-ease) 80ms both lt-fade-in; }

@keyframes lt-fade-out { to { opacity: 0; } }
@keyframes lt-fade-in { from { opacity: 0; } }
@keyframes lt-sink {
  to { opacity: 0; transform: translateY(-10px) scale(0.975); filter: blur(10px); }
}
@keyframes lt-rise {
  from { opacity: 0; transform: translateY(28px) scale(0.985); filter: blur(6px); }
}
@keyframes lt-rise-hero {
  from { opacity: 0; transform: translateY(36px) scale(0.96); filter: blur(10px); }
}

/* Pulse: the new screen opens as a circle around the Live button. liveSwitch.ts animates the
   circle and the ring on its edge, since both follow the button to its new place. */
html[data-vt-style="pulse"]::view-transition-old(root),
html[data-vt-style="pulse"]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html[data-vt="from-live"][data-vt-style="pulse"]::view-transition-old(root) { z-index: 1; }
/* The same timing as the wave in liveSwitch.ts, so the wave stays centered on the moving button. */
html[data-vt-style="pulse"]::view-transition-group(lt-brand),
html[data-vt-style="pulse"]::view-transition-group(lt-toggle),
html[data-vt-style="pulse"]::view-transition-group(lt-theme),
html[data-vt-style="pulse"]::view-transition-group(lt-settings) { animation-duration: 720ms; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
html[data-vt="from-live"][data-vt-style="pulse"]::view-transition-group(lt-brand),
html[data-vt="from-live"][data-vt-style="pulse"]::view-transition-group(lt-toggle),
html[data-vt="from-live"][data-vt-style="pulse"]::view-transition-group(lt-theme),
html[data-vt="from-live"][data-vt-style="pulse"]::view-transition-group(lt-settings) { animation-duration: 520ms; }
::view-transition-new(lt-ring) { animation: none; }
.vt-ring {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  width: 100%;
  height: 100%;
  pointer-events: none;
  view-transition-name: lt-ring;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 80%, transparent));
}
.vt-ring circle { fill: none; stroke: var(--accent); vector-effect: non-scaling-stroke; transform: scale(0.001); }
.vt-ring-edge { stroke-width: 2px; }
.vt-ring-haze { stroke-width: 34px; stroke-opacity: 0.16; }

/* Pulse: Live's chart and tape draw in from the left, up to now. */
html[data-lm-intro] .lm-trace > svg { animation: lm-draw 1000ms cubic-bezier(0.45, 0, 0.2, 1) 340ms both; }
html[data-lm-intro] .lm-tape > svg { animation: lm-draw 1000ms cubic-bezier(0.45, 0, 0.2, 1) 440ms both; }
/* Both ends spelled out: clip-path can't interpolate to none. */
@keyframes lm-draw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* Morph (kept for later): each screen's blocks leave or arrive as separate layers, so nothing gets stretched. */
html[data-vt-style="morph"] .dash-stage { view-transition-name: lt-dash; }
html[data-vt-style="morph"] .lm-header { view-transition-name: lt-live-head; }
html[data-vt-style="morph"] .lm-instrument { view-transition-name: lt-live-hero; }
html[data-vt-style="morph"] .lm-grid-3 { view-transition-name: lt-live-a; }
html[data-vt-style="morph"] .lm-grid-2 { view-transition-name: lt-live-b; }
html[data-vt-style="morph"] .lm-connecting { view-transition-name: lt-live-hero; }

/* Into Live: the dashboard sinks back and blurs; the live screen rises in, top to bottom. */
html[data-vt="to-live"][data-vt-style="morph"]::view-transition-old(lt-dash) { animation: 280ms var(--vt-ease-in) both lt-sink; }
html[data-vt="to-live"][data-vt-style="morph"]::view-transition-new(lt-live-head) { animation: 520ms var(--vt-ease) 90ms both lt-rise; }
html[data-vt="to-live"][data-vt-style="morph"]::view-transition-new(lt-live-hero) { animation: 680ms var(--vt-ease) 130ms both lt-rise-hero; }
html[data-vt="to-live"][data-vt-style="morph"]::view-transition-new(lt-live-a) { animation: 640ms var(--vt-ease) 210ms both lt-rise; }
html[data-vt="to-live"][data-vt-style="morph"]::view-transition-new(lt-live-b) { animation: 640ms var(--vt-ease) 280ms both lt-rise; }

/* Out of Live: the live screen sinks back, lowest rows first; the dashboard rises in. */
html[data-vt="from-live"][data-vt-style="morph"]::view-transition-old(lt-live-b) { animation: 240ms var(--vt-ease-in) both lt-sink; }
html[data-vt="from-live"][data-vt-style="morph"]::view-transition-old(lt-live-a) { animation: 240ms var(--vt-ease-in) 30ms both lt-sink; }
html[data-vt="from-live"][data-vt-style="morph"]::view-transition-old(lt-live-hero) { animation: 260ms var(--vt-ease-in) 60ms both lt-sink; }
html[data-vt="from-live"][data-vt-style="morph"]::view-transition-old(lt-live-head) { animation: 240ms var(--vt-ease-in) 80ms both lt-sink; }
html[data-vt="from-live"][data-vt-style="morph"]::view-transition-new(lt-dash) { animation: 620ms var(--vt-ease) 160ms both lt-rise; }

/* Morph: Overview's Tokens or Cost number (whichever Live leads with) becomes Live's big number.
   Both shrink to their text, so the number scales by its height and stays left-aligned. */
html[data-vt-style="morph"][data-vt-lead="cost"] [data-vt-morph="cost"],
html[data-vt-style="morph"][data-vt-lead="tokens"] [data-vt-morph="tokens"] { width: fit-content; view-transition-name: lt-morph; }
/* On top: blocks that exist on only one screen get layers above the shared ones, so the
   arriving Live card would otherwise cover the number flying into it. */
::view-transition-group(lt-morph) { z-index: 1; animation-duration: 700ms; animation-timing-function: var(--vt-ease); }
::view-transition-old(lt-morph),
::view-transition-new(lt-morph) { inline-size: auto; block-size: 100%; }
::view-transition-old(lt-morph) { animation: 240ms ease-in both lt-fade-out; }
::view-transition-new(lt-morph) { animation: 300ms ease-out 60ms both lt-fade-in; }
/* Away from Overview there's no number to fly from, so it moves with its block instead. */
html[data-vt="to-live"]::view-transition-new(lt-morph):only-child { animation: 680ms var(--vt-ease) 130ms both lt-rise-hero; }
html[data-vt="from-live"]::view-transition-old(lt-morph):only-child { animation: 260ms var(--vt-ease-in) 60ms both lt-sink; }

/* Browsers without view transitions still get the live screen rising in. */
@supports not (view-transition-name: none) {
  .lm > * { animation: lt-rise 600ms var(--vt-ease) both; }
  .lm > :nth-child(2) { animation-delay: 60ms; }
  .lm > :nth-child(3) { animation-delay: 120ms; }
  .lm > :nth-child(n + 4) { animation-delay: 180ms; }
}

/* ---------- Subscription & Rate Limits ----------
   Status is never colour alone: warning and critical windows carry a short word next to the
   percent. Warning text uses --warning-text (the gold fill fails AA on small text). */

/* Header row: "Updated 2:35 PM" and Refresh */

.limits-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 -32px 20px;
  padding: 10px 32px 12px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.limits-bar-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.limits-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.limits-updated {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.limits-updated.is-old { color: var(--warning-text); font-weight: 600; }

/* Summary strip on Overview and Tools */

.limits-strip { padding: 16px 20px; }

.limits-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.limits-strip-head strong { font-size: 13px; font-weight: 600; color: var(--text); }

.limits-strip-link {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
}

.limits-strip-link:hover { background: var(--accent-soft); }
.limits-strip-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.limits-strip-list { display: flex; flex-direction: column; }

.limits-row {
  display: grid;
  grid-template-columns: minmax(130px, 220px) minmax(60px, 1fr) 84px minmax(90px, 150px);
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 6px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  text-align: left;
  transition: background-color 0.14s ease;
}

.limits-row:first-child { border-top: 0; }
.limits-row:hover { background: var(--surface-2); }
.limits-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.limits-row-tool { display: flex; align-items: center; gap: 8px; min-width: 0; }
.limits-row-tool > :first-child { flex-shrink: 0; }
.limits-row-tool strong { font-weight: 600; white-space: nowrap; }
.limits-row-account {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-2);
}

.limits-row-bar { height: 5px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.limits-row-bar > span { display: block; height: 100%; border-radius: inherit; }
.limits-row.is-stale .limits-row-bar > span { opacity: 0.5; }

.limits-row-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.limits-row.is-warning .limits-row-value { color: var(--warning-text); }
.limits-row.is-critical .limits-row-value,
.limits-row.is-error .limits-row-value { color: var(--error-text); }
.limits-row.is-session .limits-row-value,
.limits-row.is-empty .limits-row-value { font-weight: 400; color: var(--text-2); }

.limits-row-note {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--text-2);
  text-align: right;
}

.limits-row.is-stale .limits-row-note { color: var(--warning-text); }

@media (max-width: 560px) {
  .limits-row { grid-template-columns: 1fr auto; row-gap: 6px; }
  .limits-row-bar { grid-column: 1 / 3; order: 3; }
  .limits-row-note { grid-column: 1 / 3; order: 4; text-align: left; }
}

/* Empty and error states: one line, plus Retry when it helps */

.limits-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
}

.limits-empty p { margin: 0; min-width: 0; color: var(--text-2); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }

/* Loading skeleton. The pulse only runs when motion is welcome. */

.limits-skeleton { display: grid; }
.skel { display: block; border-radius: 4px; background: var(--surface-3); }
.skel-title { width: 45%; height: 18px; }
.skel-block { width: 100%; height: 40px; }

@media (prefers-reduced-motion: no-preference) {
  .skel { animation: limits-skel 1.4s ease-in-out infinite; }
  @keyframes limits-skel { 50% { opacity: 0.5; } }
}

/* Cards */

.limits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  align-items: start;
  gap: var(--gap);
}

.limit-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 0;
}

.limit-card.is-critical,
.limit-card.is-error { border-color: var(--error-border); }
.limit-card.is-warning { border-color: var(--warning-border); }

.limit-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
}

.limit-card-title { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.limit-card-title > svg, .limit-card-title > :first-child { flex-shrink: 0; }

.limit-card-title-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.limit-card-head h3 {
  margin: 0;
  min-width: 0;
  font-family: var(--font-heading);
  font-size: 15.5px;
  font-weight: 640;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.limit-card-account {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.limit-card-badges {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.limit-plan-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  overflow-wrap: anywhere;
}

/* Stale or Unavailable: a dot and one word. */
.limit-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
}

.limit-status i { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.limit-status.is-stale { color: var(--warning-text); }
.limit-status.is-stale i { background: var(--warning-text); }
.limit-status.is-error { color: var(--error-text); }
.limit-status.is-error i { background: var(--error-text); }

.limit-error-line { margin: 0; font-size: 13px; line-height: 1.45; color: var(--error-text); overflow-wrap: anywhere; }
.limit-none { margin: 0; font-size: 13px; color: var(--text-2); }

/* Windows */

.limit-windows { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }

.limit-window { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.limit-window-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  flex-wrap: wrap;
}

.limit-window-label { flex: 1 1 120px; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }

.limit-window-num { display: inline-flex; align-items: baseline; gap: 8px; margin-left: auto; white-space: nowrap; }

.limit-window-pct {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.limit-window-pct.is-warning { color: var(--warning-text); }
.limit-window-pct.is-critical { color: var(--error-text); }

.limit-flag { font-size: 11.5px; font-weight: 650; }
.limit-flag.is-warning { color: var(--warning-text); }
.limit-flag.is-critical { color: var(--error-text); }

.limit-bar-track { height: 6px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.limit-bar-fill { display: block; height: 100%; border-radius: inherit; transition: width 0.25s ease; }
.limit-card.is-stale .limit-bar-fill { opacity: 0.5; }

.limit-window-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Footer: credit row, notes */

.limit-card-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.limit-credit-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
  font-size: 12.5px;
  color: var(--text-2);
}

.limit-credit-row strong {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.limit-line { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.limit-line.is-error { color: var(--error-text); }

/* ---------- Responsive ---------- */

@media (max-width: 1020px) {
  .split { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(3) { border-left: 0; }
  .kpi:nth-child(n + 3) { border-top: 1px solid var(--border); }
}

@media (max-width: 700px) {
  .limits-grid { grid-template-columns: 1fr; }
  .update-banner { flex-wrap: wrap; }
  .update-banner-actions { width: 100%; justify-content: flex-end; }
  .app { padding: 0 16px 24px; }
  .app-footer { padding-top: 48px; }
  .topbar { margin: 0 -16px; padding: 12px 16px; }
  .updated { display: none; }
  .filters, .limits-bar { margin: 0 -16px 16px; padding: 8px 16px 10px; }
  .filters > * { flex: 1 1 140px; }
  .select-menu, .select-menu-trigger, .cost-field { min-width: 0; width: 100%; }
  .cost-segmented button { flex: 1; }
  .range-picker { flex-basis: 100%; }
  .range-trigger > span > span { display: none; }
  .range-popover { grid-template-columns: 1fr; width: min(340px, calc(100vw - 32px)); }
  .range-options { border-right: 0; border-bottom: 1px solid var(--border); }
  .field-search { margin-left: 0; flex-basis: 100%; }
  .search { min-width: 0; }
  .intro { padding: 22px 0 16px; }
  .panel { padding: 16px; }
  .table-scroll { margin: 0 -16px; padding: 0 6px; }
  .kpi { padding: 14px 14px 12px; }
  .kpi-value { font-size: 23px; }
  .uchart { --axis-w: 38px; }
  .uchart-plot, .uchart-empty { height: 190px; }
  .uchart-tip { min-width: 160px; }
  .idle-list li { grid-template-columns: 1fr; gap: 4px; }
  .table-compact .bar-col { display: none; }
  .sheet { margin-top: 24px; }
  .sheet-head { gap: 14px; }
  .sheet-flame { width: 34px; height: 34px; }
  .week { gap: 9px; }
  .sheet-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet-row, .sheet-badges { grid-template-columns: 1fr; gap: 8px; }
  .sheet-badges .sheet-row-label { padding-top: 0; }
}

@media (max-width: 480px) {
  .limits-strip { padding: 14px 14px; }
}

@media (max-width: 420px) {
  .kpi-value { font-size: 21px; }
  .mix-list { grid-template-columns: 1fr; }
  .topbar-actions .btn span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .spin, .live-toggle svg, .lm-badge i, .lm-tick, .lm-feed-row, .lm > *, .lm-trace > svg, .lm-tape > svg { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  *, *::before, *::after { transition-duration: 0s !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .uchart-seg, .share-bar span, .mix-bar span, .cal-cell, .tool-tag i, .legend-item i, .limit-bar-fill, .limits-row-bar > span { forced-color-adjust: none; }
}