:root{
  --bg:#F6F7FB; --surface:#FFFFFF; --surface-2:#EEF0F7; --ink:#141A2E; --ink-2:#4A5370;
  --line:#DDE1EC; --accent:#6D5DE7; --accent-ink:#FFFFFF; --accent-soft:#ECEAFB;
  --good:#178A50; --good-soft:#E2F3EA; --warn:#B77400; --warn-soft:#FBF0DA;
  --bad:#C23934; --bad-soft:#FAE6E5; --muted-chip:#E7EAF3;
  --shadow:0 1px 2px rgba(20,26,46,.06),0 4px 16px rgba(20,26,46,.07);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101423; --surface:#181D31; --surface-2:#1F2540; --ink:#E8EAF4; --ink-2:#9BA3C0;
    --line:#2A3151; --accent:#8B7DF0; --accent-ink:#12142A; --accent-soft:#272656;
    --good:#4CC386; --good-soft:#173327; --warn:#E0A63E; --warn-soft:#332A14;
    --bad:#E2726D; --bad-soft:#3A1D1C; --muted-chip:#252C4A;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#101423; --surface:#181D31; --surface-2:#1F2540; --ink:#E8EAF4; --ink-2:#9BA3C0;
  --line:#2A3151; --accent:#8B7DF0; --accent-ink:#12142A; --accent-soft:#272656;
  --good:#4CC386; --good-soft:#173327; --warn:#E0A63E; --warn-soft:#332A14;
  --bad:#E2726D; --bad-soft:#3A1D1C; --muted-chip:#252C4A;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 "Source Sans 3",system-ui,sans-serif}
h1,h2,h3{font-family:"Archivo",system-ui,sans-serif;text-wrap:balance;margin:0}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
button{font:inherit;cursor:pointer}
a{color:var(--accent)}

/* ---------- app shell ---------- */
.topbar{display:flex;align-items:center;gap:20px;padding:10px 24px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.topbar[hidden]{display:none}
.brand{display:flex;align-items:center;gap:10px;font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:17px}
.brand-mark{color:var(--accent);flex:none;fill:currentColor}
.nav{display:flex;gap:4px;margin-left:8px}
.nav button{border:0;background:none;color:var(--ink-2);padding:7px 14px;border-radius:8px;font-weight:600;font-size:14.5px}
.nav button.active{background:var(--accent-soft);color:var(--accent)}
.nav button:focus-visible,.btn:focus-visible,.theme-toggle:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.userchip{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--ink-2)}
.persona select{margin-left:6px}
.demo-tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);border:1px dashed var(--line);border-radius:6px;padding:2px 8px}
.theme-toggle{border:1px solid var(--line);background:var(--surface);border-radius:8px;width:30px;height:30px;padding:0;font-size:14px;line-height:1;display:grid;place-items:center;color:var(--ink-2)}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}

.user-menu{position:relative}
.user-menu-trigger{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:7px 12px;font-size:13.5px;font-weight:600}
.user-menu-trigger:hover,.user-menu-trigger[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.user-menu-panel{position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:200px;background:var(--surface-2);border:1px solid var(--accent);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.35);padding:6px;display:flex;flex-direction:column;gap:2px}
.user-menu-panel[hidden]{display:none}
.user-menu-item{width:100%;text-align:left;border:none;background:none;color:var(--ink);border-radius:7px;padding:8px 10px;font-size:13.5px;font-weight:600}
.user-menu-item:hover{background:var(--accent-soft);color:var(--accent)}

main{max-width:1600px;margin:0 auto;padding:28px clamp(20px,2.5vw,40px) 64px}

.btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:8px 14px;font-weight:600;font-size:14px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.small{padding:5px 10px;font-size:13px}
.btn.ghost{background:none;border-color:transparent;color:var(--ink-2)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}

.eyebrow{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12.5px;font-weight:600;white-space:nowrap}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.neutral{background:var(--muted-chip);color:var(--ink-2)}
.pill.accent{background:var(--accent-soft);color:var(--accent)}

table{border-collapse:collapse;width:100%;font-size:14.5px}
th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
.table-wrap{overflow-x:auto}

