/* vibe/vibe Builder Foundry. Tokens are the shipped vibevibe.fun dark set
   (same as the landing page's vv.css and the stats page): #dff902 is the only
   accent, greys carry everything else, and red is reserved for "something is
   not working". */

@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/fonts/instrumentsans-latin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../assets/fonts/jetbrainsmono-latin.woff2') format('woff2'); }
@font-face { font-family: 'Clash Display'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/clashdisplay-600-latin.woff2') format('woff2'); }

:root {
  --font-ui: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: "Clash Display", "Instrument Sans", -apple-system, sans-serif;

  --bg: #0c0e10;
  --bar: #101214;
  --panel: #0e1013;
  --card: #16191c;
  --card-hi: #1b1f22;
  --well: #111417;
  --hairline: #24282c;
  --hairline-subtle: #1f2327;
  --stroke: #3a4046;
  --button-border: #363c42;
  --badge: #22262b;

  --ink: #f2f4f3;
  --body: #b7bdc0;
  --faint: #8a939b;
  --badge-ink: #9aa1a6;
  --mark-grey: #6b737a;

  --yellow: #dff902;
  --yellow-hover: #ecff52;
  --yellow-2: #a9bc02;
  --yellow-3: #6c7803;
  --on-yellow: #0c0f08;
  --yellow-tint: rgba(223, 249, 2, .10);
  --yellow-line: rgba(223, 249, 2, .38);

  --err: #ff5147;
  --err-tint: rgba(255, 81, 71, .12);
  --err-line: rgba(255, 81, 71, .5);

  --r-card: 12px;
  --r-control: 9px;
  --r-tag: 5px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --maxw: 1480px;
  --gutter: 16px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-padding-top: 110px; }
body {
  min-height: 100vh;
  background:
    radial-gradient(60% 40% at 80% -5%, rgba(223, 249, 2, .05), transparent 70%),
    radial-gradient(40% 30% at 5% 10%, rgba(223, 249, 2, .025), transparent 70%),
    var(--bg);
  color: var(--body);
  font: 400 14px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--hairline-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--hairline-subtle) 1px, transparent 1px);
  background-size: 46px 46px; opacity: .35;
  mask-image: radial-gradient(80% 60% at 50% 0%, #000 20%, transparent 75%);
}
body.drawer-open { overflow: hidden; }
a { color: inherit; }
img, svg { display: block; }
::selection { background: rgba(223, 249, 2, .28); color: var(--ink); }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.small { font-size: 12px; }
.muted { color: var(--faint); }
.ink { color: var(--ink); }

/* ---------- load light sweep + card rise ---------- */
.sweep { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.sweep::before {
  content: ""; position: absolute; inset: -10% 0; transform: translateX(-115%);
  background: linear-gradient(100deg, transparent 42%, rgba(223, 249, 2, .11) 50%, transparent 58%);
  animation: sweep 1.5s cubic-bezier(.5, 0, .3, 1) .1s forwards;
}
@keyframes sweep { 0% { transform: translateX(-115%); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(115%); opacity: 0; } }
.rv { opacity: .04; transform: translateY(20px) scale(.985); animation: rv .85s var(--ease-out) forwards; }
@keyframes rv { to { opacity: 1; transform: none; } }

/* ---------- top bar + tabs ---------- */
.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(16, 18, 20, .9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.bar { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; }
.tabs { display: flex; gap: 2px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px;
  font: 600 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--body); text-decoration: none; white-space: nowrap;
  transition: color .18s var(--ease);
}
.tabs a:hover { color: var(--ink); }
.tabs a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background .2s var(--ease); }
.tabs a.on { color: var(--ink); }
.tabs a.on::after { background: var(--yellow); box-shadow: 0 0 10px rgba(223, 249, 2, .5); }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font: 600 10px/1 var(--font-mono); letter-spacing: 0; background: var(--badge); color: var(--body); }
.badge.hot { background: var(--yellow); color: var(--on-yellow); }
.badge[hidden] { display: none; }
.chip-me { cursor: pointer; max-width: 200px; }
.chip-me:hover { border-color: var(--mark-grey); }
.chip-me svg { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--yellow); stroke-width: 2; }
.chip-me b { overflow: hidden; text-overflow: ellipsis; }
.chip-me.is-view svg { stroke: var(--faint); }
.view[hidden] { display: none !important; }
.view { padding-top: 14px; }
.view[data-view="overview"] { padding-top: 0; }
.bar-brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.bar-brand img { width: 108px; height: 29px; }
.bar-slash { font: 600 18px/1 var(--font-display); color: var(--yellow); letter-spacing: -.01em; white-space: nowrap; }
.bar-nav { display: flex; gap: 2px; margin-left: 14px; min-width: 0; overflow: hidden; }
.bar-nav a {
  display: inline-flex; align-items: center; height: 34px; padding: 0 11px; border-radius: 7px;
  font: 600 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--body); text-decoration: none; white-space: nowrap;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.bar-nav a:hover { color: var(--ink); background: var(--badge); }
.bar-spacer { flex: 1; }
.bar-right { display: flex; align-items: center; gap: 8px; flex: none; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: var(--r-control);
  font: 500 11px/1 var(--font-mono); letter-spacing: .03em; color: var(--badge-ink);
  background: var(--well); border: 1px solid var(--hairline); white-space: nowrap; text-decoration: none;
}
.chip b { color: var(--ink); font-weight: 600; }
.chip-test { color: var(--yellow); border-color: var(--yellow-line); background: var(--yellow-tint); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.chip-test .short { display: none; }
.clock { font: 500 11.5px/1 var(--font-mono); color: var(--faint); letter-spacing: .04em; min-width: 76px; text-align: right; }

.status-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px;
  font: 600 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  background: var(--yellow-tint); color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow-line);
}
.status-pill .dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-pill[data-state="ok"] .dot { animation: ping 2.2s var(--ease) infinite; }
.status-pill[data-state="delayed"] { background: var(--badge); color: var(--body); box-shadow: inset 0 0 0 1px var(--stroke); }
.status-pill[data-state="down"] { background: var(--err-tint); color: var(--err); box-shadow: inset 0 0 0 1px var(--err-line); }
.status-pill[data-state="down"] .dot { animation: warn 1.2s ease-in-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(223, 249, 2, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(223, 249, 2, 0); } }
@keyframes warn { 50% { opacity: .35; transform: scale(.8); } }

@media (max-width: 1180px) { .bar-nav { display: none; } .chip-chain { display: none; } }
@media (max-width: 760px) { .chip-chain, .clock, .bar > .tag { display: none; } .chip-me { max-width: 140px; overflow: hidden; } .bar-brand img { width: 92px; } .bar-slash { font-size: 15px; } .chip-test .long { display: none; } .chip-test .short { display: inline; } }
@media (max-width: 440px) { .bar-slash { display: none; } }

