/* ============================================================================
   CLAYKIT - a small, opinionated framework for crafted web apps
   Light theme · warm neutrals · terracotta accent · hairline borders
   ----------------------------------------------------------------------------
   Type:  General Sans (UI; Geist fallback) + Geist Mono (data/labels)
   Icons: Phosphor   <i class="ph ph-house"></i>
   ============================================================================ */

/* ---- 1. Design tokens --------------------------------------------------- */
:root {
  /* Warm neutral surfaces */
  --bg:           #FBFAF8;
  --surface:      #FFFFFF;
  --surface-2:    #F6F4F1;
  --surface-3:    #EFEDE8;
  /* QB-108: one grey hover fill for the whole platform. Deepened to surface-3
     (feedback: surface-2 read as too light). Keyboard focus stays the
     terracotta --ring on :focus-visible — never this token. */
  --hover:        var(--surface-3);

  /* Hairline borders - low-contrast, warm */
  --line:         #EAE7E1;
  --line-strong:  #DEDAD2;

  /* Ink */
  --ink:          #1B1A17;
  --ink-2:        #5C5A54;
  --ink-3:        #908D85;
  --ink-4:        #B6B2A9;

  /* Accent - terracotta / clay */
  --accent:       #C2613D;
  --accent-hover: #AC5333;
  --accent-press: #964728;
  --accent-soft:  #F7ECE6;
  --accent-soft-2:#F1DED4;
  --accent-ink:   #8A3F22;
  --on-accent:    #FFFFFF;

  /* Semantic - muted to sit calmly on warm neutrals */
  --pos:          #3F7A55;   --pos-soft:  #E8F0E9;
  --neg:          #B0463C;   --neg-soft:  #F6E7E5;
  --warn:         #9A7320;   --warn-soft: #F4ECD9;
  --info:         #3C6398;   --info-soft: #E7EDF5;

  /* Radii - restrained, never pill-everything */
  --r-xs: 5px;
  --r-sm: 7px;
  --r:    9px;
  --r-lg: 13px;
  --r-xl: 18px;

  /* Elevation - flat by default; depth only for floating layers */
  --shadow-sm:  0 1px 2px rgba(28,26,22,.05);
  --shadow:     0 4px 14px -4px rgba(28,26,22,.10), 0 2px 5px -2px rgba(28,26,22,.06);
  --shadow-lg:  0 18px 48px -12px rgba(28,26,22,.20), 0 6px 16px -8px rgba(28,26,22,.10);
  --ring:       0 0 0 3px rgba(194,97,61,.22);

  /* Type */
  --font: "General Sans", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: 110ms var(--ease);
  --med:  180ms var(--ease);

  /* Layout */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 60px;
}

/* ---- 2. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }
::selection { background: var(--accent-soft-2); color: var(--accent-ink); }
hr { border: none; border-top: 1px solid var(--line); }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid var(--bg); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ---- 2a. Platform hover (QB-108) --------------------------------------- */
/* One shared --hover token on real interactive surfaces, not a remembered
   class list and not per-component greys. :where() keeps this at :hover-only
   specificity so component colours (primary, danger, soft) still win.
   Selected/active is left to its own fill (AC3); nav selected:hover darkens
   instead of switching to --hover. Disabled controls are skipped (AC4).
   background-color only: no layout shift, pill gradients stay intact.
   Keyboard focus is the terracotta :focus-visible ring, not this token. */
:where(
  button, [role="button"], summary,
  .sug-row, .qrow, .cm-row, .tl-row, .cp-row,
  .nav-item, .nav-acct, .menu-item, .cmdk-item,
  .tab, .utab, .pill, .user-chip, .multisel-item,
  .sys-tile, .pipe-link,
  [data-controller~="rowlink"], tbody tr
):where(
  :not([disabled]):not(.is-disabled):not([aria-disabled="true"]):not(.disabled):not(.sug-head):not(.swatch):not(.assistant-btn):not(.line-add)
):where(
  :not(.active):not(.is-active):not(.is-selected):not([aria-selected="true"]):not([aria-current="page"])
):hover {
  background-color: var(--hover);
  transition: background-color var(--fast);
}

