/* Nomad CRM · Dashboard and Nomad Leads
 * Visual system: tokens/tokens.json, built to tokens/dist/tokens.css (docs/visual-system.md).
 * Every value below is a token; primitives (--p-*) appear only in the two documented specimens,
 * the theme preview and the accent swatch. */

/* Tokens come from ../tokens/dist/tokens.css (generated from tokens/tokens.json).
 * This file holds components only: every colour, length, radius, z-index and duration is a token. */

/* ---------- Base ----------
 * The reset, body type, focus, selection, scrollbar, .sr, the skip link and the reduced-motion rules
 * come from ../base/base.css (the package's base layer), loaded before this file. */

svg.i { width: var(--icon); height: var(--icon); flex: none; stroke: currentColor; fill: none; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
svg.i.sm { width: var(--icon-sm); height: var(--icon-sm); }
svg.i.xs { width: var(--icon-xs); height: var(--icon-xs); stroke-width: var(--icon-stroke-bold); }
svg.i.lg { width: var(--icon-lg); height: var(--icon-lg); }
svg.i.xl { width: var(--icon-2xl); height: var(--icon-2xl); stroke-width: var(--icon-stroke-light); }

.num, .tnum, time { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-0); }
.nw { white-space: nowrap; }
.tab-short { display: none; }

/* ---------- Status icons (color-system.md §D, §H) ---------- */
svg.st { width: var(--s-3-5); height: var(--s-3-5); flex: none; display: block; }
svg.st.sm { width: var(--s-3); height: var(--s-3); }
svg.st[data-s="new"] { color: var(--status-new); }
svg.st[data-s="contacted"] { color: var(--status-contacted); }
svg.st[data-s="negotiating"] { color: var(--status-negotiating); }
svg.st[data-s="won"] { color: var(--status-won); }
svg.st[data-s="lost"] { color: var(--status-lost); }
.st-arch { color: var(--status-archived); }

/* ---------- Shell ---------- */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100dvh; }
.sidebar {
  position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column;
  padding: var(--s-2) var(--s-2) var(--s-2-5);
  background: var(--bg-side);
  border-right: var(--bw) solid var(--border);
  overflow-y: auto;
}
.main-wrap { min-width: 0; display: flex; flex-direction: column; background: var(--surface); }
.main { flex: 1; outline: none; }
.scrim { display: none; }

.side-head { display: flex; align-items: center; height: var(--bar-md); padding: 0 var(--s-0-5); margin-bottom: var(--s-1-5); }
.ws { display: flex; align-items: center; gap: var(--so-9); height: var(--h-md); padding: 0 var(--s-1-5); border-radius: var(--r-sm); min-width: 0; transition: background-color var(--dur) var(--curve); }
.ws:hover { background: var(--surface-3); }
.ws-mark { width: var(--h-xs); height: var(--h-xs); border-radius: var(--r-sm); background: var(--ws-mark); color: var(--on-ws-mark); display: grid; place-items: center; flex: none; }
.ws-mark svg { width: var(--so-13); height: var(--so-13); stroke-width: var(--icon-stroke-mark); }
.ws-name { font-weight: var(--fw-semibold); font-size: var(--fs); letter-spacing: var(--ls-section); white-space: nowrap; }

.nav-group { display: flex; flex-direction: column; gap: var(--s-px); }
.nav-group + .nav-group { margin-top: var(--s-3-5); }
.nav-label { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-3); padding: 0 var(--s-2); height: var(--s-6); display: flex; align-items: center; }
.nav-item {
  display: flex; align-items: center; gap: var(--nav-gap);
  height: var(--side-row); padding: 0 var(--s-2); border-radius: var(--r-sm);
  color: var(--text-2); font-weight: var(--fw-book); font-size: var(--fs);
  transition: background-color var(--dur) var(--curve), color var(--dur) var(--curve);
}
.nav-item > .i { color: var(--text-4); transition: color var(--dur) var(--curve); }
.nav-item .lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item:hover { background: var(--surface-3); color: var(--text); }
.nav-item:hover > .i { color: var(--text-2); }
.nav-item[aria-current="page"] { background: var(--current-bg); color: var(--text); font-weight: var(--fw-medium); box-shadow: var(--ring-active); }
.nav-item[aria-current="page"] > .i { color: var(--text-2); }
.nav-item .count { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; font-weight: var(--fw-book); }
.nav-item .pill { min-width: var(--so-18); height: var(--s-4); padding: 0 var(--so-5); border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.nav-item.sub { padding-left: var(--nav-sub-indent); }
.nav-item.sub > .i { width: var(--s-3-5); height: var(--s-3-5); }
.nav-item .tag-out { font-size: var(--fs-2xs); color: var(--text-3); font-weight: var(--fw-book); white-space: nowrap; }

.side-foot { margin-top: auto; padding-top: var(--s-3-5); display: flex; flex-direction: column; gap: var(--s-1-5); }
.clock { display: grid; grid-template-columns: auto 1fr; gap: var(--s-px) var(--s-2); padding: var(--s-2); font-size: var(--fs-xs); line-height: var(--lh-17); color: var(--text-3); border-top: var(--bw) solid var(--border); }
.clock b { font-weight: var(--fw-medium); color: var(--text-2); font-variant-numeric: tabular-nums; }
.me { display: flex; align-items: center; gap: var(--so-9); padding: var(--s-1) var(--s-2); min-height: var(--s-10); }
.me-text { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: var(--lh-17); }
.me-name { font-size: var(--fs); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-role { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  display: flex; align-items: center; gap: var(--s-2);
  height: var(--topbar-h); padding: 0 var(--s-3) 0 var(--s-4);
  background: var(--surface); border-bottom: var(--bw) solid var(--border);
}
.topbar .grow { flex: 1; min-width: var(--s-2); }
.topbar .nav-toggle, .topbar .tb-icon { display: none; }
.crumbs { display: flex; align-items: center; gap: var(--s-0-5); min-width: 0; font-size: var(--fs); }
.crumbs a, .crumbs span.c { display: inline-flex; align-items: center; height: var(--h-sm); padding: 0 var(--s-1-5); border-radius: var(--r-sm); color: var(--text-2); white-space: nowrap; }
.crumbs a { transition: background-color var(--dur) var(--curve), color var(--dur) var(--curve); }
.crumbs a:hover { background: var(--surface-2); color: var(--text); }
.crumbs .cur { color: var(--text); font-weight: var(--fw-medium); min-width: 0; white-space: nowrap; padding: 0 var(--s-1-5); overflow: hidden; text-overflow: ellipsis; display: block; line-height: var(--lh-26); }
.crumbs .sep { color: var(--text-4); padding: 0 var(--s-px); user-select: none; }
.crumb-nav { display: flex; align-items: center; gap: var(--s-0-5); margin-left: var(--s-1-5); }
.crumb-nav .pos { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; margin-right: var(--s-1); white-space: nowrap; }
.search-trigger {
  display: inline-flex; align-items: center; gap: var(--s-2);
  width: var(--search-w); height: var(--h-sm); padding: 0 var(--s-1) 0 var(--s-2);
  background: var(--sunken); border: var(--bw) solid var(--border); border-radius: var(--r-sm);
  color: var(--text-3); font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--curve), color var(--dur) var(--curve);
}
.search-trigger { white-space: nowrap; min-width: 0; flex: 0 1 var(--search-w); }
.search-trigger > .i { color: var(--text-4); flex: none; }
.search-trigger:hover { border-color: var(--border-strong); color: var(--text-2); }
.search-trigger .st-l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.search-trigger .kbd { margin-left: auto; flex: none; white-space: nowrap; }

.kbd {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-0-5);
  height: var(--kbd-h); min-width: var(--kbd-h); padding: 0 var(--so-5);
  font-family: var(--mono); font-size: var(--fs-2xs); font-weight: var(--fw-medium); line-height: var(--lh-1);
  color: var(--text-2); background: var(--surface);
  border: var(--bw) solid var(--border); border-bottom-width: var(--bw-ring); border-radius: var(--r-xs);
}

/* Mobile bottom nav */
.bnav { display: none; }

/* ---------- Page scaffolding ---------- */
.page { padding: var(--page-pad-t) var(--page-pad-x) var(--page-pad-b); max-width: var(--page-max); margin: 0 auto; }
.page-head { display: flex; align-items: flex-start; gap: var(--page-head-gap); margin-bottom: var(--page-head-mb); }
.page-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.page-title { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-title); line-height: var(--lh-1-2); outline: none; }
.page-sub { color: var(--text-2); font-size: var(--fs); margin-top: var(--s-1); }
.page-sub b { color: var(--text); font-weight: var(--fw-medium); }
.page-actions { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; flex: none; }
.section-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: var(--ls-section); }

/* ---------- Buttons & controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1-5);
  height: var(--h-md); padding: 0 var(--btn-pad-x); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; line-height: var(--lh-1);
  background: var(--surface); color: var(--text);
  border: var(--bw) solid var(--border-strong); box-shadow: var(--elev-sm);
  transition: background-color var(--dur) var(--curve), border-color var(--dur) var(--curve), color var(--dur) var(--curve);
}
.btn .i { color: var(--text-2); margin-left: calc(var(--s-0-5) * -1); }
.btn:hover { background: var(--surface-2); }
.btn:active { background: var(--surface-3); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: var(--elev-inset); }
.btn.primary .i, .btn.danger .i { color: currentColor; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.primary:active { background: var(--accent-pressed); }
.btn.danger { background: var(--danger); color: var(--on-danger); border-color: transparent; box-shadow: var(--elev-inset); }
.btn.danger:hover { background: var(--danger-hover); }
/* Dark: white on the light dark-theme red is ~3.2:1, so the label uses --text-inv (about 7:1). */
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); height: var(--h-sm); padding: 0 var(--btn-pad-x-ghost); font-size: var(--fs-xs); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.ghost:active { background: var(--surface-3); }
.btn.sm { height: var(--h-sm); padding: 0 var(--btn-pad-x-sm); gap: var(--so-5); }
.btn.lg { height: var(--h-lg); padding: 0 var(--btn-pad-x-lg); font-size: var(--fs); }
.btn .n { min-width: var(--s-4); height: var(--s-4); padding: 0 var(--s-1); border-radius: var(--r-xs); background: var(--accent-soft); color: var(--text); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.btn.on { background: var(--accent-soft); color: var(--text); }
/* Disabled: fixed readable colours, never opacity (owner decision 2026-09-28, confirmed). Every variant but
   ghost takes the disabled fill and outline; ghost keeps no fill. No hover or press change. */
.btn:disabled, .btn:disabled:hover, .btn:disabled:active,
.btn.primary:disabled, .btn.primary:disabled:hover, .btn.primary:disabled:active,
.btn.danger:disabled, .btn.danger:disabled:hover, .btn.danger:disabled:active { background: var(--disabled-bg); color: var(--disabled-fg); border-color: var(--disabled-border); box-shadow: none; }
.btn.ghost:disabled, .btn.ghost:disabled:hover, .btn.ghost:disabled:active { background: transparent; border-color: transparent; }
.btn:disabled .i { color: currentColor; }

.icon-btn {
  display: inline-grid; place-items: center; width: var(--h-sm); height: var(--h-sm); border-radius: var(--r-sm); flex: none;
  color: var(--text-2); transition: background-color var(--dur) var(--curve), color var(--dur) var(--curve);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn:active { background: var(--surface-3); }
.icon-btn:disabled, .icon-btn:disabled:hover, .icon-btn:disabled:active { background: none; color: var(--disabled-icon); }
.icon-btn.md { width: var(--h-md); height: var(--h-md); }

.seg { display: inline-flex; align-items: center; height: var(--s-7); padding: var(--s-0-5); gap: var(--s-px); background: var(--surface-3); border-radius: var(--r-sm); }
.seg button { display: inline-flex; align-items: center; gap: var(--s-1-5); height: var(--s-6); padding: 0 var(--so-9); border-radius: var(--r-chip); color: var(--text-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap; transition: color var(--dur) var(--curve), background-color var(--dur) var(--curve); }
.seg button .i { color: currentColor; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"], .seg button[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--ring-seg); }
.seg button:disabled, .seg button:disabled:hover { color: var(--disabled-fg); }
.seg.icons button { width: var(--h-sm); padding: 0; justify-content: center; }
.seg .c { color: var(--text-3); font-variant-numeric: tabular-nums; }

.input, .textarea, .select {
  width: 100%; height: var(--h-sm); padding: 0 var(--s-2-5);
  background: var(--surface); color: var(--text);
  border: var(--bw) solid var(--border-strong); border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--curve), box-shadow var(--dur) var(--curve);
}
.textarea { height: auto; min-height: var(--textarea-min-h); padding: var(--s-2) var(--s-2-5); resize: vertical; line-height: var(--lh-1-55); font-size: var(--fs); }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:hover, .textarea:hover { border-color: var(--border-hover); }
.input:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 var(--focus-field-w) var(--focus-field); outline: none; }
.input:disabled, .textarea:disabled, .select:disabled,
.input:disabled:hover, .textarea:disabled:hover, .select:disabled:hover { background: var(--disabled-bg); color: var(--disabled-fg); border-color: var(--disabled-border); cursor: not-allowed; }
.input:disabled::placeholder, .textarea:disabled::placeholder { color: var(--disabled-fg); }
.field { display: flex; flex-direction: column; gap: var(--s-1-5); }
.field label, .field .label { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.field .help { font-size: var(--fs-xs); color: var(--text-3); }
.field .err { font-size: var(--fs-xs); color: var(--danger); display: flex; gap: var(--so-5); align-items: center; }
.field [aria-invalid="true"] { border-color: var(--danger-border); box-shadow: 0 0 0 var(--focus-field-w) var(--danger-bg); }

.search { position: relative; display: flex; align-items: center; min-width: 0; }
.search > .i { position: absolute; left: var(--so-9); color: var(--text-4); pointer-events: none; }
.search .input { padding-left: var(--so-30); padding-right: var(--s-7); }
.search .clear { position: absolute; right: var(--s-px); width: var(--s-6); height: var(--s-6); }
.search .input::-webkit-search-cancel-button { display: none; }

/* ---------- Status, badges, labels ---------- */
/* Status chip: bordered, icon in its status hue, label in --text */
.chip-st {
  display: inline-flex; align-items: center; gap: var(--so-5); height: var(--chip-h); padding: 0 var(--chip-pad-x) 0 var(--so-5);
  border: var(--bw) solid var(--border); border-radius: var(--r-chip); background: var(--surface);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text); white-space: nowrap; line-height: var(--lh-1); vertical-align: middle;
}
/* Property value button: borderless, used for status and assignee in rows and property lists */
.prop {
  display: inline-flex; align-items: center; gap: var(--so-7); min-width: 0; max-width: 100%;
  height: var(--h-sm); padding: 0 var(--s-1-5); margin-left: calc(var(--s-1-5) * -1); border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--text); white-space: nowrap;
  transition: background-color var(--dur) var(--curve);
}
button.prop:hover { background: var(--surface-2); }
button.prop[aria-expanded="true"] { background: var(--surface-3); }
.prop .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.prop .nm.muted { color: var(--text-3); }
.prop .chev { color: var(--text-4); opacity: 0; transition: opacity var(--dur) var(--curve); margin-left: calc(var(--s-0-5) * -1); }
button.prop:hover .chev, button.prop:focus-visible .chev, button.prop[aria-expanded="true"] .chev { opacity: 1; }
.prop.st-only { width: var(--s-7); justify-content: center; padding: 0; margin: 0; }

.badge {
  display: inline-flex; align-items: center; gap: var(--so-5); height: var(--chip-h); padding: 0 var(--chip-pad-x);
  border-radius: var(--r-chip); font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap; line-height: var(--lh-1); flex: none;
  background: var(--surface-2); color: var(--text-2); box-shadow: inset 0 0 0 var(--bw) var(--border);
}
.badge.accent { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.badge.green { background: var(--success-bg); color: var(--success); box-shadow: none; }
.badge.amber { background: var(--warning-bg); color: var(--warning); box-shadow: none; }
.badge.red { background: var(--danger-bg); color: var(--danger); box-shadow: none; }
.badge.violet { background: var(--violet-soft); color: var(--violet); box-shadow: none; }
.badge.sm { height: var(--kbd-h); padding: 0 var(--so-5); font-size: var(--fs-2xs); }

/* Label: bordered pill with a 6px dot in the label hue */
.label {
  display: inline-flex; align-items: center; gap: var(--s-1-5); height: var(--chip-h); padding: 0 var(--chip-pad-x) 0 var(--s-1-5);
  border-radius: var(--r-chip); background: var(--surface); box-shadow: inset 0 0 0 var(--bw) var(--border);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-2); white-space: nowrap; line-height: var(--lh-1); flex: none;
}
.label::before { content: ""; width: var(--s-1-5); height: var(--s-1-5); border-radius: 50%; background: var(--c, var(--gray)); flex: none; }

/* Waiting too long for a reply: due-soon amber, overdue red (§H) */
.wait { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--waiting); white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; }
.wait.late { color: var(--overdue); }
.warn-text { color: var(--waiting); }
.late-text { color: var(--overdue); }

