/* ==========================================================================
   ACE Developers ERP — component kit

   Surface treatment from the Figma reference; behaviour and semantics from
   docs/35. Every component here is used by a real screen.

   The scannability contract:
     · One primary-coloured element per block. Everything else is secondary
       or tertiary, so the eye has somewhere to land.
     · Facts are label-above-value pairs, never run-on strings joined by
       middots. A reader scans columns, not sentences.
     · Tables carry no per-row rules. Height, hover and a single anchored
       first column do the separating.
   ========================================================================== */

/* ================================================================ card === */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: var(--card-pad);
  position: relative;
}
.card-lg   { padding: var(--card-pad-lg); }
.card-flush{ padding: 0; overflow: hidden; }
.card-quiet{ box-shadow: none; background: var(--surface-2); }

.card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.card-title { font-size: var(--fs-h2); font-weight: 600; color: var(--text); letter-spacing: -.25px; line-height: 1.3; }
.card-sub   { font-size: var(--fs-sm); color: var(--text-3); margin-top: 3px; }
.card-head .spacer { flex: 1; }

.section-title {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 12px;
}

/* ============================================================== buttons === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 17px;
  border-radius: var(--r-md); border: 1px solid transparent;
  font-size: var(--fs-body); font-weight: 600; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.btn .ic { width: 17px; height: 17px; }
.btn:active { transform: scale(.98); }

.btn-primary   { background: var(--accent); color: #fff; box-shadow: var(--sh-accent); }
.btn-primary:hover { background: var(--accent-600); box-shadow: 0 12px 28px rgba(124,77,251,.36); }
.btn-secondary { background: #fff; border-color: var(--border-strong); color: var(--text); box-shadow: var(--sh-xs); }
.btn-secondary:hover { background: var(--surface-hover); border-color: #D6D3E8; }
.btn-ghost     { background: none; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); }
.btn-danger    { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(.94); }
.btn-sm  { height: 34px; padding: 0 13px; font-size: var(--fs-sm); }
.btn-icon{ width: 40px; padding: 0; }
.btn-icon.btn-sm { width: 34px; }

/* docs/35 §35.5: a disabled button ALWAYS explains itself on hover. */
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .42; cursor: not-allowed; box-shadow: none; pointer-events: auto;
}
.btn:disabled:active { transform: none; }

/* ------------------------------------------------------------- tooltip --- */
[data-why] { position: relative; }
[data-why]::after {
  content: attr(data-why);
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(3px);
  background: #26232F; color: #fff; font-size: var(--fs-xs); font-weight: 500;
  padding: 7px 10px; border-radius: var(--r-sm);
  /* a nowrap tooltip widens every ancestor's scrollWidth even while hidden,
     which shows up as a phantom horizontal scrollbar — so it wraps instead */
  width: max-content; max-width: 260px; white-space: normal; text-align: center; line-height: 1.45;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) 200ms, transform var(--t-fast) 200ms;
  z-index: 60; box-shadow: var(--sh-md);
}
[data-why]:hover::after, [data-why]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
/* near the right edge of the page a centred tooltip would hang off it, so
   anything in the action row or a card header hangs from its right edge */
.page-actions [data-why]::after, .card-head [data-why]::after,
.filterbar [data-why]::after { left: auto; right: 0; transform: translateY(3px); }
.page-actions [data-why]:hover::after, .card-head [data-why]:hover::after,
.filterbar [data-why]:hover::after { transform: translateY(0); }

/* =============================================================== badges === */
/* docs/35 §35.7 — five families, always with text, never colour alone. */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 25px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.badge.neutral { background: var(--neutral-bg); color: var(--neutral); }
.badge.info    { background: var(--info-bg);    color: var(--info); }
.badge.warning { background: var(--warning-bg); color: var(--warning); }
.badge.success { background: var(--success-bg); color: var(--success); }
.badge.danger  { background: var(--danger-bg);  color: var(--danger); }
.badge-plain::before { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 33px; padding: 0 13px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--border-strong);
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); cursor: pointer;
  transition: all var(--t-fast);
}
.chip:hover { border-color: #D6D3E8; color: var(--text); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--sh-accent); }
.chip .x { opacity: .7; font-weight: 700; }

/* ======================================================== icon tiles ===== */
/* The reference's signature: a soft rounded tile in a flat hue with a glow
   of the same hue underneath it.                                           */
.tile {
  width: 36px; height: 36px; border-radius: var(--r-md); flex: none;
  display: grid; place-items: center; color: #fff;
}
.tile .ic { width: 18px; height: 18px; stroke-width: 1.7; }
.tile-sm { width: 29px; height: 29px; border-radius: var(--r-sm); }
.tile-sm .ic { width: 15px; height: 15px; }
.tile.purple { background: var(--hue-purple); box-shadow: 0 8px 18px rgba(139,92,250,.34); }
.tile.green  { background: var(--hue-green);  box-shadow: 0 8px 18px rgba(79,223,177,.36); }
.tile.orange { background: var(--hue-orange); box-shadow: 0 8px 18px rgba(251,177,66,.36); }
.tile.red    { background: var(--hue-red);    box-shadow: 0 8px 18px rgba(237,91,117,.32); }
.tile.sky    { background: var(--hue-sky);    box-shadow: 0 8px 18px rgba(56,189,248,.32); }
.tile.rose   { background: var(--hue-rose);   box-shadow: 0 8px 18px rgba(244,63,114,.30); }
.tile.lime   { background: var(--hue-lime);   box-shadow: 0 8px 18px rgba(132,204,22,.32); }
.tile.neutral{ background: var(--text-3);     box-shadow: none; }
/* quiet variant — tinted background, coloured glyph, no glow */
.tile.quiet  { background: var(--accent-50); color: var(--accent-700); box-shadow: none; }

/* ============================================================== metrics === */
/* The KPI pattern. Micro-label, one big number, then facts as a small
   label-over-value grid — never a middot-joined sentence.                   */
.metric { display: block; position: relative; }
.metric-label {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3);
}
.metric-value {
  font-size: var(--fs-metric); font-weight: 700; color: var(--text);
  letter-spacing: -.8px; line-height: 1.1; margin-top: 7px;
}
.metric-value.lg { font-size: var(--fs-display); }
.metric-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 700; margin-top: 8px;
}
.metric-delta.up   { color: var(--money-positive); }
.metric-delta.down { color: var(--money-negative); }
.metric-delta.flat { color: var(--text-3); }

