/* ============================================================
   Rapot — "Load Line" design system
   Field-sales CRM for eClouds Energy (power trading).
   Grounded in the electrical world: meters, load curves, busbars.
   ============================================================ */

@import url('fonts/fonts.css');   /* self-hosted, CDN-free */

:root {
  /* palette */
  --paper:      #F3F6F5;   /* cool grid paper — app bg */
  --surface:    #FFFFFF;   /* cards */
  --surface-2:  #EAF0EE;   /* recessed / column wells */
  --ink:        #0F1E1D;   /* deep spruce — text */
  --line:       #DBE4E1;   /* cool hairline */
  --muted:      #5C6B69;   /* slate-teal — secondary text */
  --current:    #2563EB;   /* eClouds blue — primary / energized */
  --current-dk: #1E3A8A;
  --live:       #F0A017;   /* live amber — priority / high-voltage */
  --live-soft:  #FDF0D6;
  --err:        #C6483B;

  /* type */
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body:    'Public Sans', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* system */
  --radius: 14px;
  --radius-sm: 9px;
  --gap: 16px;
  --shadow: 0 1px 2px rgba(15,30,29,.04), 0 8px 24px -18px rgba(15,30,29,.28);
  --line-w: 1px;
}

/* motion tokens — only the transitions this app actually uses */
:root {
  --digit-dur: 460ms; --digit-distance: 9px; --digit-stagger: 60ms; --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1); --digit-dir-x: 0; --digit-dir-y: 1;
  --check-opacity-dur: 520ms; --check-rotate-dur: 520ms; --check-rotate-from: 70deg;
  --check-bob-dur: 440ms; --check-y-amount: 22px; --check-blur-dur: 480ms; --check-blur-from: 8px;
  --check-path-dur: 520ms; --check-path-delay: 90ms;
  --check-ease-out: cubic-bezier(0.22,1,0.36,1); --check-ease-bob: cubic-bezier(0.34,1.35,0.64,1);
  --shake-distance: 6px; --shake-overshoot: 4px; --shake-dur-a: 80ms; --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22,1,0.36,1); --revert-hold: 3200ms; --revert-dur: 280ms;
  --modal-open-dur: 240ms; --modal-scale: 0.96; --modal-ease: cubic-bezier(0.22,1,0.36,1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  /* faint grid-paper texture — the worksheet under the readings */
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(14,156,151,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,156,151,.045) 1px, transparent 1px);
  background-size: 26px 26px;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; margin: 0; }

a { color: var(--current-dk); text-decoration: none; }

/* ---- top bar ---- */
.rapot-nav {
  display: flex; align-items: center; gap: 26px;
  padding: 13px 22px;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: var(--line-w) solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.rapot-mark {
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: -.02em; color: var(--ink); display: flex; align-items: center; gap: 8px;
}
.rapot-mark .bolt { color: var(--current); }
.rapot-nav .navlink { font-family: var(--display); font-weight: 500; font-size: .9rem; color: var(--muted); }
.rapot-nav .navlink.active, .rapot-nav .navlink:hover { color: var(--current-dk); }
.rapot-nav .spacer { margin-left: auto; }
.rapot-nav .who { color: var(--muted); font-size: .86rem; display: flex; align-items: center; gap: 12px; }
/* grouped nav dropdowns (native <details>, no JS) */
.nav-group { position: relative; }
.nav-group > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-caret { font-size: .6rem; opacity: .6; transition: transform .15s; }
.nav-group[open] .nav-caret { transform: rotate(180deg); }
.nav-drop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; min-width: 172px;
  background: var(--surface); border: var(--line-w) solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: 6px; display: flex; flex-direction: column; }
.nav-dropitem { font-family: var(--display); font-size: .88rem; color: var(--ink); padding: 8px 12px; border-radius: 8px; }
.nav-dropitem:hover { background: var(--surface-2); }
.nav-dropitem.active { color: var(--current-dk); font-weight: 600; }

.rapot-main { max-width: 1240px; margin: 26px auto; padding: 0 22px; }
/* Deal page runs wider than the standard 1240px column — this is the page a
   rep lives in, it earns the extra room. Breaks out of .rapot-main's cap to
   85% of the viewport width. */
.deal-app, .wide-page { width:85vw; max-width:85vw; margin-left:calc(50% - 42.5vw); margin-right:calc(50% - 42.5vw); }
@media (max-width:900px){ .deal-app, .wide-page { width:100%; max-width:100%; margin-left:0; margin-right:0; } }

/* ---- eyebrow / labels ---- */
.eyebrow {
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--current-dk);
}

/* ---- cards ---- */
.card {
  background: var(--surface);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}

/* ---- buttons ---- */
.btn {
  font-family: var(--display); font-weight: 600; font-size: .9rem;
  background: var(--current); color: #fff; border: 0;
  border-radius: var(--radius-sm); padding: 11px 18px; cursor: pointer;
  transition: transform .08s ease, background .15s ease;
}
.btn:hover { background: var(--current-dk); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.ghost { background: transparent; color: var(--current-dk); border: var(--line-w) solid var(--line); }
.btn.ghost:hover { background: var(--surface-2); }

/* ---- form fields ---- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label {
  font-family: var(--mono); font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: .92rem; color: var(--ink);
  padding: 11px 13px; background: var(--surface);
  border: var(--line-w) solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* data-shaped fields render in mono — HTSC, phone, readings */
.field.data input { font-family: var(--mono); letter-spacing: -.02em; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--current);
  box-shadow: 0 0 0 3px rgba(14,156,151,.14);
}