/* inline editing controls */
input,select,textarea{font:inherit;font-size:14px;color:var(--ink);background:transparent;border:1px solid transparent;border-radius:6px;padding:4px 6px;max-width:100%}
input::placeholder,textarea::placeholder{color:var(--ink-2);opacity:.75}
input:hover,select:hover,textarea:hover{border-color:var(--line)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);background:var(--surface)}
td input[type="text"],td input[type="date"],td input[type="number"]{width:100%;min-width:90px}
/* width:100% on a <select> is unreliable inside an auto-layout table cell — percentage
   widths on table-cell descendants resolve against a column width table-layout:auto hasn't
   settled yet, so browsers fall back to the select's own shrink-to-fit content size instead.
   That was invisible while the column happened to compute close to that intrinsic size; it
   clipped "Not started" once a wider table (main's max-width going 1180px -> 1600px) gave
   the column more room than the select was actually filling. A fixed min-width sidesteps
   the percentage-resolution quirk entirely instead of fighting it. */
td select{width:100%;min-width:120px}
input[type="date"],input[type="number"],.mono input{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ---------- home ---------- */
.home-head{display:flex;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.home-head h1{font-size:26px}
.home-head p{margin:4px 0 0;color:var(--ink-2);max-width:56ch}
.home-head .actions{margin-left:auto;display:flex;gap:8px}
/* ---------- filter bar ---------- */
.filter-bar{margin-bottom:18px}
.filter-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:0}
.filter-chip{display:inline-flex;align-items:center;gap:4px}
.filter-chip button{background:none;border:0;color:inherit;font-size:14px;line-height:1;cursor:pointer;padding:0 0 0 2px;font-weight:700}
.filter-controls{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap}
.filter-views{display:flex;gap:6px;align-items:center;margin-left:auto}
.filter-views select{border-color:var(--line);padding:6px 8px;font-size:13.5px;color:var(--ink);background:var(--surface)}
.filter-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));align-items:start;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-top:10px}
.filter-panel[hidden]{display:none}
.filter-group{display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.filter-group b{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);font-weight:600;margin-bottom:2px}
.filter-opt{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink);cursor:pointer}
.filter-opt[hidden]{display:none}
.filter-group input[type="checkbox"],.filter-group input[type="radio"]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex:none}
.filter-group input[type="number"],.filter-group input[type="date"],.filter-group input[type="text"]{border-color:var(--line);padding:6px 8px;color:var(--ink);width:100%}
.filter-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
/* Combo dropdown (owner/subregion) — a filter-group that collapses its option list behind
   a button instead of listing every option inline, so the panel doesn't grow with the org. */
.filter-combo{position:relative}
.filter-combo-btn{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;width:100%;text-align:left;cursor:pointer;color:inherit;font:inherit}
.filter-combo-btn b{margin-bottom:0}
.combo-count{padding:1px 7px;font-size:11px}
.combo-caret{margin-left:auto;color:var(--ink);font-size:15px;line-height:1}
.filter-combo-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:20;min-width:220px;max-width:320px;background:var(--surface-2);border:1px solid var(--accent);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.35);padding:10px}
.filter-combo-panel[hidden]{display:none}
.combo-search{border-color:var(--line);padding:6px 8px;color:var(--ink);width:100%;margin-bottom:8px}
.combo-options{display:flex;flex-direction:column;gap:4px;max-height:260px;overflow-y:auto}
.combo-empty{font-size:13px;color:var(--ink-2);padding:4px 0}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:22px}
.stat{padding:14px 16px}
.stat .num{font-family:"Archivo",system-ui,sans-serif;font-size:26px;font-weight:700;line-height:1.1}
.stat .lbl{font-size:13px;color:var(--ink-2);margin-top:2px}
.plan-row{cursor:pointer}
.plan-row:hover td{background:var(--surface-2)}
.plan-name{font-weight:600}
.plan-sub{font-size:13px;color:var(--ink-2)}
.empty{padding:40px;text-align:center;color:var(--ink-2)}