/* facts under a metric: two columns, label above value */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; margin-top: 12px; }
.facts.one { grid-template-columns: 1fr; }
.fact-k { font-size: var(--fs-xs); color: var(--text-3); margin-bottom: 3px; }
.fact-v { font-size: var(--fs-h3); font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.fact-v.pos { color: var(--money-positive); }
.fact-v.neg { color: var(--money-negative); }

/* KPI card wrapper — hover lifts, whole card is a link (BR-002) */
.kpi {
  display: block; background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); padding: var(--card-pad); position: relative; overflow: hidden;
  transition: box-shadow var(--t-med), transform var(--t-med);
}
.kpi:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
/* a KPI with nowhere to drill to does not pretend to be clickable */
.kpi-flat, .kpi-flat:hover { transform: none; cursor: default; }
.kpi-top { display: flex; align-items: flex-start; gap: 14px; }
.kpi-top .metric-label { flex: 1; padding-top: 3px; }

/* gradient hero card — the reference's signature surface */
.kpi-hero {
  background: var(--grad-mesh); color: #fff;
  border-radius: var(--r-xl); box-shadow: 0 16px 36px rgba(140,93,250,.32);
}
.kpi-hero::before, .kpi-hero::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.kpi-hero::before { width: 220px; height: 220px; right: -58px; top: -78px; background: rgba(255,255,255,.10); }
.kpi-hero::after  { width: 160px; height: 160px; left: -76px; bottom: -88px; background: rgba(255,255,255,.07); }
.kpi-hero .metric-label { color: rgba(255,255,255,.72); }
.kpi-hero .metric-value { color: #fff; }
.kpi-hero .fact-k { color: rgba(255,255,255,.66); }
.kpi-hero .fact-v { color: #fff; }
.kpi-hero .pill-soft { background: rgba(255,255,255,.20); color: #fff; }

.pill-soft {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 11px; border-radius: var(--r-pill);
  background: var(--accent-50); color: var(--accent-700);
  font-size: var(--fs-xs); font-weight: 700;
}

/* ============================================================ cover card === */
/* Image-led surface, as the reference uses for its featured property. */
.cover {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  min-height: 168px; display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; box-shadow: var(--sh-sm);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.cover:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,12,38,0) 34%, rgba(16,12,38,.62) 100%);
}
.cover-body { position: relative; padding: 16px 18px; }
.cover-title { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.3px; }
.cover-meta { font-size: var(--fs-sm); color: rgba(255,255,255,.78); margin-top: 3px; }
.cover-tags { position: absolute; top: 14px; left: 14px; display: flex; gap: 7px; }
.cover-tag {
  height: 25px; padding: 0 11px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.22); backdrop-filter: blur(6px);
  font-size: var(--fs-xs); font-weight: 600; color: #fff;
  display: inline-flex; align-items: center;
}
.cover-stat { position: absolute; top: 14px; right: 14px; text-align: right; }

/* ============================================================== avatars === */
.av { border-radius: var(--r-sm); object-fit: cover; flex: none; }
.av-xs { width: 26px; height: 26px; border-radius: 7px; }
.av-sm { width: 34px; height: 34px; }
.av-md { width: 44px; height: 44px; border-radius: var(--r-md); }