.avatar {
  --c: var(--gray);
  width: var(--av-sm); height: var(--av-sm); border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  font-size: calc(var(--av-sm) * var(--av-initials)); font-weight: var(--fw-semibold); letter-spacing: var(--ls-initials); line-height: var(--lh-1);
  background: color-mix(in srgb, var(--c) var(--av-tint), var(--surface));
  color: color-mix(in srgb, var(--c) var(--av-ink), var(--text));
  box-shadow: 0 0 0 var(--av-ring) var(--surface);
}
.avatar.md { width: var(--av-md); height: var(--av-md); font-size: calc(var(--av-md) * var(--av-initials)); }
.avatar.lg { width: var(--av-lg); height: var(--av-lg); font-size: calc(var(--av-lg) * var(--av-initials)); }
.avatar.xl { width: var(--av-xl); height: var(--av-xl); font-size: calc(var(--av-xl) * var(--av-initials)); }
.avatar.none { background: transparent; color: var(--text-4); box-shadow: none; border: var(--bw-dash) dashed var(--border-strong); }
.avatar.none svg { width: var(--icon-2xs); height: var(--icon-2xs); stroke-width: var(--icon-stroke-bold); }
.avatar.lg.none svg, .avatar.md.none svg { width: var(--icon-xs); height: var(--icon-xs); }
.avatar.form { border-radius: var(--r-chip); background: var(--surface-2); color: var(--text-3); box-shadow: inset 0 0 0 var(--bw) var(--border); }
.avatar.form svg { width: var(--so-11); height: var(--so-11); stroke-width: var(--icon-stroke-bold); }

.muted { color: var(--text-3); }
.sec { color: var(--text-2); }
.link { color: var(--accent); font-weight: var(--fw-medium); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: var(--so-3); transition: text-decoration-color var(--dur) var(--curve); }
.link:hover { text-decoration-color: currentColor; }
.head-link { display: inline-flex; align-items: center; gap: var(--s-1); height: var(--h-sm); padding: 0 var(--s-2); border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap; transition: background-color var(--dur) var(--curve), color var(--dur) var(--curve); }
.head-link:hover { background: var(--surface-2); color: var(--text); }
.head-link .i { color: currentColor; }

/* ---------- Banners ---------- */
.banner { display: flex; gap: var(--s-2-5); align-items: flex-start; padding: var(--so-9) var(--s-3); border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 var(--bw) var(--border); font-size: var(--fs-sm); line-height: var(--lh-18); color: var(--text); margin-bottom: var(--s-5); }
.banner > .i { margin-top: var(--s-0-5); color: var(--text-3); }
.banner .grow { flex: 1; min-width: 0; }
.banner b { font-weight: var(--fw-semibold); }
.banner .sec { color: var(--text-2); }
.banner .btn { margin: calc(var(--s-1) * -1) calc(var(--s-1) * -1) calc(var(--s-1) * -1) 0; }
.banner.info { background: var(--info-bg); box-shadow: none; }
.banner.info > .i { color: var(--info); }
.banner.ok { background: var(--success-bg); box-shadow: none; }
.banner.ok > .i { color: var(--success); }
.banner.warn { background: var(--warning-bg); box-shadow: none; }
.banner.warn > .i { color: var(--warning); }
.banner.danger { background: var(--danger-bg); box-shadow: none; }
.banner.danger > .i { color: var(--danger); }
/* A link inside a banner: --text with an underline, never the accent (it sits on a tinted fill). */
.banner .link { color: var(--text); text-decoration-color: currentColor; }
.banner .link:hover { text-decoration-thickness: var(--bw-mark); }

/* ---------- Panels ---------- */
.panel { background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r-lg); min-width: 0; }
.panel-head { display: flex; align-items: center; gap: var(--s-2-5); min-height: var(--panel-head-h); padding: var(--s-1-5) var(--s-2-5) var(--s-1-5) var(--s-4); border-bottom: var(--bw) solid var(--border); }
.panel-head h2 { font-size: var(--fs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-panel); white-space: nowrap; }
.panel-head h2 .c { color: var(--text-3); font-weight: var(--fw-book); margin-left: var(--s-1); font-variant-numeric: tabular-nums; }
.panel-head .feed-tabs { margin-left: auto; }
.panel-head .aside { margin-left: auto; display: flex; align-items: center; gap: var(--s-1-5); color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; }
.panel-body { padding: var(--panel-pad-t) var(--panel-pad-x) var(--panel-pad-x); }
.panel-foot { padding: var(--s-2-5) var(--s-4); border-top: var(--bw) solid var(--divider); font-size: var(--fs-xs); color: var(--text-3); display: flex; gap: var(--s-2); align-items: center; }

/* ---------- Dashboard ---------- */
.dash { display: grid; grid-template-columns: var(--grid-overview); gap: var(--panel-gap); align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: var(--panel-gap); min-width: 0; }

/* Needs you: one line per queue */
.todo { display: flex; flex-direction: column; }
.todo-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto var(--s-3-5); align-items: center; gap: var(--s-2-5);
  height: var(--row-h); padding: 0 var(--s-3) 0 var(--s-3-5); border-top: var(--bw) solid var(--divider);
  transition: background-color var(--dur) var(--curve);
}
.todo-row:first-child { border-top: 0; }
.todo-row:hover { background: var(--surface-2); }
.todo-n { font-size: var(--fs-md); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; text-align: right; color: var(--text); }
.todo-n.zero { color: var(--text-3); font-weight: var(--fw-book); }
.todo-n.warn { color: var(--waiting); }
.todo-title { white-space: nowrap; color: var(--text); min-width: 0; }
.todo-n { min-width: var(--s-6); }
/* A flex box, so the icon centres on the row instead of sitting on the text baseline (R2). */
.todo-go { display: flex; color: var(--text-4); transition: transform var(--dur) var(--curve), color var(--dur) var(--curve); }
.todo-row:hover .todo-go { color: var(--text-2); transform: translateX(var(--move-nudge)); }
.todo-note { font-size: var(--fs-xs); color: var(--text-3); display: flex; align-items: center; gap: var(--s-1-5); line-height: var(--lh-16); }
.todo-note .i { color: var(--text-4); }

/* Pipeline */
.pipe-total { display: flex; align-items: baseline; gap: var(--s-2-5); flex-wrap: wrap; }
.pipe-total a { display: inline-flex; align-items: baseline; gap: var(--s-1-5); border-radius: var(--r-xs); }
.big { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-title); font-variant-numeric: tabular-nums; line-height: var(--lh-1-1); }
.pipe-total .lbl { color: var(--text-2); font-size: var(--fs); }
.pipe-total a:hover .lbl { color: var(--text); }
.pipe-total .new-link { font-size: var(--fs-sm); color: var(--text-2); font-weight: var(--fw-medium); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: var(--so-3); }
.pipe-total .new-link:hover { color: var(--text); text-decoration-color: currentColor; }

/* Partners and Contracts */
.sum-link { color: var(--text-2); font-weight: var(--fw-medium); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: var(--so-3); transition: color var(--dur) var(--curve), text-decoration-color var(--dur) var(--curve); }
.sum-link:hover { color: var(--text); text-decoration-color: currentColor; }
.sum-link.warn { color: var(--waiting); text-decoration-color: var(--waiting-line); }
.sum-link.warn:hover { text-decoration-color: currentColor; }

