/* board.css — the DRiX Customer board + workup layer.
 * Composes base.css / lead.css / drix-ui.css. No new palette: every rule uses
 * DRiX tokens so this reads as family, not a fork. */

/* Readability: secondary grays lifted so dense prose stays readable on the
 * dark ground (Steve, 2026-09-22). Overridden here, never in the copied
 * family stylesheets. */
:root {
  --mid:   #c6cfdb;
  --soft:  #97a3b4;
  --faint: #7e8b9d;
}
.dx, body.lead {
  --dx-text-dim:   #c6cfdb;
  --dx-text-muted: #97a3b4;
}

/* ── Project hero ────────────────────────────────────────────────────────── */

.proj-hero { padding: 2.2rem 0 1.2rem; }

.kpis { display: flex; gap: 1px; flex-wrap: wrap; margin: 1.4rem 0 0;
        background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: 3px; }
.kpi { flex: 1 1 7.5rem; background: var(--surface); padding: 1rem 1.1rem; }
.kpi b {
  display: block; font: 600 1.7rem/1 var(--display);
  letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums;
  margin-bottom: .3rem;
}
.kpi span {
  color: var(--soft); font: 600 .64rem var(--data);
  letter-spacing: .13em; text-transform: uppercase;
}
.kpi.pulse b { animation: kpulse .5s ease; }
@keyframes kpulse { 50% { color: var(--accent-text); } }

/* ── Dashboard: gauges + levers ──────────────────────────────────────────── */

.dash { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; margin: 1.25rem 0 0; align-items: stretch; }
@media (max-width: 940px) { .dash { grid-template-columns: 1fr; } }

/* The dials stack vertically and share out the full height of the column, so
   the panel carries no dead space above them. On narrow screens the dashboard
   collapses to one column and the dials return to a row. */
.gauges {
  display: flex; flex-direction: column; gap: 1rem;
  align-items: center; justify-content: space-evenly;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: 1.2rem 1.6rem;
}
@media (max-width: 940px) {
  .gauges { flex-direction: row; justify-content: center; flex-wrap: wrap; }
}
.gauge { text-align: center; }
.gauge-ring {
  width: 7.8rem; height: 7.8rem; border-radius: 50%; margin: 0 auto .45rem;
  background: conic-gradient(var(--g-col, var(--accent)) calc(var(--val, 0) * 3.6deg), var(--surface-2) 0);
  display: grid; place-items: center;
}
.gauge-hole {
  width: 5.7rem; height: 5.7rem; border-radius: 50%; background: var(--bg);
  display: grid; place-items: center;
}
.gauge-hole b { font: 700 1.7rem/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.gauge-hole i { font-style: normal; font-size: .6rem; color: var(--faint); }
.gauge > span { font: 600 .6rem var(--data); letter-spacing: .11em; text-transform: uppercase; color: var(--soft); }
.gauge-ring.pulse { animation: gpulse .55s ease; }
@keyframes gpulse { 50% { filter: brightness(1.45); } }

.levers-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: 1rem 1.2rem;
}
.levers-head { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin-bottom: .6rem; }
.levers-head .btn-quiet { margin-left: auto; }
.levers { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .3rem 1.6rem; }
.lever { display: grid; grid-template-columns: 10rem 1fr 3rem; gap: .7rem; align-items: center; }
.lever span { font-size: .78rem; color: var(--mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lever output { font: 600 .76rem var(--data); color: var(--soft); text-align: right; font-variant-numeric: tabular-nums; }
.lever input[type=range] { width: 100%; accent-color: var(--accent); height: 1.05rem; padding: 0; background: none; border: 0; }
.levers-note { margin: .6rem 0 0; font-size: .76rem; color: var(--faint); }
.levers-note.warn { color: var(--judge); }

/* Tier distribution strip */
.tdist-wrap { margin: 1rem 0 0; }
.tdist { display: flex; height: 12px; border-radius: 999px; overflow: hidden; border: 1px solid var(--rule); }
.tdist i { display: block; height: 100%; transition: width .3s ease; }
.td-A { background: var(--proven); }
.td-B { background: var(--accent); }
.td-C { background: var(--judge); }
.td-D { background: var(--surface-2); }
.tdist-legend { display: flex; gap: 1.05rem; flex-wrap: wrap; margin-top: .45rem; }
.tdist-legend span { font-size: .74rem; color: var(--soft); display: inline-flex; align-items: center; gap: .35rem; font-variant-numeric: tabular-nums; }
.tdist-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* ── Run controls ────────────────────────────────────────────────────────── */

.runbar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 1.4rem 0 0; }
.runbar .status { font: 500 .82rem var(--data); color: var(--soft); }
.runbar .status.err { color: var(--failed); }
.runbar label { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--soft); margin: 0; font-weight: 500; }
.runbar input[type=number] { width: 5rem; padding: .4rem .5rem; }