/* ---- 3. Typography ------------------------------------------------------ */
h1,h2,h3,h4 { font-weight: 560; letter-spacing: -.014em; color: var(--ink); line-height: 1.2; }
.display    { font-size: 30px; font-weight: 580; letter-spacing: -.02em; }
.h1 { font-size: 22px; } .h2 { font-size: 18px; } .h3 { font-size: 15px; }
.text-sm { font-size: 13px; } .text-xs { font-size: 12px; }
.muted   { color: var(--ink-2); }
.subtle  { color: var(--ink-3); }
.mono    { font-family: var(--mono); font-feature-settings: "tnum"; }
.num     { font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3);
}
.lead { color: var(--ink-2); font-size: 14px; }

/* ---- 4. Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; padding: 0 13px;
  font-size: 13px; font-weight: 520; letter-spacing: -.006em;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  color: var(--ink);
  white-space: nowrap; user-select: none;
  transition: background var(--fast), border-color var(--fast), color var(--fast), box-shadow var(--fast), transform var(--fast);
}
.btn:active { transform: translateY(.5px); }
.btn .ph { font-size: 17px; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); }

.btn-default { background: var(--surface); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.btn-default:hover { background: var(--hover); border-color: var(--ink-4); }

.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--hover); color: var(--ink); }

.btn-soft { background: var(--accent-soft); color: var(--accent-ink); }
.btn-soft:hover { background: var(--accent-soft-2); }

.btn-pos { background: var(--pos-soft); color: var(--pos); }
.btn-pos:hover { background: color-mix(in srgb, var(--pos) 16%, var(--pos-soft)); }

.btn-danger { background: var(--surface); border-color: var(--line-strong); color: var(--neg); box-shadow: var(--shadow-sm); }
.btn-danger:hover { background: var(--neg-soft); border-color: var(--neg); }

.btn-sm { height: 27px; padding: 0 10px; font-size: 12px; border-radius: var(--r-xs); }
.btn-sm .ph { font-size: 14px; }
.btn-lg { height: 38px; padding: 0 18px; font-size: 14px; }
.btn-icon { width: 32px; padding: 0; }
.btn-icon.btn-sm { width: 27px; }
.btn-block { width: 100%; }

/* ---- 5. Forms ----------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: 12.5px; font-weight: 520; color: var(--ink-2); }
.hint  { font-size: 12px; color: var(--ink-3); }

.input, .select, .textarea {
  width: 100%; height: 33px; padding: 0 11px;
  font-size: 13px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
.textarea { height: auto; min-height: 76px; padding: 8px 11px; resize: vertical; line-height: 1.55; }
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-4); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

.select {
  appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 256 256' fill='%23908D85'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}

/* input with leading icon */
.input-group { position: relative; }
.input-group .ph { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 16px; pointer-events: none; }
.input-group .input { padding-left: 34px; }

/* checkbox / radio */
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; user-select: none; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box {
  width: 16px; height: 16px; flex: none;
  border: 1.5px solid var(--line-strong); border-radius: 4.5px;
  background: var(--surface);
  display: grid; place-items: center;
  transition: all var(--fast);
}
.check .box.round { border-radius: 50%; }
.check .box .ph { font-size: 13px; color: var(--on-accent); opacity: 0; transform: scale(.6); transition: all var(--fast); }
.check input:checked + .box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .box .ph { opacity: 1; transform: scale(1); }
.check input:focus-visible + .box { box-shadow: var(--ring); }

/* toggle */
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch .track { width: 38px; height: 22px; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--line-strong); transition: all var(--med); }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: all var(--med); }
.switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { box-shadow: var(--ring); }

/* ---- 6. Badges / status ------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 21px; padding: 0 8px;
  font-size: 11.5px; font-weight: 520; letter-spacing: -.003em;
  border-radius: 99px;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line);
}
.badge .ph { font-size: 13px; }
.badge.solid { border-color: transparent; }
.badge-accent { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-soft-2); }
.badge-pos { background: var(--pos-soft); color: var(--pos); border-color: transparent; }
.badge-neg { background: var(--neg-soft); color: var(--neg); border-color: transparent; }
.badge-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge-info { background: var(--info-soft); color: var(--info); border-color: transparent; }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ink-4); }
.dot-pos { background: var(--pos); } .dot-neg { background: var(--neg); }
.dot-warn { background: var(--warn); } .dot-info { background: var(--info); }
.dot-accent { background: var(--accent); }

.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }

/* delta numbers */
.delta { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 3px; }
.delta-up { color: var(--pos); } .delta-down { color: var(--neg); }
.delta .ph { font-size: 13px; }