/* Starting or ending soon: one line per Partner */
.soon { display: flex; flex-direction: column; container-type: inline-size; }
.soon-row {
  display: grid; grid-template-columns: var(--soon-date-w) minmax(0, 1fr) auto auto; gap: var(--s-2-5); align-items: center;
  height: var(--row-h); padding: 0 var(--s-3-5) 0 var(--s-4); border-top: var(--bw) solid var(--divider); text-align: left; width: 100%;
  transition: background-color var(--dur) var(--curve);
}
.soon-row:first-child { border-top: 0; }
.soon-row:hover { background: var(--surface-2); }
.soon-date { font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.soon-main { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.plan-sw { width: var(--s-2); height: var(--s-2); border-radius: var(--r-hair); flex: none; display: inline-block; }
.plan-sw[data-p="growth"] { background: var(--plan-growth); }
.plan-sw[data-p="full"] { background: var(--plan-full); }
.plan-sw[data-p="network"] { background: var(--plan-network); }
.soon-main .plan-sw { width: var(--s-1-5); height: var(--s-1-5); border-radius: 50%; }
.soon-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; max-width: calc(100% - var(--s-3-5)); }
.soon-text { font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; min-width: 0; }
.soon-when { font-size: var(--fs-xs); color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: var(--soon-when-w); }

/* Recent activity: one line per event */
.feed { display: flex; flex-direction: column; }
.feed-row + .feed-row { border-top: var(--bw) solid var(--divider); }
/* Two lines, like the reference: who did what on the first, the record it happened to on the second.
   Icon, avatar and time sit on the first line. */
.feed-row { display: grid; grid-template-columns: var(--s-3-5) minmax(0, 1fr) auto auto; gap: var(--s-2-5); align-items: start; min-height: var(--row-h); padding: var(--s-2) var(--s-3-5) var(--s-2) var(--s-4); line-height: var(--fs-sm-lh); }
.feed-row > .i { color: var(--text-4); margin-top: calc((var(--fs-sm-lh) - var(--icon-sm)) / 2); }
.feed-row > .avatar, .feed-row > [data-tip] { margin-top: calc((var(--fs-sm-lh) - var(--av-sm)) / 2); }
.feed-text { font-size: var(--fs-sm); color: var(--text-2); min-width: 0; display: flex; flex-direction: column; }
.feed-what, .feed-text a.t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-what b { color: var(--text); font-weight: var(--fw-book); }
.feed-text a.t { color: var(--text-2); font-size: var(--fs-xs); line-height: var(--fs-xs-lh); width: fit-content; max-width: 100%; }
.feed-text a.t:hover { text-decoration: underline; text-underline-offset: var(--so-3); text-decoration-color: var(--border-strong); }
.feed-time { font-size: var(--fs-xs); line-height: var(--fs-sm-lh); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; min-width: var(--feed-time-w); }

/* Stat block (reference §4: 4-up inside one panel, 1 px dividers, label 12.5 text-2 with icon, value 23/600, caption 12.5 in its semantic colour) */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--panel-gap); overflow: hidden; }
.stat { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1-5); min-width: 0; padding: var(--s-3-5) var(--s-4) var(--s-3-5); text-align: left; border-left: var(--bw) solid var(--border); transition: background-color var(--dur) var(--curve); }
.stat:first-child { border-left: 0; }
a.stat:hover, button.stat:hover { background: var(--surface-2); }
.stat-l { display: flex; align-items: center; gap: var(--so-7); font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.stat-l .i { color: var(--text-3); flex: none; }
.stat-lt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.stat-v { font-size: var(--stat-value); font-weight: var(--fw-semibold); letter-spacing: var(--ls-title); line-height: var(--lh-1-1); font-variant-numeric: tabular-nums; color: var(--text); }
.stat-v small { font-size: var(--stat-unit); font-weight: var(--fw-semibold); letter-spacing: var(--ls-0); margin-left: var(--s-px); color: var(--text-2); }
.stat-c { font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.stat-c.ok { color: var(--success); } .stat-c.warn { color: var(--warning); } .stat-c.bad { color: var(--danger); }
/* A cell that couldn't refresh: its link keeps the cell's padding and hover; the Retry line sits below. */
.stat.has-stale { padding: 0; gap: 0; align-items: stretch; }
.stat-in { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1-5); flex: 1 1 auto; min-width: 0; padding: var(--s-3-5) var(--s-4) var(--s-2); text-align: left; transition: background-color var(--dur) var(--curve); }
a.stat-in:hover, button.stat-in:hover { background: var(--surface-2); }
.stat .stale { padding: 0 var(--s-3) var(--s-2) var(--s-4); border-bottom: 0; }
.stat .stale .btn { margin-left: calc(var(--btn-pad-x-ghost) * -1); }
.stat .stale-m { flex: 1 1 100%; }

/* Couldn't refresh: one line under a section's header, over content that stays as it was. */
.stale { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-2); min-height: var(--h-md); padding: var(--s-1) var(--s-2-5) var(--s-1) var(--s-4); border-bottom: var(--bw) solid var(--divider); font-size: var(--fs-xs); line-height: var(--lh-16); color: var(--text-2); }
.stale-m { display: flex; align-items: flex-start; gap: var(--s-1-5); min-width: 0; }
.stale-m > .i { color: var(--warning); flex: none; margin-top: var(--s-0-5); }
.stale-t { min-width: 0; }
.stale time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stale .btn { margin: calc(var(--s-1) * -1) 0; }

/* Dữ liệu mẫu: full width under the topbar, sticky, in the flow so it covers nothing. A notice (info),
   not a warning. The fill is the info tint over --surface, so nothing shows through while it sticks. */
.sample-band {
  position: sticky; top: var(--topbar-h); z-index: var(--z-band);
  display: flex; align-items: center; gap: var(--s-2); min-height: var(--sample-band-h); padding: var(--s-1-5) var(--s-3) var(--s-1-5) var(--s-4);
  background: linear-gradient(var(--info-bg), var(--info-bg)), var(--surface); border-bottom: var(--bw) solid var(--border);
  font-size: var(--fs-sm); line-height: var(--lh-18); color: var(--text-2);
}
.sample-band > .i { color: var(--info); flex: none; }
.sample-band b { color: var(--text); font-weight: var(--fw-semibold); white-space: nowrap; }
.sample-band .sb-t { min-width: 0; }
.sample-band .sb-short { display: none; }

/* Pipeline: one stacked bar, then a key naming every stage with its count (open stages, then closed) */
.stack { display: flex; gap: var(--s-0-5); margin-top: var(--s-3-5); }
.stack-bar { display: block; flex: 1 1 0; min-width: var(--s-1-5); height: var(--s-2-5); border-radius: var(--r-micro); transition: opacity var(--dur) var(--curve); }
.stack:hover .stack-bar { opacity: var(--op-dim-hover); }
.stack .stack-bar:hover { opacity: 1; }
.stack-bar[data-s="new"] { background: var(--status-new); }
.stack-bar[data-s="contacted"] { background: var(--status-contacted); }
.stack-bar[data-s="negotiating"] { background: var(--status-negotiating); }
.stack-bar[data-s="won"] { background: var(--status-won); }
.stack-bar[data-s="lost"] { background: var(--status-lost); }
.stack-key { list-style: none; margin: var(--s-2-5) calc(var(--s-1-5) * -1) 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: var(--s-0-5); row-gap: 0; }
.stack-key a { display: inline-flex; align-items: center; gap: var(--s-1-5); height: var(--s-7); padding: 0 var(--s-1-5); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; transition: background-color var(--dur) var(--curve), color var(--dur) var(--curve); }
.stack-key a:hover { background: var(--surface-2); color: var(--text); }
.stack-key b { font-weight: var(--fw-semibold); color: var(--text); font-variant-numeric: tabular-nums; }
.stack-key a.zero, .stack-key a.zero b { color: var(--text-3); font-weight: var(--fw-book); }
.stack-key .stack-brk { flex-basis: 100%; height: 0; }
/* A stage name shows only where its segment has room for icon, count and the whole word. */

.seg .seg-c { color: var(--text-3); font-weight: var(--fw-book); font-variant-numeric: tabular-nums; }

/* ---------- Tables and one-line rows ---------- */
.table-wrap { min-width: 0; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs); table-layout: fixed; }
.table th {
  position: sticky; top: var(--topbar-h); z-index: var(--z-sticky);
  text-align: left; font-weight: var(--fw-medium); font-size: var(--fs-xs); color: var(--text-3);
  height: var(--th-h); padding: 0 var(--cell-pad-x); background: var(--surface);
  border-bottom: var(--bw) solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.table th:first-child, .table td:first-child { padding-left: var(--cell-edge); }
.table th:last-child, .table td:last-child { padding-right: var(--cell-edge); }
.table th button { display: inline-flex; align-items: center; gap: var(--s-1); color: inherit; font-weight: inherit; height: var(--s-6); padding: 0 var(--so-5); margin-left: calc(var(--so-5) * -1); border-radius: var(--r-xs); transition: background-color var(--dur) var(--curve), color var(--dur) var(--curve); }
.table th button .i { color: var(--text-4); }
.table th button:hover { color: var(--text); background: var(--surface-2); }
.table th[aria-sort] button { color: var(--text); }
.table th[aria-sort] button .i { color: var(--text-2); }
.table td { height: var(--row-h); padding: 0 var(--cell-pad-x); border-bottom: var(--bw) solid var(--divider); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table tbody tr { transition: background-color var(--dur) var(--curve); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr.is-flag { background: var(--selected-bg); }
.table tbody tr[data-href] { cursor: pointer; }
.panel .table tbody tr:last-child td { border-bottom: 0; }
.panel .table th { top: 0; position: static; }
/* Studio cell: name and trailing facts share one 20 px line box, centred like every other cell. */
.cell-t { position: relative; display: flex; align-items: center; gap: var(--s-2); min-width: 0; line-height: var(--lh-20); }
.cell-t .t { color: var(--text); font-weight: var(--fw-book); min-width: 0; max-width: 100%; flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-t a.t:hover { text-decoration: underline; text-underline-offset: var(--so-3); text-decoration-color: var(--border-strong); }
.cell-t .m { font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; min-width: 0; }
.cell-t .m.whole { display: flex; flex-wrap: wrap; height: var(--s-5); line-height: var(--lh-20); overflow: hidden; text-overflow: clip; }
/* A zero-width first item, so even the first fact can wrap out of sight rather than be cut mid-word. */
.cell-t .m.whole::before { content: "\200b"; width: 0; }
.cell-t .m.whole > span { white-space: nowrap; }
.cell-t .m.whole > span + span { margin-left: var(--so-5); }
/* Lead cell: two lines. The studio or the independent artist on the first; on the second the studio's
   person, or the contact when there is no named person, or "Independent" and the contact. */
.t-leads tbody td, .t-recent tbody td { height: var(--row-h-lead); }
.cell-lead .lc { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cell-lead .t { line-height: var(--lh-18); align-self: flex-start; }
.lc-2 { font-size: var(--fs-xs); line-height: var(--lh-16); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-2.lc-person, .lc-kind { color: var(--text-2); }
.cell-2 { font-size: var(--fs-sm); color: var(--text-2); }
.cell-2.muted { color: var(--text-3); }
.cell-date { font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.cell-flex { display: flex; align-items: center; gap: var(--s-1-5); min-width: 0; }
.cell-flex .i { color: var(--text-4); }
/* A suspended or invited assignee in a list row: a coloured mark with the state in its tooltip, so the name keeps its full width. */
.off-flag { display: inline-flex; flex: none; color: var(--warning); }
.off-flag.red { color: var(--danger); }
.cell-flex .off-flag .i { color: inherit; }

/* ---------- Nomad Leads list ---------- */
.tabs { display: flex; gap: var(--s-0-5); border-bottom: var(--bw) solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: var(--s-1-5);
  height: var(--tab-h); padding: 0 var(--s-2); color: var(--text-2); font-size: var(--fs); font-weight: var(--fw-book); white-space: nowrap;
  transition: color var(--dur) var(--curve);
}
.tab:first-child { margin-left: calc(var(--s-2) * -1); }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--text); font-weight: var(--fw-medium); }
.tab[aria-selected="true"]::after, .tab[aria-current="page"]::after { content: ""; position: absolute; left: var(--s-2); right: var(--s-2); bottom: calc(var(--s-px) * -1); height: var(--tab-underline); background: var(--text); border-radius: var(--r-hair) var(--r-hair) 0 0; }
.tab .c { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; font-weight: var(--fw-book); }
.tab-sep { width: var(--s-px); background: var(--border); margin: var(--so-11) var(--s-1-5); flex: none; }
.toolbar { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-2-5) 0; flex-wrap: wrap; }
.toolbar .search { width: var(--toolbar-search-w); max-width: 100%; margin-right: var(--s-1-5); }
.toolbar .spacer { flex: 1; }
.chips-row { display: flex; gap: var(--s-1-5); flex-wrap: wrap; align-items: center; padding: 0 0 var(--s-2-5); }
.filter-chip { display: inline-flex; align-items: center; height: var(--filter-chip-h); border-radius: var(--r-sm); background: var(--selected-bg); box-shadow: inset var(--selected-bar-w) 0 0 var(--selected-bar), inset 0 0 0 var(--bw) var(--accent-line); font-size: var(--fs-xs); overflow: hidden; }
.filter-chip > span { padding: 0 var(--s-1) 0 var(--s-2); color: var(--text-2); }
.filter-chip > b { font-weight: var(--fw-medium); padding-right: var(--s-0-5); color: var(--text); max-width: var(--filter-chip-value-max); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-chip button { height: 100%; width: var(--h-xs); display: grid; place-items: center; color: var(--text-2); transition: color var(--dur) var(--curve); }
.filter-chip button:hover { color: var(--text); }
.result-count { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; padding-right: var(--s-0-5); }
.list { border-top: var(--bw) solid var(--border); }
.list .table th { border-top: 0; }
/* Group: Status · group header (reference §4: 36 px, 12.5/600, count in text-3, chevron to collapse) */
.table tbody.grp th { position: static; height: var(--group-h); padding: 0 var(--s-4) 0 var(--s-2); background: var(--surface); border-bottom: var(--bw) solid var(--border); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
.table tbody.grp + tbody[hidden] + tbody.grp th, .table tbody:not(.grp):not([hidden]) + tbody.grp th { border-top: 0; }
.grp-btn { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--s-7); padding: 0 var(--s-2) 0 var(--s-1-5); border-radius: var(--r-sm); color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; transition: background-color var(--dur) var(--curve); }
.grp-btn:hover { background: var(--surface-2); }
.grp-btn .c { color: var(--text-3); font-weight: var(--fw-book); font-variant-numeric: tabular-nums; }
.grp-btn .grp-chev { color: var(--text-3); transition: transform var(--dur) var(--curve); }
.grp-btn[aria-expanded="false"] .grp-chev { transform: rotate(-90deg); }
.mgrp { display: flex; align-items: center; height: var(--group-h); padding: 0 var(--s-2) 0 var(--s-1); border-bottom: var(--bw) solid var(--border); background: var(--surface); }
.mgrp-rows[hidden] { display: none; }
/* The tab row carries a compact "N to review" link at its right end */
.tabs-row { display: flex; align-items: stretch; min-width: 0; }
.tabs-row .tabs { flex: 1 1 auto; min-width: 0; }
.tabs-aside { flex: none; display: inline-flex; align-items: center; gap: var(--s-1-5); padding: 0 var(--s-0-5) 0 var(--s-3); border-bottom: var(--bw) solid var(--border); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2); white-space: nowrap; transition: color var(--dur) var(--curve); }
.tabs-aside > .i:first-child { color: var(--accent); }
.tabs-aside:hover { color: var(--text); }
.tabs-aside:hover > .i:last-child { transform: translateX(var(--move-nudge)); }
.tabs-aside > .i:last-child { transition: transform var(--dur) var(--curve); }
.rule-note { display: inline-flex; align-items: center; gap: var(--s-1-5); font-size: var(--fs-xs); color: var(--text-3); }

/* Mobile one-line rows */
.mlist { display: none; }
.mrow { display: flex; align-items: center; gap: var(--s-2); height: var(--row-h-mobile); padding: 0 var(--s-3) 0 var(--s-1-5); border-bottom: var(--bw) solid var(--divider); position: relative; }
.mrow:last-child { border-bottom: 0; }
.mrow .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--fw-book); }
.mrow .t a::after { content: ""; position: absolute; inset: 0; }
.mrow .r { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mrow .prop, .mrow .st-static { position: relative; z-index: var(--z-raise); flex: none; }
.mrow .st-static { width: var(--s-7); display: grid; place-items: center; }
.mrow .avatar { flex: none; }

/* Board */
.board { --cols: 5; display: grid; grid-template-columns: repeat(var(--cols), minmax(var(--board-col-min), 1fr)); gap: var(--s-2-5); overflow-x: auto; padding: var(--s-1) 0 var(--s-2); align-items: start; }
.col { background: var(--sunken); border: var(--bw) solid var(--divider); border-radius: var(--r-lg); display: flex; flex-direction: column; min-height: var(--board-col-min-h); transition: background-color var(--dur) var(--curve), border-color var(--dur) var(--curve); }
.col.drop { background: var(--drop-target); border-color: var(--accent-line); }
.col.drop-no { opacity: var(--op-dim); }
.col-head { display: flex; align-items: center; gap: var(--s-2); height: var(--board-col-h); padding: 0 var(--s-3); font-weight: var(--fw-semibold); font-size: var(--fs); }
.col-head .c { color: var(--text-3); font-weight: var(--fw-book); font-variant-numeric: tabular-nums; }
.col-body { display: flex; flex-direction: column; gap: var(--s-1-5); padding: 0 var(--s-1-5) var(--s-1-5); }
.card {
  background: var(--surface); border-radius: var(--r); box-shadow: var(--elev-card);
  padding: var(--card-pad) var(--card-pad) calc(var(--card-pad) - var(--s-0-5)); display: flex; flex-direction: column; gap: var(--s-1); position: relative;
  transition: box-shadow var(--dur) var(--curve);
}
.card:hover { box-shadow: var(--elev-card-hover); }
.card[draggable="true"] { cursor: grab; }
.card.dragging { opacity: var(--op-dragging); }
.card .t { font-weight: var(--fw-medium); font-size: var(--fs); line-height: var(--lh-19); }
.card .t a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card .s { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .f { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--s-1); height: var(--s-6); }
.card .f .spacer { flex: 1; }
.card .f .wait { font-size: var(--fs-xs); }
.card .f button { position: relative; z-index: var(--z-raise); }
.card .f .avatar { margin-left: var(--s-0-5); }
.card-mv { width: var(--s-6); height: var(--s-6); opacity: 0; transition: opacity var(--dur) var(--curve), background-color var(--dur) var(--curve), color var(--dur) var(--curve); }
.card:hover .card-mv, .card:focus-within .card-mv, .card-mv[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .card-mv { opacity: 1; } }
.col-empty { font-size: var(--fs-xs); color: var(--text-3); padding: var(--s-3-5) var(--s-1-5); text-align: center; border: var(--bw-ring) dashed var(--border-strong); border-radius: var(--r); }

/* ---------- Lead record ---------- */
.rec { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); min-height: calc(100dvh - var(--topbar-h)); }
.rec-main { min-width: 0; padding: var(--page-pad-t) var(--page-pad-x) var(--page-pad-b); }
.rec-side { border-left: var(--bw) solid var(--border); padding: var(--s-6) var(--s-5) var(--s-12); display: flex; flex-direction: column; gap: var(--s-6); background: var(--surface); }
.rec-title-row { display: flex; align-items: flex-start; gap: var(--s-3-5); flex-wrap: wrap; }
.rec-avatar { width: var(--av-xl); height: var(--av-xl); border-radius: var(--r); display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); flex: none; font-weight: var(--fw-semibold); font-size: var(--fs-sm); margin-top: var(--s-px); }
.rec-title { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-title); line-height: var(--lh-1-2); outline: none; overflow-wrap: anywhere; }
.rec-sub { color: var(--text-2); font-size: var(--fs); margin-top: var(--so-3); }
.rec-actions { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; }