/* ---------- plan detail ---------- */
.detail-grid{display:grid;grid-template-columns:168px minmax(0,1fr) 300px;gap:20px;align-items:start}
.detail-grid>*{min-width:0}
@media (max-width:1180px){.detail-grid{grid-template-columns:148px minmax(0,1fr) 260px}}
@media (max-width:940px){.detail-grid{grid-template-columns:1fr}.plan-rail{position:static;flex-direction:row;overflow-x:auto;top:auto}}
.plan-header{padding:20px 22px;margin-bottom:20px}
.plan-header h1{font-size:23px}
.crumb{font-size:13.5px;color:var(--ink-2);margin-bottom:14px}
.crumb a{cursor:pointer;text-decoration:none;font-weight:600}
.plan-detail-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.plan-detail-nav .crumb{margin-bottom:0}
.plan-view-switch{display:inline-flex;align-items:center;padding:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px}
.plan-view-switch a{padding:5px 13px;border-radius:6px;color:var(--ink-2);font-size:13px;font-weight:600;text-decoration:none}
/* Left-side section rail — one continuous scrollable page now, not a click-to-reveal tab
   strip (Sean, 2026-08-27). .locked marks the two sections carrying pricing/margin data,
   kept visually distinct (was a separate, deliberately-un-adjacent screen before the
   original restructure that first folded these into this page). .current + the inline
   transform (set by updatePlanRailScale in app.js) are what read as "you are here" — the
   item nearest the section in view grows, dock-style, as you scroll. */
.plan-rail{display:flex;flex-direction:column;gap:3px;position:sticky;top:82px;align-self:start}
.plan-rail a{padding:8px 11px;border-radius:8px;color:var(--ink-2);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;transform-origin:left center;transition:transform .12s ease,color .12s ease,background-color .12s ease}
.plan-rail a:hover{color:var(--ink);background:var(--surface-2)}
.plan-rail a.current{color:var(--accent);background:var(--accent-soft)}
.plan-rail a.locked{color:var(--warn)}
.plan-rail a.locked.current{background:var(--warn-soft)}
.plan-section{margin-bottom:8px;scroll-margin-top:76px}
.plan-view-switch a.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow)}
.external-preview-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--good-soft);border:1px solid var(--good);border-radius:10px;padding:11px 16px;margin-bottom:20px;color:var(--good);font-size:14px}
.external-preview-banner div{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.external-preview-banner span:not(.pill){color:var(--ink-2)}
.external-plan-header{margin-bottom:20px}
.fieldgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 20px;margin-top:14px}
.fld .eyebrow{display:block;margin-bottom:2px}
.fld input{width:100%;font-weight:600;padding-left:0}
.opp-chip-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:26px}
.opp-chip{display:inline-flex;align-items:center;gap:6px}
.opp-chip button{background:none;border:0;color:inherit;font-size:14px;line-height:1;cursor:pointer;padding:0;font-weight:700}
.opp-add-row{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap}
.opp-add-row input{border-color:var(--line);padding:6px 8px;font-size:13px;font-weight:400;color:var(--ink);background:var(--surface);flex:1;min-width:160px}
.section{margin-bottom:20px}
.section-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.section-head h2{font-size:15.5px}
.section-head .note{font-size:13px;color:var(--ink-2)}
.section-head .spacer{flex:1}
.phase-cell{font-size:11.5px;letter-spacing:.07em;font-weight:700;white-space:nowrap}
.ph-validate{color:var(--accent)}
.ph-transact{color:var(--warn)}
.ph-realize{color:var(--good)}
.rail .card{padding:16px 18px;margin-bottom:14px}
.rail h3{font-size:14px;margin-bottom:8px}
.rail p{font-size:13.5px;color:var(--ink-2);margin:6px 0}
.linkbox{display:flex;gap:8px;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:12.5px}
.linkbox span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history{font-size:13px;color:var(--ink-2);max-height:260px;overflow-y:auto}
.history div{padding:4px 0;border-bottom:1px solid var(--line)}
.history div:last-child{border-bottom:0}
.history b{color:var(--ink)}
.conform-banner{display:flex;gap:12px;align-items:center;background:var(--accent-soft);border:1px solid var(--accent);border-radius:10px;padding:12px 16px;margin-bottom:20px;font-size:14.5px;flex-wrap:wrap}
.conform-banner b{font-family:"Archivo",system-ui,sans-serif}
.conform-banner .btn{margin-left:auto}
.neg-summary{display:flex;gap:24px;padding:14px 18px;flex-wrap:wrap;border-top:1px solid var(--line)}
.neg-summary .fld .val{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:600;font-size:16px}
.neg-inputs{display:flex;gap:18px;padding:12px 18px;flex-wrap:wrap;border-bottom:1px solid var(--line);font-size:13.5px;align-items:center}
.neg-inputs label{display:flex;align-items:center;gap:6px;color:var(--ink-2)}
.neg-inputs input{width:90px;border-color:var(--line)}
.neg-inputs select{border-color:var(--line)}
.neg-page-banner{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn);border-radius:10px;padding:11px 16px;margin-bottom:20px;font-size:14px;font-weight:600}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:9px;font-size:14px;transition:transform .25s;z-index:30;max-width:90vw}
.toast.show{transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion: reduce){.toast{transition:none}}