/* ---- 7. Cards / stat tiles ---------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.card-pad { padding: 18px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.card-body { padding: 18px; }
.card-foot { padding: 13px 18px; border-top: 1px solid var(--line); }

.stat { display: flex; flex-direction: column; gap: 11px; }
.stat .stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat .stat-label { font-size: 12.5px; color: var(--ink-2); font-weight: 500; display: flex; align-items: center; gap: 7px; }
.stat .stat-value { font-size: 27px; font-weight: 560; letter-spacing: -.022em; font-variant-numeric: tabular-nums; }
.stat .stat-sub { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.stat-ic { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.stat-ic .ph { font-size: 16px; }
.stat-ic.accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft-2); }

/* donut gauge (conic) */
.donut { --val: 70; --sz: 46px; --tk: 5px; position: relative; width: var(--sz); height: var(--sz); flex: none; }
.donut::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--val) * 1%), var(--surface-3) 0); }
.donut::after { content: ""; position: absolute; inset: var(--tk); border-radius: 50%; background: var(--surface); }
.donut .donut-val { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); z-index: 1; }
.donut.pos::before { background: conic-gradient(var(--pos) calc(var(--val) * 1%), var(--surface-3) 0); }
.donut.warn::before { background: conic-gradient(var(--warn) calc(var(--val) * 1%), var(--surface-3) 0); }
.donut.neg::before { background: conic-gradient(var(--neg) calc(var(--val) * 1%), var(--surface-3) 0); }

/* progress bar */
.progress { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

/* sparkline-ready inline bars */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.bars > i { flex: 1; background: var(--accent-soft-2); border-radius: 2px 2px 0 0; }
.bars > i.hot { background: var(--accent); }

/* ---- 8. Tables ---------------------------------------------------------- */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
table.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table thead th {
  position: sticky; top: 0; z-index: 2;
  text-align: left; font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: .055em; text-transform: uppercase;
  color: var(--ink-3); background: var(--surface-2);
  padding: 11px 16px; border-bottom: 1px solid var(--line);
  white-space: nowrap; user-select: none;
}
.table thead th.sortable { cursor: pointer; }
.table thead th.sortable:hover { color: var(--ink); }
.table thead th .ph { font-size: 12px; opacity: .55; vertical-align: -1px; margin-left: 3px; }
.table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--fast); }
.table tbody tr:hover { background: var(--hover); }
.table .num, .table td.right { text-align: right; font-variant-numeric: tabular-nums; }
.table th.right { text-align: right; }
.table .cell-main { font-weight: 520; }
.table .cell-sub { font-size: 12px; color: var(--ink-3); }
.row-select { width: 44px; text-align: center; }

/* ---- 8b. Pill filter bar ------------------------------------------------- */
/* One horizontal, scrollable row of hairline pills; the active choice is the
   single filled pill. Scales sideways as options grow - never a dropdown. */
.pillbar { display: flex; align-items: center; gap: 8px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px; margin: -2px; min-width: 0; }
.pillbar::-webkit-scrollbar { display: none; }
/* The fill is a two-stop gradient slid left-to-right (liquid fill): it starts
   the instant a pill is pressed (.filling, added by framework.js before the
   navigation lands) and replays as the active pill renders. */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line-strong);
  color: var(--ink-2); font-size: 11.5px; font-weight: 500; white-space: nowrap; flex: none;
  cursor: pointer; user-select: none;
  background-color: var(--surface);
  background-image: linear-gradient(to right, var(--accent) 50%, transparent 50%);
  background-size: 202% 100%; background-position: 100% 0; background-repeat: no-repeat;
  transition: background-position .38s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), background-color var(--fast); }
.pill:hover { background-color: var(--hover); color: var(--ink); }
.pill.active, .pill.filling { background-position: 0 0; border-color: var(--accent); color: var(--on-accent); }
@keyframes pill-fill { from { background-position: 100% 0; color: var(--ink-2); } }
.pill.active { animation: pill-fill .42s var(--ease); }
html[data-turbo-preview] .pill.active { animation: none; }
.pill .ph { font-size: 12px; }
.pillbar-sep { width: 1px; height: 18px; background: var(--line); flex: none; margin: 0 3px; }
/* Mono eyebrow naming a pill group - a HEADING, not an option: dark and
   heavy enough that it can never read as a disabled pill. */