/* ── Header tabs (New project / Previous reports) ────────────────────────── */

.tabs { margin-left: auto; display: flex; gap: .3rem; }
.tab {
  padding: .5rem .95rem; font: 600 .85rem var(--body);
  color: var(--soft); background: transparent; border: 1px solid transparent;
  border-radius: 5px; cursor: pointer;
}
.tab:hover { color: var(--ink); filter: none; }
.tab.on { color: var(--accent-text); background: var(--accent-wash); border-color: var(--accent-edge); }

/* ── Previous reports: a grid of report cards ────────────────────────────── */

/* auto-fit (not auto-fill): empty tracks collapse instead of stealing 1fr
   share from the cards that actually exist, so one card fills the row. */
#reports-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .9rem; }
.report-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 6px; padding: 1.1rem 1.25rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.rc-top { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.rc-top h3 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-top .hint { margin: 0; white-space: nowrap; }
.rc-stats { display: flex; flex-wrap: wrap; gap: .3rem; }
.rc-actions { display: flex; gap: .5rem; margin-top: .2rem; }
.rc-actions .btn, .rc-actions .btn-quiet { padding: .5rem .9rem; font-size: .85rem; white-space: nowrap; }

/* ── New project card ────────────────────────────────────────────────────── */

.newproj {
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--accent); border-radius: 6px;
  padding: 1.6rem 1.8rem; margin: 1.5rem 0;
}
.newproj .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 720px) { .newproj .two { grid-template-columns: 1fr; } }

/* ── Filters + queue (fixed columns; the button never bends the grid) ────── */

.filters { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.6rem 0 1rem; }
.filters select, .filters input { width: auto; min-width: 9.5rem; padding: .5rem .65rem; font-size: .88rem; }
.filters input[type=search] { flex: 1; min-width: 12rem; }

.q-row {
  display: grid;
  grid-template-columns: 1.5rem 2.2rem minmax(0, 1fr) 10.6rem 3.1rem 9.8rem;
  gap: .5rem 1.1rem;
  align-items: center;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
  border-left: 3px solid var(--tc-row, var(--rule));
  padding: .9rem 1.1rem; margin-bottom: .55rem;
}
.q-pick { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); cursor: pointer; }
.q-pick-ph { width: 1.1rem; }
.bulkbar {
  display: flex; align-items: center; gap: .8rem; margin: 0 0 .7rem;
  padding: .6rem .9rem; border: 1px solid var(--accent-edge); border-radius: 8px;
  background: var(--accent-wash);
}
.bulkbar span { font: 600 .82rem var(--data); color: var(--ink); }
.bulkbar { flex-wrap: wrap; }
.bulk-all { display: flex; align-items: center; gap: .45rem; font: 600 .85rem var(--data); color: var(--ink); cursor: pointer; }
.bulk-all input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); cursor: pointer; }
/* Customer-type badge: the row's left edge and this badge share one color per
   type (MSP, VAR, SI, ...), so the list reads by business model at a glance. */