/* ---------- leadership ---------- */
.lead-head{display:flex;align-items:end;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.lead-head h1{font-size:24px}
.lead-head p{margin:4px 0 0;color:var(--ink-2)}
.review-tabs{display:flex;gap:8px;margin-bottom:16px}
.review-tabs button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 14px;font-weight:600;font-size:13.5px;color:var(--ink-2)}
.review-tabs button.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.sortable{cursor:pointer;user-select:none}
.sortable:hover{color:var(--ink)}
.bars{display:grid;gap:10px;padding:18px}
.bar-row{display:grid;grid-template-columns:160px 1fr 46px;gap:12px;align-items:center;font-size:14px}
.bar-track{height:14px;border-radius:7px;background:var(--surface-2);overflow:hidden}
.bar-fill{height:100%;border-radius:7px;background:var(--accent)}
.bar-fill.g{background:var(--good)} .bar-fill.w{background:var(--warn)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media (max-width:940px){.two-col{grid-template-columns:1fr}}
.region-leads{display:flex;flex-wrap:wrap;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.region-lead-chip{display:flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:5px 12px;font-size:13.5px;font-weight:600}
.region-lead-chip .role{font-size:11px;color:var(--ink-2);font-weight:600}
.subregion-card{border-bottom:1px solid var(--line)}
.subregion-card:last-child{border-bottom:0}
.subregion-head{display:flex;align-items:center;gap:10px;padding:12px 18px;font-family:"Archivo",system-ui,sans-serif;font-weight:600;font-size:14.5px}
.subregion-roster{padding:0 18px 14px;display:flex;flex-wrap:wrap;gap:8px}
.roster-chip{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);background:var(--surface-2);border-radius:6px;padding:4px 10px}
.roster-chip b{color:var(--ink);font-weight:600}
.spacer{flex:1}

/* ---------- templates ---------- */
.tpl-list{display:flex;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tpl-list button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 12px;font-weight:600;font-size:13.5px;color:var(--ink-2)}
.tpl-list button.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.tpl-add{display:grid;grid-template-columns:110px 1fr 2fr auto;gap:10px;padding:14px 18px;border-top:1px solid var(--line);align-items:center}
.tpl-add input,.tpl-add select{border-color:var(--line);width:100%}
@media (max-width:800px){.tpl-add{grid-template-columns:1fr}}

/* ---------- modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(10,12,24,.45);display:grid;place-items:center;z-index:20;padding:20px}
.modal-overlay[hidden]{display:none}
.modal{max-width:640px;width:100%;padding:22px 24px;max-height:90vh;overflow-y:auto}
.modal h2{font-size:19px}
.modal-sub{color:var(--ink-2);font-size:14px;margin:6px 0 14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
@media (max-width:600px){.form-grid{grid-template-columns:1fr}}
.form-grid label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--ink-2)}
.form-grid input,.form-grid select{border-color:var(--line);padding:7px 9px;font-weight:400;color:var(--ink)}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.sfdc-picker{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin-bottom:16px}
.sfdc-picker[hidden]{display:none}
.sfdc-picker label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--ink-2)}
.sfdc-picker select{border-color:var(--line);padding:7px 9px;font-weight:400;color:var(--ink)}

/* ---------- View As ---------- */
.view-as-list{display:flex;flex-direction:column;gap:16px;max-height:50vh;overflow-y:auto}
.view-as-group h4{margin:0 0 8px;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2)}
.view-as-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 12px;margin-bottom:6px;cursor:pointer}
.view-as-row:hover{border-color:var(--accent);background:var(--accent-soft)}
.view-as-row span:first-child{display:flex;flex-direction:column;gap:1px}
.view-as-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--warn-soft);border:1px solid var(--warn);border-radius:10px;padding:11px 16px;margin-bottom:20px;color:var(--warn);font-size:14px}