.pillbar-label { font-family: var(--mono); font-size: 10px; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  flex: none; margin: 0 5px 0 7px; user-select: none; }
.pillbar-label:first-child { margin-left: 2px; }

/* Scroll affordance: framework.js wraps an overflowing pillbar in .pillwrap
   and adds edge fades + smooth-scrolling caret buttons that appear only on
   the side with more content. */
.pillwrap { position: relative; display: flex; align-items: center; min-width: 0; flex: 1; }
.pillwrap .pillbar { flex: 1; scroll-behavior: smooth; }
.pillwrap:not(.at-end)::after, .pillwrap:not(.at-start)::before { content: "";
  position: absolute; top: 0; bottom: 0; width: 38px; z-index: 1; pointer-events: none; }
.pillwrap:not(.at-end)::after { right: 0; background: linear-gradient(to right, transparent, var(--bg)); }
.pillwrap:not(.at-start)::before { left: 0; background: linear-gradient(to left, transparent, var(--bg)); }
.pillnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); box-shadow: var(--shadow-sm); display: grid; place-items: center;
  cursor: pointer; color: var(--ink-2); font-size: 13px; padding: 0;
  transition: opacity var(--fast), color var(--fast); }
.pillnav:hover { color: var(--ink); }
.pillnav.left { left: -5px; } .pillnav.right { right: -5px; }
.pillwrap.at-start .pillnav.left, .pillwrap.at-end .pillnav.right { opacity: 0; pointer-events: none; }

/* The slim search that rides with a pillbar: same rounded-full language. */
.search-slim { display: inline-flex; align-items: center; gap: 7px; height: 30px;
  padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); flex: none; transition: border-color var(--fast), box-shadow var(--fast); }
/* Focus stays NEUTRAL - the width expansion is the focus signal, not an
   accent ring (and the global :focus-visible ring is muted on the input). */
.search-slim:focus-within { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.search-slim input:focus-visible { box-shadow: none; }
.search-slim .ph { font-size: 14px; color: var(--ink-3); flex: none; }
.search-slim input { border: none; outline: none; background: none; font: inherit;
  font-size: 12.5px; width: 140px; color: var(--ink);
  transition: width .55s cubic-bezier(.19, 1, .22, 1); }
.search-slim:focus-within input { width: 220px; }
.search-slim input::placeholder { color: var(--ink-4); }

/* ---- 9. Sidebar --------------------------------------------------------- */
/* minmax(0,1fr) pins the single row to the viewport: an auto row would grow
   to the sidebar's content height on short windows and push the rail's tail
   (and the user chip) off-screen instead of letting the nav scroll. */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: minmax(0, 1fr); height: 100vh; overflow: hidden; }
.app.collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