/* initials avatar — deterministic tint, no fake photography */
.ini {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
  background: var(--accent-50); color: var(--accent-700);
}
.ini-md { width: 44px; height: 44px; border-radius: var(--r-md); font-size: var(--fs-body); }
.ini.t1 { background:#EEF0FE; color:#4338CA } .ini.t2 { background:#F3EBFE; color:#6D28D9 }
.ini.t3 { background:#E6F6F3; color:#0F766E } .ini.t4 { background:#FDF0E4; color:#B45309 }
.ini.t5 { background:#FDEBEF; color:#BE123C } .ini.t6 { background:#E8F5FD; color:#0369A1 }

.av-stack { display: flex; }
.av-stack > * { margin-left: -9px; box-shadow: 0 0 0 2.5px var(--surface); }
.av-stack > *:first-child { margin-left: 0; }

/* party cell: avatar + name over meta */
.party { display: flex; align-items: center; gap: 11px; min-width: 0; }
.party-name { display: block; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-sub  { display: block; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =============================================================== tables ===
   No per-row rules. Height, hover and one anchored column separate the data. */
.table-wrap { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
table.data { font-size: var(--fs-body); }
table.data thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3);
  text-align: left; padding: 0 12px; height: 30px; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
table.data thead th.num, table.data td.num { text-align: right; }
table.data thead th[data-sort] { cursor: pointer; user-select: none; transition: color var(--t-fast); }
table.data thead th[data-sort]:hover { color: var(--text-2); }
table.data thead th .caret { opacity: 0; margin-left: 5px; font-size: 9px; }
table.data thead th[aria-sort] { color: var(--accent-700); }
table.data thead th[aria-sort] .caret { opacity: 1; }
table.data thead th[aria-sort="descending"] .caret { display: inline-block; transform: rotate(180deg); }

table.data tbody tr { transition: background var(--t-fast); }
table.data tbody tr + tr td { box-shadow: inset 0 1px 0 var(--border); }
table.data tbody tr.clickable { cursor: pointer; }
table.data tbody tr.clickable:hover td { background: var(--surface-hover); }
table.data tbody tr.is-selected td { background: var(--accent-50); }
table.data tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 var(--border); }

table.data td {
  padding: 0 12px; height: var(--row-h); vertical-align: middle;
  white-space: nowrap; color: var(--text-2);
}
table.data td.wrap { white-space: normal; }
/* a column marked wide-only drops out before the table starts scrolling, so
   the status of a row stays visible on an ordinary laptop */
@media (max-width: 1599px) {
  table.data th.wide-hide, table.data td.wide-hide { display: none; }
}
/* the anchor column — the one thing your eye lands on per row */
table.data td.anchor { font-weight: 600; color: var(--text); }
table.data td.money  { text-align: right; font-weight: 600; color: var(--money); }
table.data td.money.quiet { font-weight: 500; color: var(--text-2); }
/* the closing line of a report — heavier, ruled off, never striped */
table.data tr.total-row td {
  font-weight: 700; color: var(--text); background: var(--surface-2);
  box-shadow: inset 0 1.5px 0 var(--border-strong) !important;
}
table.data .muted { color: var(--text-3); }
table.data .sub { display: block; font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; margin-top: 1px; }
.code { font-weight: 600; color: var(--accent-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash { color: var(--text-3); }

.table-foot {
  display: flex; align-items: center; gap: 18px;
  padding: 15px 14px 2px; margin-top: 6px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text-3);
}
.table-foot b { color: var(--text-2); font-weight: 600; }
.table-foot .spacer { flex: 1; }

.bulkbar {
  position: sticky; bottom: 0; z-index: 5;
  display: none; align-items: center; gap: 14px;
  padding: 14px 18px; margin: 14px -28px -26px;
  background: #26232F; color: #fff;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.bulkbar.is-on { display: flex; }
.bulkbar .spacer { flex: 1; }
.bulkbar .btn-secondary { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.18); color: #fff; box-shadow: none; }
.bulkbar .btn-secondary:hover { background: rgba(255,255,255,.2); }

.pager { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.pager button {
  min-width: 34px; height: 34px; padding: 0 9px;
  border: 1px solid transparent; background: none; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500; cursor: pointer; color: var(--text-2);
  transition: all var(--t-fast);
}
.pager button:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
.pager button.is-on { background: var(--accent); color: #fff; font-weight: 700; box-shadow: var(--sh-accent); }
.pager button:disabled { opacity: .35; cursor: not-allowed; }

/* ========================================================== filter bar === */
.filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.search-input {
  display: flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 14px; min-width: 280px; flex: 1; max-width: 380px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); transition: all var(--t-fast);
}
.search-input:focus-within { background: #fff; border-color: var(--accent-100); box-shadow: 0 0 0 4px rgba(124,77,251,.09); }
.search-input .ic { width: 17px; height: 17px; color: var(--text-3); flex: none; }
.search-input input { border: 0; outline: 0; flex: 1; background: none; font-size: var(--fs-body); min-width: 0; }
.search-input input::placeholder { color: var(--text-3); }

/* segmented control */
.seg { display: inline-flex; background: var(--surface-sunken); border-radius: var(--r-md); padding: 3px; }
.seg button {
  border: 0; background: none; cursor: pointer; padding: 6px 13px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); transition: all var(--t-fast);
}
.seg button.is-on { background: #fff; color: var(--text); box-shadow: var(--sh-xs); }

/* ================================================================= tabs === */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 22px; overflow-x: auto; }
.tab {
  padding: 12px 15px; border: 0; background: none; cursor: pointer;
  font-size: var(--fs-body); font-weight: 600; color: var(--text-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: color var(--t-fast);
}
.tab:hover { color: var(--text-2); }
.tab.is-on { color: var(--text); border-bottom-color: var(--mod, var(--accent)); }
.tab .count {
  font-size: var(--fs-xs); color: var(--text-3); margin-left: 6px; font-weight: 700;
  background: var(--surface-sunken); padding: 1px 6px; border-radius: var(--r-pill);
}
.tabpanel[hidden] { display: none; }

/* ============================================================ stage bar === */
.stagebar { display: flex; align-items: center; padding: 20px 24px; overflow-x: auto; }
.stage { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.stage:last-child { flex: none; }
.stage-dot {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--surface-sunken); color: var(--text-3);
  font-size: 10px; font-weight: 800;
}
.stage-label { font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; font-weight: 500; }
.stage-line { flex: 1; height: 2px; background: var(--border-strong); margin: 0 12px; border-radius: 1px; min-width: 18px; }
.stage.done .stage-dot { background: var(--success); color: #fff; }
.stage.done .stage-label { color: var(--text-2); }
.stage.done .stage-line { background: var(--success); opacity: .45; }
.stage.now .stage-dot { background: var(--accent); color: #fff; box-shadow: 0 0 0 5px var(--accent-50); }
.stage.now .stage-label { color: var(--text); font-weight: 700; }

/* =============================================================== lists === */
.deflist { display: grid; grid-template-columns: max-content 1fr; gap: 14px 24px; font-size: var(--fs-body); }
.deflist dt { color: var(--text-3); }
.deflist dd { font-weight: 600; color: var(--text); }

/* stat rows — label left, value right */
.stats { display: grid; }
.stats > div {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; font-size: var(--fs-body);
}
.stats > div + div { border-top: 1px solid var(--border); }
.stats .k { color: var(--text-3); flex: 1; }
.stats .v { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* row list — the reference's Top Picks pattern */
.rowlist { display: grid; }
.rowlist > a, .rowlist > .row, .rowlist > .rl-static {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 10px; margin: 0 -10px; border-radius: var(--r-md);
  transition: background var(--t-fast);
  /* grid items default to min-width:auto, so a nowrap title refuses to
     shrink and pushes the page into horizontal scroll on a phone */
  min-width: 0;
}
.rowlist > a + a, .rowlist > .row + .row,
.rowlist > .rl-static + .rl-static, .rowlist > a + .rl-static,
.rowlist > .rl-static + a { box-shadow: inset 0 1px 0 var(--border); }
.rowlist > a:hover { background: var(--surface-hover); }
.rowlist .rl-bar { width: 3px; height: 30px; border-radius: 2px; flex: none; }
.rowlist .rl-main { flex: 1; min-width: 0; }
.rowlist .rl-title { font-size: var(--fs-body); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowlist .rl-sub { font-size: var(--fs-xs); color: var(--text-3); margin-top: 1px; }
.rowlist .rl-val { font-size: var(--fs-body); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.rowlist .rl-end { text-align: right; flex: none; min-width: 0; }
.rowlist .ic { color: var(--text-3); flex: none; width: 17px; height: 17px; }

/* progress ---------------------------------------------------------------- */
.bar { height: 7px; border-radius: 4px; background: var(--surface-sunken); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width var(--t-slow); }
.bar.success > i { background: var(--success); }
.bar.warning > i { background: var(--warning); }
.bar.danger  > i { background: var(--danger); }
.stack-bar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: var(--surface-sunken); gap: 2px; }
.stack-bar > i { display: block; height: 100%; border-radius: 2px; }

/* ========================================================= empty state === */
/* docs/00 §0.7 — illustration, one line, primary action. Never "No data". */
.empty { text-align: center; padding: 56px 22px; position: relative; }
.empty-art {
  width: 132px; height: 92px; margin: 0 auto 20px; position: relative;
  border-radius: var(--r-lg); background: url("../media/img/ambient.svg") center/cover;
  display: grid; place-items: center;
}
.empty-art .ic { width: 34px; height: 34px; color: var(--accent); stroke-width: 1.4; }
.empty h3 { font-size: var(--fs-h2); font-weight: 700; color: var(--text); margin-bottom: 7px; }
.empty p { font-size: var(--fs-body); color: var(--text-3); max-width: 400px; margin: 0 auto 20px; }

/* skeletons — match the layout shape, never a spinner */
.skeleton { background: linear-gradient(90deg, #F1F0F7 25%, #F8F7FC 37%, #F1F0F7 63%);
      background-size: 400% 100%; animation: skshimmer 1.6s linear infinite; border-radius: var(--r-sm); }
@keyframes skshimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }

/* ============================================== command palette GLB-002 === */
.overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(22,18,44,.38); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity var(--t-med);
}
.overlay.is-on { opacity: 1; pointer-events: auto; }

.palette {
  position: fixed; top: 13%; left: 50%; z-index: 81;
  transform: translateX(-50%) translateY(-8px) scale(.98);
  width: min(660px, calc(100vw - 32px)); max-height: 580px;
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-med), transform var(--t-med);
}
.palette.is-on { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
.pal-input { display: flex; align-items: center; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--border); }
.pal-input .ic { width: 19px; height: 19px; color: var(--text-3); }
.pal-input input { flex: 1; border: 0; outline: 0; font-size: 16px; background: none; }
.pal-results { overflow-y: auto; padding: 9px; }
.pal-group { font-size: var(--fs-label); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); padding: 11px 11px 6px; }
.pal-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 11px; border: 0; background: none; border-radius: var(--r-sm);
  cursor: pointer; text-align: left; transition: background var(--t-fast);
}
.pal-item:hover, .pal-item.is-sel { background: var(--accent-50); }
.pal-item .ic { width: 17px; height: 17px; color: var(--text-3); flex: none; }
.pal-item .pi-main { flex: 1; min-width: 0; }
.pal-item .pi-title { font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.pal-item .pi-sub { font-size: var(--fs-xs); color: var(--text-3); }
.pal-foot { padding: 11px 18px; border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-3); display: flex; gap: 16px; }

/* =============================================================== drawer === */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 82;
  width: 480px; max-width: 100vw; background: #fff;
  box-shadow: var(--sh-lg); transform: translateX(100%);
  transition: transform var(--t-slow); display: flex; flex-direction: column;
}
.drawer.md { width: 720px; } .drawer.lg { width: 960px; }
/* docs/35 §35.11: a drawer becomes a full-screen sheet on a phone, entering
   from the bottom, because a 480px panel sliding in from the right on a
   390px screen is just a page with a sliver of scrim. */
@media (max-width: 767px) {
  .drawer, .drawer.md, .drawer.lg {
    width: 100%; max-width: 100%; top: auto; height: 92vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    transform: translateY(100%);
  }
  .drawer.is-on { transform: none; }
  .drawer-head { padding: 16px 18px; }
  .drawer-body { padding: 18px; }
  .drawer-foot { padding: 14px 18px; }
  .drawer-foot .btn { flex: 1; justify-content: center; }
}
.drawer.is-on { transform: none; }
.drawer-head { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.drawer-title { font-size: var(--fs-h2); font-weight: 700; color: var(--text); flex: 1; }
.drawer-body { flex: 1; overflow-y: auto; padding: 24px; }
.drawer-foot { padding: 18px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }

/* ================================================================ toast === */
.toasts { position: fixed; right: 22px; bottom: 74px; z-index: 90; display: grid; gap: 10px; }
@media (max-width: 767px) {
  .toasts { right: 12px; left: 12px; bottom: 60px; }
  .toast { min-width: 0; }
}
.toast {
  display: flex; align-items: center; gap: 12px;
  background: #26232F; color: #fff; padding: 13px 16px;
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
  font-size: var(--fs-body); min-width: 270px;
  animation: toast-in var(--t-slow);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.toast .ic { width: 18px; height: 18px; color: var(--hue-green); flex: none; }

/* ============================================================== charts === */
.chart { width: 100%; display: block; overflow: visible; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-3); align-items: center; }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 7px; }
.viewdata {
  font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; cursor: pointer;
  background: none; border: 0; padding: 6px 10px; border-radius: var(--r-sm);
  transition: all var(--t-fast);
}
.viewdata:hover { background: var(--surface-hover); color: var(--accent-700); }

/* ============================================================== dev bar === */
.devbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: rgba(30,26,52,.94); backdrop-filter: blur(10px);
  color: #C9C3DE; padding: 9px 18px; font-size: var(--fs-sm);
  box-shadow: 0 -8px 26px rgba(20,16,40,.20);
}
.devbar .tag {
  background: var(--hue-orange); color: #35240A; font-weight: 800;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 6px;
}
.devbar label { display: flex; align-items: center; gap: 7px; color: #8B84A8; }
.devbar select, .devbar button {
  background: rgba(255,255,255,.08); color: #EDE9F8; border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: 5px 9px; font-size: var(--fs-sm); cursor: pointer;
}
.devbar .spacer { flex: 1; }
body.has-devbar { padding-bottom: 50px; }
.devbar-toggle { display: none; }

/* The review bar is four controls plus a sentence. On a phone it wrapped
   into a 164px slab pinned over the content. Collapse it to a single chip
   that expands on demand. */
@media (max-width: 767px) {
  .devbar {
    gap: 9px 12px; padding: 9px 13px; max-height: 46px; overflow: hidden;
    transition: max-height var(--t-med);
  }
  .devbar.is-open { max-height: 60vh; overflow-y: auto; }
  .devbar > *:not(.tag):not(.devbar-toggle) { display: none; }
  .devbar.is-open > * { display: flex; }
  .devbar.is-open > span:not(.tag) { display: block; }
  .devbar label { width: 100%; justify-content: space-between; }
  .devbar select { flex: 1; max-width: 62%; min-height: 34px; }
  .devbar .spacer { display: none; }
  .devbar-toggle {
    display: block; margin-left: auto; flex: none;
    background: rgba(255,255,255,.08); color: #EDE9F8;
    border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
    padding: 5px 11px; font-size: var(--fs-sm); cursor: pointer;
  }
  body.has-devbar { padding-bottom: 46px; }
}

.screen-id {
  position: fixed; right: 16px; bottom: 60px; z-index: 94;
  background: #26232F; color: #fff; font-size: var(--fs-xs); font-weight: 700;
  padding: 6px 10px; border-radius: 7px; letter-spacing: .05em; display: none;
}
body.show-ids .screen-id { display: block; }

/* ================================================================ misc === */
.hint { font-size: var(--fs-sm); color: var(--text-3); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-fill { fill: currentColor; stroke: none; }

/* entry animation — content settles rather than snapping in */
.fade-up { animation: fadeup var(--t-slow) both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(10px); } }

/* ==========================================================================
   MOBILE — docs/35 §35.11
   "A table is never horizontally squeezed on mobile. It becomes a card list."
   Handled once here, for every table in the system.
   ========================================================================== */
@media (max-width: 767px) {
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
  table.data thead, table.data tfoot { display: none; }

  table.data tbody tr {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); margin-bottom: 11px; padding: 14px 16px; position: relative;
  }
  table.data tbody tr + tr td { box-shadow: none; }
  table.data tbody tr.clickable::after {
    content: "›"; position: absolute; right: 15px; top: 12px; color: var(--text-3); font-size: 21px; line-height: 1;
  }
  table.data tbody tr.is-selected td:first-child { box-shadow: none; }
  table.data tbody tr.is-selected { box-shadow: inset 3px 0 0 var(--accent); }

  table.data td {
    height: auto; padding: 5px 0; white-space: normal; background: none !important;
    display: flex; align-items: baseline; gap: 12px; text-align: left !important;
  }
  table.data td[data-label]:not([data-label=""])::before {
    content: attr(data-label); flex: none; width: 104px;
    font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-3);
  }
  table.data td.num, table.data td.money { justify-content: flex-start; }
  table.data td.mob-hide { display: none; }
  table.data td:first-child:has(input[type="checkbox"]) { display: none; }

  .table-foot { flex-wrap: wrap; gap: 12px; }
  .table-foot .spacer { display: none; }
  .pager { justify-content: flex-start; }
  .bulkbar { flex-wrap: wrap; margin: 14px -16px -22px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .deflist { grid-template-columns: 1fr; gap: 3px 0; }
  .deflist dt { margin-top: 12px; }
  .drawer, .drawer.md, .drawer.lg { width: 100vw; }
  .palette { top: 0; width: 100vw; max-height: 100vh; border-radius: 0; }
  .card, .kpi { padding: 18px 18px; }
  .card-lg { padding: 20px 18px; }

  .devbar { gap: 9px; padding: 7px 13px; font-size: var(--fs-xs); }
  .devbar > span:last-child, .devbar .spacer { display: none; }
  body.has-devbar { padding-bottom: 92px; }
  .toasts { right: 12px; left: 12px; bottom: 100px; }
  .rowlist > a, .rowlist > .row { margin: 0; padding: 13px 0; gap: 10px; }
  .rowlist .rl-val { font-size: var(--fs-sm); }
  .tabs { margin-left: calc(var(--page-pad) * -1); margin-right: calc(var(--page-pad) * -1);
          padding-left: var(--page-pad); padding-right: var(--page-pad); }
  .gantt-scroll > div { min-width: 620px; }
}
/* the schedule keeps its own scroll at every width — a Gantt is wide by
   nature and must never push the document sideways */
.gantt-scroll { overflow-x: auto; }

/* ==========================================================================
   DASHBOARD COMPOSITION — lifted from the Figma reference (figma-clone/).
   The reference's grammar, translated one-for-one:
     section heading outside the card · photo hero with chips and overlay ·
     coloured icon-tile rows with a bar cluster · compact stat rows with
     sparklines · horizontal thumbnail carousel · area chart with a tooltip
     pill · right rail of gradient card + dots + coloured-bar pick list.
   ========================================================================== */

/* section heading sits OUTSIDE the card, as in the reference */
.sec { display: flex; align-items: center; gap: 12px; margin: 0 2px 12px; }
.sec-t { font-size: var(--fs-h2); font-weight: 600; color: var(--text); letter-spacing: -.25px; }
.sec .spacer { flex: 1; }
.sec-dots { width: 22px; height: 22px; border: 0; background: none; cursor: pointer;
            color: var(--text-3); display: grid; place-items: center; border-radius: 6px; }
.sec-dots:hover { background: var(--surface-hover); color: var(--text-2); }
.sec-link { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-700); }

/* ------------------------------------------------------- featured photo --- */
.feature {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  min-height: 268px; display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; box-shadow: var(--sh-md);
}
.feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature .scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,10,32,.30) 0%, rgba(14,10,32,0) 34%, rgba(14,10,32,.72) 100%); }
.feature .chips { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; }
.feature .fchip {
  height: 28px; padding: 0 13px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.24); backdrop-filter: blur(8px);
  font-size: var(--fs-xs); font-weight: 600; color: #fff;
  display: inline-flex; align-items: center; gap: 6px;
}
.feature .fbody { position: relative; padding: 20px 22px; }
.feature .ftitle { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.feature .fmeta { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.feature .fstat { font-size: var(--fs-body); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.feature .fstat small { font-weight: 500; color: rgba(255,255,255,.7); font-size: var(--fs-xs); }
.feature .fbar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.26); margin-top: 14px; overflow: hidden; }
.feature .fbar > i { display: block; height: 100%; border-radius: 4px; background: #fff; }
.feature .fside { position: absolute; right: 16px; bottom: 18px; display: flex; align-items: center; gap: 10px; }
.feature .favs { display: flex; }
.feature .favs img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,255,255,.85); margin-left: -11px; }
.feature .favs img:first-child { margin-left: 0; }
.fbtn { width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.26); backdrop-filter: blur(8px);
  display: grid; place-items: center; color: #fff; transition: background var(--t-fast); }
.fbtn:hover { background: rgba(255,255,255,.38); }

/* --------------------------------------------- coloured icon-tile rows --- */
.tilerows { display: grid; gap: 20px; }
.tilerow { display: flex; align-items: center; gap: 14px; }
.tilerow .tk { display: block; font-size: var(--fs-sm); color: var(--text-2); font-weight: 500; }
.tilerow .tv { font-size: 19px; font-weight: 700; letter-spacing: -.4px; margin-top: 3px;
               font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 7px; }
.tilerow .tv .ic { width: 15px; height: 15px; }

/* the reference's vertical bar cluster with Max / Min captions */
.barcluster { position: relative; display: flex; align-items: flex-end; gap: 14px;
              height: 132px; padding-right: 46px; flex: none; }
.barcluster .bc { width: 7px; border-radius: 4px; }
.barcluster .cap { position: absolute; right: 0; font-size: var(--fs-xs); color: var(--text-3); font-weight: 500; }
.barcluster .cap.max { top: 0; }
.barcluster .cap.min { bottom: 0; }

/* ------------------------------------------------------- compact stats --- */
.srow {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border-radius: var(--r-md);
  padding: 12px 14px; box-shadow: var(--sh-xs);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.srow:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); }