/* ---------- print (attach-a-file story) ---------- */
@media print{
  .topbar,.rail,.conform-banner,.crumb,.btn,.nav,.plan-view-switch,.plan-rail,.external-preview-banner,.view-as-banner{display:none !important}
  body{background:#fff;color:#000}
  .card{box-shadow:none;border-color:#999}
  main{padding:0;max-width:none}
}

/* ---------------- live app additions (API-backed) ---------------- */
.live-tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--good);border:1px solid var(--good);border-radius:6px;padding:2px 8px}

.comment-list{padding:14px 18px;display:flex;flex-direction:column;gap:12px;max-height:340px;overflow-y:auto}
.comment{border-left:3px solid var(--line);padding-left:12px;font-size:14px}
.comment.buyer{border-left-color:var(--accent)}
.comment-meta{display:flex;align-items:center;gap:8px;margin-bottom:3px;font-size:13px}
.comment-form{display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--line);align-items:center;flex-wrap:wrap}
.comment-form input[type="text"]{flex:1;min-width:180px;border-color:var(--line);padding:7px 10px}
.visibility-toggle{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}

.share-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.share-row:last-child{border-bottom:0}
#share-list{margin-top:4px}

/* ---------- proposals (ADMIN-only section) ---------- */
.prop-group{margin-bottom:34px}
.prop-group h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px}
.prop-quote{margin:12px 0 14px;padding:2px 0 2px 14px;border-left:3px solid var(--accent);color:var(--ink-2);font-style:italic;font-size:14.5px}
.prop-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:760px){.prop-cols{grid-template-columns:1fr}}
.prop-cols p{margin:6px 0 0;font-size:14px;max-width:62ch}
.prop-refs{display:flex;flex-direction:column;gap:2px;margin-top:2px;font-size:12px;color:var(--ink-2)}
.prop-refs-details summary{cursor:pointer;font-size:12.5px;color:var(--accent);font-weight:600;margin-top:8px}
.prop-open{margin-top:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13.5px}
.prop-notes ul{margin:0;padding:14px 18px 14px 34px;font-size:13.5px;color:var(--ink-2)}
.prop-notes li{margin-bottom:6px}
.prop-notes li:last-child{margin-bottom:0}

/* -- brief hero (section landing) -- */
.prop-brief{padding:30px 34px 34px;max-width:900px}
.prop-brief h1{font-size:27px;margin-top:6px;text-wrap:balance}
.prop-brief-dated{color:var(--ink-2);font-size:13px;margin:4px 0 18px}
.prop-brief-intro{font-size:15px;line-height:1.65;max-width:70ch}
.prop-ask{background:var(--accent-soft);border:1px solid var(--accent);border-radius:12px;padding:20px 24px;margin:24px 0}
.prop-ask h2{font-size:16px;color:var(--accent)}
.prop-ask-lead{font-weight:600;margin:6px 0 14px;font-size:14.5px}
.prop-ask-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:10px}
.prop-ask-list li{display:flex;gap:12px;align-items:baseline;font-size:14px}
.prop-ask-n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;display:grid;place-items:center;line-height:1}
.prop-ask-why{font-size:13.5px;color:var(--ink-2);margin:10px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.prop-brief-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0}
@media (max-width:820px){.prop-brief-grid{grid-template-columns:1fr}}
.prop-concern h3{font-size:13.5px;margin-bottom:8px}
.prop-concern ul{margin:0;padding-left:18px;font-size:13px;color:var(--ink-2);display:flex;flex-direction:column;gap:7px}
.prop-answered,.prop-path{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.prop-answered h3,.prop-path h3{font-size:14px;margin-bottom:10px}
.prop-answered ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:6px}
.prop-path ol{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:6px}