.sidebar { display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); min-width: 0; transition: width var(--med); }
.sidebar-head { display: flex; align-items: center; gap: 10px; height: var(--topbar-h); padding: 0 16px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.brand-mark .ph { font-size: 18px; }
.brand-name { font-weight: 580; letter-spacing: -.02em; font-size: 15px; white-space: nowrap; }
.brand-sub { font-size: 11px; color: var(--ink-3); white-space: nowrap; }

/* min-height:0 lets the nav shrink inside the flex column - without it the
   list refuses to scroll and shoves the user chip off-screen instead. */
.nav { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.nav-section { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); padding: 14px 10px 6px; white-space: nowrap; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  height: 36px; padding: 0 10px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 13.5px; font-weight: 480;
  white-space: nowrap; transition: background var(--fast), color var(--fast);
}
.nav-item .ph { font-size: 18px; flex: none; }
.nav-item:hover { background: var(--hover); color: var(--ink); }
/* Quiet, Mercury/Linear-style active state - neutral fill, not a loud colored pill.
   The accent only carries through the icon, keeping the rail calm. Hover on the
   current item darkens the selected fill so pointer and selected stay distinct. */
.nav-item.active { background: var(--surface-3); color: var(--ink); font-weight: 540; }
.nav-item.active:hover { background: color-mix(in srgb, var(--ink) 6%, var(--surface-3)); }
.nav-item.active .ph { color: var(--accent); }
.nav-item .nav-tail { margin-left: auto; }

/* Collapsible nav branch: a parent row that reveals indented children. */
.nav-branch { display: flex; flex-direction: column; gap: 4px; }
.nav-branch-head { width: 100%; background: none; border: none; cursor: pointer; font: inherit; text-align: left; }
.nav-branch .nav-caret { font-size: 13px; transition: transform var(--fast); }
.nav-branch.open .nav-caret { transform: rotate(90deg); }
.nav-branch-body { display: none; margin-left: 19px; padding-left: 8px; border-left: 1px solid var(--line); }
.nav-branch.open .nav-branch-body { display: flex; flex-direction: column; gap: 4px; }
.nav-branch-body .nav-item { height: 32px; font-size: 13px; }
.nav-branch-body .nav-item .ph { font-size: 16px; }

.sidebar-foot { padding: 12px; border-top: 1px solid var(--line); }

.app.collapsed .brand-text, .app.collapsed .nav-section, .app.collapsed .nav-label, .app.collapsed .nav-tail, .app.collapsed .user-text { display: none; }
.app.collapsed .nav-item { justify-content: center; padding: 0; }
.app.collapsed .nav-branch-body { margin-left: 0; padding-left: 0; border-left: none; }
.app.collapsed .sidebar-head { justify-content: center; padding: 0; }

/* user chip */
.user-chip { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm); transition: background var(--fast); cursor: pointer; }
.user-chip:hover { background: var(--hover); }
.avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 560; color: var(--accent-ink); background: var(--accent-soft-2); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.user-name { font-size: 13px; font-weight: 520; white-space: nowrap; }
.user-mail { font-size: 11px; color: var(--ink-3); white-space: nowrap; }

/* ---- 10. Main / topbar / breadcrumbs ------------------------------------ */
.main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.topbar { display: flex; align-items: center; gap: 14px; height: var(--topbar-h); padding: 0 22px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: saturate(140%) blur(8px); flex: none; }
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-3); min-width: 0; }
.crumbs a { color: var(--ink-3); transition: color var(--fast); white-space: nowrap; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--ink-4); font-size: 13px; }
.crumbs .here { color: var(--ink); font-weight: 520; }
.spacer { flex: 1; }
.content { flex: 1; overflow-y: auto; padding: 26px 28px 48px; }
.content-max { max-width: 1180px; margin: 0 auto; }

/* page header */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 4px; }
.page-title { font-size: 24px; font-weight: 580; letter-spacing: -.022em; }
.page-desc { color: var(--ink-2); font-size: 14px; margin-top: 4px; }

/* ---- 11. Tabs / segmented ----------------------------------------------- */
.tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--line); }
.tab { position: relative; padding: 11px 12px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); border-radius: var(--r-xs) var(--r-xs) 0 0; transition: color var(--fast), background var(--fast); }
.tab:hover { color: var(--ink); background: var(--hover); }
.tab.active { color: var(--ink); font-weight: 540; }
.tab.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.tab .badge { margin-left: 6px; }

.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.segmented button { padding: 5px 11px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); border-radius: var(--r-xs); transition: all var(--fast); }
.segmented button:hover { color: var(--ink); }
.segmented button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 540; }

/* ---- 12. Dropdown menu -------------------------------------------------- */
.menu { position: relative; display: inline-flex; }
.menu-pop {
  position: absolute; top: calc(100% + 6px); min-width: 200px; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: 6px; opacity: 0; transform: translateY(-4px) scale(.98); pointer-events: none;
  transform-origin: top right; transition: opacity var(--fast), transform var(--fast);
}
.menu-pop.right { right: 0; } .menu-pop.left { left: 0; }
.menu.open .menu-pop { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-xs); font-size: 13.5px; color: var(--ink); cursor: pointer; transition: background var(--fast); white-space: nowrap; }
.menu-item .ph { font-size: 16px; color: var(--ink-3); }
.menu-item:hover { background: var(--hover); }
.menu-item .k { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.menu-item.danger { color: var(--neg); } .menu-item.danger .ph { color: var(--neg); }
.menu-item.danger:hover { background: var(--neg-soft); }
.menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.menu-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); padding: 8px 10px 4px; }

