/* Transaction Assistant dashboard.
   Palette note: the pipeline ramp is a single-hue ORDINAL scale (stages are
   ordered, so lightness carries progression), validated in both modes with the
   dataviz validator. The product's Drive folder colours are deliberately NOT
   reused here — as a chart palette they fail hard: Lead purple vs Active blue
   sit ΔE 0.8 apart under protanopia, and Conditional yellow vs Pending orange
   ΔE 5.4 apart under NORMAL vision. They remain correct for Drive folders. */

:root{
  color-scheme: light;
  --page:#f3f6f5; --surface:#ffffff; --raised:#fbfdfc;
  --line:#dce5e1; --hair:#e8efeb;
  --ink:#16241f; --ink-2:#4a5a54; --muted:#76847e;
  --brand:#087d5b; --brand-deep:#075743; --brand-bright:#16a274; --soft:#e7f7f1;

  /* ordinal pipeline ramp, light→dark = Lead→Closed */
  --stage-1:#5ac49f; --stage-2:#2dab86; --stage-3:#0f8e68; --stage-4:#0a6b4f; --stage-5:#054e3a;
  --stage-out:#8a9691;                     /* Cancelled — left the pipeline */

  /* two-series categorical, validated */
  --series-actual:#0f8e68; --series-scheduled:#2a78d6;

  /* reserved status tokens — never reused as series colours */
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --soon-ink:#9a5a12;   /* readable 'due soon' text; the pill carries --serious */

  --shadow:0 8px 24px rgba(20,58,46,.07);
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --page:#161b19; --surface:#232c29; --raised:#28322e;
    --line:#3b4843; --hair:#2f3a36;
    --ink:#e9f0ed; --ink-2:#b3c0ba; --muted:#8b9992;
    --brand:#73d8b4; --brand-deep:#0c3f31; --brand-bright:#2fbf8d; --soft:#173e32;
    --stage-1:#0a6b4f; --stage-2:#0f8e68; --stage-3:#2dab86; --stage-4:#5ac49f; --stage-5:#8fdcbe;
    --stage-out:#6f7d77;
    --series-actual:#2dab86; --series-scheduled:#3987e5;
    --soon-ink:#ec835a;
    --shadow:0 8px 24px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#161b19; --surface:#232c29; --raised:#28322e;
  --line:#3b4843; --hair:#2f3a36;
  --ink:#e9f0ed; --ink-2:#b3c0ba; --muted:#8b9992;
  --brand:#73d8b4; --brand-deep:#0c3f31; --brand-bright:#2fbf8d; --soft:#173e32;
  --stage-1:#0a6b4f; --stage-2:#0f8e68; --stage-3:#2dab86; --stage-4:#5ac49f; --stage-5:#8fdcbe;
  --stage-out:#6f7d77;
  --series-actual:#2dab86; --series-scheduled:#3987e5;
  --soon-ink:#ec835a;
  --shadow:0 8px 24px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--page); color:var(--ink);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial,sans-serif;
}
h1,h2,h3{letter-spacing:-.2px}
a{color:var(--brand)}

/* ---------- shell ---------- */
.topbar{
  background:linear-gradient(135deg,var(--brand-deep) 0%,#0a8060 55%,var(--brand-bright) 100%);
  color:#fff; padding:20px 20px 22px;
}
.topbar-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{font-size:11px;font-weight:800;letter-spacing:1.5px;opacity:.85;margin:0}
.topbar h1{font-size:23px;margin:2px 0 0;line-height:1.2}
.spacer{flex:1}
.ghost-btn{
  border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.12); color:#fff;
  border-radius:9px; padding:8px 12px; font:inherit; font-size:12px; font-weight:700; cursor:pointer;
}
.ghost-btn:hover{background:rgba(255,255,255,.22)}
main{max-width:1180px;margin:0 auto;padding:20px 20px 72px}

/* ---------- filter row: one row, above everything it scopes ---------- */
.filters{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;margin:-34px 0 20px;box-shadow:var(--shadow);position:relative;z-index:2;
}
.filters label{font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.filters select,.filters input{
  font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--raised);color:var(--ink);
}
.filters input[type="search"]{min-width:190px;flex:1}
.filter-note{font-size:12px;color:var(--muted);margin-left:auto}

/* ---------- stat tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin-bottom:16px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;box-shadow:var(--shadow)}
.tile-label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.tile-value{font-size:31px;line-height:1.1;font-weight:700;margin:0}   /* proportional figures, not tabular */
.tile-sub{font-size:12px;color:var(--ink-2);margin:5px 0 0}
.tile.alert .tile-value{color:var(--critical)}