/* ---------- page frame ---------- */
.page { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 40px; }
.grid { display: grid; gap: 12px; margin-top: 12px; }
.grid > * { min-width: 0; }
.g-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.g-table { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1180px) { .g-table { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .g-2 { grid-template-columns: 1fr; } }

.card { position: relative; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 18px 18px 16px; min-width: 0; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; margin-bottom: 14px; }
.card-title { margin: 0; font: 600 18px/1.2 var(--font-display); letter-spacing: -.005em; color: var(--ink); }
.card-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--faint); max-width: 72ch; }
.label { font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.label small { text-transform: none; letter-spacing: 0; }
.subhead { margin: 18px 0 0; }
.kicker { display: flex; width: fit-content; align-items: center; gap: 9px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--badge-ink); }
.kicker .sq { width: 8px; height: 8px; background: var(--yellow); flex: none; }
.tag {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: var(--r-tag);
  font: 600 10px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  background: var(--badge); color: var(--badge-ink); white-space: nowrap;
}
.tag-hi { background: var(--yellow-tint); color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow-line); }
.tag-solid { background: var(--yellow); color: var(--on-yellow); }
.tag-line { background: transparent; color: var(--body); box-shadow: inset 0 0 0 1px var(--stroke); }
.tag-err { background: var(--err-tint); color: var(--err); box-shadow: inset 0 0 0 1px var(--err-line); }
.tag svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 12px; border-radius: var(--r-control);
  font: 600 11px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink); background: var(--well); border: 1px solid var(--button-border); cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .1s;
}
.btn:hover { border-color: var(--mark-grey); background: var(--badge); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn-hi { background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow); }
.btn-hi:hover { background: var(--yellow-hover); border-color: var(--yellow-hover); }
.btn-ghost { background: transparent; border-color: var(--hairline); color: var(--body); }
.btn-sm { min-height: 28px; padding: 0 9px; font-size: 10.5px; }
.btn[disabled] { opacity: .4; cursor: default; }
.btn.is-on { background: var(--yellow-tint); color: var(--yellow); border-color: var(--yellow-line); }

.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-control); background: var(--well); border: 1px solid var(--hairline); flex-wrap: wrap; }
.seg button { min-height: 26px; padding: 0 9px; border: 0; border-radius: 6px; cursor: pointer; background: transparent; color: var(--body); font: 600 10.5px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.seg button:hover { color: var(--ink); background: var(--card); }
.seg button[aria-pressed="true"] { background: var(--yellow); color: var(--on-yellow); }

.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-bottom: 10px; }
.search { position: relative; flex: 1 1 280px; max-width: 420px; }
.search svg { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: var(--faint); stroke-width: 1.9; stroke-linecap: round; }
input[type="search"], input[type="date"], select, textarea {
  font: 500 13px/1.2 var(--font-ui); color: var(--ink); background: var(--well); border: 1px solid var(--button-border); border-radius: var(--r-control);
  min-height: 34px; padding: 0 10px; outline: none; transition: border-color .15s;
}
input[type="search"] { width: 100%; padding-left: 34px; }
input[type="date"] { font-family: var(--font-mono); font-size: 12px; color-scheme: dark; }
select { padding-right: 26px; appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--faint) 50%), linear-gradient(135deg, var(--faint) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
input:focus, select:focus, textarea:focus { border-color: var(--yellow-line); }
textarea { width: 100%; min-height: 84px; padding: 9px 10px; line-height: 1.45; resize: vertical; }
.field { display: inline-flex; flex-direction: column; gap: 5px; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; font-size: 13px; color: var(--body); cursor: pointer; user-select: none; }
.check input { width: 16px; height: 16px; accent-color: var(--yellow); margin: 0; }
.count { font: 600 11px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); align-self: center; }