.stepper { display: flex; align-items: stretch; margin: var(--so-22) 0 var(--s-2); height: var(--h-md); border: var(--bw) solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden; width: fit-content; max-width: 100%; box-shadow: var(--elev-sm); }
.step {
  display: inline-flex; align-items: center; gap: var(--so-7); padding: 0 var(--so-13) 0 var(--so-11);
  font-size: var(--fs-sm); font-weight: var(--fw-book); color: var(--text-2); background: var(--surface);
  border-left: var(--bw) solid var(--border); white-space: nowrap; transition: background-color var(--dur) var(--curve), color var(--dur) var(--curve);
}
.step:first-child { border-left: 0; }
.step:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.step .i { color: var(--text-3); }
.step.done { color: var(--text-2); }
.step .step-past { display: none; }
.step[aria-pressed="true"] { background: var(--surface-3); color: var(--text); font-weight: var(--fw-medium); }
/* Won or Archived: the whole stepper is disabled. The current stage keeps its fill and weight; labels and
   the check take --disabled-fg; stage shapes keep their colour, since they state the status. */
.step:disabled, .step[aria-disabled="true"], .step[aria-disabled="true"]:hover { cursor: not-allowed; color: var(--disabled-fg); }
.step[aria-disabled="true"]:hover { background: var(--surface); }
.step:disabled .i { color: currentColor; }
.step-note { font-size: var(--fs-xs); color: var(--text-3); display: flex; gap: var(--s-1-5); align-items: center; }
.step-note .i { color: var(--text-4); }
.rec-contact-inline { display: none; }

.rec-tabs { margin-top: var(--s-6); }
.tabpanel { padding-top: var(--s-5); outline: none; }

.prof { display: flex; flex-direction: column; max-width: var(--prose-max); }
.prof-note { background: var(--sunken); border: var(--bw) solid var(--divider); border-radius: var(--r-lg); padding: var(--s-3-5) var(--s-4); margin-bottom: var(--s-2); }
.prof-note h3, .prof-sec h3 { font-size: var(--fs); font-weight: var(--fw-semibold); margin-bottom: var(--s-3); display: flex; gap: var(--s-2); align-items: center; }
.prof-note h3 > .i, .prof-sec h3 > .i { color: var(--text-4); }
.prof-note h3 .aside { margin-left: auto; font-weight: var(--fw-book); }
.prof-sec { padding: var(--so-18) 0 var(--s-5); min-width: 0; border-top: var(--bw) solid var(--border); }
.prof-note + .prof-sec, .prof > .prof-sec:first-child { border-top: 0; }
.kv { display: grid; grid-template-columns: var(--kv-label-w) minmax(0, 1fr); gap: var(--s-2) var(--s-4); line-height: var(--lh-20); }
.kv dt { color: var(--text-3); font-size: var(--fs-sm); }
.kv dd { color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.missing-line { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--s-1); padding-top: var(--s-3-5); border-top: var(--bw) solid var(--border); max-width: var(--prose-max); display: flex; gap: var(--s-1-5); align-items: flex-start; line-height: var(--lh-18); }
.missing-line .i { margin-top: var(--s-0-5); color: var(--text-4); }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-1-5); padding: var(--s-12) var(--s-6); }
.empty .ico { color: var(--text-4); margin-bottom: var(--s-1-5); }
.empty h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: var(--ls-section); }
.empty p { font-size: var(--fs-sm); line-height: var(--lh-19); color: var(--text-2); max-width: var(--empty-measure); }
.empty .actions { display: flex; gap: var(--s-2); margin-top: var(--s-2-5); flex-wrap: wrap; justify-content: center; }
.empty.compact { padding: var(--s-7) var(--s-4); }
.empty.error .ico { color: var(--danger); }

.sub-card { border: var(--bw) solid var(--border); border-radius: var(--r-lg); margin-bottom: var(--s-3-5); overflow: hidden; }
.sub-head { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3-5); align-items: center; min-height: var(--sub-head-h); padding: var(--s-2) var(--s-4); background: var(--sunken); border-bottom: var(--bw) solid var(--border); }
.sub-head h3 { font-size: var(--fs); font-weight: var(--fw-semibold); }
.sub-head .meta { font-size: var(--fs-xs); color: var(--text-3); display: flex; gap: 0; flex-wrap: wrap; }
.sub-head .meta > span + span::before { content: "·"; margin: 0 var(--s-1-5); color: var(--text-4); }
.sub-decision { font-size: var(--fs-sm); color: var(--text-2); display: flex; align-items: center; gap: var(--s-1-5); min-height: var(--sub-decision-h); padding: var(--s-1-5) var(--s-4); border-bottom: var(--bw) solid var(--divider); flex-wrap: wrap; }
.sub-decision .i { color: var(--text-4); }
.sub-decision .muted { margin-left: auto; font-size: var(--fs-xs); }
.qa-sec { padding: var(--s-3-5) var(--s-4); border-top: var(--bw) solid var(--divider); }
.qa-sec:first-of-type { border-top: 0; }
.qa-sec h4 { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-3); margin-bottom: var(--s-2-5); }
.qa { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s-2) var(--s-5); }
.qa dt { color: var(--text-2); font-size: var(--fs-sm); }
.qa dd { color: var(--text); }
.qa dd q { quotes: none; }
.verbatim-note { font-size: var(--fs-xs); color: var(--text-3); display: flex; gap: var(--s-1-5); align-items: center; margin-bottom: var(--s-3-5); }
.verbatim-note .i { color: var(--text-4); }

.composer { border: var(--bw) solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface); transition: border-color var(--dur) var(--curve), box-shadow var(--dur) var(--curve); margin-bottom: var(--s-6); }
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 var(--focus-field-w) var(--focus-field); }
.composer textarea { border: 0; box-shadow: none !important; background: transparent; min-height: var(--s-18); resize: vertical; padding: var(--s-3) var(--s-3-5); }
.composer-files { display: flex; flex-wrap: wrap; gap: var(--s-1-5); padding: 0 var(--s-3) var(--s-2); }
.composer-bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1-5) var(--s-1-5) var(--s-1-5) var(--s-2); border-top: var(--bw) solid var(--divider); }
.composer-bar .hint { font-size: var(--fs-xs); color: var(--text-3); }
.composer-bar .grow { flex: 1; }
.composer-err { font-size: var(--fs-xs); color: var(--danger); padding: 0 var(--s-3-5) var(--s-2-5); display: flex; gap: var(--s-1-5); align-items: center; }
.file-chip { display: inline-flex; align-items: center; gap: var(--s-1-5); height: var(--s-7); padding: 0 var(--s-1) 0 var(--s-2); box-shadow: inset 0 0 0 var(--bw) var(--border); border-radius: var(--r-sm); font-size: var(--fs-xs); background: var(--surface); max-width: var(--file-chip-max); transition: box-shadow var(--dur) var(--curve), background-color var(--dur) var(--curve); }
.file-chip > .i { color: var(--text-3); }
.file-chip .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-weight: var(--fw-medium); }
.file-chip .sz { color: var(--text-3); white-space: nowrap; }
.file-chip .icon-btn { width: var(--h-xs); height: var(--h-xs); }
a.file-chip, button.file-chip { padding-right: var(--s-2); }
a.file-chip:hover, button.file-chip:hover { box-shadow: inset 0 0 0 var(--bw) var(--border-strong); background: var(--surface-2); }
.file-thumb { width: var(--s-5); height: var(--s-5); border-radius: var(--r-micro); object-fit: cover; }

.notes { display: flex; flex-direction: column; }
.note { display: grid; grid-template-columns: var(--h-sm) minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) 0; border-top: var(--bw) solid var(--divider); }
.note:first-child { border-top: 0; padding-top: 0; }
.note-head { display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; }
.note-head b { font-weight: var(--fw-medium); }
.note-head .time { color: var(--text-3); font-size: var(--fs-xs); }
.note-body { line-height: var(--lh-21); margin-top: var(--so-3); white-space: pre-wrap; overflow-wrap: anywhere; max-width: var(--note-measure); }
.note-files { display: flex; gap: var(--s-1-5); flex-wrap: wrap; margin-top: var(--s-2); }
.note.fresh { animation: fresh var(--dur-pulse) var(--curve); }
@keyframes fresh { from { background: var(--accent-soft); } to { background: transparent; } }