/* ---- charge gauge (completeness) ---- */
.gauge-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.gauge-head .pct { font-family: var(--mono); font-weight: 700; font-size: .82rem; color: var(--current-dk); }
.gauge {
  height: 10px; border-radius: 99px; background: var(--surface-2);
  border: var(--line-w) solid var(--line); overflow: hidden; position: relative;
}
.gauge > i {
  display: block; height: 100%;
  background: repeating-linear-gradient(90deg, var(--current) 0 8px, var(--current-dk) 8px 12px);
  transition: width .5s cubic-bezier(.2,.8,.2,1);
}
.chip {
  display: inline-block; margin: 3px 4px 0 0; padding: 3px 9px;
  font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .02em;
  border-radius: 99px; background: var(--surface-2); color: var(--muted);
}
.chip.live { background: var(--live-soft); color: #6E4900; }   /* AA on --live-soft: ~7:1 */
.chip.block { background: #FBE3E1; color: #8A1F1F; }           /* hard blocker — distinct from soft warning */

/* ---- dropzone ---- */
.dropzone {
  border: 1.5px dashed var(--line); border-radius: var(--radius);
  padding: 30px 22px; text-align: center; color: var(--muted);
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
  font-family: var(--display); font-weight: 500;
}
.dropzone.hot { border-color: var(--current); background: rgba(14,156,151,.06); color: var(--current-dk); }
.dropzone .sub { font-family: var(--body); font-weight: 400; font-size: .82rem; margin-top: 4px; }

.quickbar { display: flex; gap: 9px; }
.quickbar input { flex: 1; font-family: var(--body); font-size: .92rem; color: var(--ink);
  padding: 11px 13px; background: var(--surface); border: var(--line-w) solid var(--line); border-radius: var(--radius-sm); }
.quickbar input:focus { outline: none; border-color: var(--current); box-shadow: 0 0 0 3px rgba(14,156,151,.14); }

/* Open-Access verdict — the parser's answer, called out clearly */
.oa-verdict {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 4px; padding: 11px 14px; border-radius: var(--radius-sm);
  font-family: var(--display); font-weight: 500; font-size: .9rem;
  border: var(--line-w) solid var(--line);
}
.oa-verdict .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.oa-verdict.yes { background: var(--live-soft); color: #8a5a06; border-color: #F2D9A6; }
.oa-verdict.yes .dot { background: var(--live); box-shadow: 0 0 0 3px rgba(240,160,23,.2); }
.oa-verdict.no { background: rgba(14,156,151,.07); color: var(--current-dk); border-color: #BFE3E1; }
.oa-verdict.no .dot { background: var(--current); }
.oa-verdict .oa-src { font-family: var(--mono); font-size: .68rem; opacity: .8; }

/* ============================================================
   Pipeline board — the energized busbar
   ============================================================ */
.board-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }

.board { position: relative; display: flex; align-items: stretch; gap: 14px; overflow-x: auto; padding: 8px 2px 16px;
  min-height: calc(100dvh - 230px); }   /* lanes run to the bottom of the page, Trello-style */
/* the current-line threading the stage nodes */
.board::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: 34px; height: 2px;
  background: linear-gradient(90deg, var(--current) 0%, rgba(14,156,151,.25) 100%);
  z-index: 0;
}
.col { position: relative; z-index: 1; min-width: 250px; flex: 0 0 250px; display: flex; flex-direction: column; }
.col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.col-node {
  width: 12px; height: 12px; border-radius: 50%; background: var(--surface);
  border: 2px solid var(--current); flex: 0 0 auto;
}
.col.source .col-node { border-color: var(--muted); }
.col-title { font-family: var(--display); font-weight: 600; font-size: .82rem; }
.col-count { font-family: var(--mono); font-size: .68rem; color: var(--muted); margin-left: auto; }
.col-well { background: var(--surface-2); border-radius: var(--radius); padding: 10px; min-height: 70px;
  flex: 1 1 auto; overflow-y: auto; }

.dcard {
  background: var(--surface); border: var(--line-w) solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 13px; margin-bottom: 10px;
  cursor: grab; box-shadow: 0 1px 2px rgba(15,30,29,.05);
  transition: box-shadow .15s, transform .08s;
}
.dcard:active { cursor: grabbing; }
.dcard:hover { box-shadow: var(--shadow); }
.dcard .co { font-family: var(--display); font-weight: 600; font-size: .9rem; display: block; }
.dcard .meta { font-family: var(--mono); font-size: .7rem; color: var(--muted); margin-top: 3px; }
.dcard .tag { font-family: var(--mono); font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
/* priority = energized: live-amber edge + slow pulse */
.dcard.live {
  border-left: 3px solid var(--live);
  box-shadow: 0 0 0 1px rgba(240,160,23,.25), 0 8px 20px -14px rgba(240,160,23,.5);
  animation: energize 2.6s ease-in-out infinite;
}
@keyframes energize {
  0%, 100% { box-shadow: 0 0 0 1px rgba(240,160,23,.22), 0 8px 20px -14px rgba(240,160,23,.4); }
  50%      { box-shadow: 0 0 0 1px rgba(240,160,23,.5),  0 10px 24px -12px rgba(240,160,23,.7); }
}
.dcard.live .tag { color: #9A6407; }

.empty-well { color: var(--muted); font-family: var(--body); font-size: .78rem; text-align: center; padding: 14px 4px; }

/* ---- deal detail: checklist + timeline ---- */
/* Columns start at the same baseline instead of stretching to equal height —
   the right rail is a shorter checklist, not a mirror of the left column. */
.deal-grid { align-items: start; }
@media (max-width: 820px) { .deal-grid { grid-template-columns: 1fr !important; } }
.chklist { list-style: none; margin: 0; padding: 0; }
.chklist li { padding: 3px 0; display: flex; align-items: center; gap: 8px; }
.chklist li label:first-child { flex: 1 1 auto; min-width: 0; }
.chklist .intake-up { flex: 0 0 auto; }
.chklist label { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 7px 4px; border-radius: 8px; }
.chklist label:hover { background: var(--surface-2); }
.chklist input { position: absolute; opacity: 0; width: 0; height: 0; }
.chklist input:focus-visible + .tick { outline: 2px solid var(--current); outline-offset: 2px; }
.chklist .tick {
  width: 20px; height: 20px; flex: 0 0 auto; border-radius: 6px;
  border: 1.5px solid var(--line); background: var(--surface);
  display: grid; place-items: center; transition: background .15s, border-color .15s;
}
.chklist .tick::after {
  content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0); transform-origin: center; transition: transform .16s cubic-bezier(.34,1.35,.64,1);
  margin-top: -2px;
}
.chklist li.done .tick { background: var(--current); border-color: var(--current); }
.chklist li.done .tick::after { transform: rotate(-45deg) scale(1); }
.chklist .lbl { font-size: .9rem; }
.chklist li.done .lbl { color: var(--muted); }
.chklist .req { font-family: var(--mono); font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; color: #8a5a06; margin-left: auto; }

.timeline { list-style: none; margin: 8px 0 0; padding: 0; }
.timeline li { display: flex; flex-direction: column; gap: 1px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 0; }
.timeline .ttype { font-family: var(--display); font-weight: 600; font-size: .8rem; text-transform: capitalize; }
.timeline .tdetail { font-size: .8rem; color: var(--muted); }
.timeline .tdate { font-family: var(--mono); font-size: .64rem; color: var(--muted); }

.dcard a, a.dcard { color: inherit; text-decoration: none; display: block; }

/* ============================================================
   Cockpit — Today action-coach, money signals, heat
   ============================================================ */
:root {
  --heat-hot: #F0A017; --heat-warm: #E8763C; --heat-cool: #4FA9A5; --heat-cold: #94A3A0;
}
.actions { display: flex; flex-direction: column; gap: 10px; }
.act {
  display: flex; align-items: stretch; gap: 0; background: var(--surface);
  border: var(--line-w) solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,30,29,.04); transition: box-shadow .15s, transform .08s;
}
.act:hover { box-shadow: var(--shadow); }
.act-spark { width: 4px; flex: 0 0 4px; }
.act-spark.heat-hot { background: var(--heat-hot); }
.act-spark.heat-warm { background: var(--heat-warm); }
.act-spark.heat-cool { background: var(--heat-cool); }
.act-spark.heat-cold { background: var(--heat-cold); }
.act.heat-hot { animation: energize 3s ease-in-out infinite; }
.act-body { flex: 1; padding: 13px 16px; min-width: 0; }
.act-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.act-name { font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--ink); text-decoration: none; }
.act-name:hover { color: var(--current-dk); }
.act-why { font-size: .82rem; color: var(--muted); }
.act-signals { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.sig { font-family: var(--mono); font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.sig.money { background: rgba(14,156,151,.1); color: var(--current-dk); }
.sig.comm { background: var(--live-soft); color: #8a5a06; }
.sig.age { background: transparent; color: var(--muted); }
.act-do { display: flex; align-items: center; gap: 6px; padding: 0 14px; border-left: 1px solid var(--line); }
.btn.sm { padding: 7px 12px; font-size: .8rem; }
.btn.ghost.sm { padding: 7px 10px; }

/* deal headline (money-first) */
.headline { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 6px 0 2px; }
.headline .big { font-family: var(--display); font-weight: 700; font-size: 2rem; letter-spacing: -.03em; color: var(--current-dk); }
.headline .unit { font-family: var(--mono); font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.headline .heatpill { font-family: var(--mono); font-size: .64rem; font-weight: 700; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; }
.heatpill.heat-hot { background: var(--live-soft); color: #8a5a06; }
.heatpill.heat-warm { background: #FBE9DE; color: #B4501F; }
.heatpill.heat-cool { background: rgba(79,169,165,.16); color: #2C6D6A; }
.heatpill.heat-cold { background: var(--surface-2); color: var(--muted); }

/* card money row on the board */
.dcard .signals { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.dcard .signals .s { font-family: var(--mono); font-size: .62rem; font-weight: 700; padding: 1px 6px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.dcard .signals .s.money { background: rgba(14,156,151,.1); color: var(--current-dk); }
.dcard .hb { position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 50%; }
.dcard { position: relative; }
.hb.heat-hot { background: var(--heat-hot); box-shadow: 0 0 0 3px rgba(240,160,23,.2); }
.hb.heat-warm { background: var(--heat-warm); }
.hb.heat-cool { background: var(--heat-cool); }
.hb.heat-cold { background: var(--heat-cold); }

/* scoreboard */
.score-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 820px){ .score-grid { grid-template-columns: 1fr 1fr; } }
.stat { background: var(--surface); border: var(--line-w) solid var(--line); border-radius: var(--radius); padding: 18px; }
.stat .k { font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.stat .v { font-family: var(--display); font-weight: 700; font-size: 1.8rem; letter-spacing: -.02em; margin-top: 6px; }
.stat .sub { font-size: .74rem; color: var(--muted); margin-top: 2px; }
.stat .track { height: 7px; border-radius: 99px; background: var(--surface-2); margin-top: 10px; overflow: hidden; }
.stat .track > i { display: block; height: 100%; background: linear-gradient(90deg, var(--current), var(--current-dk)); }
.lead-row, .stuck-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.lead-row:last-child, .stuck-row:last-child { border-bottom: 0; }
.lead-rank { font-family: var(--mono); font-weight: 700; color: var(--muted); width: 20px; }
.lead-name { font-family: var(--display); font-weight: 600; flex: 1; }
.lead-mw { font-family: var(--mono); font-weight: 700; color: var(--current-dk); }

/* settings */
.set-row { display: grid; grid-template-columns: 1fr 140px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.set-row .set-label { font-size: .9rem; }
.set-row .set-key { font-family: var(--mono); font-size: .64rem; color: var(--muted); }
.set-row input { font-family: var(--mono); text-align: right; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; }

/* ============================================================
   Win moment + team feed + territory
   ============================================================ */
.win-burst { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; pointer-events: none; background: rgba(15,30,29,.18); backdrop-filter: blur(2px); animation: dlgin .18s ease; }
.win-burst.out { opacity: 0; transition: opacity .5s ease; }
.win-core { position: relative; display: grid; place-items: center; }
.win-core > i {
  position: absolute; width: 9px; height: 9px; border-radius: 2px; opacity: 0;
  animation: win-spark .9s cubic-bezier(.2,.8,.3,1) var(--d) forwards;
}
@keyframes win-spark {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(0); opacity: 0; }
}
.win-card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 40px; text-align: center; box-shadow: var(--shadow);
  animation: win-pop .5s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes win-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.win-lbl { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; color: var(--current-dk); }
.win-name { font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; margin: 6px 0 2px; }
.win-mw { font-family: var(--mono); font-weight: 700; color: var(--live); font-size: .84rem; }

.feed { list-style: none; margin: 8px 0 0; padding: 0; }
.feed li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.feed li:last-child { border-bottom: 0; }
.feed .fdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); }
.feed li.win .fdot { background: var(--live); box-shadow: 0 0 0 3px rgba(240,160,23,.2); }
.feed li.move .fdot { background: var(--current); }
.feed .fh { font-size: .84rem; flex: 1; }
.feed li.win .fh { font-weight: 600; }
.feed .fmw { font-family: var(--mono); font-size: .68rem; font-weight: 700; color: var(--current-dk); }
.feed .ft { font-family: var(--mono); font-size: .62rem; color: var(--muted); }

/* territory — SVG-free bubble zones */
.terr { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; padding: 10px 0; }
.zone { position: relative; display: grid; place-items: center; text-align: center; border-radius: 50%;
  border: 2px solid; transition: transform .15s; cursor: default; }
.zone:hover { transform: scale(1.04); }
.zone .zc { font-family: var(--display); font-weight: 700; font-size: 1.1rem; line-height: 1; }
.zone .zmw { font-family: var(--mono); font-size: .62rem; opacity: .8; margin-top: 2px; }
.zone.heat-hot { border-color: var(--heat-hot); background: var(--live-soft); color: #8a5a06; }
.zone.heat-warm { border-color: var(--heat-warm); background: #FBE9DE; color: #B4501F; }
.zone.heat-cool { border-color: var(--heat-cool); background: rgba(79,169,165,.14); color: #2C6D6A; }
.zone.heat-cold { border-color: var(--heat-cold); background: var(--surface-2); color: var(--muted); }
.zone-label { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--mono); font-size: .64rem; color: var(--muted); }
.zone-wrap { margin-bottom: 26px; }

/* ---- toast ---- */
#toast {
  position: fixed; bottom: 22px; right: 22px; z-index: 60;
  font-family: var(--display); font-weight: 500; font-size: .88rem;
  background: var(--ink); color: #fff; padding: 12px 18px;
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; pointer-events: none;
}
#toast.show { opacity: 1; transform: translateY(0); }
#toast.ok  { border-left: 3px solid var(--current); }
#toast.err { border-left: 3px solid var(--err); }
#toast.warn{ border-left: 3px solid var(--live); }

/* ---- in-house dialog (replaces native confirm) ---- */
.rapot-dialog-wrap {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  background: rgba(15,30,29,.34); backdrop-filter: blur(2px); padding: 20px;
  animation: dlgin .16s ease;
}
@keyframes dlgin { from { opacity: 0; } to { opacity: 1; } }
.rapot-dialog {
  background: var(--surface); border: var(--line-w) solid var(--line);
  border-radius: var(--radius); padding: 22px; max-width: 380px; width: 100%; box-shadow: var(--shadow);
}
.rapot-dialog p { margin: 0 0 18px; font-size: .94rem; color: var(--ink); }
.rapot-dialog .row { display: flex; gap: 9px; justify-content: flex-end; }

/* ---- responsive ---- */
@media (max-width: 640px) {
  .rapot-main { padding: 0 15px; margin: 16px auto; }
  .rapot-nav { gap: 16px; padding: 11px 15px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
  .col { min-width: 82vw; flex-basis: 82vw; }
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }

/* ============================================================
   Motion — number pop-in, success check, error shake
   ============================================================ */
/* charge % re-enters digit-by-digit when the lead gains data */
.t-digit-group { display: inline-flex; align-items: baseline; }
.t-digit { display: inline-block; will-change: transform, opacity, filter; }
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.t-digit-group.is-animating .t-digit[data-stagger="1"] { animation-delay: var(--digit-stagger); }
@keyframes t-digit-pop-in {
  0%   { transform: translate(calc(var(--digit-distance)*var(--digit-dir-x)), calc(var(--digit-distance)*var(--digit-dir-y)));
         opacity: 0; filter: blur(var(--digit-blur)); }
  100% { transform: translate(0,0); opacity: 1; filter: blur(0); }
}

/* success check — the "saved" moment */
.t-success-check { display: inline-block; transform-origin: center; opacity: 0; will-change: transform, opacity, filter; }
.t-success-check svg { display: block; overflow: visible; }
.t-success-check svg path { stroke-dasharray: 34; stroke-dashoffset: 34; }
.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-out) forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-out) forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out) forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob) forwards;
}
.t-success-check[data-state="in"] svg path {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-out) var(--check-path-delay) forwards;
}
@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate { from { transform: rotate(var(--check-rotate-from)); } to { transform: rotate(0); } }
@keyframes t-check-blur { from { filter: blur(var(--check-blur-from)); } to { filter: blur(0); } }
@keyframes t-check-bob { from { translate: 0 var(--check-y-amount); } to { translate: 0 0; } }
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

/* error shake — invalid login / capture */
.t-input { transition: border-color 150ms ease-out; will-change: transform; }
.t-input.is-error { transition: border-color var(--revert-dur) ease-out; }
.t-input.is-error input { border-color: var(--err) !important; box-shadow: 0 0 0 3px rgba(198,72,59,.14) !important; }
.t-error-msg {
  color: var(--err); font-size: .8rem; margin: 6px 0 0; opacity: 0; visibility: hidden;
  transition: opacity var(--revert-dur) ease-out, visibility 0s linear var(--revert-dur);
}
.t-input-wrap.is-error .t-error-msg { opacity: 1; visibility: visible; transition: opacity var(--revert-dur) ease-out, visibility 0s linear 0s; }
.t-input.is-shaking { animation: t-input-shake calc(var(--shake-dur-a)*2 + var(--shake-dur-b)*2) linear; }
@keyframes t-input-shake {
  0%     { transform: translateX(0);                                animation-timing-function: var(--shake-ease); }
  28.57% { transform: translateX(var(--shake-distance));            animation-timing-function: var(--shake-ease); }
  57.14% { transform: translateX(calc(var(--shake-distance)*-1));   animation-timing-function: var(--shake-ease); }
  78.57% { transform: translateX(var(--shake-overshoot));           animation-timing-function: var(--shake-ease); }
  100%   { transform: translateX(0); }
}

/* success overlay bloom on the capture card */
.save-bloom { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; pointer-events: none; }
.save-bloom .disc {
  width: 84px; height: 84px; border-radius: 50%; background: var(--surface);
  box-shadow: var(--shadow), 0 0 0 1px var(--line); display: grid; place-items: center;
}
.save-bloom .disc svg path { stroke: var(--current); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; fill: none; }

@media (prefers-reduced-motion: reduce) {
  .t-digit-group .t-digit,
  .t-success-check, .t-success-check svg path,
  .t-input { animation: none !important; }
  .t-success-check { opacity: 1; }
  .t-success-check svg path { stroke-dashoffset: 0 !important; }
}

/* ---- documents (deal paperwork) ---- */
.doc-group { margin-top: 14px; }
.doc-stage {
  font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--current-dk); margin: 0 0 8px;
}
/* accordion header per stage — collapses the full doc catalog to the active stage */
.doc-stage-btn {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%;
  background: var(--surface-2); border: var(--line-w) solid var(--line); border-radius: 9px;
  padding: 10px 13px; margin: 10px 0 8px; cursor: pointer; text-align: left;
  font-family: var(--mono); font-size: .66rem; font-weight: 700; color: var(--current-dk);
}
.doc-stage-btn.cur { background: #FBF7EC; border-color: #EBD9A8; }
.doc-stage-name { display: inline-flex; align-items: center; gap: 8px; letter-spacing: .1em; text-transform: uppercase; }
.doc-stage-now { padding: 2px 7px; border-radius: 5px; background: var(--live); color: #fff;
  font-size: .55rem; letter-spacing: .06em; text-transform: uppercase; }
.doc-stage-meta { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); letter-spacing: .04em; white-space: nowrap; }
.doc-stage-caret { color: var(--ink); }
/* territory — real TN vector map with number markers */
.tn-zoom { display:flex; gap:6px; align-items:center; }
.tn-map-wrap { position:relative; margin-top:10px; }
.tn-map { width:100%; height:min(70vh,620px); background:var(--surface-2); border:var(--line-w) solid var(--line);
  border-radius:12px; cursor:grab; touch-action:none; }
.tn-map:active { cursor:grabbing; }
.tn-land { fill:#E7E9E2; stroke:#C4C8BC; stroke-width:0.8; }
.tn-mk { cursor:pointer; }
.tn-dot { fill:var(--muted); opacity:.9; stroke:#fff; stroke-width:1; }
.tn-num { fill:#fff; font-family:var(--mono); font-weight:700; }
.tn-mk.heat-hot .tn-dot { fill:#C6483B; }
.tn-mk.heat-warm .tn-dot { fill:#F0A017; }
.tn-mk.heat-cold .tn-dot, .tn-mk.heat-cool .tn-dot { fill:#5B7A9A; }
.tn-pop { position:absolute; top:12px; right:12px; width:230px; background:var(--surface);
  border:var(--line-w) solid var(--line); border-radius:10px; padding:12px 13px; box-shadow:0 6px 20px rgba(20,22,28,.12); }
.tn-pop-h { font-family:var(--mono); font-size:.7rem; font-weight:700; color:var(--ink); margin-bottom:8px; }
.tn-pop-item { display:flex; justify-content:space-between; gap:8px; font-size:.82rem; padding:3px 0; border-bottom:1px solid var(--line); }
.tn-pop-mw { font-family:var(--mono); color:var(--muted); white-space:nowrap; }
.doc {
  border: var(--line-w) solid var(--line); border-radius: var(--radius);
  padding: 11px 13px; margin-bottom: 9px; background: var(--surface);
  transition: border-color .15s, background .15s;
}
.doc.signed { background: var(--live-soft); border-color: #F1D79B; }
.doc-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.doc-id { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
.doc-title { font-family: var(--display); font-weight: 500; font-size: .96rem; color: var(--ink); }
.doc-status {
  font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 99px;
  background: var(--surface-2); color: var(--muted);
}
.doc-status.ds-shared  { background: #D6EEEC; color: var(--current-dk); }
.doc-status.ds-signed,
.doc-status.ds-received { background: var(--live-soft); color: #8a5a06; }
.doc-when { font-family: var(--mono); font-size: .64rem; color: #8a5a06; }
.doc-tools { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.doc-link { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.doc-open { font-family: var(--mono); font-size: .72rem; color: var(--current-dk); white-space: nowrap; }
.doc-steps { display: flex; gap: 6px; }
.btn.sm { padding: 6px 11px; font-size: .74rem; }
.btn.ghost.sm.on { background: var(--current); color: #fff; border-color: var(--current); }
@media (max-width: 640px) {
  .doc-row { flex-wrap: wrap; }
  .doc-tools { flex-direction: column; align-items: stretch; }
  .doc-steps { justify-content: flex-start; }
}

/* ---- leads queue ---- */
.lead-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; margin-top: 10px; }
.lead-form .field.grow { grid-column: 1 / -1; }
.lead-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.pill {
  font-family: var(--display); font-weight: 500; font-size: .84rem; color: var(--muted);
  background: var(--surface); border: var(--line-w) solid var(--line); border-radius: 99px;
  padding: 6px 13px; cursor: pointer; transition: color .12s, border-color .12s, background .12s;
}
.pill:hover { color: var(--current-dk); }
.pill.on { background: var(--current); color: #fff; border-color: var(--current); }
.pill .n { font-family: var(--mono); font-size: .72rem; opacity: .8; margin-left: 4px; }
.lead-list { display: flex; flex-direction: column; gap: 9px; }
.lead {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  background: var(--surface); border: var(--line-w) solid var(--line); border-radius: var(--radius);
  padding: 13px 15px; transition: box-shadow .15s, border-color .15s;
}
.lead:hover { box-shadow: var(--shadow); }
.lead.hot { border-left: 3px solid var(--live); }
.lead-main { min-width: 0; }
.lead-name { font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--ink);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lead-meta { color: var(--muted); font-family: var(--mono); font-size: .74rem; margin-top: 3px; }
.lead-note { color: var(--ink); font-size: .84rem; margin-top: 5px; opacity: .8; }
.lead-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.lead-tags .chip { margin: 0; }
.lead-stat {
  font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 99px;
  background: var(--surface-2); color: var(--muted);
}
.lead-stat.st-new { background: #D6EEEC; color: var(--current-dk); }
.lead-stat.st-converted { background: var(--live-soft); color: #8a5a06; }
.lead-act { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lead-act-icons { display: flex; gap: 6px; }
.lead-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  min-width: 32px; height: 32px; padding: 0 7px; font-size: .92rem; line-height: 1;
  background: var(--surface-2); border: var(--line-w) solid var(--line); border-radius: 8px;
  cursor: pointer; color: var(--current-dk);
}
.lead-icon-btn:hover { border-color: var(--current); background: var(--surface); }
.lead-icon-btn.on { background: var(--current); border-color: var(--current); color: #fff; }
.lead-icon-btn .n { font-family: var(--mono); font-size: .62rem; font-weight: 700; }
.assign { display: flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.assign select {
  font-family: var(--body); font-size: .82rem; color: var(--ink);
  border: var(--line-w) solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--surface);
}
.assign select:focus { outline: none; border-color: var(--current); }
.empty { text-align: center; color: var(--muted); padding: 40px 20px; }
@media (max-width: 640px) {
  .lead-form { grid-template-columns: 1fr 1fr; }
  .lead { flex-direction: column; align-items: stretch; }
  .lead-act { justify-content: space-between; }
}

/* ---- customer upload link (deal panel) ---- */
.up-link { background: var(--surface-2); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; }
.up-link-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.up-link-row { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.up-link-row input {
  flex: 1 1 240px; min-width: 0; padding: 7px 10px; font-family: var(--mono); font-size: .76rem;
  border: var(--line-w) solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface);
}

/* ---- public upload page rows ---- */
.up-row { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 2px; border-bottom: 1px solid var(--line); }
.up-row:last-of-type { border-bottom: 0; }
.up-id { display: flex; align-items: center; gap: 10px; }
.up-tick { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 99px; background: var(--surface-2); color: transparent; font-size: .8rem; font-weight: 700; }
.up-tick.on { background: var(--current); color: #fff; }
.up-label { font-family: var(--display); font-weight: 500; color: var(--ink); }
.up-row.done .up-label { color: var(--muted); }
.up-done { color: var(--current-dk); font-weight: 600; margin-top: 14px; }
.up-err { color: var(--err); font-size: .86rem; margin-top: 12px; }

/* ---- MD status table ---- */
.md-tbl { width: 100%; border-collapse: collapse; margin-top: 8px; }
.md-tbl td { padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: .92rem; }
.md-tbl td.n { text-align: right; font-family: var(--mono); font-weight: 700; color: var(--current-dk); }
.md-tbl th { padding: 4px; border-bottom: 1px solid var(--line); text-align: right; }
.md-tbl th:first-child { text-align: left; }
.mtbl-input { width: 90px; text-align: right; font-family: var(--mono); font-size: .84rem; color: var(--ink);
  padding: 4px 6px; border: var(--line-w) solid var(--line); border-radius: 6px; background: var(--surface); }

/* ---- generators ---- */
.gen-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gen { padding: 14px 16px; }
.gen-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.gen-name { font-family: var(--display); font-weight: 600; font-size: 1.02rem; color: var(--ink); margin-right: 8px; }
.gen-free { font-family: var(--mono); font-size: .74rem; color: var(--current-dk); }
.gen-free.low { color: #B4501F; }
.gen-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.gen-bar i { display: block; height: 100%; background: var(--current); border-radius: 99px; transition: width .4s cubic-bezier(.22,1,.36,1); }
.gen-bar i.full { background: var(--live); }
/* Two figures in a narrow card: on a big number (crores of units) the pair no
   longer fits one line, and with no wrap they'd sit flush against each other
   with zero gap — reading as one garbled number. Wrap + an explicit gap keeps
   large values legible instead of visually merging. */
.gen-nums { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; margin-top: 7px;
  font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.gen-nums > span { min-width: 0; overflow-wrap: anywhere; }
.gen-nums .low { color: #B4501F; }

/* ---- generator onboarding board (MOU -> LOI -> GEN KYC -> Ready) ---- */
.gen-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; align-items: start; }
.gen-col { display: flex; flex-direction: column; gap: 10px; }
.gen-col-head { display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.gen-col-name { font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink); }
.gen-col-n { font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.gen-col-empty { font-family: var(--mono); color: var(--line); text-align: center; padding: 8px 0; }
.gen-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; gap: 8px; }
.chip.sm { font-size: .6rem; padding: 1px 6px; }
.qm-back { position: fixed; inset: 0; background: rgba(20,22,28,.42); display: flex; align-items: center;
  justify-content: center; padding: 20px; z-index: 60; }
.qm { width: 100%; max-width: 420px; }
.gen-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.gen-link-url { flex: 1 1 220px; min-width: 0; font-family: var(--mono); font-size: .72rem;
  padding: 6px 9px; border: var(--line-w) solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--muted); }
@media (max-width: 900px){ .gen-board { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .gen-board { grid-template-columns: 1fr; } }

/* ---- mapping panel (deal) ---- */
.map-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--line); }
.map-row:last-of-type { border-bottom: 0; }
.map-gen { font-family: var(--display); font-weight: 500; color: var(--ink); flex: 1 1 auto; }
.map-units { font-family: var(--mono); font-size: .8rem; color: var(--ink); }
.map-share { font-family: var(--mono); font-size: .72rem; color: var(--current-dk);
  background: #D6EEEC; border-radius: 99px; padding: 3px 9px; }
.map-share.bad { color: #fff; background: var(--err); }
.map-shares { font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.map-add { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.map-add select, .map-add input {
  padding: 8px 10px; font-family: var(--body); font-size: .86rem; color: var(--ink);
  border: var(--line-w) solid var(--line); border-radius: 8px; background: var(--surface); }
.map-add select { flex: 1 1 200px; } .map-add input { width: 120px; }
.map-add select:focus, .map-add input:focus { outline: none; border-color: var(--current); }
.map-qpa { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.map-qpa label { font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.map-qpa input { width: 110px; padding: 7px 10px; font-family: var(--body); font-size: .86rem;
  border: var(--line-w) solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.map-qpa input:focus { outline: none; border-color: var(--current); }
.map-line-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; }
.map-slots { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px;
  font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.map-slots .map-dates { color: var(--current-dk); }
@media (max-width: 640px){ .gen-list { grid-template-columns: 1fr; } }

/* ---- undo toast (reversible moves) ---- */
.rapot-undo {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px);
  display: flex; align-items: center; gap: 14px; z-index: 60;
  background: var(--ink); color: #fff; padding: 11px 12px 11px 18px; border-radius: 12px;
  box-shadow: var(--shadow); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
  font-family: var(--body); font-size: .9rem;
}
.rapot-undo.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.rapot-undo button {
  font-family: var(--display); font-weight: 600; font-size: .84rem; color: var(--paper);
  background: rgba(255,255,255,.14); border: 0; border-radius: 8px; padding: 6px 13px; cursor: pointer;
}
.rapot-undo button:hover { background: rgba(255,255,255,.24); }

/* ---- mobile bottom tabbar ---- */
.rapot-tabbar { display: none; }
@media (max-width: 640px) {
  .rapot-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--surface); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .rapot-tabbar .tab {
    text-align: center; padding: 11px 0 12px; font-family: var(--display); font-weight: 500;
    font-size: .74rem; color: var(--muted); border-top: 2px solid transparent;
  }
  .rapot-tabbar .tab.active { color: var(--current-dk); border-top-color: var(--current); }
  .rapot-main { padding-bottom: 72px; }        /* clear the bar */
  .rapot-undo { bottom: 74px; }                 /* sit above the bar */

  /* Top nav overflowed on phones (many links, one row) forcing desktop zoom-out.
     The bottom tabbar owns navigation now — top bar keeps only brand + sign out. */
  .rapot-nav { gap: 12px; padding: 11px 16px; }
  .rapot-nav > .navlink, .rapot-nav > .nav-group { display: none; }  /* covered by the bottom tabbar */
  .rapot-nav .who { margin-left: auto; font-size: .78rem; gap: 8px; }
  .rapot-main { margin-top: 16px; }
}
/* Never let anything force a wider-than-screen page. `clip` (not `hidden`) —
   overflow-x:hidden computes overflow-y to `auto` (CSS overflow coupling
   rule), turning body into a scroll container and silently breaking
   `position:sticky` for every descendant on the page (e.g. the deal page's
   stage rail). `clip` clips the same way without that side effect. */
html, body { max-width: 100%; overflow-x: clip; }

/* ---- admin console editor ---- */
.adm-head { margin-bottom: 8px; }
.adm-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.adm-row.off { opacity: .5; }
.adm-lbl { flex: 1 1 160px; min-width: 0; padding: 7px 9px; font-family: var(--body); font-size: .86rem;
  border: var(--line-w) solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); }
.adm-lbl:focus, .adm-sel:focus { outline: none; border-color: var(--current); }
.adm-sel { padding: 7px 8px; font-family: var(--body); font-size: .82rem; border: var(--line-w) solid var(--line);
  border-radius: 8px; background: var(--surface); color: var(--ink); }
.adm-chk { font-family: var(--mono); font-size: .68rem; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.adm-add { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.adm-add input { flex: 1 1 120px; min-width: 0; padding: 7px 9px; font-family: var(--body); font-size: .84rem;
  border: var(--line-w) solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); }
.adm-add input:focus { outline: none; border-color: var(--current); }

.temp-chk { display: flex; align-items: center; gap: 7px; font-family: var(--body); font-size: .86rem;
  color: var(--ink); padding: 8px 0; }

/* ---- proposal terms ---- */
.prop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 10px; }
.prop-grid select { font-family: var(--body); font-size: .92rem; color: var(--ink);
  border: var(--line-w) solid var(--line); border-radius: 8px; padding: 9px 10px; background: var(--surface); }
.prop-grid select:focus { outline: none; border-color: var(--current); }

/* ---- register (all stages, one page) ---- */
.reg-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0 14px; }
.reg-search { flex: 1 1 220px; min-width: 0; padding: 9px 12px; font-family: var(--body); font-size: .9rem;
  border: var(--line-w) solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.reg-search:focus { outline: none; border-color: var(--current); }
.reg-card { overflow-x: auto; padding: 4px 10px; }
.reg { width: 100%; border-collapse: collapse; }
.reg thead th { text-align: left; font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: var(--line-w) solid var(--line); white-space: nowrap; }
.reg td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.reg tbody tr { cursor: pointer; }
.reg tbody tr:hover { background: var(--surface-2); }
.reg .co { font-family: var(--display); font-weight: 600; color: var(--ink); font-size: .94rem; }
.reg .sub { font-family: var(--mono); font-size: .64rem; color: var(--muted); margin-top: 2px; }
.reg .num { font-family: var(--mono); text-align: right; white-space: nowrap; }
.reg .money b { color: #8a5a06; }
.reg-track-h { min-width: 240px; }
.bus { display: flex; align-items: center; min-width: 230px; }
.bus .seg { flex: 1; height: 3px; background: var(--line); }
.bus .seg.done { background: var(--current); }
.bus .node { width: 12px; height: 12px; border-radius: 99px; background: var(--surface); flex-shrink: 0; border: 2px solid var(--line); }
.bus .node.done { background: var(--current); border-color: var(--current); }
.bus .node.cur { background: var(--live); border-color: var(--live); box-shadow: 0 0 0 4px var(--live-soft); }
.lineup-pip { display: inline-flex; gap: 2px; }
.lineup-pip i { width: 5px; height: 13px; border-radius: 2px; background: var(--surface-2); }
.lineup-pip i.on { background: var(--current-dk); }
.heatdot { width: 9px; height: 9px; border-radius: 99px; display: inline-block; }
.heatdot.h-hot { background: var(--heat-hot); } .heatdot.h-warm { background: var(--heat-warm); }
.heatdot.h-cool { background: var(--heat-cool); } .heatdot.h-cold { background: var(--heat-cold); }
/* mobile swimlanes — hidden on desktop, shown on phones */
.reg-lanes { display: none; }
.lane { margin-bottom: 12px; }
.lane-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface-2); border-radius: 10px; }
.lane-head .lane-name { font-family: var(--display); font-weight: 600; color: var(--ink); }
.lane-head .lane-meta { font-family: var(--mono); font-size: .72rem; color: var(--muted); margin-left: auto; }
.lane-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.lane-row .co { font-family: var(--display); font-weight: 500; color: var(--ink); flex: 1 1 auto; }
.lane-row .num { font-family: var(--mono); font-size: .72rem; color: var(--muted); text-align: right; }
@media (max-width: 720px) { .reg-card { display: none; } .reg-lanes { display: block; } }

/* ---- reports ---- */
[v-cloak] { display: none; }
.rep-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-top: 16px; }
.fn { margin-top: 12px; }
.fn:first-of-type { margin-top: 10px; }
.fn-top { display: flex; justify-content: space-between; align-items: baseline; }
.fn-label { font-family: var(--display); font-weight: 500; font-size: .9rem; color: var(--ink); }
.fn-count { font-family: var(--mono); font-weight: 700; font-size: .82rem; color: var(--current-dk); }
.fn-bar { height: 9px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 5px 0 4px; }
.fn-bar i { display: block; height: 100%; background: var(--current); border-radius: 99px;
  transition: width .5s cubic-bezier(.22,1,.36,1); }
.fn-sub { font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.conv { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.conv > div { display: flex; flex-direction: column; }
.conv b { font-family: var(--display); font-weight: 700; font-size: 1.4rem; color: var(--ink); line-height: 1; }
.conv span { font-family: var(--mono); font-size: .66rem; color: var(--muted); margin-top: 3px; }
.conv .arrow { color: var(--line); font-size: 1.2rem; }
.mix { margin-top: 12px; }
.mix-row { display: flex; align-items: baseline; gap: 8px; font-size: .88rem; color: var(--ink); }
.mix-row b { font-family: var(--mono); margin-left: auto; }
.mix-row .mix-mw { font-family: var(--mono); font-size: .7rem; color: var(--muted); margin-left: 0; }
.mix-bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; margin: 8px 0; background: var(--surface-2); }
.mix-bar i.gcp { background: var(--current); } .mix-bar i.tpp { background: var(--live); }
.rtbl { width: 100%; border-collapse: collapse; margin-top: 8px; }
.rtbl th { text-align: left; font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--line); }
.rtbl td { padding: 7px 6px; font-size: .84rem; color: var(--ink); border-bottom: 1px solid var(--line); }
.rtbl td:not(:first-child), .rtbl th:not(:first-child) { font-family: var(--mono); text-align: right; }
.rtbl a { color: var(--current-dk); }
.perm-tbl td:not(:first-child), .perm-tbl th:not(:first-child) { text-align: center; }
.perm-yes { color: var(--current-dk); font-weight: 700; }
@media (max-width: 820px) { .rep-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  /* wide tables must scroll, not clip (body has overflow-x:hidden) */
  .rtbl { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .prop-grid { grid-template-columns: 1fr; }   /* proposal terms stack on phones */
  .set-row { grid-template-columns: 1fr; }     /* admin rates stack */
}

/* ---- quick work entry ---- */
.pill.sm { padding: 4px 10px; font-size: .76rem; }
.work-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.work-kinds .pill { text-transform: capitalize; }
.work-note { width: 100%; box-sizing: border-box; padding: 11px 13px; font-family: var(--body);
  font-size: .95rem; color: var(--ink); border: var(--line-w) solid var(--line); border-radius: 10px;
  background: var(--surface); resize: vertical; }
.work-note:focus { outline: none; border-color: var(--current); }
.work-row { display: flex; gap: 9px; margin-top: 11px; }
.work-deal { flex: 1 1 auto; min-width: 0; padding: 9px 11px; font-family: var(--body); font-size: .88rem;
  color: var(--ink); border: var(--line-w) solid var(--line); border-radius: 10px; background: var(--surface); }
.work-deal:focus { outline: none; border-color: var(--current); }
.work-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.work-item { display: flex; gap: 11px; align-items: flex-start; background: var(--surface);
  border: var(--line-w) solid var(--line); border-radius: var(--radius); padding: 11px 13px; }
.work-kind { font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: var(--surface-2);
  color: var(--current-dk); flex-shrink: 0; margin-top: 1px; }
.work-kind.wk-visit, .work-kind.wk-meeting { background: var(--live-soft); color: #8a5a06; }
.work-text { font-size: .92rem; color: var(--ink); }
.work-meta { font-family: var(--mono); font-size: .68rem; color: var(--muted); margin-top: 3px; }
.work-meta a { color: var(--current-dk); }
.work-lead { text-decoration: none; color: inherit; transition: border-color .15s ease; }
.work-lead:hover { border-color: var(--current); }

/* ---- lead card tools — Activity / Edit, sized to their content, not the row ---- */
.lead-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.lead-tool-btn {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  background: var(--surface-2); border: var(--line-w) solid var(--line); border-radius: 8px;
  padding: 7px 12px; cursor: pointer; font-family: var(--body);
}
.lead-tool-btn:hover { background: var(--surface); border-color: var(--current); }
.lead-tool-btn:focus-visible { outline: 2px solid var(--current); outline-offset: 2px; }
.lead-activity { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.lead-act-add { display: flex; gap: 8px; margin-bottom: 10px; }
.lead-act-add input { flex: 1 1 auto; min-width: 0; padding: 8px 11px; font-family: var(--body); font-size: .86rem;
  color: var(--ink); background: var(--surface); border: var(--line-w) solid var(--line); border-radius: 9px; }
.lead-act-add input:focus { outline: none; border-color: var(--current); }
.lead-act-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.lead-act-list li { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--line); }
.lead-act-list li:last-child { border-bottom: 0; }
.lead-act-text { font-size: .86rem; color: var(--ink); flex: 1 1 auto; min-width: 120px; }
.lead-act-when { font-family: var(--mono); font-size: .64rem; color: var(--muted); white-space: nowrap; }

/* ---- import preview ---- */
.imp-row { border: var(--line-w) solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-top: 10px; }
.imp-head { display: flex; align-items: center; gap: 8px; }
.imp-nums { display: flex; gap: 14px; margin-top: 6px; font-family: var(--mono); font-size: .76rem; color: var(--current-dk); }
.imp-sample { margin-top: 6px; font-size: .8rem; color: var(--muted); }
.imp-done { margin-top: 16px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--live-soft); color: #8a5a06; font-size: .9rem; }
.imp-done a { color: var(--current-dk); }

/* ---- timeline (durations) ---- */
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: flex; align-items: center; gap: 10px; padding: 7px 0; position: relative; }
.tl li:not(:last-child)::before { content: ''; position: absolute; left: 4px; top: 22px; bottom: -7px;
  width: 1.5px; background: var(--line); }
.tl-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--line); flex-shrink: 0; z-index: 1; }
.tl li.ongoing .tl-dot { background: var(--current); box-shadow: 0 0 0 3px #D6EEEC; }
.tl-stage { font-family: var(--display); font-weight: 500; color: var(--ink); flex: 1 1 auto; }
.tl li.ongoing .tl-stage { color: var(--current-dk); }
.tl-days { font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.tl-loi { margin: 10px 0 0; font-family: var(--mono); font-size: .78rem; color: var(--current-dk); }

/* ---- consumer type (KYC matrix) ---- */
.ctype { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ctype-lbl { font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-right: 2px; }

/* ---- OA source breakdown (capture) ---- */
.oa-sources { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 10px 0 4px; }
.oa-sources-lbl { font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.oa-chip { font-family: var(--mono); font-size: .72rem; color: var(--current-dk);
  background: #D6EEEC; border-radius: 99px; padding: 4px 11px; }
.oa-chip b { color: var(--ink); font-weight: 700; margin-left: 2px; }
.oa-chip.ok { background: var(--live-soft); color: #6E4900; }
.oa-chip.bad { background: #FBE3E1; color: #8A1F1F; }

/* small live preview under a raw numeric input (e.g. comma-grouped consumption) */
.field-hint { font-family: var(--mono); font-size: .7rem; color: var(--muted); }

/* ---- locked procurement model ---- */
.model-lock { font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px; }
.model-lock .lockmark { font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--current-dk); background: #D6EEEC; padding: 2px 8px; border-radius: 99px; }
.model-change { font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.model-change:hover { color: var(--current-dk); }

/* ---- model chip beside the deal name ---- */
.model-chip { font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 4px 11px; border-radius: 99px; white-space: nowrap; }
.model-chip.gcp { color: var(--current-dk); background: #D6EEEC; }
.model-chip.tpp { color: #1E3A8A; background: #DBEAFE; }
.model-chip-sub { font-weight: 600; opacity: .75; text-transform: capitalize; }

/* ---- action bar (money stats removed) ---- */
/* Secondary action strip — a slim utility bar, not a content card. */
.card.action-bar { padding: 10px 14px; box-shadow: none; }
.action-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.action-bar .btn { padding: 8px 14px; font-size: .85rem; }

/* ---- proposal terms: compact info card once set ---- */
.prop-info-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px;
  font-family: var(--display); font-size: 1.05rem; color: var(--ink); }
.prop-info-row b { color: var(--current-dk); }
.prop-info-row .chip { font-family: var(--mono); font-size: .64rem; }

/* ---- P7: completeness badge, win/loss, renewals ---- */
.cmp-badge { font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .03em;
  padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.cmp-green { color: var(--current-dk); background: #D6EEEC; }
.cmp-amber { color: #8A5B00; background: #FBEECB; }
.cmp-red   { color: #8A1F1F; background: #F7D9D9; }
.lost-box { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.lost-sel { flex: 1; padding: 8px 10px; border: var(--line-w) solid var(--line); border-radius: 8px;
  background: var(--surface); font-size: .84rem; color: var(--ink); }
.outcome-banner { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 14px; padding: 10px 12px; border-radius: 10px; font-size: .86rem; font-weight: 600; }
.outcome-banner.won { background: #D6F0E0; color: #146C43; }
.outcome-banner.lost { background: #F7D9D9; color: #8A1F1F; }
.outcome-banner a { font-family: var(--mono); font-size: .72rem; font-weight: 700; }

/* Advance + deal-status pieces — now only ever rendered inside the mini tab
   above Activity (see .top-action-bar-mini below), but the piece classes stay
   generic since they're shared by that one card. */
.tab-info { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; flex:1 1 auto; min-width:0; white-space:nowrap; }
.tab-to { font-size:.84rem; color:var(--muted); white-space:nowrap; }
.tab-to b { color:var(--ink); }
@media (max-width:640px){ .tab-to { display:none; } }

/* Mini advance tab — a compact echo of the top action bar, sat right above
   Activity so there's a way to move the deal forward without scrolling back
   up past every stage card. One row, split evenly. */
.top-action-bar-mini { padding:10px 16px; }
.tab-row-mini { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tab-row-mini .tab-info { flex:1 1 50%; min-width:160px; white-space:normal; }
.tab-row-mini .lost-sel { flex:0 1 170px; padding:7px 9px; font-size:.8rem; }
.top-action-bar-mini .tab-actions-mini { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.top-action-bar-mini .tab-actions-mini .btn { white-space:nowrap; }
@media (max-width:480px){ .top-action-bar-mini .tab-actions-mini { justify-content:stretch; } .top-action-bar-mini .tab-actions-mini .btn { flex:1 1 auto; } }

/* Quantum — the one number this whole card exists to produce; shown big. */
.quantum-main { font-family:var(--display); font-weight:700; font-size:1.9rem; letter-spacing:-.02em;
  color:var(--current-dk); margin:8px 0 12px; }
.quantum-unit { font-family:var(--mono); font-size:.68rem; font-weight:500; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em; margin-left:8px; }

/* Stage workspace split — Paperwork left, Checklist right, once a stage has both. */
.ws-split { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:14px; }
.ws-col-checklist { border-left:var(--line-w) solid var(--line); padding-left:24px; }
@media (max-width:900px){ .ws-split { grid-template-columns:1fr; } .ws-col-checklist { border-left:0; padding-left:0; border-top:var(--line-w) solid var(--line); padding-top:16px; margin-top:4px; } }
/* Stages not yet reached — visible (never hidden), just visually quieter. */
.doc-card.stage-future { background:var(--surface-2); }
.doc-card.stage-future .ck-row, .doc-card.stage-future .doc { opacity:.8; }

/* Activity — full log inline now, not just the last line */
.act-log { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-height:340px; overflow-y:auto; }
.act-log li { display:flex; flex-direction:column; gap:1px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.act-log li:last-child { border-bottom:0; padding-bottom:0; }
.act-log-what { font-family:var(--display); font-weight:600; font-size:.84rem; color:var(--ink); }
.act-log-detail { font-size:.8rem; color:var(--muted); }
.act-log-when { font-family:var(--mono); font-size:.66rem; color:var(--muted); }
.heatpill.heat-cool { background: #E4ECF7; color: #2B4C8C; }
.doc-expiry { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.doc-expiry label { font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.doc-expiry input { padding: 5px 8px; border: var(--line-w) solid var(--line); border-radius: 7px; font-size: .8rem; }
.ent-tag { font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 99px; margin-right: 7px; }
.ent-tag.consumer { color: var(--current-dk); background: #D6EEEC; }
.ent-tag.generator { color: #8A5B00; background: #FBEECB; }

/* ---- consumption tier chips ---- */
.tier-chip { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .04em; padding: 1px 7px; border-radius: 99px; vertical-align: middle; }
.tier-A { color: #7A1F6B; background: #F3D9EE; }
.tier-B { color: #1E3A8A; background: #DBEAFE; }
.tier-C { color: var(--muted); background: var(--surface-2); }
/* board card completeness dot */
.cmp-dot { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; }
.cmp-dot.cmp-green { background: var(--current); } .cmp-dot.cmp-amber { background: #E0A500; } .cmp-dot.cmp-red { background: #D14343; }
/* savings calculator */
.savings-card .sv-head { display: flex; gap: 28px; margin: 10px 0 12px; }
.sv-lbl { font-family: var(--mono); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.sv-big { font-family: var(--display); font-weight: 700; font-size: 1.7rem; letter-spacing: -.02em; color: var(--current-dk); }
.sv-u { font-size: .9rem; color: var(--muted); }
.sv-math { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; color: var(--ink);
  background: var(--surface-2); border-radius: 10px; padding: 9px 12px; }
.sv-math b { color: var(--current-dk); }
.sv-note { color: var(--muted); font-size: .76rem; margin: 8px 0 0; }

/* ---- visible back link ---- */
.back-link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); font-weight: 600;
  font-size: .9rem; color: var(--current-dk); padding: 6px 12px 6px 8px; border-radius: 99px;
  background: var(--surface-2); transition: background .15s; }
.back-link:hover { background: #E2E8EF; }
/* ---- advancing (moving) button state ---- */
.btn.is-moving { opacity: .9; }
.mv-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%;
  background: currentColor; animation: mv-pulse 0.8s ease-in-out infinite; vertical-align: middle; }
@keyframes mv-pulse { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }

/* ---- accessibility ---- */
:focus-visible { outline: 2px solid var(--current); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
.show-all { display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.68rem; color:var(--muted); white-space:nowrap; }
/* ---- TPP sub-type ---- */
.tpp-sub { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
.tpp-lbl { font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.tpp-note { font-family:var(--body); font-size:.78rem; color:var(--muted); flex-basis:100%; }
.agree-badge { margin-top:10px; font-family:var(--body); font-size:.84rem; color:var(--ink); }
.agree-badge b { font-family:var(--mono); font-size:.8rem; padding:2px 7px; border:var(--line-w) solid var(--line); border-radius:6px; background:var(--surface); }
.gc-check { font-family:var(--body); font-size:.8rem; padding:8px 11px; border-radius:8px; margin:2px 0 12px; border:var(--line-w) solid var(--line); }
.gc-check.ok { background:#D6EEEC; border-color:#BFE3E1; color:var(--current-dk); }
.gc-check.warn { background:#FDECEC; border-color:#F3C2C2; color:#8A1F1F; }
.gc-flag { font-family:var(--mono); font-size:.62rem; font-weight:700; margin-left:6px; padding:1px 5px; border-radius:5px; background:#EAF6EC; color:#1E5B2C; }
.map-share.below .gc-flag { background:#FDECEC; color:#8A1F1F; }
/* grouped add-allocation form — 3 labelled decisions, not 7 naked inputs */
.map-form { margin-top:12px; border-top:var(--line-w) solid var(--line); padding-top:12px; }
.mf-sec { margin-bottom:12px; }
.mf-lbl { font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.mf-opt { font-weight:400; text-transform:none; letter-spacing:0; opacity:.7; margin-left:4px; }
.mf-hint { font-family:var(--body); font-size:.74rem; color:var(--muted); margin:6px 0 0; }
.mf-hint b { color:var(--ink); font-family:var(--mono); }
.map-controls { display:flex; gap:8px; margin-top:10px; }
.map-controls .btn.on { background:var(--current); color:#fff; border-color:var(--current); }
.std-rate { font-family:var(--body); font-size:.82rem; color:var(--muted); margin:2px 0 12px; }
.std-pill { display:inline-block; margin:0 4px; padding:2px 9px; border:var(--line-w) solid var(--line); border-radius:7px;
  background:var(--surface); font-family:var(--mono); color:var(--ink); cursor:pointer; }
.std-pill:hover { border-color:var(--current); }
.std-note { display:block; margin-top:4px; font-size:.72rem; }
.adv-missing { margin:0 0 12px; padding-left:18px; }
.adv-missing li { font-size:.82rem; color:var(--err); margin:2px 0; }

.agechip { display:inline-block; margin-top:6px; padding:1px 7px; border-radius:6px; font-family:var(--mono);
  font-size:.6rem; font-weight:700; }
.agechip.h-warm { background:var(--live-soft); color:#6E4900; }
.agechip.h-hot { background:#FBE3E1; color:#8A1F1F; }
/* import review */
.imp-tbl { width:100%; border-collapse:collapse; margin-top:6px; font-size:.82rem; }
.imp-tbl th { text-align:left; font-family:var(--mono); font-size:.58rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); padding:3px 8px; border-bottom:var(--line-w) solid var(--line); }
.imp-tbl td { padding:4px 8px; border-bottom:1px solid var(--line); }
.imp-tbl td.n { text-align:right; font-family:var(--mono); }
.imp-tbl .tag { font-size:.58rem; padding:1px 6px; border-radius:5px; margin-left:4px; }
.imp-tbl .tag.new { background:#EAF6EC; color:#1E5B2C; }
.imp-tbl .tag.exist { background:var(--surface-2); color:var(--muted); }
.imp-tbl .tag.over { background:#FBE3E1; color:#8A1F1F; }
.imp-warn { margin:8px 0 0; padding-left:18px; }
.imp-warn li { color:#8A1F1F; font-size:.8rem; margin:2px 0; }
.imp-backfill { display:flex; flex-wrap:wrap; gap:8px; }
.chip.block { background:#FBE3E1; color:#8A1F1F; }
/* today — portfolio header + per-stage next-send */
.portfolio { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 16px; padding:14px 16px;
  background:var(--surface-2); border:var(--line-w) solid var(--line); border-radius:12px; }
.pf-big { font-family:var(--display); font-weight:700; font-size:1.6rem; color:var(--live); }
.pf-lbl { font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.pf-sub { margin-left:auto; font-family:var(--mono); font-size:.78rem; color:var(--muted); }
.act-next { font-size:.8rem; color:var(--current-dk); margin-top:3px; }
/* tasks */
.tk { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); }
.tk.done .tk-title { text-decoration:line-through; color:var(--muted); }
.tk-check { display:inline-flex; position:relative; cursor:pointer; }
.tk-check input { position:absolute; opacity:0; width:0; height:0; }
.tk-check .tick { width:18px; height:18px; border:var(--line-w) solid var(--line); border-radius:5px; display:inline-block; position:relative; }
.tk-check input:checked + .tick { background:var(--current); border-color:var(--current); }
.tk-check input:focus-visible + .tick { outline:2px solid var(--current); outline-offset:2px; }
.tk-id { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.tk-title { font-size:.9rem; }
.tk-logged { font-family:var(--mono); font-size:.62rem; color:var(--muted); }
.tk-deal { font-size:.78rem; color:var(--current-dk); }
.tk-due { font-family:var(--mono); font-size:.7rem; color:var(--muted); }
.tk-due.over { color:#8A1F1F; font-weight:700; }
.tk-owner { font-family:var(--mono); font-size:.62rem; color:var(--muted); }
.tk-add { display:flex; gap:8px; margin-top:10px; }
.tk-add input[type=text], .tk-add input:not([type]) { flex:1; }
.tk-add input { padding:7px 9px; border:var(--line-w) solid var(--line); border-radius:8px; background:var(--surface); font-size:.86rem; }
.tk-close { display:flex; gap:8px; margin:4px 0 8px 28px; }
.tk-close input { flex:1; padding:6px 9px; border:var(--line-w) solid var(--line); border-radius:8px; font-size:.84rem; }
.fu-add { margin-top:12px; }
.fu-add input { width:100%; padding:8px 10px; border:var(--line-w) solid var(--line); border-radius:8px; background:var(--surface); font-size:.9rem; }
.fu-when { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px; }
.fu-owner { padding:5px 8px; border:var(--line-w) solid var(--line); border-radius:8px; background:var(--surface); font-size:.82rem; }
.fu-toggle { display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:.86rem; color:var(--ink); }
.fu-prio { display:inline-flex; align-items:center; gap:5px; font-size:.8rem; color:var(--ink); }
/* Tasks hub: segmented switch + task cards */
.seg { display:inline-flex; gap:4px; padding:4px; background:var(--surface-2); border-radius:11px; }
.seg-btn { border:none; background:none; cursor:pointer; padding:6px 16px; border-radius:8px; font:inherit;
  font-size:.86rem; color:var(--muted); }
.seg-btn.on { background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.seg-btn .n { font-family:var(--mono); font-size:.7rem; opacity:.7; margin-left:4px; }
.tk-list { display:flex; flex-direction:column; gap:10px; }
.tk-card { background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--radius); padding:12px 14px; }
.tk-card.over { border-color:#E4B4B4; }
.tk-card.hot { border-left:3px solid var(--live); }
.tk-card.done { opacity:.85; }
.tk-card.done .tk-title { text-decoration:line-through; text-decoration-color:var(--muted); }
.tk-head { display:flex; align-items:flex-start; gap:10px; }
.tk-id { flex:1; min-width:0; }
.subtask-draft { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.subtask-draft-row { display:flex; gap:6px; }
.subtask-draft-row input { flex:1; padding:7px 10px; border:var(--line-w) solid var(--line); border-radius:8px; font-size:.86rem; }
.hist-row { padding:8px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.hist-row:first-child { border-top:none; }
.hist-note { font-size:.86rem; }
.hist-meta { font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.hist-meta a { color:inherit; }
.tk-sub { font-family:var(--mono); font-size:.72rem; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tk-sub .chip { font-size:.6rem; }
.tk-edit { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.tk-enote { width:100%; padding:7px 10px; border:var(--line-w) solid var(--line); border-radius:8px; font-size:.88rem; }
/* task comments */
.tk-comments { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.tk-cm { margin-bottom:8px; }
.tk-cm-hd { display:flex; gap:8px; align-items:baseline; font-size:.82rem; }
.tk-cm-t { font-family:var(--mono); font-size:.68rem; color:var(--muted); }
.tk-cm-b { font-size:.86rem; color:var(--ink); }
.tk-cm-add { display:flex; gap:8px; margin-top:6px; }
.tk-cm-add input { flex:1; padding:7px 10px; border:var(--line-w) solid var(--line); border-radius:8px; font-size:.86rem; }
/* Today: per-deal task rollup */
.tk-group { margin-bottom:10px; }
.tk-group-hd { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--current-dk); margin:2px 0 4px; }
.tk-group-hd.tk-group-general { color:var(--muted); }
.tk-group-n { background:var(--surface-2); border-radius:99px; padding:1px 7px; color:var(--muted); }
/* notification bell */
.nav-bell > summary { position:relative; font-size:1rem; }
.bell-dot { position:absolute; top:-6px; right:-8px; min-width:15px; height:15px; padding:0 4px; border-radius:99px;
  background:var(--live); color:#fff; font-family:var(--mono); font-size:.6rem; font-weight:700; line-height:15px; text-align:center; }
.bell-drop { right:0; left:auto; min-width:280px; max-height:60vh; overflow:auto; }
.bell-empty { color:var(--muted); font-size:.84rem; padding:8px 12px; margin:0; }
.bell-item { display:block; padding:9px 12px; border-radius:8px; font-size:.84rem; color:var(--ink); }
.bell-item:hover { background:var(--surface-2); }
.bell-item.unread { background:#EFF5FF; }
.bell-t { display:block; font-family:var(--mono); font-size:.66rem; color:var(--muted); margin-top:2px; }
/* task calendar */
.cal-head { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:12px; }
.cal-title { font-family:var(--display); font-weight:600; font-size:1.05rem; min-width:170px; text-align:center; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-dow { font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); text-align:center; padding:2px 0; }
.cal-cell { min-height:76px; background:var(--surface); border:var(--line-w) solid var(--line); border-radius:8px; padding:5px 6px; }
.cal-cell.out { background:var(--surface-2); opacity:.6; }
.cal-cell.today { border-color:var(--current); box-shadow:0 0 0 1px var(--current) inset; }
.cal-daynum { font-family:var(--mono); font-size:.68rem; color:var(--muted); margin-bottom:3px; }
.cal-task { font-size:.68rem; line-height:1.25; background:#EFF5FF; border-radius:5px; padding:2px 5px; margin-bottom:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-task.hot { background:#FDECEC; }
.cal-task a { color:var(--current-dk); }
@media (max-width:640px){ .cal-cell { min-height:56px; } .cal-task { display:none; } .cal-cell:has(.cal-task){ background:#EFF5FF; } }
.work-note-wrap { position:relative; }
.mic { position:absolute; right:8px; bottom:8px; border:var(--line-w) solid var(--line); background:var(--surface);
  border-radius:50%; width:34px; height:34px; cursor:pointer; font-size:1rem; line-height:1; }
.mic.live { background:var(--live); border-color:var(--live); animation:micpulse 1s infinite; }
@keyframes micpulse { 0%,100%{ box-shadow:0 0 0 0 rgba(240,160,23,.5);} 50%{ box-shadow:0 0 0 6px rgba(240,160,23,0);} }
/* slot-wise GAP table */
.slot-gap { margin-top:14px; padding-top:12px; border-top:var(--line-w) solid var(--line); }
.sg-tbl { width:100%; border-collapse:collapse; margin-top:8px; }
.sg-tbl th { font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); text-align:right; padding:4px 8px; border-bottom:var(--line-w) solid var(--line); }
.sg-tbl th:first-child { text-align:left; }
.sg-tbl td { padding:6px 8px; border-bottom:1px solid var(--line); }
.sg-slot { font-family:var(--body); font-weight:600; color:var(--ink); }
.sg-num { text-align:right; font-family:var(--mono); font-size:.78rem; color:var(--ink); }
.sg-in { width:100%; max-width:120px; margin-left:auto; display:block; text-align:right; font-family:var(--mono); font-size:.78rem;
  padding:4px 7px; border:var(--line-w) solid var(--line); border-radius:7px; background:var(--surface); }
.sg-chip { font-family:var(--mono); font-size:.66rem; font-weight:700; padding:2px 7px; border-radius:6px; }
.sg-chip.short { background:#FBE3E1; color:#8A1F1F; }
.sg-chip.ok { background:#EAF6EC; color:#1E5B2C; }
/* contacts registry */
.ct-tbl { width:100%; border-collapse:collapse; }
.ct-tbl td { padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.ct-tbl tr.prim td { background:#FBF7EC; }
.ct-star { width:28px; text-align:center; }
.ct-starbtn { background:none; border:none; cursor:pointer; font-size:1rem; color:var(--line); line-height:1; padding:0; }
.ct-starbtn.on { color:var(--live); }
.ct-role { display:inline-block; margin-left:8px; font-family:var(--mono); font-size:.62rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.ct-mono { font-family:var(--mono); font-size:.78rem; color:var(--ink); }
.ct-act { text-align:right; white-space:nowrap; }
.ct-form { margin-top:12px; padding-top:12px; border-top:var(--line-w) solid var(--line); }
.ct-prim-toggle { display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:.84rem; color:var(--ink); }
/* compact, department-grouped contacts */
.ct-depts { display:flex; flex-direction:column; gap:12px; }
.ct-dept-hd { font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:0 0 4px; padding-bottom:3px; border-bottom:1px solid var(--line); }
.ct-item { display:flex; align-items:center; gap:10px; padding:6px 0; }
.ct-item + .ct-item { border-top:1px solid var(--line); }
.ct-item.prim .ct-item-id b { color:var(--current-dk); }
.ct-item-id { flex:1; min-width:0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.ct-item-sub { font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.ct-item-act { white-space:nowrap; display:flex; gap:4px; }
@media (max-width:640px){ .ct-tbl, .ct-tbl tr, .ct-tbl td { display:block; } .ct-tbl td { border-bottom:none; padding:2px 0; } .ct-tbl tr { border-bottom:1px solid var(--line); padding:8px 0; } }
/* parallel-tracks band — the Line-up ∥ Mapping race, above the fold */
.track-band { display:flex; align-items:stretch; gap:12px; margin-bottom:16px; }
.track { flex:1 1 0; display:flex; flex-direction:column; gap:5px; text-decoration:none;
  padding:12px 14px; border:var(--line-w) solid var(--line); border-radius:12px; background:var(--surface);
  transition:border-color .2s, background .2s; }
.track:hover { border-color:var(--current); }
.track.done { background:rgba(14,156,151,.07); border-color:#BFE3E1; }
.track-k { font-family:var(--display); font-weight:600; font-size:1rem; color:var(--ink); }
.track-note { font-family:var(--body); font-size:.74rem; color:var(--muted); }
.track-amp { align-self:center; font-family:var(--display); color:var(--muted); font-size:1.1rem; }
@media (max-width:640px){ .track-band { flex-direction:column; } .track-amp { display:none; } }
/* ---- deal stage rail — vertical spine down the left edge, "where is this
   deal" at a glance. Plain progress display, not a picker — state carried in
   text (title/label) + shape, never colour alone. ---- */
.stage-shell { display:flex; align-items:flex-start; gap:16px; }
.stage-rail-v {
  flex:0 0 auto; width:92px; display:flex; flex-direction:column; align-items:center;
  padding:4px 16px 4px 0; position:sticky; top:64px;
  border-right:var(--line-w) solid var(--line);
}
.srail-v-item { display:flex; flex-direction:column; align-items:center; flex:0 0 auto; margin-bottom:10px; overflow:visible;
  background:none; border:none; padding:0; margin-left:0; margin-right:0; cursor:pointer; font:inherit; -webkit-tap-highlight-color:transparent; }
.srail-v-item:hover .srail-v-dot { border-color:var(--current); }
.srail-v-item:focus-visible .srail-v-dot { outline:2px solid var(--current); outline-offset:2px; }
.srail-v-dot.is-viewing { border-color:var(--current); box-shadow:0 0 0 3px rgba(37,99,235,.18); }
.srail-v-dot {
  width:34px; height:34px; flex:0 0 auto; border-radius:50%;
  display:grid; place-content:center;
  font-family:var(--mono); font-size:.78rem; font-weight:700;
  background:var(--surface-2); color:var(--muted); border:var(--line-w) solid var(--line);
}
.srail-v-dot.is-done { background:var(--current); border-color:var(--current); color:#fff; }
.srail-v-dot.is-current { background:var(--live); border-color:var(--live); color:#3A2600; box-shadow:0 0 0 4px rgba(240,160,23,.18); }
.srail-v-label {
  font-family:var(--mono); font-size:.6rem; text-align:center; color:var(--muted);
  line-height:1.45; margin-top:5px; width:92px; overflow-wrap:normal; word-break:normal; overflow:visible;
}
.srail-v-label.is-current { color:#8a5a06; font-weight:700; }
.srail-v-label.is-todo { opacity:.55; }
.srail-v-days { display:block; margin-top:1px; }
.srail-v-line { width:2px; height:18px; flex:0 0 auto; background:var(--line); margin-top:6px; }
.srail-v-line.done { background:var(--current); }
.stage-body { flex:1 1 auto; min-width:0; }
@media (max-width:820px){ .stage-shell { gap:10px; } .stage-rail-v { width:44px; padding-right:8px; }
  .srail-v-dot { width:26px; height:26px; font-size:.68rem; } .srail-v-label { display:none; } }

/* workspace header — stage identity restated where the work happens */
.ws-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.ws-id { display:flex; align-items:center; gap:9px; min-width:0; }
.srail-n {
  width:20px; height:20px; flex:0 0 auto; border-radius:50%;
  display:grid; place-content:center;
  font-family:var(--mono); font-size:.64rem; font-weight:700;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line);
}
.ws-id .srail-n { width:24px; height:24px; font-size:.7rem; background:var(--current); border-color:var(--current); color:#fff; }
.ws-id .srail-n.ws-n-done { background:var(--current); border-color:var(--current); }
.ws-title { font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--ink); }
.ws-sub { font-family:var(--body); font-size:.8rem; color:var(--muted); margin:0 0 12px; }
.ws-status { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 12px; }
.ws-status .chip { margin:0; }
.ws-sec { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.ws-sec:first-of-type { margin-top:0; padding-top:0; border-top:0; }
.ws-sec-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }

@media (max-width:640px){
  .srail-step { min-width:118px; }
}

/* ---- deal hub — status + quick actions + the contacts behind them ---- */
.hub-ct { min-width:0; }
.hub-two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (max-width:640px){ .hub-two-col { grid-template-columns:1fr; } }
.hub-ct-row { display:flex; align-items:center; gap:8px; }
.hub-ct-add { flex:0 0 auto; }
.hub-ct-toggle {
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:none; border:0; padding:6px 2px; cursor:pointer; text-align:left; min-height:40px;
  border-radius:8px;
}
.hub-ct-toggle:hover { background:var(--surface-2); }
.hub-ct-toggle:focus-visible { outline:2px solid var(--current); outline-offset:2px; }
.hub-ct-lbl { font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--current-dk); }
.hub-ct-n {
  font-family:var(--mono); font-size:.64rem; font-weight:700; min-width:20px; text-align:center;
  background:var(--surface-2); color:var(--muted); border-radius:99px; padding:2px 7px;
}
.hub-ct-who { font-family:var(--body); font-size:.86rem; color:var(--ink); display:flex; align-items:center; gap:8px; min-width:0; }
.hub-ct-who.muted { color:var(--muted); }
.hub-ct-ph { font-family:var(--mono); font-size:.74rem; color:var(--muted); }
.hub-ct-caret { margin-left:auto; color:var(--muted); font-size:.8rem; }
.hub-ct-body { margin-top:8px; }
.hub-ct-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.hub-ct-note { color:var(--muted); font-size:.79rem; margin:0; line-height:1.45; }
/* icon-only contact actions keep a 32px box so they stay comfortably tappable */
.ct-ico { min-width:32px; padding-left:9px; padding-right:9px; text-align:center; }
@media (max-width:640px){
  .hub-ct-head { flex-direction:column; align-items:flex-start; }
}

/* per-stage elapsed days, printed on the rail step that names the stage */
.srail-days { color:var(--muted); font-weight:400; }
.srail-foot { font-family:var(--body); font-size:.8rem; color:var(--muted); margin:-6px 0 16px; }
.srail-foot b { color:var(--ink); }

/* ---- deal setup — folded summary of model + terms + savings ---- */
.setup-sum { display:flex; flex-wrap:wrap; gap:8px 22px; margin:2px 0 0; }
.setup-sum > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.setup-sum dt {
  font-family:var(--mono); font-size:.58rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.setup-sum dd { margin:0; font-family:var(--display); font-weight:600; font-size:.92rem; color:var(--ink); }
.setup-sum-hi { color:#8a5a06; }
.qty-row { display:flex; align-items:flex-end; gap:10px; }
.qty-row .field { flex:1 1 220px; max-width:280px; }
.qty-hint { font-family:var(--mono); font-size:.72rem; color:var(--muted); margin:6px 0 0; }

/* every section inside the setup card keeps its divider — they are peers, not
   a first-child exception like the workspace card */
.setup-card .ws-sec { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
/* one vertical rhythm for the whole card: section label, then its content */
.setup-card .eyebrow { display:block; margin-bottom:10px; }
.setup-card .oa-verdict { margin:0 0 10px; }
.setup-card .oa-sources { margin:0 0 14px; }
.setup-card .model-lock { margin:0; }
.setup-card .agree-badge { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.setup-card .std-rate { margin:0 0 14px; }
.setup-card .prop-grid { margin-top:0; }
.setup-card .savings-card .sv-head { margin:0 0 12px; gap:36px; }
.setup-card .sv-note { margin:10px 0 0; }
/* model buttons and the lock row share one baseline */
.setup-card .model-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0; }

/* ---- checklist panel (right rail) ---- */
.ck-prog { margin:2px 0 14px; }
.ck-prog-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:7px; }
.ck-prog-n { font-family:var(--display); font-weight:700; font-size:1.2rem; color:var(--ink); }
.ck-prog-of { font-family:var(--body); font-weight:400; font-size:.8rem; color:var(--muted); }
.ck-bar { height:8px; border-radius:99px; background:var(--surface-2); border:var(--line-w) solid var(--line); overflow:hidden; }
.ck-bar > i {
  display:block; height:100%; background:var(--current); border-radius:99px;
  transition:width .45s cubic-bezier(.2,.8,.2,1);
}
.ck-bar > i.full { background:#2C6B3A; }
@media (prefers-reduced-motion: reduce) { .ck-bar > i { transition:none; } }

/* the LOI question — asked plainly before the list appears */
.ck-ask { padding:12px 14px; margin-bottom:12px; border-radius:11px;
  background:var(--live-soft); border:var(--line-w) solid #EBD9A8; }
.ck-ask-q { margin:0; font-family:var(--display); font-weight:700; font-size:.94rem; color:#6E4900; }
.ck-ask-h { margin:4px 0 0; font-family:var(--body); font-size:.79rem; color:#8a5a06; line-height:1.45; }

.ck-list { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ck-row {
  display:flex; align-items:center; gap:10px; padding:9px 11px;
  border:var(--line-w) solid var(--line); border-radius:10px; background:var(--surface);
  transition:border-color .16s ease, background .16s ease;
}
.ck-row:hover { border-color:var(--current); }
.ck-row.done { background:#F4F9F5; border-color:#CFE6D4; }
.ck-main { display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; cursor:pointer; padding:0; }
.ck-main input { position:absolute; opacity:0; width:0; height:0; }
.ck-main input:focus-visible + .tick { outline:2px solid var(--current); outline-offset:2px; }
/* the tick — one thick mark used by every checklist on the page (stage gate,
   KYC intake and lineup), so a ticked row always looks the same */
.ck-main .tick {
  width:22px; height:22px; flex:0 0 auto; border-radius:7px;
  border:2px solid var(--line); background:var(--surface);
  display:grid; place-items:center; transition:background .15s ease, border-color .15s ease;
}
.ck-main .tick::after {
  content:""; width:11px; height:6px; margin-top:-3px;
  border-left:2.5px solid #fff; border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) scale(0); transform-origin:center;
  transition:transform .16s cubic-bezier(.34,1.35,.64,1);
}
.ck-row:hover .tick { border-color:var(--current); }
.ck-row.done .tick { background:var(--current); border-color:var(--current); }
.ck-row.done .tick::after { transform:rotate(-45deg) scale(1); }
@media (prefers-reduced-motion: reduce) { .ck-main .tick::after { transition:none; } }
.ck-par { font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--current-dk); }
.ck-lbl { font-family:var(--body); font-size:.88rem; color:var(--ink); line-height:1.35; overflow-wrap:anywhere; }
.ck-row.done .ck-lbl { color:var(--muted); text-decoration:line-through; text-decoration-color:#9FC7A8; }
.ck-act { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.ck-state {
  font-family:var(--mono); font-size:.58rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#2C6B3A; background:#DFF0E3; border-radius:99px; padding:3px 8px;
}
.ck-empty { color:var(--muted); font-size:.84rem; margin:10px 0 0; line-height:1.5; }

.reg-sort-lbl { font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-left:6px; }
.reg-sort { font-family:var(--body); font-size:.84rem; color:var(--ink); border:var(--line-w) solid var(--line); border-radius:8px; padding:7px 9px; background:var(--surface); }
.reg-sort:focus { outline:none; border-color:var(--current); }
/* ---- generator detail ---- */
.gen-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:16px; margin-top:16px; }
.gen-ch { font-family:var(--body); font-size:.82rem; color:var(--ink); border:var(--line-w) solid var(--line); border-radius:8px; padding:6px 8px; background:var(--surface); }
.gen-ch:focus { outline:none; border-color:var(--current); }
a.gen-name { color:var(--ink); }
a.gen-name:hover { color:var(--current-dk); }
@media (max-width:720px){ .gen-grid { grid-template-columns:1fr; } }
.zone-hover { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(10px); background: #1a1a1a; color: #fff; padding: 12px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.2); opacity: 0; visibility: hidden; transition: all 150ms ease-out; z-index: 100; min-width: 220px; pointer-events: none; text-align: left; }
.zone:hover .zone-hover { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.zh-title { font-size: .8rem; font-weight: 700; color: #aaa; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #333; padding-bottom: 6px; }
.zh-list { max-height: 200px; overflow-y: auto; }
.zh-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: .84rem; }
.zhi-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.zhi-mw { font-family: var(--mono); color: var(--current); opacity: .9; font-size: .75rem; white-space: nowrap; }
.tn-grid-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, 60px);
  grid-template-rows: repeat(12, 60px);
  gap: 12px;
  justify-content: center;
  background: var(--surface);
  padding: 20px;
  border-radius: var(--radius);
}
.map-zone {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.map-zone.unmapped {
  grid-row: auto !important;
  grid-column: auto !important;
}
.map-zone .zone-label {
  bottom: -22px;
  font-size: .68rem;
}
.tn-grid-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, 60px);
  grid-template-rows: repeat(12, 60px);
  gap: 12px;
  justify-content: center;
  background: var(--surface) url('tn_outline.svg') no-repeat center center;
  background-size: 80% auto;
  padding: 20px;
  border-radius: var(--radius);
}

/* ---- Skeleton loaders: shimmer placeholders while data loads ---- */
.skel {
  position: relative; overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: skel-shimmer 1.25s ease-in-out infinite;
}
@keyframes skel-shimmer { 100% { transform: translateX(100%); } }
.skel-line { height: 12px; margin: 8px 0; }
.skel-line.sm { height: 10px; }
.skel-line.lg { height: 18px; }
.skel-line.w40 { width: 40%; }
.skel-line.w60 { width: 60%; }
.skel-line.w80 { width: 80%; }
.skel-title { height: 26px; width: 55%; margin: 4px 0 16px; }
.skel-card {
  background: var(--surface); border: var(--line-w) solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin-top: 14px;
}
.skel-row { display: flex; gap: 10px; align-items: center; }
.skel-chip { height: 22px; width: 78px; border-radius: 99px; }
@media (prefers-reduced-motion: reduce) {
  .skel::after { animation: none; }
}