/* toggle switch for yes/no programme columns */
.sw { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw i { position: relative; width: 30px; height: 17px; border-radius: 99px; background: var(--badge); box-shadow: inset 0 0 0 1px var(--stroke); transition: background .18s var(--ease), box-shadow .18s; flex: none; }
.sw i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--faint); transition: transform .2s var(--ease-out), background .18s; }
.sw input:checked + i { background: var(--yellow); box-shadow: none; }
.sw input:checked + i::after { transform: translateX(13px); background: var(--on-yellow); }
.sw input:focus-visible + i { outline: 2px solid var(--yellow); outline-offset: 2px; }
.sw span { font: 600 10.5px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.sw input:checked ~ span { color: var(--ink); }
.sw.busy { opacity: .5; pointer-events: none; }
.sw:has(input:disabled), select.mini:disabled, .seg button:disabled { opacity: .55; cursor: default; }
.seg button:disabled:hover { background: transparent; color: var(--body); }
select.mini { min-height: 28px; padding: 0 22px 0 8px; font: 600 12px/1 var(--font-mono); background-position: calc(100% - 11px) 50%, calc(100% - 6px) 50%; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px 40px; align-items: end; padding: 34px 0 22px; }
.title { position: relative; display: inline-block; margin: 14px 0 0; font: 600 clamp(38px, 5.4vw, 64px)/1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.title em { font-style: normal; color: var(--yellow); }
.title .flicker { animation: flicker 1.5s steps(1, end) .2s backwards; }
@keyframes flicker { 0% { opacity: .04; } 8% { opacity: .85; } 12% { opacity: .1; } 18% { opacity: .95; } 24% { opacity: .15; } 30%, 100% { opacity: 1; } }
.title-wave { position: absolute; left: 0; right: 0; bottom: -18px; width: 100%; height: 22px; overflow: visible; }
.title-wave path { fill: none; stroke: url(#waveGrad); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; filter: drop-shadow(0 0 5px rgba(223, 249, 2, .55)); animation: draw 1.5s cubic-bezier(.35, .75, .3, 1) 1.1s forwards; }
.title-wave circle { fill: var(--yellow); transform-box: fill-box; transform-origin: center; opacity: 0; animation: pop .4s var(--ease-out) 2.5s forwards, beat 2.2s ease-in-out 2.9s infinite; }
.title:hover .title-wave path { animation: draw-again 1s cubic-bezier(.35, .75, .3, 1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes draw-again { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes beat { 50% { transform: scale(.7); opacity: .4; } }
.lede { margin: 30px 0 0; max-width: 60ch; font-size: 15.5px; color: var(--body); }
.lede b { color: var(--ink); font-weight: 600; }
.hero-fig { justify-self: end; text-align: right; }
.hero-num { display: block; margin-top: 8px; font: 650 clamp(56px, 8vw, 104px)/.9 var(--font-ui); letter-spacing: -.035em; color: var(--yellow); text-shadow: 0 0 36px rgba(223, 249, 2, .22); }
.hero-foot { margin-top: 10px; font-size: 13px; color: var(--body); }
.hero-foot b { color: var(--ink); }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } .hero-fig { justify-self: start; text-align: left; } }

/* ---------- KPI tiles ---------- */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.kpi { padding: 15px 16px 14px; overflow: hidden; }
.kpi-value { margin-top: 10px; font: 650 30px/1 var(--font-ui); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.kpi-note { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--body); min-height: 17px; }
.kpi-note b { color: var(--ink); font-weight: 600; }
.kpi-hi { border-color: var(--yellow-line); background: radial-gradient(80% 100% at 100% 0%, rgba(223, 249, 2, .09), transparent 68%), var(--card); }
.kpi-hi .kpi-value { color: var(--yellow); }
.bump { animation: bump .9s var(--ease-out); }
@keyframes bump { 0% { text-shadow: 0 0 0 transparent; } 25% { text-shadow: 0 0 18px rgba(223, 249, 2, .6); } 100% { text-shadow: 0 0 0 transparent; } }
@media (max-width: 1280px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpis { grid-template-columns: 1fr 1fr; } .kpi-value { font-size: 24px; } }

/* ---------- runner ladder ---------- */
.ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 14px 12px; border-radius: var(--r-control);
  background: var(--well); border: 1px solid var(--hairline); cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.step:hover { border-color: var(--mark-grey); transform: translateY(-2px); }
.step:not(:last-child)::after {
  content: ""; position: absolute; right: -8px; top: 50%; width: 8px; height: 8px; margin-top: -4px; z-index: 1;
  border-top: 1.5px solid var(--stroke); border-right: 1.5px solid var(--stroke); transform: translateX(-2px) rotate(45deg); background: transparent;
}
.step .st-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.step .st-name b { font: 600 15px/1.1 var(--font-display); color: var(--ink); }
.step .st-count { font: 650 34px/1 var(--font-ui); letter-spacing: -.02em; color: var(--ink); }
.step .st-rule { font: 500 10.5px/1.45 var(--font-mono); color: var(--faint); min-height: 30px; }
.step .st-bar { position: relative; height: 6px; border-radius: 3px; background: var(--hairline); overflow: hidden; }
.step .st-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--mark-grey); transition: width 1.6s var(--ease-out); }
.step.is-tier .st-bar i { background: var(--yellow); box-shadow: 0 0 10px rgba(223, 249, 2, .35); }
.step.is-tier .st-count { color: var(--yellow); }
.step.is-zero .st-count { color: var(--mark-grey); }
.step small { font-size: 11.5px; color: var(--faint); }
@media (max-width: 1100px) { .ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); } .step:nth-child(3)::after { display: none; } }
@media (max-width: 560px) { .ladder { grid-template-columns: 1fr 1fr; } .step::after { display: none; } }

/* ---------- mover radar ---------- */
.radar-card { overflow: hidden; background: radial-gradient(45% 60% at 100% 0%, rgba(223, 249, 2, .045), transparent 70%), var(--card); }
.radar-card .dash-border { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; overflow: visible; }
.radar-card .dash-border rect { fill: none; stroke: var(--yellow); stroke-width: 1.5; stroke-dasharray: 260 3400; filter: drop-shadow(0 0 6px rgba(223, 249, 2, .7)); animation: dash-run 14s linear infinite; }
@keyframes dash-run { to { stroke-dashoffset: -3660; } }
.radar { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.rc {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border-radius: 11px;
  background: var(--well); border: 1px solid var(--hairline); cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: border-color .2s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
  animation: rc-in .7s var(--ease-out) backwards;
}
@keyframes rc-in { from { opacity: 0; transform: translateY(12px); } }
.rc:hover, .rc:focus-visible { border-color: var(--yellow-line); box-shadow: 0 0 0 1px var(--yellow-line), 0 10px 30px rgba(0, 0, 0, .35); transform: translateY(-2px); outline: none; }
.rc.is-tier { border-color: var(--yellow-line); background: radial-gradient(80% 60% at 100% 0%, rgba(223, 249, 2, .08), transparent 70%), var(--well); }
.rc-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rc-head .nm { flex: 1; min-width: 0; }
.rc-head .nm b { display: block; font: 600 14px/1.2 var(--font-ui); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-head .nm small { display: block; font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-mc { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rc-mc b { font: 650 24px/1 var(--font-ui); letter-spacing: -.02em; color: var(--ink); }
.rc-mc span { font: 500 11px/1.2 var(--font-mono); color: var(--faint); text-align: right; }
.rc-mc .up { color: var(--yellow); }
.spark { position: relative; height: 56px; }
.spark svg { width: 100%; height: 100%; overflow: visible; }
.spark .ln { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; opacity: .9; }
.spark .ar { fill: url(#sparkFill); opacity: .9; }
.spark .th { stroke: var(--yellow); stroke-width: 1; stroke-dasharray: 3 3; opacity: .85; }
.spark .dt { fill: var(--yellow); }
.spark .th-l { position: absolute; right: 0; font: 600 9.5px/1 var(--font-mono); letter-spacing: .04em; color: var(--yellow); background: var(--well); padding: 1px 0 1px 4px; transform: translateY(-50%); }
.spark.empty { display: grid; place-items: center; font-size: 11.5px; color: var(--faint); border: 1px dashed var(--hairline); border-radius: 7px; }
.rc-next { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--body); }
.rc-next b { color: var(--ink); font-weight: 600; }
.rc-next .pbar { flex: 1; position: relative; height: 5px; border-radius: 3px; background: var(--hairline); overflow: hidden; }
.rc-next .pbar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--yellow-2); transition: width 1.4s var(--ease-out); }
.checks { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.checks li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 7px; font-size: 12px; color: var(--body); }
.checks li svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--mark-grey); }
.checks li.ok svg { color: var(--yellow); }
.checks li .cv { font: 500 11px/1.2 var(--font-mono); color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.checks li.ok .cv { color: var(--ink); }
.rc-foot { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.radar-foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 12px; }
.radar-empty { grid-column: 1 / -1; padding: 30px; text-align: center; color: var(--faint); border: 1px dashed var(--hairline); border-radius: 11px; }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; margin: 0 -4px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { padding: 9px 8px; text-align: left; border-bottom: 1px solid var(--hairline-subtle); white-space: nowrap; }
.tbl th { font: 500 10px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.tbl th small { display: block; text-transform: none; letter-spacing: 0; font-size: 10px; }
.tbl td.n, .tbl th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td.n { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover { background: rgba(255, 255, 255, .025); }
.tok { display: flex; align-items: center; gap: 9px; min-width: 0; text-decoration: none; }
.tok b { color: var(--ink); font-weight: 600; }
.tok small { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: var(--faint); }
button.tok { padding: 0; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
button.tok:hover b { color: var(--yellow); }
.logo { width: 24px; height: 24px; flex: none; border-radius: 6px; background: var(--badge) center / cover no-repeat; border: 1px solid var(--hairline); }
.logo-lg { width: 30px; height: 30px; border-radius: 8px; }
.logo-xl { width: 46px; height: 46px; border-radius: 11px; }
.addr { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--font-mono); color: var(--body); }
.addr a { text-decoration: none; }
.addr a:hover { color: var(--yellow); }
.copy { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 5px; border: 1px solid transparent; background: transparent; color: var(--faint); cursor: pointer; }
.copy:hover { color: var(--ink); border-color: var(--hairline); background: var(--badge); }
.copy svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.copy.done { color: var(--yellow); }
.dim { color: var(--mark-grey) !important; font-family: var(--font-mono); font-size: 11.5px; }

.tracker-wrap { border: 1px solid var(--hairline); border-radius: var(--r-control); margin: 0; }
.tracker th { position: sticky; top: 0; background: var(--card-hi); z-index: 2; }
.tracker th[data-sort] { cursor: pointer; user-select: none; }
.tracker th[data-sort]:hover { color: var(--ink); }
.tracker th[aria-sort]::after { content: " ↓"; color: var(--yellow); }
.tracker th[aria-sort="ascending"]::after { content: " ↑"; }
.tracker .sticky { position: sticky; left: 0; z-index: 3; background: var(--card); box-shadow: 1px 0 0 var(--hairline-subtle); }
.tracker th.sticky { background: var(--card-hi); z-index: 4; }
.tracker tbody tr:hover .sticky { background: #191c1f; }
.tracker tr.is-joined td.sticky { box-shadow: inset 3px 0 0 var(--yellow), 1px 0 0 var(--hairline-subtle); }
.tracker td { padding-top: 7px; padding-bottom: 7px; }
.tracker .flags { display: flex; gap: 4px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12px; }
.pager-btns { display: flex; gap: 6px; }
.empty-row td { padding: 28px; text-align: center; color: var(--faint); white-space: normal; }

/* ---------- day-3 check-ins ---------- */
.d3-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.d3-list { display: grid; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; }
.d3-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--hairline-subtle); }
.d3-list li:first-child { border-top: 0; }
.d3-list .when { font: 500 11px/1.3 var(--font-mono); color: var(--faint); text-align: right; white-space: nowrap; }
.d3-list .none { display: block; padding: 14px 0; color: var(--faint); font-size: 12.5px; border: 0; }
.d3-list .more { display: block; padding: 8px 0 0; font-size: 12px; color: var(--faint); }

/* ---------- A/B ---------- */
.ab { width: 100%; border-collapse: collapse; font-size: 13px; }
.ab th, .ab td { padding: 9px 8px; border-bottom: 1px solid var(--hairline-subtle); text-align: left; }
.ab th { font: 500 10px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.ab td.v { width: 32%; }
.ab tr:last-child td { border-bottom: 0; }
.ab .val { display: flex; align-items: center; gap: 8px; font: 600 13px/1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.ab .bar { flex: 1; max-width: 120px; height: 6px; border-radius: 3px; background: var(--hairline); overflow: hidden; position: relative; }
.ab .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--mark-grey); transition: width 1.4s var(--ease-out); }
.ab .j .bar i { background: var(--yellow); }
.ab .j .val { color: var(--yellow); }
.ab-empty { padding: 14px; border-radius: var(--r-control); background: var(--well); border: 1px dashed var(--hairline); font-size: 12.5px; color: var(--faint); margin-bottom: 12px; }
.ab-empty b { color: var(--ink); }

/* ---------- rules ---------- */
.rules-tbl td:first-child { font: 600 14px/1.2 var(--font-display); color: var(--ink); }
.rules-tbl tr.is-scaled td.n { color: var(--yellow); }
.test-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; margin-top: 16px; padding: 14px; border-radius: var(--r-control); background: var(--well); border: 1px solid var(--hairline); }
.test-box.is-test { border-color: var(--yellow-line); background: radial-gradient(60% 100% at 100% 0%, rgba(223, 249, 2, .07), transparent 70%), var(--well); }
.test-box p { margin: 6px 0 0; max-width: 60ch; }
.test-ctl { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 760px) { .test-box { grid-template-columns: 1fr; } }
.defs { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; margin-top: 18px; }
@media (max-width: 760px) { .defs { grid-template-columns: 1fr; } }
.def-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 12.5px; color: var(--body); }
.def-list b { color: var(--ink); font-weight: 600; }
.def-list .tag { margin-right: 6px; vertical-align: 1px; }

/* ---------- health ---------- */
.src-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.src-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hairline-subtle); }
.src-list li:first-child { border-top: 0; }
.src-list .sname { font-size: 13px; color: var(--ink); min-width: 0; }
.src-list .sname small { display: block; font: 500 10.5px/1.4 var(--font-mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-list .sstate { text-align: right; font: 600 10.5px/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.src-list .sstate small { display: block; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--faint); }
.sicon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-ok { color: var(--yellow); } .s-delayed, .s-starting { color: var(--faint); } .s-down { color: var(--err); }
.src-list li.is-down { background: linear-gradient(90deg, var(--err-tint), transparent 70%); }
.src-list li.is-down .sname small { color: var(--err); white-space: normal; }
.progress { position: relative; height: 8px; margin-top: 12px; border-radius: 4px; background: var(--hairline); overflow: hidden; }
.progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: var(--yellow); transition: width 1.6s var(--ease-out); }
.progress-cap { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 12px; color: var(--body); }

.foot { margin-top: 18px; padding: 16px 2px 0; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; font-size: 12px; color: var(--faint); }

/* ---------- connection banner ---------- */
.banner { display: none; margin-top: 12px; padding: 10px 14px; border-radius: var(--r-control); background: var(--err-tint); border: 1px solid var(--err-line); color: var(--err); font-size: 13px; }
.banner.on { display: flex; gap: 10px; align-items: center; }
.stale { filter: saturate(.35) brightness(.62); transition: filter .3s; }

/* ---------- token drawer ---------- */
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(6, 7, 8, .62); backdrop-filter: blur(2px); animation: fade .25s var(--ease); }
@keyframes fade { from { opacity: 0; } }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(720px, 100vw); background: var(--panel); border-left: 1px solid var(--hairline); box-shadow: -30px 0 60px rgba(0, 0, 0, .45); overflow-y: auto; animation: slide .45s var(--ease-out); }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
.drawer-inner { padding: 20px 20px 40px; }
.dr-head { display: flex; align-items: flex-start; gap: 14px; }
.dr-head .nm { flex: 1; min-width: 0; }
.dr-head h2 { margin: 0; font: 600 24px/1.15 var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.dr-head .sub { margin-top: 4px; font-size: 13px; color: var(--faint); }
.dr-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dr-sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline-subtle); }
.dr-sec > .label { display: block; margin-bottom: 10px; }
.dr-prog { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 12px 22px; align-items: center; }
@media (max-width: 560px) { .dr-prog { grid-template-columns: 1fr 1fr; } }
.dr-notes { margin-top: 12px; display: grid; gap: 8px; }
.dr-notes .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
.mini { padding: 10px 12px; border-radius: var(--r-control); background: var(--well); border: 1px solid var(--hairline); min-width: 0; }
.mini b { display: block; margin-top: 6px; font: 650 17px/1.1 var(--font-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini small { display: block; margin-top: 4px; font-size: 11px; color: var(--faint); }
.chart { position: relative; }
.chart svg { width: 100%; overflow: visible; }
.chart .grid-l { stroke: var(--hairline-subtle); stroke-width: 1; }
.chart .ax { font: 500 10px/1 var(--font-mono); fill: var(--faint); }
.chart .ln { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .ar { fill: url(#chartFill); }
.chart .th { stroke-width: 1; stroke-dasharray: 4 4; }
.chart .th-l { font: 600 9.5px/1 var(--font-mono); letter-spacing: .04em; }
.chart .bar-o { fill: var(--yellow-2); }
.chart .bar-r { fill: var(--stroke); }
.chart .cross { stroke: var(--mark-grey); stroke-width: 1; }
.chart .hit { fill: transparent; }
.chart .dot { fill: var(--yellow); stroke: var(--panel); stroke-width: 2; }
.tip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 130px; padding: 9px 11px; border-radius: 8px;
  background: rgba(12, 14, 16, .96); border: 1px solid var(--stroke); box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  font-size: 12px; color: var(--body); opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s;
}
.tip.on { opacity: 1; transform: none; }
.tip .th { margin-bottom: 4px; font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.tip .tv { display: flex; justify-content: space-between; gap: 12px; }
.tip .tv b { font: 650 13px/1.35 var(--font-ui); color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 8px; font-size: 12px; color: var(--body); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.key { width: 10px; height: 10px; border-radius: 2px; }
.key-line { width: 14px; height: 2px; border-radius: 2px; background: var(--ink); }
.key-dash { width: 14px; height: 0; border-top: 1.5px dashed var(--yellow); }
.ms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ms-grid .mini.is-done { border-color: var(--yellow-line); }
.holders { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.holders li { display: grid; grid-template-columns: 22px 120px minmax(0, 1fr) 56px; align-items: center; gap: 10px; font-size: 12px; }
.holders .rk { font: 600 11px/1 var(--font-mono); color: var(--faint); }
.holders .hb { position: relative; height: 6px; border-radius: 3px; background: var(--hairline); overflow: hidden; }
.holders .hb i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--mark-grey); }
.holders li.is-creator .hb i { background: var(--yellow-2); }
.holders .pc { font: 600 12px/1 var(--font-mono); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.sib { display: flex; flex-wrap: wrap; gap: 6px; }
.sib button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 7px; background: var(--well); border: 1px solid var(--hairline); color: var(--body); font: 600 11.5px/1 var(--font-mono); cursor: pointer; }
.sib button:hover { border-color: var(--mark-grey); color: var(--ink); }
.sib .logo { width: 18px; height: 18px; border-radius: 4px; }
.dr-close { flex: none; }
.loading { padding: 40px 0; text-align: center; color: var(--faint); }

/* ---------- toasts ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { padding: 11px 14px; border-radius: var(--r-control); background: #121518; border: 1px solid var(--yellow-line); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); color: var(--ink); font-size: 13px; animation: toast-in .35s var(--ease-out); }
.toast.err { border-color: var(--err-line); color: var(--err); }
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ================================================================ team workspace */

/* to-do cards */
.tasks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.task {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 14px 12px; border-radius: var(--r-control);
  background: var(--well); border: 1px solid var(--hairline); text-decoration: none; color: inherit;
  transition: border-color .18s var(--ease), transform .18s var(--ease), background .18s var(--ease);
}
.task:hover { border-color: var(--mark-grey); transform: translateY(-2px); }
.task b { font: 650 30px/1 var(--font-ui); letter-spacing: -.02em; color: var(--mark-grey); }
.task.is-due { border-color: var(--yellow-line); background: radial-gradient(90% 90% at 100% 0%, rgba(223, 249, 2, .08), transparent 70%), var(--well); }
.task.is-due b { color: var(--yellow); }
.task.is-warn { border-color: var(--err-line); }
.task.is-warn b { color: var(--err); }
.task-sub { font-size: 12px; line-height: 1.4; color: var(--body); min-height: 34px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.task-cta { margin-top: auto; font: 600 10.5px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.task:hover .task-cta { color: var(--ink); }
@media (max-width: 1280px) { .tasks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tasks { grid-template-columns: 1fr 1fr; } }
.kpis { margin-top: 12px; }

/* activity feed */
.activity { display: grid; margin: 0; padding: 0; list-style: none; }
.activity li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--hairline-subtle); font-size: 13px; }
.activity li:first-child { border-top: 0; }
.activity .who { font: 600 12px/1.3 var(--font-mono); color: var(--yellow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity .what { color: var(--body); min-width: 0; }
.activity .what b { color: var(--ink); font-weight: 600; }
.activity .when { font: 500 11px/1.3 var(--font-mono); color: var(--faint); white-space: nowrap; }
.activity .none, .watch .none, .past .none, .top3-list .none, .qlist .none, .tlist .none { display: block; padding: 12px 0; color: var(--faint); font-size: 12.5px; border: 0; }
@media (max-width: 560px) { .activity li { grid-template-columns: 1fr; gap: 2px; } }

/* links that look like text */
.linkish { padding: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: var(--stroke); text-underline-offset: 3px; }
.linkish:hover { color: var(--yellow); text-decoration-color: var(--yellow-line); }
.linkish.strong { font-weight: 600; text-decoration: none; }
.linkish.dim { color: var(--faint); }
.linkish.small { font-size: 11.5px; }
.tokbtn { display: inline-flex; flex: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; }
.tok .mini-addr { margin-top: 2px; font-size: 10.5px; color: var(--faint); }
.tok .mini-addr .copy { width: 18px; height: 18px; }
.btn-row { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.row-end { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.stack { display: grid; gap: 12px; align-content: start; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-name { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 6px 0 11px; border-radius: 99px; background: var(--well); border: 1px solid var(--hairline); color: var(--ink); font: 600 12px/1 var(--font-ui); }
button.chip-name { padding: 0 12px; cursor: pointer; }
button.chip-name:hover, button.chip-name.on { border-color: var(--yellow-line); color: var(--yellow); }
code { font: 500 11.5px/1.4 var(--font-mono); color: var(--ink); background: var(--badge); padding: 1px 5px; border-radius: 4px; }

/* forms */
.form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.form-row .grow { flex: 1 1 150px; }
.form-row .grow2 { flex: 2 1 260px; }
input[type="text"], input[type="email"], input[type="password"] { font: 500 13px/1.2 var(--font-ui); color: var(--ink); background: var(--well); border: 1px solid var(--button-border); border-radius: var(--r-control); min-height: 34px; padding: 0 10px; outline: none; width: 100%; transition: border-color .15s; }
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus { border-color: var(--yellow-line); }
input[readonly] { color: var(--body); background: transparent; }
input.inline { min-height: 28px; width: 160px; padding: 0 8px; font-size: 12.5px; background: transparent; border-color: transparent; }
input.inline:hover { border-color: var(--hairline); }
input.inline:focus { background: var(--well); border-color: var(--yellow-line); }
textarea:disabled, input:disabled { opacity: .7; }
form[hidden] { display: none !important; }

/* tracker extras */
.d3cell { display: inline-flex; align-items: center; gap: 8px; }
.d3cell .sw span:empty { display: none; }
.bcell { display: inline-flex; align-items: center; gap: 6px; }
.blink { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 3px 5px; border-radius: 6px; border: 1px solid var(--yellow-line); background: var(--yellow-tint); color: var(--ink); font: 600 12px/1 var(--font-ui); cursor: pointer; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blink svg { width: 12px; height: 12px; flex: none; fill: none; stroke: var(--yellow); stroke-width: 2; }
.blink:hover { border-color: var(--yellow); }
select.tiersel.differs { border-color: var(--yellow-line); box-shadow: inset 0 0 0 1px var(--yellow-line); }
.notecell .linkish { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; font-size: 12.5px; }
.toklist { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.sibling { padding: 3px 7px; border-radius: 6px; border: 1px solid var(--hairline); background: var(--well); color: var(--ink); font: 600 11px/1 var(--font-mono); cursor: pointer; }
.sibling:hover { border-color: var(--mark-grey); }
.wallets { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btable td, .rtable td, .otable td { vertical-align: middle; }
.btable .sticky, .rtable td:first-child { position: sticky; left: 0; background: var(--card); z-index: 1; }

/* day 3 */
.g-day3, .g-q { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 1000px) { .g-day3, .g-q { grid-template-columns: 1fr; } }
.d3-list li { grid-template-columns: minmax(0, 1fr) auto auto; }
.d3-list .when small { display: block; margin-top: 4px; }
.d3-list .when .tag { margin-bottom: 2px; }
.d3-list .btn svg { width: 14px; height: 14px; }
#tpl { min-height: 150px; font: 500 13px/1.5 var(--font-ui); }
@media (max-width: 640px) { .d3-list li { grid-template-columns: 1fr; } .d3-list .when { text-align: left; } }

/* friday review */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rstep { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-control); background: var(--well); border: 1px solid var(--yellow-line); }
.rstep b { font: 650 26px/1 var(--font-ui); color: var(--yellow); min-width: 36px; }
.rstep > span { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink); }
.rstep.done { border-color: var(--hairline); }
.rstep.done b { color: var(--mark-grey); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.watch, .past { display: grid; margin: 0; padding: 0; list-style: none; }
.watch li, .past li { display: grid; grid-template-columns: minmax(0, 1fr) auto 90px; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--hairline-subtle); font-size: 12.5px; }
.past li { grid-template-columns: auto minmax(0, 1fr) auto; }
.watch li:first-child, .past li:first-child { border-top: 0; }
.watch .pbar, .rc-next .pbar { position: relative; height: 5px; border-radius: 3px; background: var(--hairline); overflow: hidden; }
.watch .pbar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--yellow-2); }
.watch-next b { color: var(--ink); }

/* questions */
.qlist, .tlist, .top3-list, .similar { display: grid; margin: 0; padding: 0; list-style: none; }
.qlist > li { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 16px; padding: 14px 0; border-top: 1px solid var(--hairline-subtle); }
.qlist > li:first-child { border-top: 0; }
.qlist > li.is-answered .q-text { color: var(--body); }
.q-count { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: var(--r-control); background: var(--well); border: 1px solid var(--hairline); text-align: center; }
.q-count b { font: 650 22px/1 var(--font-ui); color: var(--yellow); }
.q-count small { font-size: 10.5px; color: var(--faint); margin-top: 3px; }
.q-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
.q-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 11.5px; }
.answer { margin-top: 8px; min-height: 40px; font-size: 12.5px; }
.q-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
@media (max-width: 760px) { .qlist > li { grid-template-columns: 60px minmax(0, 1fr); } .q-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; } }
.top3-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--hairline-subtle); }
.top3-list li:first-child { border-top: 0; }
.top3-list .rk { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--yellow); color: var(--on-yellow); font: 650 15px/1 var(--font-ui); }
.top3-list li.is-in .rk { background: var(--badge); color: var(--faint); }
.top3-list .q3 b { display: block; color: var(--ink); font-weight: 600; font-size: 13.5px; line-height: 1.4; }
.top3-list .q3 small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--faint); }
.similar li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--hairline-subtle); font-size: 12.5px; color: var(--ink); }
.similar li:first-child { border-top: 0; }
.similar .btn svg, .q-actions .btn svg { width: 13px; height: 13px; }