.timeline { display: flex; flex-direction: column; position: relative; }
.tl-row { display: grid; grid-template-columns: var(--tl-ico) minmax(0, 1fr) auto; gap: var(--s-3); padding: var(--s-2) 0; position: relative; }
.tl-row::before { content: ""; position: absolute; left: calc(var(--tl-ico) / 2 - var(--s-px) / 2); top: var(--so-30); bottom: calc(var(--s-2) * -1); width: var(--s-px); background: var(--border); }
.tl-row:last-child::before { display: none; }
.tl-ico { width: var(--tl-ico); height: var(--tl-ico); border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 var(--bw) var(--border); color: var(--text-4); position: relative; z-index: var(--z-raise); }
.tl-ico svg { width: var(--s-3); height: var(--s-3); stroke-width: var(--icon-stroke-bold); }
.tl-text { color: var(--text-2); padding-top: var(--s-px); min-width: 0; line-height: var(--lh-22); }
.tl-text b { color: var(--text); font-weight: var(--fw-medium); }
.tl-text .chip-st { margin: 0 var(--s-px); }
.tl-ctx { display: block; font-size: var(--fs-xs); color: var(--text-3); line-height: var(--lh-17); }
.tl-time { font-size: var(--fs-xs); color: var(--text-3); padding-top: var(--so-3); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: var(--lh-17); }
.tl-time span { display: block; font-size: var(--fs-2xs); }

.side-sec h2 { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-3); margin-bottom: var(--s-2-5); display: flex; align-items: center; gap: var(--s-2); height: var(--s-4); }
.person { display: flex; gap: var(--s-2-5); align-items: center; margin-bottom: var(--s-2-5); }
.person .nm { font-weight: var(--fw-medium); }
.person .rl { font-size: var(--fs-xs); color: var(--text-3); }
.contact-list { display: flex; flex-direction: column; gap: var(--s-px); margin: 0 calc(var(--s-2) * -1); }
.contact {
  display: grid; grid-template-columns: var(--s-3-5) minmax(0, 1fr) auto; gap: var(--s-2-5); align-items: center;
  min-height: var(--s-10); padding: var(--so-3) var(--s-1) var(--so-3) var(--s-2); border-radius: var(--r-sm); line-height: var(--lh-18);
  transition: background-color var(--dur) var(--curve);
}
.contact:hover { background: var(--surface-2); }
.contact > .i { color: var(--text-4); }
.contact a { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.contact a:hover { text-decoration: underline; text-underline-offset: var(--so-3); text-decoration-color: var(--border-strong); }
.contact .lbl { display: block; font-size: var(--fs-2xs); color: var(--text-3); line-height: var(--lh-14); }
.contact .copy { opacity: 0; transition: opacity var(--dur) var(--curve); }
.contact:hover .copy, .contact:focus-within .copy { opacity: 1; }
@media (hover: none) { .contact .copy { opacity: 1; } }
.props { display: grid; grid-template-columns: var(--prop-label-w) minmax(0, 1fr); gap: var(--s-0-5) var(--s-2-5); align-items: start; }
.props dt { color: var(--text-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); min-height: var(--h-md); display: flex; align-items: center; gap: var(--s-2); }
.props dt .i { color: var(--text-4); }
.props dd { min-width: 0; min-height: var(--h-md); display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1-5); overflow-wrap: anywhere; }
.props dd .two { display: flex; flex-direction: column; line-height: var(--lh-18); padding: var(--s-1-5) 0 var(--s-1); }
.props dd.txt { display: block; padding: var(--so-5) 0 var(--so-3); line-height: var(--lh-20); }
.props dd .two span:last-child { font-size: var(--fs-xs); color: var(--text-3); }
.side-warn { font-size: var(--fs-xs); color: var(--warning); display: flex; gap: var(--s-1-5); align-items: flex-start; margin-top: var(--s-2-5); line-height: var(--lh-17); }
.side-warn .i { margin-top: var(--s-px); }

/* ---------- Review / out of build ---------- */
.review-list { display: flex; flex-direction: column; gap: var(--s-3); }
.review-card { border: var(--bw) solid var(--border); border-radius: var(--r-lg); padding: var(--s-3-5) var(--s-4); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3) var(--s-4); }
.review-card h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: var(--ls-section); }
.review-card .meta { font-size: var(--fs-xs); color: var(--text-3); display: flex; flex-wrap: wrap; margin-top: var(--so-3); }
.review-card .meta > span + span::before { content: "·"; margin: 0 var(--s-1-5); color: var(--text-4); }
.review-card .match { grid-column: 1 / -1; margin: 0; }
.review-card .acts { display: flex; gap: var(--s-2); align-items: flex-start; flex-wrap: wrap; }

/* ---------- Skeleton ---------- */
.sk { display: block; background: var(--surface-3); border-radius: var(--r-xs); animation: sk var(--dur-pulse) var(--curve-in-out) infinite; }
@keyframes sk { 50% { opacity: var(--op-dim); } }
.sk-row { display: flex; align-items: center; gap: var(--s-3); height: var(--row-h); padding: 0 var(--s-4); border-top: var(--bw) solid var(--divider); }
.sk-row.sk-lead { height: var(--row-h-lead); }
.sk-row:first-child { border-top: 0; }

/* ---------- Overlays ---------- */
.menu {
  position: fixed; z-index: var(--z-menu); min-width: var(--menu-min-w); max-width: min(var(--menu-max-w), calc(100vw - 2 * var(--overlay-margin)));
  max-height: min(var(--menu-max-h), calc(100dvh - 2 * var(--overlay-margin))); overflow-y: auto;
  background: var(--surface); border-radius: var(--r);
  box-shadow: var(--elev-pop); padding: var(--s-1);
  animation: pop var(--dur) var(--curve);
  transform-origin: var(--origin, top left);
}
@keyframes pop { from { opacity: 0; transform: scale(var(--scale-pop)) translateY(calc(var(--move-nudge) * -1)); } }
.menu-label { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--text-3); padding: var(--s-1-5) var(--s-2) var(--s-1); }
.menu-item {
  display: flex; align-items: center; gap: var(--nav-gap); width: 100%; min-height: var(--h-md); padding: var(--s-1) var(--s-2);
  border-radius: var(--r-chip); font-size: var(--fs); text-align: left; color: var(--text);
}
.menu-item[data-active="true"] { background: var(--surface-2); }
.menu-item[aria-disabled="true"] { color: var(--disabled-fg); cursor: not-allowed; }
.menu-item[aria-disabled="true"] > .i { color: currentColor; }
.menu-item[aria-disabled="true"] svg.st { color: var(--status-locked); }
.menu-item .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: var(--lh-17); }
.menu-item .grow .hint { font-size: var(--fs-2xs); color: var(--text-3); line-height: var(--lh-14); }
.menu-item .check { width: var(--s-3-5); height: var(--s-3-5); color: var(--accent); flex: none; }
.menu-item .box { width: var(--s-3-5); height: var(--s-3-5); border: var(--bw-ring) solid var(--border-strong); border-radius: var(--r-xs); display: grid; place-items: center; flex: none; background: var(--surface); color: transparent; }
.menu-item[aria-checked="true"] .box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.menu-item .box svg { width: var(--icon-2xs); height: var(--icon-2xs); stroke-width: var(--icon-stroke-heavy); }
.menu-item .kbd { margin-left: auto; }
.menu-item > .i { color: var(--text-2); }
.menu-item.danger, .menu-item.danger > .i { color: var(--danger); }
.menu-sep { height: var(--s-px); background: var(--divider); margin: var(--s-1) calc(var(--s-1) * -1); }

dialog { color: var(--text); }
dialog::backdrop { background: var(--overlay); animation: fade var(--dur-exit) var(--curve-out); }
@keyframes fade { from { opacity: 0; } }
.dlg {
  width: min(var(--dialog-w), calc(100vw - var(--s-8))); padding: 0; border: 0;
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--elev-pop);
  animation: dlg-in var(--dur-enter) var(--curve);
}
@keyframes dlg-in { from { opacity: 0; transform: translateY(var(--move-rise-md)) scale(var(--scale-enter)); } }
.dlg-head { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--so-18) var(--s-5) 0; }
.dlg-head h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); line-height: var(--lh-22); }
.dlg-head .icon-btn { margin: calc(var(--s-0-5) * -1) calc(var(--s-1-5) * -1) 0 auto; }
.dlg-body { padding: var(--s-2-5) var(--s-5) var(--so-18); display: flex; flex-direction: column; gap: var(--s-3-5); color: var(--text-2); }
.dlg-body p { line-height: var(--lh-21); }
.dlg-foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: var(--bw) solid var(--border); }
.oob { display: flex; gap: var(--s-2-5); padding: var(--so-9) var(--s-3); border-radius: var(--r); background: var(--accent-soft); font-size: var(--fs-sm); line-height: var(--lh-18); color: var(--text); align-items: flex-start; }
.oob .i { margin-top: var(--s-0-5); color: var(--accent); }

.sheet {
  margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(var(--sheet-w), 100vw);
  padding: 0; border: 0; border-left: var(--bw) solid var(--border); background: var(--surface);
  box-shadow: var(--elev-drawer); display: flex; flex-direction: column;
}
.sheet:not([open]) { display: none; }
.sheet[open] { animation: sheet-in var(--dur-drawer) var(--curve-drawer); }
@keyframes sheet-in { from { transform: translateX(100%); } }
.sheet-head { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--so-18) var(--s-4) var(--s-3-5) var(--s-5); border-bottom: var(--bw) solid var(--border); }
.sheet-head h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); }
.sheet-head h2 .c { color: var(--text-3); font-weight: var(--fw-book); margin-left: var(--s-1); }
.sheet-head p { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--s-0-5); }
.sheet-head .icon-btn { margin-left: auto; }
.sheet-body { overflow-y: auto; flex: 1; }
.sheet-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); height: var(--row-h); padding: 0 var(--s-5); border-bottom: var(--bw) solid var(--divider); text-align: left; width: 100%; transition: background-color var(--dur) var(--curve); }
.sheet-row:hover { background: var(--surface-2); }
.sheet-row .l { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-row .t { margin-right: var(--s-2); }
.sheet-row .s { font-size: var(--fs-sm); color: var(--text-3); }
.sheet-row .s .plan-sw { display: inline-block; width: var(--s-1-5); height: var(--s-1-5); border-radius: 50%; margin-right: var(--s-1-5); vertical-align: var(--s-px); }
.sheet-row .r { font-size: var(--fs-xs); color: var(--text-3); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sheet-foot { padding: var(--s-3) var(--s-5); border-top: var(--bw) solid var(--border); background: var(--sunken); font-size: var(--fs-xs); color: var(--text-3); display: flex; gap: var(--s-1-5); align-items: center; }
.sheet-foot .i { color: var(--text-4); }

.palette { width: min(var(--palette-w), calc(100vw - var(--s-6))); margin: var(--palette-top) auto auto; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--elev-pop); overflow: hidden; animation: dlg-in var(--dur-enter-sm) var(--curve); }
.pal-in { display: flex; align-items: center; gap: var(--s-2-5); padding: 0 var(--s-3-5) 0 var(--s-4); border-bottom: var(--bw) solid var(--border); }
.pal-in > .i { color: var(--text-4); }
.pal-in input { flex: 1; height: var(--palette-input-h); border: 0; background: transparent; font-size: var(--fs-md); outline: none; min-width: 0; }
.pal-in input::placeholder { color: var(--text-3); }
.pal-list { max-height: min(var(--menu-max-h), var(--palette-list-max-h)); overflow-y: auto; padding: var(--s-1) var(--s-1-5) var(--s-1-5); }
.pal-group { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--text-3); padding: var(--s-2) var(--s-2-5) var(--s-1); }
.pal-item { display: flex; align-items: center; gap: var(--s-2-5); width: 100%; height: var(--h-lg); padding: 0 var(--s-2-5); border-radius: var(--r-sm); text-align: left; }
.pal-item[aria-selected="true"] { background: var(--surface-2); }
.pal-item > .i { color: var(--text-4); }
.pal-item .grow { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--s-2); }
.pal-item .grow .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; max-width: 100%; }
.pal-item .grow .s { font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; min-width: 0; }
.pal-item mark { background: none; color: var(--accent); font-weight: var(--fw-medium); }
.pal-foot { display: flex; gap: var(--s-4); padding: var(--s-2) var(--s-3-5); border-top: var(--bw) solid var(--border); background: var(--sunken); font-size: var(--fs-2xs); color: var(--text-3); }
.pal-foot span { display: inline-flex; gap: var(--so-5); align-items: center; }
.pal-empty { padding: var(--s-7) var(--s-4); text-align: center; color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-19); }

.keys { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); color: var(--text-2); }
.keys .combo { display: flex; gap: var(--s-1); justify-content: flex-end; align-items: center; color: var(--text-3); font-size: var(--fs-2xs); }
.keys h3 { grid-column: 1 / -1; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-3); margin-top: var(--s-2); }