/* ---- 13. Modal & Drawer ------------------------------------------------- */
.scrim { position: fixed; inset: 0; z-index: 100; background: rgba(28,26,22,.34); backdrop-filter: blur(2px); opacity: 0; transition: opacity var(--med); display: grid; place-items: center; padding: 24px; }
.scrim.open { opacity: 1; }
.scrim:not(.open) { pointer-events: none; }

.modal { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); transform: translateY(8px) scale(.985); opacity: 0; transition: all var(--med); overflow: hidden; }
.scrim.open .modal { transform: none; opacity: 1; }
.modal-head { padding: 20px 22px 0; }
.modal-title { font-size: 17px; font-weight: 560; letter-spacing: -.015em; }
.modal-desc { color: var(--ink-2); font-size: 13.5px; margin-top: 5px; }
.modal-body { padding: 18px 22px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 22px; border-top: 1px solid var(--line); background: var(--surface-2); }

/* drawer slides from right */
.drawer-scrim { position: fixed; inset: 0; z-index: 100; background: rgba(28,26,22,.34); backdrop-filter: blur(2px); opacity: 0; transition: opacity var(--med); }
.drawer-scrim.open { opacity: 1; } .drawer-scrim:not(.open) { pointer-events: none; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 101; width: 420px; max-width: 92vw; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform var(--med); display: flex; flex-direction: column; }
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex: none; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
.drawer-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 9px; flex: none; }