/* test log */
#t-form > label.field { display: flex; width: 100%; }
#t-form textarea { width: 100%; }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drop { display: flex; align-items: center; gap: 12px; margin-top: 10px; min-height: 64px; padding: 10px 12px; border-radius: var(--r-control); border: 1.5px dashed var(--stroke); color: var(--faint); font-size: 12.5px; cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over, .drop:focus-visible { border-color: var(--yellow-line); background: var(--yellow-tint); color: var(--ink); }
.drop img { max-height: 120px; max-width: 220px; border-radius: 6px; border: 1px solid var(--hairline); }
.tlist > li { padding: 14px 0; border-top: 1px solid var(--hairline-subtle); }
.tlist > li:first-child { border-top: 0; }
.tlist > li.is-urgent { box-shadow: inset 3px 0 0 var(--err); padding-left: 12px; }
.tlist > li.is-fixed { opacity: .7; }
.t-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; }
.t-head b { color: var(--ink); }
.t-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; margin-top: 8px; }
.t-body p { margin: 0 0 8px; font-size: 13px; color: var(--ink); line-height: 1.5; white-space: pre-wrap; }
.t-body p .label { display: block; margin-bottom: 2px; }
.shot img { max-width: 260px; max-height: 170px; border-radius: 8px; border: 1px solid var(--hairline); }
.shot:hover img { border-color: var(--yellow-line); }
@media (max-width: 760px) { .t-body { grid-template-columns: 1fr; } }