.toasts { position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-end; pointer-events: none; max-width: calc(100vw - var(--s-8)); }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: var(--s-2-5); min-height: var(--s-10); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3);
  background: var(--text); color: var(--text-inv); border-radius: var(--r); box-shadow: var(--elev-pop);
  font-size: var(--fs-sm); animation: toast-in var(--dur-toast) var(--curve); max-width: 100%;
}
.toast > .i { color: var(--success-on-inverse); }
.toast[data-ico="alert-c"] > .i, .toast[data-ico="lock"] > .i { color: var(--danger-on-inverse); }
.toast[data-ico="info"] > .i, .toast[data-ico="user"] > .i { color: currentColor; opacity: var(--op-soft); }
.toast .msg { padding: var(--s-1-5) var(--s-2) var(--s-1-5) 0; line-height: var(--lh-18); }
.toast button { height: var(--h-md); padding: 0 var(--s-2-5); border-radius: var(--r-sm); font-weight: var(--fw-semibold); color: inherit; transition: background-color var(--dur) var(--curve); }
.toast button:hover { background: var(--text-inv-hover); }
.toast.out { animation: toast-out var(--dur-exit) var(--curve-in) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--move-rise-lg)); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(var(--move-rise)); } }

.tip { position: fixed; z-index: var(--z-tooltip); pointer-events: none; background: var(--text); color: var(--text-inv); font-size: var(--fs-2xs); font-weight: var(--fw-medium); line-height: var(--lh-15); padding: var(--so-5) var(--s-2); border-radius: var(--r-chip); box-shadow: var(--elev-sm); max-width: var(--tip-max-w); }

/* ---------- Preview chip, preview dialog ---------- */
.dev { flex: none; display: flex; gap: var(--s-1-5); }
.pv-chip {
  display: inline-flex; align-items: center; gap: var(--s-1-5); height: var(--h-sm); padding: 0 var(--s-0-5) 0 var(--s-2);
  border-radius: var(--r-sm); border: var(--bw) dashed var(--border-strong); background: var(--sunken);
  font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap;
}
.pv-chip > .i { color: var(--text-3); }
.pv-chip b { font-weight: var(--fw-medium); color: var(--text); }
.pv-chip button { width: var(--h-xs); height: var(--h-xs); display: grid; place-items: center; border-radius: var(--r-xs); color: var(--text-2); transition: background-color var(--dur) var(--curve), color var(--dur) var(--curve); }
.pv-chip button:hover { background: var(--surface-3); color: var(--text); }
.dev-intro { font-size: var(--fs-sm); color: var(--text-3); }
.dev-fs { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-px); }
.dev-fs legend { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2); margin-bottom: var(--s-1-5); padding: 0; }
.dev-opt { display: flex; align-items: center; gap: var(--so-9); min-height: var(--h-md); padding: var(--so-3) var(--s-2); margin: 0 calc(var(--s-2) * -1); border-radius: var(--r-sm); cursor: pointer; color: var(--text); transition: background-color var(--dur) var(--curve); }
.dev-opt:hover { background: var(--surface-2); }
.dev-opt .grow { display: flex; flex-direction: column; line-height: var(--lh-17); }
.dev-opt .grow small { font-size: var(--fs-2xs); color: var(--text-3); line-height: var(--lh-14); }

/* Checkbox and radio (color-system.md §F) */
.dev-opt input, .ctl input {
  appearance: none; -webkit-appearance: none; flex: none; width: var(--s-4); height: var(--s-4); margin: 0;
  border: var(--bw-ring) solid var(--border-strong); background: var(--surface); display: grid; place-items: center; cursor: pointer;
  transition: border-color var(--dur) var(--curve), background-color var(--dur) var(--curve);
}
.dev-opt input, .ctl input[type="radio"] { border-radius: 50%; }
.ctl input[type="checkbox"] { border-radius: var(--r-xs); }
.dev-opt input:hover, .ctl input:hover { border-color: var(--text-4); }
.dev-opt input:checked, .ctl input[type="radio"]:checked { border-color: var(--accent); }
.dev-opt input:checked::before, .ctl input[type="radio"]:checked::before { content: ""; width: var(--s-2); height: var(--s-2); border-radius: 50%; background: var(--accent); }
.ctl input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.ctl input[type="checkbox"]:checked::before { content: ""; width: var(--s-1); height: var(--s-2); margin-top: calc(var(--s-0-5) * -1); border: solid var(--on-accent); border-width: 0 var(--bw-mark) var(--bw-mark) 0; transform: rotate(45deg); }
.ctl input:disabled { background: var(--disabled-bg); border-color: var(--disabled-border); cursor: not-allowed; }
.ctl input[type="checkbox"]:checked:disabled { background: var(--disabled-fg); border-color: var(--disabled-fg); }
.ctl input[type="checkbox"]:checked:disabled::before { border-color: var(--surface); }
.ctl input[type="radio"]:checked:disabled { border-color: var(--disabled-fg); }
.ctl input[type="radio"]:checked:disabled::before { background: var(--disabled-fg); }
.ctl { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text); cursor: pointer; min-height: var(--h-sm); }
.ctl:has(input:disabled) { color: var(--disabled-fg); cursor: not-allowed; }

/* Select: native control, chevron drawn with the icon set */
.select-wrap { position: relative; display: flex; align-items: center; }
.select { appearance: none; -webkit-appearance: none; padding-right: var(--so-30); cursor: pointer; }
.select-wrap > .i { position: absolute; right: var(--so-9); color: var(--text-4); pointer-events: none; }
.select:hover { border-color: var(--border-hover); }
.select:disabled + .i { color: var(--disabled-fg); }
.select:focus { border-color: var(--accent); box-shadow: 0 0 0 var(--focus-field-w) var(--focus-field); outline: none; }
.search-kbd { position: absolute; right: var(--so-5); }