/* ---------- cards & charts ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:17px 18px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.card h2{font-size:15px;margin:0}
.card-sub{font-size:12px;color:var(--muted);margin:0 0 14px}
.card-head .spacer{flex:1}
.link-btn{
  border:0;background:transparent;color:var(--brand);font:inherit;font-size:11px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer;padding:3px 5px;border-radius:6px;
}
.link-btn:hover{background:var(--soft)}

/* horizontal bars — 2px surface gap between fills, no borders on marks */
.hbar-row{display:grid;grid-template-columns:104px 1fr 34px;align-items:center;gap:10px;margin-bottom:9px}
.hbar-name{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-track{display:block;background:var(--hair);border-radius:5px;height:19px;position:relative;overflow:hidden}
.hbar-fill{display:block;height:100%;border-radius:0 5px 5px 0;transition:width .35s cubic-bezier(.4,0,.2,1)}
.hbar-count{font-size:12.5px;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.hbar-row:focus-visible,.hbar-row:hover .hbar-name{color:var(--ink)}

/* column chart */
.cols{display:flex;align-items:flex-end;gap:2px;height:168px;padding-top:6px;border-bottom:1px solid var(--line)}
.col-group{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:2px;height:100%;position:relative;cursor:default}
.col{display:block;width:13px;border-radius:4px 4px 0 0;min-height:2px;transition:height .35s cubic-bezier(.4,0,.2,1)}
.col.actual{background:var(--series-actual)}
.col.scheduled{background:var(--series-scheduled)}
.col-axis{display:flex;gap:2px;margin-top:7px}
.col-axis span{flex:1;text-align:center;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.col-peak{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;color:var(--ink-2);white-space:nowrap}

.legend{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0 0;font-size:12px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.swatch{width:10px;height:10px;border-radius:3px;flex:0 0 auto}

/* ---------- agenda ---------- */
.agenda-group{margin-bottom:16px}
.agenda-group h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
.agenda-item{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--hair)}
.agenda-item:last-child{border-bottom:0}
.agenda-icon{flex:0 0 auto;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;margin-top:1px}
.agenda-icon.overdue{background:var(--critical)}
.agenda-icon.soon{background:var(--serious)}
.agenda-icon.later{background:var(--stage-out)}
.agenda-body{min-width:0;flex:1}
.agenda-what{font-size:13.5px;font-weight:650;margin:0}
.agenda-where{font-size:12px;color:var(--muted);margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agenda-when{font-size:12px;text-align:right;flex:0 0 auto;color:var(--ink-2);font-variant-numeric:tabular-nums}
.agenda-when b{display:block;font-size:11px;font-weight:800}
.agenda-when.overdue b{color:var(--critical)}
.agenda-when.soon b{color:var(--soon-ink)}

/* ---------- table twin ---------- */
.table-wrap{overflow-x:auto;margin-top:6px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--hair);white-space:nowrap}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800}
td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- tooltip ---------- */
.tip{
  position:fixed;pointer-events:none;z-index:50;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:12.5px;
  box-shadow:0 10px 26px rgba(15,40,32,.18);opacity:0;transition:opacity .12s;max-width:260px;
}
.tip.on{opacity:1}
.tip b{display:block;margin-bottom:2px;font-size:12.5px}
.tip-row{display:flex;align-items:center;gap:7px;color:var(--ink-2)}

.empty{color:var(--muted);font-size:13px;padding:18px 0;text-align:center}
.hidden{display:none!important}
.loading-veil{opacity:.45;transition:opacity .2s}   /* hold previous render, no skeleton flash */

footer{max-width:1180px;margin:0 auto;padding:0 20px 40px;color:var(--muted);font-size:12.5px}
.banner{
  border:1px solid var(--warning);background:color-mix(in srgb,var(--warning) 12%,var(--surface));
  color:var(--ink);border-radius:10px;padding:11px 14px;margin-bottom:16px;font-size:13px;
}
@media (max-width:620px){
  .hbar-row{grid-template-columns:86px 1fr 28px}
  .topbar h1{font-size:20px}
  .tile-value{font-size:27px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.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}
.card-count{font-size:12px;color:var(--muted)}
.deal-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;width:100%;
  border:0;border-bottom:1px solid var(--hair);background:transparent;color:var(--ink);
  font:inherit;text-align:left;padding:11px 6px;cursor:pointer;border-radius:8px}
.deal-row:last-child{border-bottom:0}
.deal-row:hover,.deal-row:focus-visible{background:var(--soft)}
.deal-row>span:first-child{display:block;min-width:0}
.deal-row .addr{display:block;font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deal-row .who{display:block;font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deal-row .next{display:block;font-size:12px;color:var(--ink-2);text-align:right;white-space:nowrap}
.deal-row .next b{display:block;font-size:11px;font-weight:800}
.stage-chip{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;
  border-radius:11px;padding:3px 9px;white-space:nowrap}
.warn-dot{color:var(--critical);font-weight:800;margin-right:5px}

.drawer{position:fixed;inset:0;background:rgba(14,30,25,.62);backdrop-filter:blur(2px);z-index:40;
  padding:22px 14px;overflow:auto}
.drawer-card{background:var(--surface);border:1px solid var(--line);border-radius:15px;max-width:560px;
  margin:0 auto;padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.drawer-head{display:flex;gap:12px;align-items:flex-start;border-bottom:1px solid var(--line);
  margin:-4px -20px 14px;padding:0 20px 13px}
.drawer-head h2{font-size:17px;margin:0}
.drawer-sub{font-size:12.5px;color:var(--muted);margin:3px 0 0}
.modal-close{border:0;background:transparent;color:var(--muted);font-size:27px;line-height:1;
  border-radius:7px;cursor:pointer;margin-left:auto;padding:0 6px}
.modal-close:hover{background:var(--soft);color:var(--ink)}
.kv{display:grid;grid-template-columns:128px 1fr;gap:5px 12px;font-size:13.5px;margin-bottom:6px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.share-block{border-top:1px solid var(--line);margin:16px -20px -20px;padding:15px 20px 18px;background:var(--raised);border-radius:0 0 15px 15px}
.share-block h3{font-size:13px;margin:0 0 5px}
.share-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.share-url{flex:1;min-width:200px;font-size:12px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);color:var(--ink-2);font-family:ui-monospace,Menlo,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn{border:0;border-radius:8px;padding:9px 13px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  background:var(--brand);color:#fff}
.btn:hover{filter:brightness(1.07)}
.btn.secondary{background:transparent;color:var(--brand);border:1px solid var(--line)}
.btn.secondary:hover{background:var(--soft)}
.btn.danger{background:transparent;color:var(--critical);border:1px solid var(--line)}
.btn.danger:hover{background:color-mix(in srgb,var(--critical) 10%,transparent)}
.btn[disabled]{opacity:.55;cursor:wait}
.share-note{font-size:12px;color:var(--muted);margin:9px 0 0}