/* your-login popover */
.popover { position: fixed; z-index: 90; width: min(340px, calc(100vw - 24px)); padding: 14px; border-radius: var(--r-card); background: #121518; border: 1px solid var(--stroke); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); animation: toast-in .25s var(--ease-out); }
.popover p { margin: 6px 0 10px; }
.popover .chips { margin-bottom: 10px; }
.me-who { margin-top: 6px; font: 600 18px/1.2 var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.me-pop #me-sub { margin-top: 2px; overflow-wrap: anywhere; }
.me-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.me-actions .btn { text-decoration: none; }
.me-pw { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.me-pw .field { display: flex; }

/* panels */
.bbox { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; padding: 12px; border-radius: var(--r-control); background: var(--well); border: 1px solid var(--hairline); }
.bbox > .linkish { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; align-self: center; }
.bbox > .linkish svg { width: 15px; height: 15px; fill: none; stroke: var(--yellow); stroke-width: 2; }
.bbox > .dim { align-self: center; font-size: 12.5px; }
.dr-prog { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
.dr-prog .field .d3cell { flex-wrap: wrap; }
.dr-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.dr-form input.inline { width: 100%; border-color: var(--hairline); }
@media (max-width: 560px) { .dr-form, .dr-prog { grid-template-columns: 1fr 1fr; } }
.wlist { display: grid; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.wlist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drawer input.inline[aria-label="Add a wallet"] { width: 100%; border-color: var(--hairline); }
.avatar { display: grid; place-items: center; }
.avatar svg { width: 24px; height: 24px; fill: none; stroke: var(--yellow); stroke-width: 1.8; }
.small-tbl { font-size: 12px; }
.small-tbl th, .small-tbl td { padding: 6px 8px; }
.sib button svg { width: 12px; height: 12px; }

/* ================================================================ outcomes */

.badge.bad { background: var(--err); color: #fff; }

/* outcome chips: yellow when it's going well, grey when neutral, red when it went bad */
.tag.oc-thriving { background: var(--yellow); color: var(--on-yellow); }
.tag.oc-holding { background: var(--yellow-tint); color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow-line); }
.tag.oc-quiet { background: var(--badge); color: var(--badge-ink); }
.tag.oc-stalled { background: transparent; color: var(--faint); box-shadow: inset 0 0 0 1px var(--stroke); }
.tag.oc-faded { background: var(--err-tint); color: var(--err); box-shadow: inset 0 0 0 1px var(--err-line); }
.tag.oc-dead, .tag.oc-dumped { background: var(--err); color: #fff; }

/* scorecard */
.oc-summary { max-width: 90ch; font-size: 13.5px; color: var(--body); }
.oc-score { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1280px) { .oc-score { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .oc-score { grid-template-columns: 1fr 1fr; } }
.otile { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--r-control); background: var(--well); border: 1px solid var(--hairline); min-width: 0; }
.otile b { font: 650 30px/1 var(--font-ui); letter-spacing: -.02em; color: var(--ink); }
.otile .vs { font: 500 11px/1.4 var(--font-mono); color: var(--faint); }
.otile small { font-size: 11.5px; color: var(--faint); }
.delta { font-weight: 600; color: var(--faint); }
.delta.up { color: var(--yellow); }
.delta.down { color: var(--err); }
.otile:has(.delta.up) { border-color: var(--yellow-line); }
.otile:has(.delta.down) { border-color: var(--err-line); }
.oc-head #oc-start-form { gap: 6px; }

/* outcome mix */
.mixbar { display: flex; gap: 2px; height: 34px; border-radius: 8px; overflow: hidden; }
.mixbar > span { display: flex; align-items: center; justify-content: center; min-width: 4px; font: 650 12px/1 var(--font-mono); transition: flex-grow 1.2s var(--ease-out); }
.seg-thriving { background: var(--yellow); color: var(--on-yellow); }
.seg-holding { background: var(--yellow-2); color: var(--on-yellow); }
.seg-quiet { background: var(--stroke); color: var(--ink); }
.seg-stalled { background: var(--badge); color: var(--body); }
.seg-faded { background: rgba(255, 81, 71, .45); color: #fff; }
.seg-dead { background: rgba(255, 81, 71, .72); color: #fff; }
.seg-dumped { background: var(--err); color: #fff; }
.oc-defs { margin-top: 14px; }
.oc-defs li b { display: inline-block; min-width: 22px; margin-right: 4px; text-align: right; font-family: var(--font-mono); }

/* week by week */
.ctable th.grp { text-align: center; color: var(--body); border-bottom: 1px solid var(--hairline); }
.ctable td:nth-child(6), .ctable th:nth-child(6) { border-right: 1px solid var(--hairline); }
.ctable td.good { color: var(--yellow); }
.ctable td.bad { color: var(--err); font-weight: 600; }
.ctable td.dim { color: var(--mark-grey); }

/* every launch, start to now */
.journeys { display: grid; margin: 0; padding: 0; list-style: none; }
.oc-row { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, 2.4fr) minmax(200px, 1.2fr); gap: 16px; align-items: center; padding: 12px 0 12px 12px; border-top: 1px solid var(--hairline-subtle); }
.oc-row:first-child { border-top: 0; }
.oc-row.is-bad { box-shadow: inset 3px 0 0 var(--err); background: linear-gradient(90deg, var(--err-tint), transparent 45%); }
.oc-row.is-good { box-shadow: inset 3px 0 0 var(--yellow); }
.jstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.jstep { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0 12px; font-size: 12.5px; color: var(--ink); border-left: 1px solid var(--hairline); min-width: 0; }
.jstep small { font: 500 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.jstep.dim { color: var(--mark-grey); }
.jstep .bad { color: var(--err); }
.jout { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.jout > small { font-size: 12px; color: var(--body); }
.oc-row.is-bad .jout > small { color: var(--err); }
@media (max-width: 1000px) { .oc-row { grid-template-columns: 1fr; gap: 10px; } .jstrip { grid-template-columns: 1fr 1fr; row-gap: 10px; } }

/* timeline */
.timeline { position: relative; display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 1px; background: var(--hairline); }
.timeline li { position: relative; display: grid; grid-template-columns: 24px 64px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 7px 0; font-size: 13px; }
.tl-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 1px solid var(--stroke); align-self: center; }
.tl-dot svg { width: 12px; height: 12px; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tl-first .tl-dot, .tl-start .tl-dot { border-color: var(--yellow-line); background: var(--yellow-tint); }
.tl-first .tl-dot svg, .tl-start .tl-dot svg { stroke: var(--yellow); }
.tl-note .tl-dot svg { stroke: var(--ink); }
.tl-date { font: 500 11px/1.3 var(--font-mono); color: var(--faint); white-space: nowrap; }
.tl-text { color: var(--ink); min-width: 0; }
.tl-joins .tl-text, .tl-review .tl-text { color: var(--body); }

/* how the team ran it */
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini.team b { font-size: 22px; }
.mini.team .pbar { display: block; position: relative; height: 5px; margin-top: 8px; border-radius: 3px; background: var(--hairline); overflow: hidden; }
.mini.team .pbar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--yellow-2); }
.mini.team.is-warn { border-color: var(--err-line); }
.mini.team.is-warn small { color: var(--err); }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }

/* ---------- editable rules ---------- */
.chg { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 6px rgba(223, 249, 2, .6); vertical-align: 1px; cursor: help; }
.rules-note { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r-control); background: var(--yellow-tint); border: 1px solid var(--yellow-line); font-size: 12.5px; color: var(--ink); }
.rules-tbl tr.is-editing td { padding-top: 6px; padding-bottom: 6px; }
.rule-cell { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 12px; }
input.rule-in { width: 92px; min-height: 30px; padding: 0 8px; text-align: right; font: 600 12.5px/1 var(--font-mono); }
.thr-list input.rule-in { width: 78px; }
.thresholds { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
@media (max-width: 760px) { .thresholds { grid-template-columns: 1fr; } }
.thr-list { display: grid; margin: 8px 0 0; padding: 0; list-style: none; }
.thr-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--hairline-subtle); font-size: 12.5px; color: var(--body); }
.thr-list li:first-child { border-top: 0; }
.thr-list b { font: 600 12.5px/1 var(--font-mono); color: var(--ink); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; }
  .title-wave path { stroke-dashoffset: 0; }
  .title-wave circle { opacity: 1; }
  .sweep { display: none; }
}

/* ---------- sign-in page ---------- */
body.auth { display: grid; place-items: center; padding: 28px var(--gutter); }
.auth-wrap { width: min(420px, 100%); display: grid; gap: 18px; }
.auth-brand { display: inline-flex; align-items: center; gap: 12px; justify-self: center; text-decoration: none; }
.auth-brand img { width: 108px; height: 29px; }
.auth-card { display: grid; gap: 14px; padding: 26px 24px 22px; animation: rv .7s var(--ease-out) both; }
.auth-title { margin: 2px 0 0; font: 600 32px/1.05 var(--font-display); letter-spacing: -.015em; color: var(--ink); }
.auth-sub { margin: -4px 0 0; font-size: 13.5px; color: var(--body); }
.auth-form { display: grid; gap: 13px; margin-top: 2px; }
.auth-form .field { display: flex; }
.auth-form > .btn { width: 100%; min-height: 40px; margin-top: 2px; font-size: 11.5px; }
.auth-form.busy { opacity: .7; }
.auth-links { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; font-size: 12.5px; }
.auth-links a { color: var(--body); text-decoration: underline; text-decoration-color: var(--stroke); text-underline-offset: 3px; }
.auth-links a:hover { color: var(--yellow); text-decoration-color: var(--yellow-line); }
.auth-links .linkish { color: var(--body); font-size: 12.5px; }
.auth-note, .auth-err { padding: 10px 12px; border-radius: var(--r-control); font-size: 13px; line-height: 1.45; }
.auth-note { background: var(--yellow-tint); box-shadow: inset 0 0 0 1px var(--yellow-line); color: var(--ink); }
.auth-err { background: var(--err-tint); box-shadow: inset 0 0 0 1px var(--err-line); color: var(--err); }
.auth-foot { margin: 0; text-align: center; font-size: 12px; color: var(--faint); }
.pw { position: relative; display: block; }
.pw input { padding-right: 64px; }
.pw-eye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); height: 24px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--faint); font: 600 10px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.pw-eye:hover { color: var(--ink); background: var(--badge); }
@media (max-width: 440px) { .auth-card { padding: 22px 18px 18px; } .auth-title { font-size: 28px; } .auth-brand .bar-slash { display: inline; } }

/* ---------- team access ---------- */
.team-card { margin-top: 12px; }
.team-card #invite-form { padding: 12px; border-radius: var(--r-control); background: var(--well); border: 1px solid var(--hairline); }
.team-card #invite-form .check { min-height: 34px; }
.link-box { margin-top: 10px; padding: 12px; border-radius: var(--r-control); background: var(--yellow-tint); box-shadow: inset 0 0 0 1px var(--yellow-line); color: var(--ink); font-size: 13px; }
.link-box p { margin: 0 0 8px; }
.link-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.link-row .link-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 8px; }
.acc-wrap { margin-top: 12px; }
.acc-tbl td { vertical-align: middle; }
.acc-tbl td:first-child { display: flex; align-items: center; gap: 6px; }
.acc-tbl input.inline { width: 170px; }
.acc-tbl .acc-email { color: var(--ink); font-size: 12.5px; }
.acc-tbl tr.is-off td { color: var(--faint); }
.acc-tbl tr.is-off .acc-email { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--stroke); }
.acc-inv { display: inline-flex; align-items: center; gap: 8px; }
.acc-actions { justify-content: flex-end; width: 100%; }
.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; }

/* ---------- categories, holders, routes, channels, lead mode ---------- */
select.catsel { max-width: 190px; }
select.catsel.differs { border-color: var(--yellow-line); box-shadow: inset 0 0 0 1px var(--yellow-line); }
.via-cell { display: inline-flex; align-items: center; gap: 4px; }
.via-cell input.inline { width: 130px; }
.q-meta input.q-chan { width: 150px; min-height: 26px; font-size: 12px; }
.q-pb-wrap { display: inline-flex; align-items: center; gap: 6px; }
.q-pb-wrap input.q-pb { width: 150px; min-height: 28px; border-color: var(--hairline); }
.qlist li.is-in .q-pb { color: var(--yellow); border-color: var(--yellow-line); }
#q-ch { min-height: 34px; }
.ctable tr.is-dim td { color: var(--faint); }
.view[data-view="overview"]:not([data-lead="activity"]) .lead-activity { display: none !important; }
.view[data-view="overview"][data-lead="activity"] .lead-tiers { display: none !important; }
.lead-ctl { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
@media (max-width: 860px) { .lead-ctl { justify-content: flex-start; } }
.lead-ctl .label { font-size: 10px; }