.srow .sk { display: block; font-size: var(--fs-sm); color: var(--text-2);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .sv { display: block; font-size: 16px; font-weight: 700; color: var(--text);
            letter-spacing: -.3px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.srow .send { margin-left: auto; text-align: right; }
.srow .spct { font-size: var(--fs-xs); font-weight: 700; margin-top: 3px; }
.srow .spct.up { color: var(--money-positive); }
.srow .spct.down { color: var(--money-negative); }

/* -------------------------------------------------- thumbnail carousel --- */
.thumbs { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; scroll-behavior: smooth; }
.thumbs::-webkit-scrollbar { height: 0; }
.thumb {
  flex: none; width: 232px; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border-radius: var(--r-md); padding: 10px;
  box-shadow: var(--sh-xs); transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.thumb:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.thumb img { width: 52px; height: 52px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.thumb .tn { display: block; font-size: var(--fs-body); font-weight: 700; color: var(--text);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb .tm { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbtn {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; transition: all var(--t-fast);
}
.navbtn.prev { background: #fff; color: var(--text-2); box-shadow: var(--sh-sm); }
.navbtn.next { background: var(--accent); color: #fff; box-shadow: var(--sh-accent); }
.navbtn:hover { transform: scale(1.06); }

/* ------------------------------------------------------------ rail bits --- */
.dots-nav { display: flex; gap: 7px; justify-content: center; padding: 16px 0 4px; }
.dots-nav i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-100); display: block; }
.dots-nav i.on { background: var(--accent); width: 20px; border-radius: 4px; }

/* the reference's Top Picks row: coloured left bar, name over price, chevron */
.pick { display: flex; align-items: center; gap: 13px; padding: 12px 8px; margin: 0 -8px;
        border-radius: var(--r-sm); transition: background var(--t-fast); }
.pick:hover { background: var(--surface-hover); }
.pick .pb { width: 3px; height: 30px; border-radius: 2px; flex: none; }
.pick .pn { display: block; font-size: var(--fs-body); font-weight: 700; color: var(--text); }
.pick .pm { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.pick .pv { margin-left: auto; font-size: var(--fs-sm); font-weight: 600;
            color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pick .ic { color: var(--text-3); width: 16px; height: 16px; }

/* the dashboard's own two-column frame */
.dash-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--gap); align-items: start; }
@media (max-width: 1279px) { .dash-grid { grid-template-columns: 1fr; } }

/* text columns inside the dashboard components must be block-level and
   shrinkable, or the label and the value collide on one line */
.srow > span, .thumb > span, .tilerow > span { display: block; min-width: 0; }
.pick > span:not(.pb) { display: block; min-width: 0; }
.srow > span:not(.send) { flex: 1; }
.thumb > span { flex: 1; }
.pick > span:not(.pb):not(.pv) { flex: 1; }
.tilerow > span:not(.tile) { flex: 1; }
/* these must never be stretched by the rules above */
.pick .pb, .rowlist .rl-bar, .tile, .tile-sm { flex: none !important; }
.pick .pb { width: 3px; }

/* dashboard composition on a phone: the hero overlay and the bar cluster
   both need room they do not have at 390 px */
@media (max-width: 767px) {
  .feature { min-height: 236px; }
  .feature .fside { position: static; justify-content: flex-end; padding: 0 22px 16px; }
  .feature .favs { display: none; }
  .feature .fmeta { gap: 10px 16px; }
  .feature .fbody { padding-bottom: 8px; }

  /* the bar cluster is decoration next to the numbers — drop it rather than
     squeeze it into the tile rows */
  .barcluster { display: none; }
  .money-card { display: block !important; }
  .tilerows { gap: 18px; }

  .sec { margin-bottom: 10px; }
  .sec-t { font-size: var(--fs-h3); }
  .thumb { width: 210px; }
}

/* ==========================================================================
   PROJECT SLIDER — one interactive element replacing the three separate
   project lists the dashboard used to carry. Style borrowed from the
   reference (photo + scrim + glass chips + circular controls), behaviour is
   a real slider: arrows, dots, thumbnail nav, keyboard, swipe, autoplay.
   ========================================================================== */
.slider { position: relative; width: 100%; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-md); }
.slider-track { display: flex; width: 100%; transition: transform 520ms var(--ease); will-change: transform; }
.slide { position: relative; flex: 0 0 100%; width: 100%; min-height: 330px;
         display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide .scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,8,28,.42) 0%, rgba(12,8,28,.05) 38%, rgba(12,8,28,.78) 100%); }

.slide-chips { position: absolute; top: 20px; left: 22px; display: flex; gap: 9px; flex-wrap: wrap; }
.gchip {
  height: 30px; padding: 0 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.20); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.24);
  font-size: var(--fs-xs); font-weight: 600; color: #fff;
  display: inline-flex; align-items: center; gap: 7px;
}
.gchip .ic { width: 14px; height: 14px; }
.gchip.hot { background: rgba(251,177,66,.9); border-color: transparent; color: #3A2607; }

.slide-body { position: relative; padding: 24px 26px; }
.slide-eyebrow { font-size: var(--fs-label); font-weight: 700; letter-spacing: .11em;
                 text-transform: uppercase; color: rgba(255,255,255,.72); }
.slide-title { font-size: 30px; font-weight: 700; letter-spacing: -.7px; margin-top: 5px; }
.slide-loc { font-size: var(--fs-sm); color: rgba(255,255,255,.78); margin-top: 5px; }

/* the four numbers that matter, on glass */
.slide-stats { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.sstat {
  background: rgba(255,255,255,.14); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-md); padding: 9px 14px; min-width: 108px;
}
.sstat b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.3px;
           font-variant-numeric: tabular-nums; }
.sstat span { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.7); margin-top: 2px; }
.slide-bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.24); overflow: hidden;
              flex: 1; max-width: 420px; }