/* -- clickable proposal grid -- */
.prop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.prop-card{text-align:left;padding:18px 20px;display:flex;flex-direction:column;gap:8px;font:inherit;color:inherit;cursor:pointer;transition:border-color .15s,transform .15s}
.prop-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.prop-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.prop-card h3{font-size:15px;margin-top:2px}
.prop-card-quote{margin:0;font-size:13px;color:var(--ink-2);font-style:italic;flex:1}
.prop-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.prop-card-cta{font-size:12px;color:var(--accent);font-weight:600;white-space:nowrap}

/* -- proposal modal -- */
.prop-modal{max-width:820px;width:92vw;max-height:86vh;overflow-y:auto;position:relative;padding:28px 30px}
.prop-modal-close{position:absolute;top:14px;right:14px;border-radius:99px;width:30px;height:30px;padding:0;display:grid;place-items:center}
.prop-modal-head{display:flex;flex-direction:column;gap:6px;padding-right:34px}
.prop-modal-head h2{font-size:20px}

/* -- today/tomorrow mock panels -- */
.mock-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
@media (max-width:700px){.mock-split{grid-template-columns:1fr}}
.mock-frame{position:relative;border:1px solid var(--line);border-radius:10px;padding:20px 14px 14px;background:var(--surface-2)}
.mock-frame-tomorrow{border-color:var(--accent);background:var(--accent-soft)}
.mock-label{position:absolute;top:-10px;left:12px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:2px 9px;border-radius:99px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.mock-label-tomorrow{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.mock-frame .table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:8px}
.mock-frame table{font-size:12.5px}
.mock-frame th,.mock-frame td{padding:7px 10px}
.mock-frame select,.mock-frame input{font-size:12px;pointer-events:none}
.mock-caption{font-size:12px;color:var(--ink-2);margin:9px 2px 0;font-style:italic}
.mock-chip{display:inline-block;background:var(--accent-soft);color:var(--accent);border-radius:6px;padding:3px 9px;font-size:12px;font-weight:600;white-space:nowrap}
.mock-chip-row{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.mock-locked td{opacity:.7}
.mock-internal-row td{background:var(--bad-soft)}
.mock-new-field{border:1px dashed var(--accent);border-radius:8px;padding:8px 10px;background:var(--surface)}
.mock-fieldgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:12.5px}
.mock-neg-inputs{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px}
.mock-neg-inputs input{width:60px}
.mock-note{display:flex;align-items:flex-start;gap:12px;border-radius:10px;padding:16px 18px;margin-top:18px;font-size:14px}
.mock-note-icon{font-size:20px;line-height:1}
.mock-note-leadership{background:var(--bad-soft);color:var(--bad)}
.mock-note-answered{background:var(--good-soft);color:var(--good)}
.mock-note p{margin:0}

/* ---------- guided tour ---------- */
/* The spotlight is one box-shadow: a huge spread paints a dark rect over the whole
   viewport, leaving a hole exactly the shape of the target's own border-box — no
   separate backdrop element, and it can't get out of sync with scroll position. */
.tour-highlight{position:relative;z-index:220;border-radius:10px;box-shadow:0 0 0 4px var(--accent),0 0 0 9999px rgba(0,0,0,.6)}
.tour-callout{position:fixed;z-index:260;max-width:340px;background:var(--surface);border:1px solid var(--accent);border-radius:12px;box-shadow:var(--shadow);padding:16px 18px}
.tour-callout[hidden]{display:none}
.tour-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.tour-x{border:0;background:none;color:var(--ink-2);font-size:14px;padding:2px 5px;cursor:pointer;border-radius:6px}
.tour-x:hover{background:var(--surface-2);color:var(--ink)}
.tour-callout h3{font-size:16px;margin-bottom:6px}
.tour-callout p{font-size:13.5px;color:var(--ink-2);margin:0 0 12px;line-height:1.5}
.tour-actions{display:flex;justify-content:space-between;gap:10px}
.tour-actions .btn[disabled]{opacity:.4;cursor:default}