.ptype {
  display: inline-block; margin-left: .55rem; vertical-align: 1px;
  font: 700 .58rem var(--data); letter-spacing: .09em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--tc, var(--soft)) 16%, transparent);
  color: var(--tc, var(--soft));
}
/* border-color shorthand was wiping the type-colored left edge on exactly the
   rows that earn a workup; the customer-type color stays. */
.q-row.is-open { border-color: var(--accent-edge); border-left-color: var(--tc-row, var(--accent-edge)); background: var(--accent-wash); }
.q-rank { font: 700 1rem/1 var(--data); color: var(--soft); font-variant-numeric: tabular-nums; }
.q-co { min-width: 0; }
.q-co b { font: 650 .98rem/1.3 var(--body); color: var(--ink); display: block; }
.q-co .dom { font: 500 .73rem/1.6 var(--data); color: var(--soft); word-break: break-all; }
.q-why { grid-column: 3 / -1; font-size: .9rem; color: var(--mid); line-height: 1.55; }
.q-scores { display: flex; gap: .45rem; justify-content: flex-end; }
.q-score { text-align: center; width: 3.2rem; padding: .32rem .25rem; border-radius: 6px; border: 1px solid var(--rule); background: var(--surface-2); }
.q-score b { display: block; font: 700 1rem/1.1 var(--data); font-variant-numeric: tabular-nums; color: var(--ink); }
.q-score span { font: 600 .54rem/1.4 var(--data); letter-spacing: .08em; color: var(--soft); text-transform: uppercase; }
.q-score.hot b { color: var(--proven); }
.q-score.warm b { color: var(--judge); }
.q-score.cold b { color: var(--faint); }
.q-score.na b { color: var(--faint); }
.tierpill {
  display: inline-block; width: 2.4rem; text-align: center;
  font: 700 .78rem/1 var(--data); padding: .5rem 0; border-radius: 999px; letter-spacing: .06em;
}
.tier-A { background: rgba(61,220,132,.15); color: var(--proven); }
.tier-B { background: rgba(90,169,255,.15); color: var(--accent-text); }
.tier-C { background: rgba(255,199,87,.13); color: var(--judge); }
.tier-D { background: var(--surface-2); color: var(--faint); }
.tier-  { background: transparent; color: var(--faint); }
.q-act { width: 100%; }
.q-act .btn, .q-act a.btn { display: block; width: 100%; text-align: center; padding: .55rem 0; font-size: .85rem; }
.q-act .muted {
  display: block; width: 100%; text-align: center; padding: .5rem .2rem;
  font-size: .76rem; color: var(--faint);
  border: 1px dashed var(--rule); border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 860px) {
  .q-row { grid-template-columns: 1.5rem 1.6rem minmax(0,1fr) auto; }
  .q-scores { justify-content: flex-start; }
  .q-act { grid-column: 3 / -1; }
  .q-why { grid-column: 3 / -1; }
}

/* ── Workup page extras (on top of lead.css) ─────────────────────────────── */

.wk-panel { display: none; }
.wk-panel.on { display: block; }
.hero-scores { display: flex; gap: .7rem; flex: none; align-items: flex-start; }
@media (max-width: 680px) { .hero-inner { flex-wrap: wrap; } }

.atoms { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .7rem; }
.atom {
  background: var(--dx-surface); border: 1px solid var(--dx-border); border-radius: 8px;
  padding: .85rem 1rem;
}
.atom-claim { font-size: .92rem; color: var(--dx-text); line-height: 1.5; margin: 0 0 .45rem; }
.atom-src {
  font: 500 .74rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--dx-text-muted);
  border-left: 2px solid var(--dx-border); padding-left: .55rem; display: block; font-style: italic;
}
.atom .dx-chips { margin-top: .5rem; }