.slide-bar > i { display: block; height: 100%; border-radius: 4px; background: #fff;
                 transition: width 620ms var(--ease); }

/* circular controls, as the reference draws them */
.slider-nav { position: absolute; top: 20px; right: 22px; display: flex; gap: 9px; z-index: 3; }
.snav {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.18); backdrop-filter: blur(10px);
  color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.snav:hover { background: rgba(255,255,255,.34); transform: scale(1.06); }
.snav.solid { background: var(--accent); border-color: transparent; box-shadow: var(--sh-accent); }
.snav.solid:hover { background: var(--accent-600); }

.slide-foot { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.slider-dots { display: flex; gap: 7px; flex: none; }
.slider-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.45);
                 cursor: pointer; transition: all var(--t-fast); display: block; }
.slider-dots i.on { background: #fff; width: 24px; border-radius: 4px; }

/* thumbnail rail doubles as the slider's nav — no separate project list */
.slider-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 2px; min-width: 0; }
.slider-thumbs::-webkit-scrollbar { height: 0; }
.sthumb {
  flex: 1 1 0; min-width: 168px; display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1.5px solid transparent; border-radius: var(--r-md);
  padding: 9px 11px; cursor: pointer; text-align: left;
  box-shadow: var(--sh-xs); transition: all var(--t-fast);
}
.sthumb:hover { box-shadow: var(--sh-sm); transform: translateY(-1px); }
.sthumb.on { border-color: var(--accent); box-shadow: 0 6px 18px rgba(124,77,251,.18); }
.sthumb img { width: 42px; height: 42px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.sthumb .stn { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--text);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sthumb .stm { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: 1px;
               font-variant-numeric: tabular-nums; }
.sthumb > span { min-width: 0; flex: 1; }

/* ------------------------------------------------- inventory status tiles --- */
.invtile {
  display: block; text-align: center; padding: 16px 10px;
  border-radius: var(--r-md); background: var(--surface-2);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.invtile:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); background: #fff; }
.invtile b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.6px;
             color: var(--text); font-variant-numeric: tabular-nums; }