/* Forced states for specimens on the Design system page */
.btn.is-hover { background: var(--surface-2); }
.btn.is-active { background: var(--surface-3); }
.btn.primary.is-hover { background: var(--accent-hover); }
.btn.primary.is-active { background: var(--accent-pressed); }
.btn.danger.is-hover { background: var(--danger-hover); }
.btn.danger:active, .btn.danger.is-active { background: var(--danger-pressed); }
.btn.ghost.is-hover { background: var(--surface-2); color: var(--text); }
.btn.ghost.is-active { background: var(--surface-3); color: var(--text); }
.is-focus { outline: var(--focus-w) solid var(--accent); outline-offset: var(--focus-offset); }
.input.is-focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 var(--focus-field-w) var(--focus-field); }
/* Loading: the label keeps its place (and the button its width); a spinner sits on top */
.btn.loading { position: relative; pointer-events: none; }
.btn.loading > * { visibility: hidden; }
.btn.loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: var(--s-3-5); height: var(--s-3-5); border-radius: 50%;
  border: var(--bw-mark) solid var(--spin, var(--text-2)); border-right-color: transparent; animation: spin var(--dur-spin) var(--curve-linear) infinite;
}
.btn.primary.loading { --spin: var(--on-accent); }
.btn.danger.loading { --spin: var(--on-danger); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Sidebar foot: Help and dev, Settings ---------- */
button.nav-item { width: 100%; text-align: left; }
.nav-item[data-on="true"] { color: var(--text); }
.nav-item[data-on="true"] > .i { color: var(--text-2); }
.side-foot .nav-group { padding-bottom: var(--s-1-5); }

/* ---------- Offline bar ---------- */
.netbar {
  display: flex; align-items: center; gap: var(--s-2-5); min-height: var(--netbar-h); padding: var(--s-1-5) var(--s-3) var(--s-1-5) var(--s-4);
  background: var(--warning-bg); border-bottom: var(--bw) solid var(--border); font-size: var(--fs-sm); line-height: var(--lh-18); color: var(--text);
}
.netbar > .i { color: var(--warning); }
.netbar b { font-weight: var(--fw-semibold); }
.netbar .grow { flex: 1; min-width: 0; }
.netbar .btn { margin: calc(var(--s-1) * -1) 0; }

/* ---------- Settings → Appearance ---------- */
.page-narrow > * { max-width: var(--content-max); }
.set-sec { padding: var(--s-1) 0 var(--s-6); }
.set-sec + .set-sec { border-top: var(--bw) solid var(--divider); padding-top: var(--s-5); }
.set-h { font-size: var(--fs); font-weight: var(--fw-semibold); margin-bottom: var(--s-3); }
.set-row { display: flex; align-items: center; gap: var(--s-6); min-height: var(--set-row-h); padding: var(--s-2) 0; }
.set-row + .set-row { border-top: var(--bw) solid var(--divider); }
.set-l { flex: 1; min-width: 0; }
.set-l h3 { font-size: var(--fs); font-weight: var(--fw-medium); }
.set-l p { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--s-0-5); max-width: var(--set-help-measure); line-height: var(--lh-18); }
.set-c { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.set-val { font-size: var(--fs-xs); color: var(--text-3); min-width: var(--set-val-w); }
.set-foot { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; border-top: var(--bw) solid var(--divider); padding-top: var(--s-4); }
.set-foot p { display: flex; gap: var(--s-2); align-items: flex-start; flex: 1; min-width: var(--set-note-min-w); font-size: var(--fs-xs); color: var(--text-3); }
.set-foot p .i { color: var(--text-4); margin-top: var(--s-0-5); }

.theme-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.theme-opt {
  display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-1-5) var(--s-1-5) var(--s-2); border-radius: var(--r-lg); cursor: pointer;
  border: var(--bw) solid var(--border-strong); background: var(--surface);
  transition: border-color var(--dur) var(--curve), box-shadow var(--dur) var(--curve);
}
.theme-opt:hover { border-color: var(--border-hover); }
.theme-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 var(--focus-field-w) var(--focus-field); }
.theme-opt:has(input:focus-visible) { outline: var(--focus-w) solid var(--accent); outline-offset: var(--focus-offset-wide); }
.theme-l { display: flex; align-items: center; gap: var(--so-7); padding: 0 var(--s-1); font-size: var(--fs-sm); font-weight: var(--fw-medium); min-width: 0; }
.theme-l > .i { color: var(--text-3); }
.theme-l .muted { font-weight: var(--fw-regular); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.theme-l .theme-ok { margin-left: auto; color: var(--accent); visibility: hidden; }
.theme-opt:has(input:checked) .theme-l > .i:first-child { color: var(--accent); }
.theme-opt:has(input:checked) .theme-ok { visibility: visible; }
/* Theme thumbnails: each is painted from its own theme's listed values */
.tp-frame { display: block; height: var(--theme-preview-h); border-radius: var(--r); overflow: hidden; box-shadow: inset 0 0 0 var(--bw) var(--border); }
.tp-split { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.tp-split > span { overflow: hidden; min-width: 0; }
.tp-split .tp { width: 200%; }
.tp-split > span + span .tp { margin-left: -100%; }
.tp { --tp-side: var(--p-nl-150); --tp-main: var(--p-nl-0); --tp-line: var(--p-nl-300); --tp-item: var(--p-nl-400); --tp-ink: var(--p-nl-900); --tp-acc: var(--acc-l);
  display: grid; grid-template-columns: 30% 1fr; height: 100%; background: var(--tp-main); }
.tp.tp-dark { --tp-side: var(--p-nd-950); --tp-main: var(--p-nd-850); --tp-line: var(--p-nd-750); --tp-item: var(--p-nd-600); --tp-ink: var(--p-nd-100); --tp-acc: var(--acc-d); }
.tp-side { background: var(--tp-side); border-right: var(--bw) solid var(--tp-line); display: flex; flex-direction: column; gap: var(--so-5); padding: var(--s-3) var(--s-2); }
.tp-side i { display: block; height: var(--s-1); border-radius: var(--r-hair); background: var(--tp-item); }
.tp-side i:first-child { width: 70%; background: var(--tp-ink); opacity: var(--op-soft); }
.tp-side i:nth-child(2) { width: 85%; } .tp-side i:nth-child(3) { width: 60%; }
.tp-main { display: flex; flex-direction: column; gap: var(--s-1-5); padding: var(--s-3) var(--s-3); }
.tp-main i { display: block; height: var(--s-1); border-radius: var(--r-hair); background: var(--tp-line); }
.tp-main i.w1 { width: 46%; height: var(--s-1-5); background: var(--tp-ink); }
.tp-main i.w2 { width: 88%; } .tp-main i.w3 { width: 70%; }
.tp-main b { display: block; width: 34%; height: var(--s-2-5); border-radius: var(--r-micro); background: var(--tp-acc); margin-top: var(--s-1); }

.swatches { display: flex; gap: var(--s-2-5); align-items: center; }
.swatch { --sw: var(--p-acc-graphite-l); position: relative; display: grid; place-items: center; width: var(--h-sm); height: var(--h-sm); border-radius: 50%; cursor: pointer; }
.swatch[data-a="indigo"] { --sw: var(--p-acc-indigo-l); } .swatch[data-a="blue"] { --sw: var(--p-acc-blue-l); } .swatch[data-a="teal"] { --sw: var(--p-acc-teal-l); }
.swatch[data-a="violet"] { --sw: var(--p-acc-violet-l); } .swatch[data-a="rose"] { --sw: var(--p-acc-rose-l); }
:root[data-theme="dark"] .swatch { --sw: var(--p-acc-graphite-d); }
:root[data-theme="dark"] .swatch[data-a="indigo"] { --sw: var(--p-acc-indigo-d); } :root[data-theme="dark"] .swatch[data-a="blue"] { --sw: var(--p-acc-blue-d); }
:root[data-theme="dark"] .swatch[data-a="teal"] { --sw: var(--p-acc-teal-d); } :root[data-theme="dark"] .swatch[data-a="violet"] { --sw: var(--p-acc-violet-d); }
:root[data-theme="dark"] .swatch[data-a="rose"] { --sw: var(--p-acc-rose-d); }
.swatch .sw { width: var(--h-xs); height: var(--h-xs); border-radius: 50%; background: var(--sw); display: grid; place-items: center; color: var(--on-accent); transition: box-shadow var(--dur) var(--curve), transform var(--dur) var(--curve); }
.swatch .sw .i { visibility: hidden; stroke-width: var(--icon-stroke-heavy); }
.swatch:hover .sw { transform: scale(var(--scale-hover)); }
.swatch:has(input:checked) .sw { box-shadow: 0 0 0 var(--focus-w) var(--surface), 0 0 0 calc(var(--focus-w) * 2) var(--sw); }
.swatch:has(input:checked) .sw .i { visibility: visible; }
.swatch:has(input:focus-visible) { outline: var(--focus-w) solid var(--accent); outline-offset: var(--focus-offset-swatch); }

/* ---------- Dev pages ---------- */
.jump { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: calc(var(--s-2) * -1) 0 var(--s-5); padding-bottom: var(--s-3-5); border-bottom: var(--bw) solid var(--border); }
.jump-l { height: var(--h-sm); padding: 0 var(--so-9); border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-2); box-shadow: inset 0 0 0 var(--bw) var(--border); transition: background-color var(--dur) var(--curve), color var(--dur) var(--curve); }
.jump-l:hover { background: var(--surface-2); color: var(--text); }
.ds-sec { padding: var(--s-2) 0 var(--s-7); scroll-margin-top: calc(var(--topbar-h) + var(--s-4)); }
.ds-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-2-5); font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); margin-bottom: var(--s-3); outline: none; scroll-margin-top: calc(var(--topbar-h) + var(--s-4)); }
.ds-h span { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-3); letter-spacing: var(--ls-0); }
.ds-box { border: var(--bw) solid var(--border); border-radius: var(--r-lg); padding: var(--s-1-5) var(--s-4); background: var(--surface); min-width: 0; }
.ds-box + .ds-box, .banner + .ds-box { margin-top: var(--s-3); }
.ds-bh { font-size: var(--fs-sm); font-weight: var(--fw-semibold); padding: var(--s-2) 0 var(--s-2-5); }
.ds-line { display: flex; align-items: center; gap: var(--s-4); min-height: var(--s-12); padding: var(--s-2) 0; }
.ds-line + .ds-line { border-top: var(--bw) solid var(--divider); }
.ds-k { width: var(--ds-key-w); flex: none; font-size: var(--fs-sm); color: var(--text-2); }
.ds-v { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; flex: 1; }
.ds-v .prop { margin-left: 0; }
.ds-note { font-size: var(--fs-xs); color: var(--text-3); }
.ds-box > .ds-note { padding: var(--s-2) 0 var(--s-2-5); }
.ds-wide { display: block; }
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ds-swatch-min), 1fr)); gap: var(--s-2-5); }
.ds-sw { border: var(--bw) solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.ds-chip { display: block; height: var(--ds-specimen); border-bottom: var(--bw) solid var(--border); }
.ds-sw-t { display: flex; flex-direction: column; padding: var(--so-7) var(--s-2-5) var(--s-2); line-height: var(--lh-16); min-width: 0; }
.ds-sw-t b { font-weight: var(--fw-medium); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-sw-t .mono { color: var(--text-3); }
.ds-hex { min-height: var(--s-4); }
.ds-person { display: inline-flex; }
.ds-sizes { align-items: center; }
.ds-vn { gap: var(--s-1-5) var(--s-3-5); font-size: var(--fs); }
.ds-type { padding: var(--s-0-5) var(--s-4); }
.ds-trow { display: grid; grid-template-columns: var(--ds-type-label-w) minmax(0, 1fr); gap: var(--s-4); align-items: baseline; padding: var(--s-3) 0; }
.ds-trow + .ds-trow { border-top: var(--bw) solid var(--divider); }
.ds-tm { display: flex; flex-direction: column; font-size: var(--fs-xs); line-height: var(--lh-16); }
.ds-tm b { font-weight: var(--fw-medium); color: var(--text); font-variant-numeric: tabular-nums; }
.ds-tm span { color: var(--text-3); }
.ds-ts { min-width: 0; overflow-wrap: anywhere; line-height: var(--lh-1-3); }
.ds-weights { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--so-18); font-size: var(--fs-md); }
.ds-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.ds-grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-4); align-items: start; }
.ds-grid3 .ds-box { padding-bottom: var(--s-3); }
.ds-space { display: grid; grid-template-columns: var(--h-sm) 1fr; align-items: center; gap: var(--s-2); height: var(--s-5); }
.ds-space .mono { color: var(--text-3); text-align: right; }
.ds-bar { display: block; height: var(--s-2); border-radius: var(--r-hair); background: var(--accent-soft); box-shadow: inset 0 0 0 var(--bw) var(--accent-line); }
.ds-radii { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.ds-rad { width: var(--ds-specimen); height: var(--ds-specimen); display: grid; place-items: center; background: var(--surface-2); box-shadow: inset 0 0 0 var(--bw) var(--border-strong); }
.ds-rad .mono, .ds-hgt .mono { color: var(--text-3); }
.ds-heights { display: flex; gap: var(--s-2); align-items: flex-end; margin: var(--s-3-5) 0 var(--s-2-5); }
.ds-hgt { width: var(--ds-specimen); display: grid; place-items: center; border-radius: var(--r-sm); box-shadow: inset 0 0 0 var(--bw) var(--border-strong); }
.ds-elev { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); padding: var(--s-1) var(--s-1) var(--s-3); }
.ds-el { display: flex; flex-direction: column; gap: var(--s-0-5); padding: var(--s-2-5); border-radius: var(--r); background: var(--surface); font-size: var(--fs-xs); color: var(--text-3); line-height: var(--lh-15); }
.ds-el b { color: var(--text); font-weight: var(--fw-medium); }
.ds-matrix { padding: 0 var(--s-4); }
.ds-mrow { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-3-5) 0; }
.ds-mrow + .ds-mrow { border-top: var(--bw) solid var(--divider); }
.ds-rl { width: var(--ds-row-label-w); flex: none; font-size: var(--fs-sm); color: var(--text-2); padding-top: var(--so-22); }
.ds-cells { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); min-width: 0; flex: 1; }
.ds-inline { align-items: center; padding-top: var(--s-0-5); }
.ds-mrow:last-child .ds-rl { padding-top: var(--s-1-5); }
.ds-cell { display: flex; flex-direction: column; gap: var(--s-1-5); }
.ds-cl { font-size: var(--fs-2xs); color: var(--text-3); }
.ds-divider { width: var(--s-px); height: var(--h-xs); background: var(--border); margin: 0 var(--s-1); }
.ds-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); padding: var(--s-4); }
.ds-span2 { grid-column: span 2; }
.ds-choices { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s-0-5); }
.label-l { font-size: var(--fs-sm); font-weight: var(--fw-medium); padding: 0; margin-bottom: var(--s-1); }
.ds-tabs { border-bottom: var(--bw) solid var(--border); }
.ds-stepper { margin: 0; }
.step.is-cur { background: var(--surface-3); color: var(--text); font-weight: var(--fw-medium); }
.step.is-locked { color: var(--text-3); }
/* A stage the viewer can't reach reads as locked: muted shape plus the lock, never the stage colour. */
.step[aria-disabled="true"] svg.st, .step.is-locked svg.st { color: var(--status-locked); }
.ds-list { border: var(--bw) solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.ds-list .table th { position: static; }
.ds-list .table tbody tr:last-child td { border-bottom: 0; }
.ds-progress { display: flex; flex-direction: column; gap: var(--s-3); }
.ds-prog { display: block; height: var(--s-1); border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.ds-prog i { display: block; height: 100%; border-radius: inherit; }
.ds-col { min-height: 0; }
.ds-col .col-empty { margin-top: var(--s-0-5); }
.ds-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ds-icon-min), 1fr)); gap: var(--s-2); }
.ds-ic { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-3-5) var(--s-1-5) var(--s-2-5); border-radius: var(--r); border: var(--bw) solid var(--divider); color: var(--text-2); }
.ds-ic .mono { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ds-sec > .banner { margin-bottom: var(--s-2); }

.ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ss-frame-min)), 1fr)); gap: var(--s-4); }
.ss-grid.ss-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ss-frame-min-4)), 1fr)); }
.ss-card { margin: 0; border: var(--bw) solid var(--border); border-radius: var(--r-lg); background: var(--surface); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.ss-card.ss-wide { grid-column: 1 / -1; }
.ss-cap { display: flex; align-items: center; gap: var(--s-2); height: var(--h-lg); padding: 0 var(--s-3); border-bottom: var(--bw) solid var(--border); background: var(--sunken); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-2); }
.ss-cap .i { color: var(--text-4); }
.ss-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--s-4); min-height: var(--ss-body-min-h); }
.ss-flush .ss-body { padding: 0; justify-content: flex-start; }
.ss-4 .ss-body, .ss-body:has(> .ss-stack), .ss-body:has(> .ss-row) { justify-content: flex-start; }
.ss-body > .empty { padding: var(--s-5) var(--s-2); }
.ss-sk { width: 100%; }
.ss-row { display: flex; flex-wrap: wrap; gap: var(--s-2-5); align-items: center; }
.ss-stack { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; width: 100%; }
.ss-stack > .banner, .ss-stack > .netbar, .ss-stack > .dlg { width: 100%; margin: 0; }
.ss-stack > .netbar { border: var(--bw) solid var(--border); border-radius: var(--r); }
.ss-dlg { position: static; width: 100%; animation: none; }
.ss-dlg .dlg-head h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); line-height: var(--lh-22); }
.ss-ta { display: block; min-height: var(--ss-ta-min); color: var(--text); }
.ss-field { width: 100%; }
.ss-stepper { margin: 0; }

/* ---------- Lead quick view (drawer) ---------- */
.peek-btn { opacity: 0; margin-left: auto; width: var(--s-6); height: var(--s-6); transition: opacity var(--dur) var(--curve), background-color var(--dur) var(--curve), color var(--dur) var(--curve); }
/* In a table row the quick-view button is an overlay: it reserves no width, and while shown it
   covers the end of the studio cell on the row's own background, with a short fade before it. */
.table tbody tr { --row-bg: var(--surface); }
.table tbody tr:hover { --row-bg: var(--surface-2); }
.table tbody tr.is-flag, .table tbody tr.is-peek { --row-bg: var(--selected-bg-opaque); }
.cell-t .peek-btn { position: absolute; right: calc(var(--s-1-5) * -1); top: 50%; margin: calc(var(--s-3) * -1) 0 0; background: var(--row-bg); pointer-events: none; }
.cell-t .peek-btn::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: var(--s-4); background: linear-gradient(to right, transparent, var(--row-bg)); pointer-events: none; }
.cell-t .peek-btn:hover { background: var(--surface-3); }
tr:hover .peek-btn, tr:focus-within .peek-btn, .card:hover .peek-btn, .card:focus-within .peek-btn, .peek-btn[aria-expanded="true"], .peek-btn:focus-visible { opacity: 1; pointer-events: auto; }
@media (hover: none) { .peek-btn { opacity: 1; pointer-events: auto; } }
.table tbody tr.is-peek { background: var(--selected-bg); }
/* Selection has a second cue besides the tint: a bar on the leading edge. Same bar on the selected row,
   the row whose quick view is open, and an active filter chip (fix 4). */