.sb { display: grid; gap: .5rem; }
.sb-row { display: grid; grid-template-columns: 12rem 1fr 2.6rem; gap: .8rem; align-items: center; }
.sb-row > span { font-size: .8rem; color: var(--dx-text-dim); }
.sb-row b { font: 700 .85rem/1 ui-monospace, Menlo, monospace; color: var(--dx-text); text-align: right; font-variant-numeric: tabular-nums; }
.sb-track { height: 6px; border-radius: 3px; background: var(--dx-surface-2); overflow: hidden; }
.sb-fill { height: 100%; border-radius: 3px; background: var(--dx-accent); }
.sb-note { font-size: .74rem; color: var(--dx-text-muted); margin-top: .15rem; grid-column: 1 / -1; line-height: 1.45; }
@media (max-width: 760px) { .sb-row { grid-template-columns: 8.5rem 1fr 2.2rem; } }

.flaglist { margin: .4rem 0 0; padding: 0; list-style: none; }
.flaglist li { position: relative; padding-left: 1rem; margin-bottom: .4rem; font-size: .9rem; line-height: 1.5; color: var(--dx-text-dim); }
.flaglist li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; }
.flaglist.good li::before { background: var(--dx-green); }
.flaglist.bad li::before { background: var(--dx-red); }

.contact-slot {
  border: 1px dashed var(--dx-border); border-radius: 8px; padding: .9rem 1.1rem;
  color: var(--dx-text-muted); font-size: .88rem; line-height: 1.55; margin-bottom: .7rem;
}
.contact-slot b { color: var(--dx-text-dim); }

.pagefoot {
  max-width: 1240px; margin: 0 auto; padding: 1.2rem 1.6rem 2.2rem;
  border-top: 1px solid var(--dx-border);
  font-size: .78rem; color: var(--dx-text-muted); display: flex; gap: 1.5rem; flex-wrap: wrap;
}
.pagefoot b { color: var(--dx-text-dim); font-weight: 600; }

.loadwrap { padding: 4rem 1rem; text-align: center; color: var(--dx-text-muted, var(--soft)); }