.invtile span { display: block; margin-top: 8px; }

@media (max-width: 767px) {
  .slide { min-height: 290px; }
  .slide-title { font-size: 23px; }
  .slide-body { padding: 18px; }
  .slide-chips { top: 14px; left: 16px; }
  .slider-nav { top: 14px; right: 16px; }
  .snav { width: 36px; height: 36px; }
  .slide-foot { gap: 12px; margin-top: 14px; }
  .sstat { min-width: 92px; padding: 8px 11px; }
  .sstat b { font-size: 15px; }
  .sthumb { min-width: 158px; }
}
/* Below ~430px the chip row and the arrow cluster share the same band and
   collide over the slide title. Give the chips the full width above the
   arrows and let the title start clear of both. */
@media (max-width: 430px) {
  .slide { min-height: 316px; }
  /* reserve the arrow gutter rather than guessing a max-width — the nav is
     81px wide at 16px from the edge, so the chips stop 104px short */
  .slide-chips { position: static; padding: 14px 104px 0 16px; gap: 7px; }
  .slide-body { padding-top: 6px; }
  .slide-title { font-size: 21px; }
  .sstat { min-width: 84px; }
  .slide-foot { flex-wrap: wrap; }
}

/* chart tooltip — every chart lets you read the exact number */
.charttip {
  position: absolute; bottom: 100%; transform: translate(-50%, -10px);
  background: #26232F; color: #fff; border-radius: var(--r-md);
  padding: 11px 13px; min-width: 168px; z-index: 8; pointer-events: none;
  box-shadow: var(--sh-lg); font-size: var(--fs-xs);
}
.charttip b { display: block; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 7px; }
.charttip i { display: flex; justify-content: space-between; gap: 16px; font-style: normal; padding: 2px 0; }
.charttip i span { color: rgba(255,255,255,.62); }
.charttip i em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- links ---
   Entity links read as plain text until you approach them, then reveal
   themselves — a mention, not a button. */
.ent { color: inherit; border-bottom: 1px solid transparent; transition: all var(--t-fast); }
.ent:hover { color: var(--accent-700); border-bottom-color: var(--accent-100); }
.party-link { border-radius: var(--r-sm); transition: background var(--t-fast); }
.party-link:hover { background: var(--surface-hover); }
.party-link:hover .party-name { color: var(--accent-700); }
td .party-link { margin: 0 -6px; padding: 0 6px; }