.table tbody tr.is-flag > td:first-child, .table tbody tr.is-peek > td:first-child { box-shadow: inset var(--selected-bar-w) 0 0 var(--selected-bar); }
.card.is-peek { box-shadow: 0 0 0 var(--bw) var(--accent), 0 0 0 calc(var(--bw) + var(--focus-field-w)) var(--accent-soft); }
.peek {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-peek); width: min(var(--drawer-w), 100vw);
  display: flex; flex-direction: column; background: var(--surface);
  border-left: var(--bw) solid var(--border); box-shadow: var(--elev-drawer);
  animation: sheet-in var(--dur-drawer) var(--curve-drawer);
}
.peek[hidden] { display: none; }
.peek-head { display: flex; align-items: center; gap: var(--s-0-5); height: var(--topbar-h); padding: 0 var(--s-2-5) 0 var(--s-5); border-bottom: var(--bw) solid var(--border); flex: none; }
.peek-where { display: inline-flex; align-items: center; gap: var(--so-7); font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; min-width: 0; }
.peek-where > .i { color: var(--text-4); }
.peek-where .pos { color: var(--text-3); font-variant-numeric: tabular-nums; margin-left: var(--s-1); }
.peek-head .grow { flex: 1; }
.peek-sep { width: var(--s-px); height: var(--s-4); background: var(--border); margin: 0 var(--s-1-5); }
.peek-body { flex: 1; overflow-y: auto; padding: var(--s-5) var(--s-6) var(--s-8); display: flex; flex-direction: column; gap: var(--s-5); }
.peek-body > .banner { margin: 0; }
.peek-title-row { display: flex; gap: var(--s-3); align-items: flex-start; }
.peek-title-row h2 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); line-height: var(--lh-1-25); outline: none; overflow-wrap: anywhere; }
.peek-props { grid-template-columns: var(--prop-label-w) minmax(0, 1fr); gap: var(--s-0-5) var(--s-3); }
.pk-contact { display: flex; align-items: center; gap: var(--s-1); min-width: 0; min-height: var(--h-sm); }
.pk-contact a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs); }
.pk-contact a:hover { text-decoration: underline; text-underline-offset: var(--so-3); text-decoration-color: var(--border-strong); }
.pk-contact .copy { opacity: 0; width: var(--h-xs); height: var(--h-xs); transition: opacity var(--dur) var(--curve); }
.pk-contact:hover .copy, .pk-contact .copy:focus-visible { opacity: 1; }
@media (hover: none) { .pk-contact .copy { opacity: 1; } }
.peek-sec { border-top: var(--bw) solid var(--border); padding-top: var(--s-4); }
.peek-sec h3 { font-size: var(--fs); font-weight: var(--fw-semibold); margin-bottom: var(--s-3); display: flex; gap: var(--s-1-5); align-items: baseline; }
.peek-sec h3 .c { color: var(--text-3); font-weight: var(--fw-book); font-size: var(--fs-xs); }
.peek-sec > .muted { font-size: var(--fs-sm); }
.peek-hist li { display: grid; grid-template-columns: var(--s-3-5) minmax(0, 1fr) auto; gap: var(--s-2-5); align-items: center; min-height: var(--peek-hist-h); font-size: var(--fs-sm); color: var(--text-2); }
.peek-hist li > .i { color: var(--text-4); }
.peek-hist .t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peek-hist time { font-size: var(--fs-xs); color: var(--text-3); }
.peek-foot { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-top: var(--bw) solid var(--border); background: var(--surface); flex: none; }
.peek-foot .btn.primary .i { margin-left: 0; margin-right: calc(var(--s-0-5) * -1); }

/* ---------- Responsive ---------- */
/* Lead list columns. Status, assignee, numbers and staff names never truncate at 1280 px or wider:
   every column but Lead is sized to its longest value plus --col-slack, and Lead takes what is left.
   As the table narrows Industry hides first, then Source, so Lead keeps at least --col-lead-min. */
.c-loc { width: var(--col-location); } .c-status { width: var(--col-status); } .c-assignee { width: var(--col-assignee); }
.c-industry { width: var(--col-industry); } .c-source { width: var(--col-source); } .c-captured { width: var(--col-captured); }
/* Hiding follows the table's own width (container query), not the viewport. 883 px = --col-lead-min
   plus every fixed column; 815 px = that minus Industry (tokens --cq-leads-*). */
.table-wrap:has(> .t-leads) { container: leads / inline-size; }
@container leads (max-width: 882px) { .col-industry { display: none; } }
@container leads (max-width: 814px) { .col-source { display: none; } }
/* Narrow desktops: a slightly shorter search (still wide enough for its placeholder) and Sort without
   its "Sort:" prefix keep Filter, Group, Sort and the counter on one line. */
@media (max-width: 1279px) and (min-width: 761px) { .toolbar .sort-l { display: none; } }
/* Most recent Nomad Leads on the Dashboard: the same rule in a narrower table. */
.t-recent .r-status { width: var(--col-recent-status); } .t-recent .r-assignee { width: var(--col-recent-assignee); } .t-recent .r-captured { width: var(--col-recent-captured); }
@media (max-width: 1180px) {
  .dash { display: flex; flex-direction: column; align-items: stretch; }
  .dash-col { display: contents; }
  /* One column: the panels stack, so Most recent Nomad Leads keeps its first five rows (desktop fills
     the left column with more) and the stat labels take their short form before they would cut. */
  .t-recent tbody tr:nth-child(n+6) { display: none; }
  .stat-l .tab-long { display: none; }
  .stat-l .tab-short { display: inline; }
  .rec { grid-template-columns: minmax(0, 1fr) var(--rail-w-narrow); }
  .rec-main { padding: var(--s-6) var(--s-6) var(--s-16); }
}
@media (max-width: 1023px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: var(--z-nav-drawer); width: min(var(--side-drawer-w), var(--side-drawer-max));
    box-shadow: var(--elev-pop);
    transform: translateX(-102%); transition: transform var(--dur-drawer) var(--curve-drawer); visibility: hidden;
  }
  .app.nav-open .sidebar { transform: none; visibility: visible; }
  .scrim { display: block; position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity var(--dur-enter) var(--curve); }
  .app.nav-open .scrim { opacity: 1; pointer-events: auto; }
  .topbar .nav-toggle { display: inline-grid; margin-left: calc(var(--s-1) * -1); }
  .topbar { padding: 0 var(--s-2) 0 var(--s-3); }
  .rec { grid-template-columns: minmax(0, 1fr); }
  .rec-side { border-left: 0; border-top: var(--bw) solid var(--border); padding: var(--s-5) var(--s-6) var(--s-10); }
  .rec-contact-side { display: none; }
  .rec-contact-inline { display: block; margin-top: var(--s-5); padding-top: var(--so-18); border-top: var(--bw) solid var(--border); }
}
@media (max-width: 760px) {
  .sample-band .sb-long { display: none; }
  .sample-band .sb-short { display: inline; }
  .stat-in { padding: var(--s-3) var(--s-3-5) var(--s-2); }
  .stat .stale { padding: 0 var(--s-3) var(--s-2-5) var(--s-3-5); }
  .topbar { gap: var(--s-1); }
  .crumbs .hide-m, .crumbs .sep.hide-m { display: none; }
  .crumbs { font-size: var(--fs-md); }
  .crumb-nav .pos { display: none; }
  .search-trigger, .tb-new { display: none; }
  .topbar .tb-icon { display: inline-grid; width: var(--h-lg); height: var(--h-lg); }
  .tb-icon.plus { box-shadow: inset 0 0 0 var(--bw) var(--border-strong); border-radius: var(--r); }
  .topbar .nav-toggle { width: var(--h-lg); height: var(--h-lg); }
  .main { padding-bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom)); }
  .bnav {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bnav);
    height: calc(var(--bnav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface); border-top: var(--bw) solid var(--border);
  }
  .bnav a, .bnav button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--so-3); color: var(--text-3); font-size: var(--fs-2xs); font-weight: var(--fw-medium); transition: color var(--dur) var(--curve); }
  .bnav .i { width: var(--icon-xl); height: var(--icon-xl); stroke-width: var(--icon-stroke-nav); }
  .bnav [aria-current="page"] { color: var(--text); }
  .bnav .dot { position: absolute; top: var(--so-9); left: calc(50% + var(--so-7)); width: var(--so-7); height: var(--so-7); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 var(--focus-w) var(--surface); }
  .rec-main { padding: var(--s-5) var(--s-4) var(--s-8); }
  .rec-side { padding: var(--so-18) var(--s-4) var(--s-10); }
  .todo-title { overflow: hidden; text-overflow: ellipsis; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: var(--s-3) var(--s-3-5); }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(n + 3) { border-top: var(--bw) solid var(--border); }
  .soon-row { grid-template-columns: var(--soon-date-w) minmax(0, 1fr) auto; padding: 0 var(--s-3) 0 var(--s-3-5); }
  .soon-row .soon-when { display: none; }
  .soon-text { display: none; }
  .feed-row { padding: var(--s-2) var(--s-3) var(--s-2) var(--s-3-5); }
  .tab-long { display: none; }
  .tab-short { display: inline; }
  .qa { grid-template-columns: minmax(0, 1fr); gap: var(--s-0-5); }
  .qa dd { margin-bottom: var(--s-2-5); }
  .table-desktop { display: none; }
  .mlist { display: block; }
  .list { margin: 0 calc(var(--page-pad-x) * -1); }
  .toolbar .search { width: 100%; order: -1; margin: 0 0 var(--s-1); }
  .toolbar .search .input { height: var(--h-md); }
  .toolbar .spacer { display: none; }
  .rec-actions { margin-left: 0; width: 100%; }
  .rec-actions .btn.primary { flex: 1; }
  .stepper { width: 100%; height: var(--stepper-h-phone); }
  .step { position: relative; flex: 1 1 auto; min-width: 0; justify-content: center; padding: 0 var(--s-1-5); gap: var(--so-5); font-size: var(--fs-xs); }
  .step .step-l { overflow: hidden; text-overflow: ellipsis; }
  .board { grid-template-columns: repeat(var(--cols), var(--board-col-phone)); scroll-snap-type: x mandatory; margin: 0 calc(var(--page-pad-x) * -1); padding: var(--s-1) var(--page-pad-x) var(--s-2); scroll-padding: 0 var(--page-pad-x); }
  .col { scroll-snap-align: start; }
  .page-head { flex-wrap: wrap; }
  .page-actions { margin-left: 0; flex-wrap: wrap; }
  .panel-head { flex-wrap: wrap; }
  .toasts { right: var(--s-3); left: var(--s-3); align-items: stretch; bottom: calc(var(--bnav-h) + var(--s-3) + env(safe-area-inset-bottom)); max-width: none; }
  .table-desktop .peek-btn { display: none; }
  .pv-chip .pv-t { display: none; }
  .toolbar .sort-l { display: none; }
  .mgrp { padding-left: var(--s-1-5); }
  .pv-chip { height: var(--h-lg); padding: 0 var(--s-1) 0 var(--s-2-5); }
  .set-row { flex-direction: column; align-items: flex-start; gap: var(--s-2-5); padding: var(--s-3) 0; }
  .theme-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
  .theme-l .muted { display: none; }
  .ds-line { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .ds-k { width: auto; }
  /* the tabs specimen takes the column's width and scrolls like the real tabs, instead of widening the page */
  .ds-v.ds-wide { align-self: stretch; }
  .ds-grid3, .ds-grid2 { grid-template-columns: minmax(0, 1fr); }
  .ds-inputs { grid-template-columns: minmax(0, 1fr); }
  .ds-span2 { grid-column: auto; }
  .ds-trow { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .ds-mrow { flex-direction: column; gap: var(--s-2); }
  .ds-rl { padding-top: 0; width: auto; }
  .ds-list { margin: 0; }
  .peek-body { padding: var(--so-18) var(--s-4) var(--s-7); }
  .peek-head { padding-left: var(--s-4); }
  .peek-foot { padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); }
  .netbar { padding-left: var(--s-3); }
  .tl-row { grid-template-columns: var(--tl-ico) minmax(0, 1fr); }
  .tl-time { grid-column: 2; text-align: left; padding-top: 0; }
  .tl-time span { display: inline; margin-left: var(--s-1-5); }
  .review-card { grid-template-columns: minmax(0, 1fr); }
  .sheet-row { padding: 0 var(--s-4); }
  .ss-body { min-height: 0; }
  .ds-ic .mono { white-space: normal; text-align: center; }
}

/* Phones: only the current stage keeps its visible label; the others show their shape, with the label kept for screen readers and the tooltip. */
@media (max-width: 480px) {
  .step:not([aria-pressed="true"]):not(.is-cur) { flex: 0 0 var(--stepper-seg-phone); padding: 0; }
  .step:not([aria-pressed="true"]):not(.is-cur) .step-l { position: absolute; width: var(--s-px); height: var(--s-px); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .step .step-chk { display: none; }
  .step .step-past { display: block; }
}

/* Starting or ending soon, in a narrow panel (desktop side column or phone): the row keeps name, tag and "in N days"; date and detail move to the tooltip. Last in the file so it wins over the base and phone rules. */
@container (max-width: 520px) {
  .soon-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .soon-date, .soon-text { display: none; }
  .soon-row .soon-when { display: block; }
  .soon-name { flex: 1 1 auto; max-width: none; }
}

/* Design system: list and dashboard pieces */
.ds-sec > .ds-box + .ds-list, .ds-sec > .ds-note + .ds-list { margin-top: var(--s-3); }
.ds-sec > p.ds-note { margin: var(--s-1-5) var(--s-0-5) 0; }
.ds-chips { padding: 0; }
.ds-sec > .ds-dash { margin-top: var(--s-3); }
.ds-dash .stats { margin-bottom: 0; }
.ds-v .tabs-row { width: 100%; }
.ds-menu { position: static; animation: none; }
.ds-pair { display: inline-flex; align-items: center; gap: var(--s-1); }
/* An unnamed Nomad Lead's name truncates its words, never its capture date. */
.nm-split { display: inline-flex; max-width: 100%; min-width: 0; vertical-align: top; }
.nm-split > .nm-cut { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-split > .nm-keep { flex: none; white-space: nowrap; }
.ds-fmt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-8); }
.ds-fmt .ds-v { font-variant-numeric: tabular-nums; }
.ds-fmt > .ds-line { border-top: var(--bw) solid var(--divider); }
.ds-fmt > .ds-line:nth-child(-n + 2) { border-top: 0; }
.ds-fmt > .ds-span2 { grid-column: 1 / -1; }
.ds-fmt .mono { font-size: var(--fs-2xs); color: var(--text-3); }
.ds-figs { display: inline-flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) { .ds-fmt { grid-template-columns: minmax(0, 1fr); } .ds-fmt > .ds-line:nth-child(2) { border-top: var(--bw) solid var(--divider); } }