/* Toasts: the app says "go do what you need to do" and then comes to find you. */
.toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; display: flex; flex-direction: column; gap: .5rem; max-width: 26rem; }
.toast {
  background: var(--surface, var(--dx-surface, #121820));
  border: 1px solid var(--rule, var(--dx-border, #2a3542));
  border-left: 3px solid var(--accent, var(--dx-accent, #5aa9ff));
  border-radius: 8px; padding: .8rem 1rem;
  font-size: .88rem; color: var(--mid, var(--dx-text-dim, #c6cfdb)); line-height: 1.5;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  animation: toast-in .18s ease-out;
}
.toast.win { border-left-color: var(--proven, #3ddc84); }
.toast.err { border-left-color: var(--failed, #ff5a5a); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

/* The play-by-play: real pipeline events bright, house humor quiet. */
.runlog {
  margin-top: .8rem; background: var(--bg);
  border: 1px solid var(--rule); border-radius: 8px;
  padding: .6rem .85rem; max-height: 15rem; overflow-y: auto;
  font: 500 .8rem/1.7 var(--data);
}
.rl { color: var(--mid); }
.rl .rl-t { color: var(--faint); margin-right: .6rem; font-size: .68rem; }
.rl-flavor { color: var(--faint); font-style: italic; }
.rl-handy { color: #b583ff; }
.rl-win { color: var(--proven); }
.rl-err { color: var(--failed); }

/* The SKU sheet: deliverable checkboxes. The client gets what they pay for. */
.delivgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .35rem .9rem; }
.deliv {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .45rem .55rem; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--surface); cursor: pointer;
}
.deliv input { width: auto; margin-top: .2rem; accent-color: var(--accent); }
.deliv b { display: block; font-size: .84rem; font-weight: 650; color: var(--ink); }
.deliv span { font-size: .72rem; color: var(--soft); line-height: 1.35; }
.deliv .soon {
  font: 700 .56rem var(--data); letter-spacing: .08em; text-transform: uppercase;
  color: var(--judge); margin-left: .35rem;
}

/* Multi-select chip groups (targeting). A chip is a toggle, not a link. */
.chipgrp { display: flex; flex-wrap: wrap; gap: .35rem; }
.chipgrp .chip { cursor: pointer; user-select: none; padding: .38rem .75rem; font-size: .82rem; margin: 0; }
.chipgrp .chip:hover { border-color: var(--accent-edge); }
.chipgrp .chip.on { border-color: var(--accent-edge); color: var(--accent-text); background: var(--accent-wash); font-weight: 600; }
#np-notes, #t-notes { margin-top: .5rem; }

/* ── The two phases: decide, then engage ─────────────────────────────────── */
/* The decision pill on a queue row. Green means the kit is open; a passed row
   keeps its file but steps back visually, because the list's job is to show
   where the operator's time goes next. */
.decis { display: inline-block; margin-left: .5rem; padding: .1rem .5rem; border-radius: 999px;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; vertical-align: middle; }
.decis.d-pursue { color: #3ddc84; background: rgba(61, 220, 132, .12); border: 1px solid rgba(61, 220, 132, .4); }
.decis.d-pass { color: var(--soft); background: rgba(151, 163, 180, .1); border: 1px solid rgba(151, 163, 180, .35); }
.q-row.is-passed { opacity: .55; }
.q-row.is-passed:hover { opacity: .85; }

/* The stage badge in the workup topbar. */
.stage-deciding { color: #ffc757; border-color: rgba(255, 199, 87, .5); }
.stage-pursue { color: #3ddc84; border-color: rgba(61, 220, 132, .5); }
.stage-pass { color: var(--soft); }

/* The pursue-or-pass moment gets room; these are the two biggest buttons on
   the page because they are the page. */
.decide-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .4rem; }
.decide-row .btn { padding: .85rem 1.6rem; font-size: 1rem; }

/* ── The two phase boxes in the workup rail ──────────────────────────────── */
/* DISCOVERY and ENGAGEMENT each live in their own raised box: a slightly
   lighter ground than the page, an inset top highlight and a drop shadow so
   they sit proud of it, and a label that names the phase before any button
   inside gets read. Discovery leans cyan, engagement leans green. */
.phasebox { position: relative; border-radius: 14px; padding: 1.5rem .8rem .8rem;
  display: flex; flex-direction: column; gap: 1.05rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015) 42%), var(--surface);
  border: 1px solid var(--rule);
  box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .07); }
.phase-discovery { border-color: rgba(90, 212, 255, .28); }
.phase-engagement { border-color: rgba(61, 220, 132, .28); }
.phase-label { position: absolute; top: -0.62rem; left: .9rem; padding: .16rem .7rem; border-radius: 999px;
  font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
.phase-discovery > .phase-label { color: #5ad4ff; background: #10222d; border: 1px solid rgba(90, 212, 255, .45); }
.phase-engagement > .phase-label { color: #3ddc84; background: #0f2419; border: 1px solid rgba(61, 220, 132, .45); }
/* Locked engagement: the box stays on the page so the machine's shape is
   visible, but it steps back until the decision opens it. */
.phase-engagement.is-locked { opacity: .62; border-style: dashed; }
.phase-locked { margin: 0; font-size: .8rem; color: var(--soft); line-height: 1.5; }

/* One-click decision on the queue row: YES pursues, NO passes (with a why). */
.yn { display: flex; gap: .4rem; }
.yn .btn { padding: .42rem .95rem; font-weight: 800; letter-spacing: .04em; }
.btn-yes { background: rgba(61, 220, 132, .14); border: 1px solid rgba(61, 220, 132, .55); color: #3ddc84; }
.btn-yes:hover { background: rgba(61, 220, 132, .24); }
.btn-no { background: rgba(255, 143, 143, .1); border: 1px solid rgba(255, 143, 143, .45); color: #ff8f8f; }
.btn-no:hover { background: rgba(255, 143, 143, .2); }