/* ---- 14. Toasts --------------------------------------------------------- */
.toast-host { position: fixed; bottom: 22px; right: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.toast {
  display: flex; align-items: flex-start; gap: 11px;
  min-width: 280px; max-width: 380px; padding: 13px 14px;
  background: var(--ink); color: #fff; border-radius: var(--r); box-shadow: var(--shadow-lg);
  transform: translateY(8px); opacity: 0; transition: all var(--med);
}
.toast.in { transform: none; opacity: 1; }
.toast .toast-ic { font-size: 18px; flex: none; margin-top: 1px; }
.toast .toast-ic.pos { color: #86d6a0; } .toast .toast-ic.neg { color: #f0a59c; } .toast .toast-ic.accent { color: #e9a986; }
.toast .toast-title { font-size: 13.5px; font-weight: 540; }
.toast .toast-msg { font-size: 12.5px; color: rgba(255,255,255,.72); margin-top: 2px; }
.toast .toast-x { margin-left: auto; color: rgba(255,255,255,.5); font-size: 16px; cursor: pointer; }
.toast .toast-x:hover { color: #fff; }

/* ---- 15. Tooltip -------------------------------------------------------- */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(3px); white-space: nowrap; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 480; padding: 5px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: all var(--fast); z-index: 80; }
[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- 16. Utilities ------------------------------------------------------ */
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.center { align-items: center; justify-content: center; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
.grid { display: grid; }
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.hide { display: none !important; }
.divider { height: 1px; background: var(--line); }
.gsec { padding: 28px 0; border-bottom: 1px solid var(--line); }
.gsec:first-of-type { padding-top: 4px; }
.gsec > .eyebrow { display: block; margin-bottom: 16px; }
.kbd { font-family: var(--mono); font-size: 11px; padding: 2px 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-2); color: var(--ink-2); }
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: sk 1.4s infinite; border-radius: 6px; }
@keyframes sk { to { background-position: -200% 0; } }

.grid-kpi > * { min-width: 0; }
@media (max-width: 1080px) {
  .grid-kpi { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 920px) {
  .app { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
}
@media (max-width: 560px) {
  .grid-kpi { grid-template-columns: 1fr !important; }
}

/* ---- 17. Command palette (⌘K) ------------------------------------------ */
.cmdk-scrim { position: fixed; inset: 0; z-index: 150; background: rgba(28,26,22,.30); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding-top: 13vh; opacity: 0; transition: opacity var(--fast); }
.cmdk-scrim.open { opacity: 1; } .cmdk-scrim:not(.open) { pointer-events: none; }
.cmdk { width: 100%; max-width: 580px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; transform: translateY(-10px) scale(.985); opacity: 0; transition: transform var(--med), opacity var(--med); }
.cmdk-scrim.open .cmdk { transform: none; opacity: 1; }
.cmdk-top { display: flex; align-items: center; gap: 11px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.cmdk-top > .ph { font-size: 19px; color: var(--ink-3); }
.cmdk-input { flex: 1; border: none; outline: none; background: none; font-size: 15.5px; letter-spacing: -.01em; }
.cmdk-input::placeholder { color: var(--ink-4); }
.cmdk-list { max-height: 46vh; overflow-y: auto; padding: 7px; }
.cmdk-group { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); padding: 11px 10px 5px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: var(--r-sm); cursor: pointer; font-size: 13.5px; scroll-margin: 8px; }
.cmdk-item > .ph:first-child { font-size: 17px; color: var(--ink-3); width: 18px; text-align: center; }
.cmdk-item .cmdk-sub { color: var(--ink-3); font-size: 12px; }
.cmdk-item .cmdk-tail { margin-left: auto; display: flex; gap: 5px; align-items: center; }
.cmdk-item.active { background: var(--accent-soft); color: var(--accent-ink); }
.cmdk-item.active > .ph:first-child, .cmdk-item.active .cmdk-sub { color: var(--accent); }
.cmdk-empty { padding: 34px; text-align: center; color: var(--ink-3); font-size: 13px; }
.cmdk-foot { display: flex; align-items: center; gap: 16px; padding: 9px 15px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 11.5px; color: var(--ink-3); }
.cmdk-foot .row { gap: 6px; }
.cmdk-foot .kbd { font-size: 10px; padding: 1px 5px; }
.search-k { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; }

/* ---- 18. Appearance / tweak panel -------------------------------------- */
.pop-panel { position: fixed; z-index: 90; width: 286px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; opacity: 0; transform: translateY(-6px) scale(.99); transform-origin: top right; pointer-events: none; transition: opacity var(--fast), transform var(--fast); }
.pop-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.pop-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.pop-head .h3 { font-size: 13.5px; }
.pop-row { padding: 13px 15px; }
.pop-row + .pop-row { border-top: 1px solid var(--line); }
.pop-label { font-size: 12.5px; font-weight: 520; color: var(--ink-2); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.pop-label .ph { font-size: 15px; color: var(--ink-3); }
.swatches { display: flex; gap: 9px; }
.swatch { width: 25px; height: 25px; border-radius: 50%; cursor: pointer; border: none; transition: transform var(--fast); }
.swatch:hover { transform: scale(1.1); }
.swatch.active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px currentColor; }
.pop-panel .segmented { display: flex; width: 100%; }
.pop-panel .segmented button { flex: 1; }

/* density: compact */
[data-density="compact"] { --topbar-h: 52px; }
[data-density="compact"] body { font-size: 13px; }
[data-density="compact"] .content { padding: 18px 22px 40px; }
[data-density="compact"] .card-pad, [data-density="compact"] .card-body { padding: 13px; }
[data-density="compact"] .card-head { padding: 11px 14px; }
[data-density="compact"] .table tbody td, [data-density="compact"] .table thead th { padding: 8px 14px; }
[data-density="compact"] .nav-item { height: 32px; }
[data-density="compact"] .btn { height: 32px; }
[data-density="compact"] .stat-value { font-size: 23px; }
[data-density="compact"] .page-title { font-size: 21px; }
[data-density="compact"] .stat { gap: 8px; }

/* reduce motion */
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { transition: none !important; animation: none !important; }

/* ---- 19. Top progress bar ---------------------------------------------- */
.loadbar { position: fixed; top: 0; left: 0; height: 2.5px; width: 0; background: var(--accent); z-index: 300; opacity: 0; box-shadow: 0 0 8px var(--accent); transition: width .35s var(--ease), opacity .3s var(--ease); }

/* ---- 20. Quiet data list (borderless - Linear / Mercury) --------------- */
.qlist { width: 100%; }
.qhead, .qrow { display: grid; grid-template-columns: var(--cols, 1fr); align-items: center; gap: 16px; }
.qhead { padding: 0 8px 11px; }
.qhead > * { font-size: 12.5px; font-weight: 460; color: var(--ink-3); letter-spacing: -.003em; }
.qhead > .right, .qrow > .right { text-align: right; justify-self: end; }
.qrow { position: relative; padding: 13px 8px; border-radius: 8px; transition: background var(--fast); cursor: pointer; }
.qrow:hover { background: var(--hover); }
.qrow + .qrow::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: 1px; background: var(--line-strong); }
.qrow:hover::before, .qrow:hover + .qrow::before { opacity: 0; }
.qgap { height: 22px; }

.cell-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cell-name .nm { font-weight: 500; letter-spacing: -.008em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-name .nm-sub { font-size: 12px; color: var(--ink-3); font-weight: 400; margin-top: 1px; }

/* Dense list mode: a notch smaller and tighter so a 13" screen fits the
   whole row without zooming. Opt in per list (the index tables). */
.qlist-dense .qhead, .qlist-dense .qrow { gap: 12px; }
.qlist-dense .qrow { padding: 11px 8px; }
.qlist-dense .qrow { font-size: 13px; }
.qlist-dense .cell-name .nm { font-size: 13px; }
.qlist-dense .cell-name .nm-sub { font-size: 11.5px; }
.qlist-dense .text-sm { font-size: 12.5px; }
.qlist-dense .health { font-size: 12px; }

/* Expanded rows: names get their full length back, wrapping instead of
   ellipsizing (the header's expand toggle flips this; wraprows remembers). */
.qlist-wrap .cell-name .nm { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.qlist-wrap .qrow { align-items: start; }
.qlist-wrap .qrow > div:not(.cell-name), .qlist-wrap .qrow > label { align-self: center; }
.cell-name.parent .nm { font-weight: 560; }
.glyph { width: 22px; height: 22px; flex: none; display: grid; place-items: center; font-size: 18px; }

/* tree connectors (drawn as absolute children of .qrow) */
.vline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px solid var(--line-strong); pointer-events: none; }
.elbow { position: absolute; top: 0; height: 50%; width: 22px; border-left: 1.5px solid var(--line-strong); border-bottom: 1.5px solid var(--line-strong); border-bottom-left-radius: 9px; pointer-events: none; }

/* health / status text */
.health { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 480; color: var(--ink-2); }
.health .ph { font-size: 15px; }
.health.pos { color: var(--pos); } .health.warn { color: var(--warn); } .health.neg { color: var(--neg); }

/* count with leading icon */
.count { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.count .ph { font-size: 15px; color: var(--ink-4); }
.count b { font-weight: 500; color: var(--ink); }

/* multi-dot state group */
.states { display: inline-flex; align-items: center; gap: 14px; font-variant-numeric: tabular-nums; }
.states span { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-2); }

/* trend chevrons */
.trend { font-size: 18px; line-height: 1; }
.trend.up { color: var(--pos); } .trend.flat { color: var(--ink-4); } .trend.down { color: var(--neg); }

/* directional transaction icon (Mercury) */
.txn-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-size: 13px; }

/* ---- 21. Superscript currency ------------------------------------------ */
.amt { font-variant-numeric: tabular-nums; letter-spacing: -.012em; }
.amt .cents { font-size: .6em; vertical-align: .42em; margin-left: .5px; }
.amt.big { font-size: 33px; font-weight: 560; letter-spacing: -.026em; }
.amt.pos { color: var(--pos); }

/* ---- 22. Stat strip (borderless KPI) ----------------------------------- */
.statstrip { display: flex; flex-wrap: wrap; }
.statstrip > div { padding: 1px 28px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.statstrip > div:first-child { padding-left: 0; border-left: none; }
.statstrip .ss-label { font-size: 12.5px; color: var(--ink-3); font-weight: 480; }
.statstrip .ss-val { font-size: 26px; font-weight: 560; letter-spacing: -.022em; font-variant-numeric: tabular-nums; line-height: 1; }

/* ---- 23. Underlined page tabs (Mercury) -------------------------------- */
.utabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); }
.utab { position: relative; padding: 0 1px 13px; font-size: 14px; font-weight: 500; color: var(--ink-3); cursor: pointer; transition: color var(--fast); }
.utab:hover { color: var(--ink); background-color: var(--hover); }
.utab.active { color: var(--ink); }
.utab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--ink); border-radius: 2px; }

/* ---- 24. Sidebar account sublist with values (Mercury) ----------------- */
.nav-acct { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px 6px 42px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--fast); white-space: nowrap; }
.nav-acct:hover { background: var(--hover); }
.nav-acct.active { background: var(--surface-3); }
.nav-acct.active:hover { background: color-mix(in srgb, var(--ink) 6%, var(--surface-3)); }
.nav-acct .na-name { font-size: 13px; color: var(--ink-2); font-weight: 480; }
.nav-acct.active .na-name { color: var(--ink); font-weight: 520; }
.nav-acct .na-val { font-size: 11.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; }