/* HitchAI page framework — shared styles for the vendor / agency / contract /
   opportunity pages. Extracted from the vendor page (HitchAI_Vendor_Leidos.html
   design); every page family uses this one sheet so the design never diverges. */
:root{
  --bg:#0a0b0d; --bg-soft:#101216; --panel:#101216; --panel2:#15181d;
  --ink:#f4f1ea; --ink-dim:#9a988f; --ink-faint:#8c887b;
  --nd:#c4c1b6; --nd2:#8f8c83;
  --accent:#e8a13c; --accent-soft:#f0c98a;
  /* subcontract / reported-value key — kept visually distinct from gold
     obligations so reported subaward $ are never mistaken for spend */
  --sub:#7fb6c9; --sub-soft:#a9d2df; --sub-line:rgba(127,182,201,.42);
  --line:rgba(244,241,234,.10); --line-soft:rgba(244,241,234,.06); --row:rgba(244,241,234,.018);
  --red:#e07b7b; --blue:#6fb0e8; --green:#6bbf59;
  /* shared with the opportunities app's stylesheet so the ported pipeline rail
     renders identically on both surfaces. --ease is load-bearing: an undefined
     var inside an animation/transition shorthand invalidates the whole
     declaration, and the rail's sweep would silently never run. */
  --ease:cubic-bezier(0.22,1,0.36,1); --field:#0c0e11;
  --good:var(--green); --warn:var(--red);
  --serif:"Instrument Serif",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",monospace;
}
body.light{
  --bg:#f5f2ea; --bg-soft:#fffdf8; --panel:#fbf8f1; --panel2:#f3efe6;
  --ink:#1c1913; --ink-dim:#5c584f; --ink-faint:#6a675f; --nd:#7a766c; --nd2:#a29e94;
  --accent-soft:#8a5a10; --line:rgba(26,18,6,.15); --line-soft:rgba(26,18,6,.08); --row:rgba(26,18,6,.03);
  --field:#fffdf8;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.freshpill{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);border:1px solid var(--line);border-radius:100px;padding:5px 11px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.freshpill .fd{width:6px;height:6px;border-radius:50%;background:var(--green)}
.srcline{font-family:var(--mono);font-size:.54rem;letter-spacing:.04em;color:var(--ink-faint);margin-top:10px;display:flex;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:9px}
.srcline a{color:var(--ink-dim)} .srcline a:hover{color:var(--accent)}
a{color:var(--accent);text-decoration:none} button{font:inherit;cursor:pointer;color:inherit}
.num{font-variant-numeric:tabular-nums;font-family:var(--mono)} ::selection{background:rgba(232,161,60,.28)}
.ml{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);font-weight:400}
.ml.faint{color:var(--ink-faint)} .ml.dim{color:var(--ink-dim)}
.brand{font-family:var(--serif);font-size:1.6rem;line-height:1;color:var(--ink)} .brand i{font-style:italic;color:var(--accent)}
.btn{background:var(--accent);border:1px solid var(--accent);color:#1a1206;border-radius:100px;padding:7px 15px;font-weight:500;font-size:.82rem;transition:.25s;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:var(--accent-soft)} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink-dim)} .btn.sm{padding:5px 11px;font-size:.74rem}
.iconbtn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink-dim);font-size:14px;display:grid;place-items:center;transition:.2s}
.iconbtn:hover{border-color:var(--ink-dim);color:var(--ink)} .iconbtn.on{background:var(--accent);border-color:var(--accent);color:#1a1206}
.tg{background:transparent;border:1px solid var(--line);color:var(--ink-dim);border-radius:7px;padding:5px 11px;font-family:var(--mono);font-size:.68rem;transition:.2s}
.tg.on{background:var(--accent);border-color:var(--accent);color:#1a1206}
/* header "Save" toggle — a watches row feeding the HitchAI home "Your saved pages" strip */
.savebtn{background:transparent;border:1px solid var(--line);color:var(--ink-dim);border-radius:100px;padding:5px 12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:.2s}
.savebtn .ic{font-size:.85rem;line-height:1;color:var(--ink-faint);transition:.2s}
.savebtn:hover{border-color:var(--ink-dim);color:var(--ink)}
.savebtn.on{color:var(--accent-soft);border-color:rgba(232,161,60,.45)}
.savebtn.on .ic{color:var(--accent)}
.savebtn[disabled]{opacity:.55;cursor:default}
.save-tip{position:fixed;z-index:80;max-width:270px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:.72rem;color:var(--ink-dim);line-height:1.5;box-shadow:0 18px 40px -16px rgba(0,0,0,.7)}
.save-tip a{color:var(--accent)}

header{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:12px 20px;background:linear-gradient(90deg,#0c0d10,#0a0b0d);border-bottom:1px solid var(--line-soft)}
body.light header{background:linear-gradient(90deg,#fbf8f1,#f5f2ea)}
.tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);border:1px solid var(--line);border-radius:100px;padding:5px 12px}
.h-actions{margin-left:auto;display:flex;align-items:center;gap:9px}

.shell{position:relative;z-index:1;display:grid;grid-template-columns:238px minmax(0,1fr);max-width:1500px;margin:0 auto;transition:grid-template-columns .28s cubic-bezier(.4,0,.2,1)}
body.rail-mini .shell{grid-template-columns:58px minmax(0,1fr)}
body.rail-hidden .shell{grid-template-columns:0 minmax(0,1fr)}

/* Rail collapse: everything animates — nothing display:none's mid-motion.
   Inner content keeps a FIXED width so it clips during the slide instead of
   reflowing. KEEP IN SYNC with explorer/profile.css. */
.rail{width:238px;border-right:1px solid var(--line-soft);background:var(--bg-soft);padding:16px 14px;position:sticky;top:57px;height:calc(100vh - 57px);overflow-y:auto;overflow-x:hidden;
  transition:width .3s cubic-bezier(.4,0,.2,1),padding .3s cubic-bezier(.4,0,.2,1),opacity .22s,border-color .3s,box-shadow .25s,visibility 0s}
.rail-full{width:210px;min-width:210px}
.rail-head{display:flex;justify-content:flex-end;margin-bottom:4px}
.rail-toggle,.mi{border:1px solid var(--line);background:transparent;color:var(--ink-dim);border-radius:8px;display:grid;place-items:center;transition:.2s;cursor:pointer}
.rail-toggle{width:26px;height:24px;font-size:.8rem}
.rail-toggle:hover,.mi:hover{border-color:var(--accent);color:var(--ink)}
.rail-mini-strip{display:flex;flex-direction:column;gap:9px;align-items:center;position:absolute;top:14px;left:10px;width:38px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s}
.mi{width:38px;height:38px;font-size:1rem}
body.rail-hidden .rail{width:0;padding-left:0;padding-right:0;border-right-color:transparent;opacity:0;visibility:hidden;
  transition:width .3s cubic-bezier(.4,0,.2,1),padding .3s cubic-bezier(.4,0,.2,1),opacity .22s,border-color .3s,visibility 0s .3s}
body.rail-mini .rail{width:58px;padding:14px 10px;overflow:hidden;z-index:25}
body.rail-mini .rail-mini-strip{opacity:1;visibility:visible;pointer-events:auto}
body.rail-mini .rail .rail-full{opacity:0;pointer-events:none;transition:opacity .14s}
body.rail-mini .rail:hover{width:238px;padding:16px 14px;overflow-y:auto;overflow-x:hidden;border-right:1px solid var(--line);box-shadow:10px 0 34px -14px rgba(0,0,0,.65)}
body.rail-mini .rail:hover .rail-full{opacity:1;pointer-events:auto;transition:opacity .18s .08s}
body.rail-mini .rail:hover .rail-mini-strip{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .1s}
.railtab{display:none;position:fixed;left:0;top:96px;z-index:26;flex-direction:column;align-items:center;gap:8px;
  background:var(--bg-soft);border:1px solid var(--line);border-left:none;border-radius:0 10px 10px 0;padding:10px 7px;color:var(--ink-dim);cursor:pointer;writing-mode:vertical-rl}
.railtab:hover{color:var(--ink);border-color:var(--accent)}
.railtab .tt{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase}
body.rail-hidden .railtab{display:flex}
.rail h3{margin:18px 4px 9px} .rail h3:first-child{margin-top:0}
.tree{font-size:.8rem}
.tnode{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:6px;color:var(--ink-dim);cursor:pointer;transition:.15s}
.tnode:hover{background:var(--row);color:var(--ink)}
.tnode.on{background:rgba(232,161,60,.12);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(232,161,60,.3)}
.tnode.on .dot{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.tnode .dot{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);flex:none}
.tchild{margin-left:9px;padding-left:11px;border-left:1px solid var(--line-soft)}
.tag-you{font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(232,161,60,.45);padding:1px 5px;border-radius:5px;margin-left:auto}

.main{padding:20px 26px 46px;min-width:0;width:100%;max-width:1240px;margin:0 auto}
.crumb{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-dim);margin-bottom:16px}
.crumb a{color:var(--ink-dim)} .crumb a:hover{color:var(--accent)} .crumb .sep{color:var(--ink-faint)}
.crumb .url{margin-left:auto;color:var(--ink-faint);border:1px solid var(--line-soft);border-radius:7px;padding:3px 9px}
.head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.h-title{font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--ink)}
.h-sub{margin-top:10px;display:flex;align-items:center;gap:11px;flex-wrap:wrap;color:var(--ink-dim);font-size:.75rem}
.h-sub .mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em}
.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:100px}
.chip.ok{color:#6bbf59;border:1px solid rgba(143,191,122,.35)} .chip.parent{color:var(--ink-dim);border:1px solid var(--line)}
.chip.warn{color:var(--red);border:1px solid rgba(224,123,123,.4)}
.scope{margin-left:auto;text-align:right}.scope .lab{margin-bottom:6px}.seg{display:inline-flex;gap:5px}
.caveat{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--ink-faint);margin:14px 0 20px;line-height:1.5}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:16px}
.kpi{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:14px 15px;overflow:hidden}
.kpi .k-lab{margin-bottom:11px;display:flex;align-items:center;gap:6px}
.kpi .k-val{font-family:var(--serif);font-size:2rem;line-height:.9;color:var(--ink)}
.kpi .k-val.fit{overflow-wrap:anywhere;line-height:1}  /* long names wrap + shrink to fit — never ellipsized */
.kpi .k-foot{margin-top:11px;font-size:.7rem;color:var(--ink-faint);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.delta{font-family:var(--mono);font-size:.68rem;font-weight:500;display:inline-flex;align-items:center;gap:2px}
.delta.up{color:#6bbf59} .delta.down{color:#e07b7b}
.k-def{box-shadow:inset 3px 0 0 var(--accent)} .k-nd{box-shadow:inset 3px 0 0 var(--nd)}
.spark{position:absolute;right:13px;bottom:12px} .ytd{font-family:var(--mono);font-size:.6rem;color:var(--accent)}

.editbar{display:none;align-items:center;gap:9px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--accent);border-radius:11px;padding:10px 13px;margin-bottom:14px}
body.editing .editbar{display:flex}
.editbar .grp{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.editbar .lbl{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-faint)}
.editbar .divider{width:1px;height:20px;background:var(--line)}
.addwrap{position:relative}
.addmenu{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:20;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px;min-width:220px;max-height:280px;overflow:auto;box-shadow:0 18px 40px -16px rgba(0,0,0,.7)}
.addmenu.on{display:block}
.addmenu button{display:flex;width:100%;text-align:left;gap:7px;align-items:center;background:transparent;border:none;color:var(--ink);font-size:.76rem;padding:7px 9px;border-radius:7px}
.addmenu button:hover{background:var(--row);color:var(--accent)}
.addmenu .empty{color:var(--ink-faint);font-size:.72rem;padding:8px 9px}
.card-tools{display:none;position:absolute;top:9px;right:10px;gap:5px;z-index:3}
body.editing .card-tools{display:flex}
.card-tools button{width:24px;height:22px;border:1px solid var(--line);background:var(--bg-soft);color:var(--ink-dim);border-radius:6px;font-size:.7rem;display:grid;place-items:center}
.card-tools .h:hover{border-color:var(--red);color:var(--red)} .card-tools .g{cursor:grab}
body.editing .kpi,body.editing .card{cursor:grab}
.kpi.dragging,.card.dragging{opacity:.45;outline:1px dashed var(--accent);outline-offset:2px}

#board{display:grid;grid-template-columns:1fr 1fr;gap:13px;grid-auto-flow:dense;align-items:start}
/* Board sections: full-width divider rows grouping cards (pages that define sections).
   Row flow replaces dense so a card never backfills a hole ABOVE its own section header. */
body.sec-board #board{grid-auto-flow:row}
/* rail-tree collapse carets (corporate tree / org tree) */
.tcaret{background:none;border:0;color:var(--ink-faint);cursor:pointer;font-size:.6rem;line-height:1;padding:0 3px 0 0;display:inline-block;transition:transform .15s;transform-origin:45% 50%}
.tcaret.open{transform:rotate(90deg)}
.tcaret:hover{color:var(--accent)}
.tcaret-sp{display:inline-block;width:11px}
.tchild.closed,.tsibs.closed{display:none}
.tmore{cursor:pointer}.tmore:hover{color:var(--accent)!important}
.board-sec{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;margin:20px 2px 0;user-select:none}
.board-sec:first-child{margin-top:4px}
.board-sec .bs-t{font-family:var(--serif);font-size:1.16rem;color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.board-sec .bs-sub{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.board-sec .bs-rule{flex:1;height:1px;background:var(--line);transform:translateY(-3px)}
@media(max-width:700px){.board-sec .bs-sub{display:none}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:15px 16px;position:relative}
.card.span2{grid-column:1 / -1} .card.hidden{display:none}
body.editing .card:hover{border-color:var(--accent-soft)}
.c-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.c-head h3{font-family:var(--serif);font-size:1.12rem;color:var(--ink);font-weight:400;line-height:1}
.c-head .r{margin-left:auto} .c-head .ic{color:var(--accent);font-size:.9rem}

.sig{display:flex;gap:11px;padding:11px 0;border-top:1px solid var(--line-soft)}
.sig:first-of-type{border-top:none;padding-top:2px}
.sig .s-ic{width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;font-size:.82rem;background:rgba(232,161,60,.12);color:var(--accent)}
.sig.warn .s-ic{color:#e07b7b;background:rgba(224,123,123,.12)}
.sig.pos .s-ic{color:#6bbf59;background:rgba(107,191,89,.12)}
.sig .s-h{font-size:.82rem;font-weight:500;color:var(--ink);line-height:1.35}
.sig .s-d{font-size:.72rem;color:var(--ink-dim);margin-top:3px;line-height:1.5}
.sig .s-d b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}

/* Bar rows stack label+value on their own line with the bar full-width below, so
   long agency/vendor names are never truncated (federal names overflow any fixed
   side column). Explicit grid placement keeps the bl/track/val markup unchanged. */
.bar-row{display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:6px;align-items:baseline;margin:12px 0}
.bar-row .bl{grid-column:1;grid-row:1;min-width:0;font-size:.76rem;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .bar-val{grid-column:2;grid-row:1;justify-self:end}
.bar-row .bar-track{grid-column:1 / -1;grid-row:2;align-self:center}
.bar-track{height:8px;border-radius:5px;background:var(--row);overflow:hidden;position:relative}
.bar-fill{height:100%;border-radius:5px;background:var(--accent);opacity:.85} .bar-fill.nd{background:var(--nd)}
/* --- subcontract / reported-value key --- */
.bar-fill.rep{background:var(--sub);opacity:.8}
.chip.rep{color:var(--sub);border:1px dashed var(--sub-line)}
.c-head .ic.sub{color:var(--sub)}
.sig.sub .s-ic{color:var(--sub);background:rgba(127,182,201,.13)}
.tl-dot.sub{background:var(--sub)} .tl-year.sub{color:var(--sub)}
.bar-row .bl .yt{font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);border:1px solid var(--sub-line);border-radius:5px;padding:0 5px;margin-left:7px}
.repnote{font-size:.66rem;color:var(--sub);border:1px dashed var(--sub-line);border-radius:8px;padding:8px 11px;margin:2px 0 12px;line-height:1.5;background:rgba(127,182,201,.05)}
.bar-val{font-family:var(--mono);font-size:.72rem;text-align:right;color:var(--ink)}

.mkts{display:flex;flex-wrap:wrap;gap:8px}
.mkt{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--row)}
.mkt .m-n{font-size:.74rem;color:var(--ink-dim)}
.mkt .m-v{font-family:var(--serif);font-size:1.3rem;color:var(--ink);margin-top:2px;line-height:1}
.mkt .m-s{font-family:var(--mono);font-size:.6rem;color:var(--ink-faint);margin-top:4px;letter-spacing:.04em}

.caps{display:flex;flex-wrap:wrap;gap:7px}
.cap{font-family:var(--mono);font-size:.68rem;padding:5px 10px;border-radius:100px;border:1px solid var(--line);background:var(--row);color:var(--ink-dim)}
.cap b{color:var(--accent-soft);font-weight:500;margin-left:6px;font-size:.56rem;letter-spacing:.08em} .cap.hot{border-color:rgba(232,161,60,.38);color:var(--ink)}

.slist .srow{display:flex;align-items:center;gap:11px;padding:8px 0;border-top:1px solid var(--line-soft)}
.slist .srow:first-child{border-top:none}
.savatar{width:30px;height:30px;border-radius:7px;flex:none;display:grid;place-items:center;font-family:var(--mono);font-size:.62rem;background:var(--panel2);color:var(--ink-dim);border:1px solid var(--line)}
.sname{font-size:.8rem;color:var(--ink)} .sflow{font-size:.68rem;color:var(--ink-faint)}
.sval{margin-left:auto;text-align:right}
.sval b{font-family:var(--mono);font-size:.76rem;font-weight:500;color:var(--ink)}
.sval span{display:block;font-family:var(--mono);font-size:.54rem;color:var(--ink-faint);letter-spacing:.1em;text-transform:uppercase}

.pos-wrap{display:flex;align-items:center;gap:18px}
.leg{font-size:.76rem;color:var(--ink-dim);display:flex;flex-direction:column;gap:10px}
.leg .li{display:flex;align-items:center;gap:8px}.leg .sw{width:10px;height:10px;border-radius:3px}
.leg b{color:var(--ink);font-weight:500;font-family:var(--mono);font-size:.74rem}
.foot-note{font-size:.66rem;color:var(--ink-faint);margin-top:12px;line-height:1.55}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:11px}
.stat .s-v{font-family:var(--serif);font-size:1.5rem;color:var(--ink);line-height:1}
.stat .s-l{font-family:var(--mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);margin-top:5px}
.stat .s-v small{font-size:.9rem;color:var(--ink-dim)}

.stack{display:flex;height:11px;border-radius:6px;overflow:hidden;margin:4px 0 9px}.stack i{height:100%}
.stackleg{display:flex;flex-wrap:wrap;gap:12px;font-size:.68rem;color:var(--ink-dim)}
.stackleg span{display:inline-flex;align-items:center;gap:6px}.stackleg .sw{width:9px;height:9px;border-radius:2px}

.tl{position:relative;padding-left:6px}
.tl-item{position:relative;padding:0 0 15px 20px;border-left:1px solid var(--line)}
.tl-item:last-child{border-left-color:transparent;padding-bottom:0}
.tl-dot{position:absolute;left:-5px;top:2px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--bg-soft)} .tl-dot.n{background:var(--nd)}
.tl-year{font-family:var(--mono);font-size:.64rem;color:var(--accent);letter-spacing:.08em}
.tl-h{font-size:.8rem;color:var(--ink);margin-top:2px} .tl-d{font-size:.7rem;color:var(--ink-dim);margin-top:2px;line-height:1.45}
.tl-src{font-family:var(--mono);font-size:.5rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);border:1px solid var(--line);border-radius:4px;padding:1px 5px;margin-left:6px}

.lrow{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line-soft)}
.lrow:first-child{border-top:none} .lrow .l-main{min-width:0;flex:1}
.lrow .l-t{font-size:.8rem;color:var(--ink);line-height:1.35}
.lrow .l-m{font-family:var(--mono);font-size:.62rem;color:var(--ink-faint);letter-spacing:.03em;margin-top:3px;display:flex;flex-wrap:wrap;gap:9px}
.lrow .l-r{text-align:right;flex:none}
.lrow .l-v{font-family:var(--serif);font-size:1.05rem;color:var(--ink);line-height:1}
.lrow .l-d{font-family:var(--mono);font-size:.56rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.otag{font-family:var(--mono);font-size:.54rem;text-transform:uppercase;letter-spacing:.08em;padding:2px 7px;border-radius:100px;border:1px solid var(--line)}
.otag.win{color:var(--green);border-color:rgba(143,191,122,.4)} .otag.loss{color:var(--red);border-color:rgba(224,123,123,.4)}
.otag.ca{color:var(--accent);border-color:rgba(232,161,60,.4)} .otag.active{color:var(--blue);border-color:rgba(111,176,232,.4)}

.rc{margin:16px 0 2px}
.rc-fy{display:flex;align-items:flex-end;gap:12px;height:66px;border-bottom:1px solid var(--line)}
.rc-fy .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;text-align:center}
.rc-fy .col .v{font-family:var(--mono);font-size:.6rem;color:var(--accent);margin-bottom:5px;white-space:nowrap}
.rc-fy .col .v.z{color:var(--ink-faint)}
.rc-fy .col .b{background:var(--accent);opacity:.9;border-radius:4px 4px 0 0}
.rc-fy .col .b.z{background:var(--row);opacity:1}
.rc-lab{display:flex;gap:12px;margin:6px 0 2px}
.rc-lab span{flex:1;text-align:center;font-family:var(--mono);font-size:.6rem;color:var(--ink-dim)}
.rc-sub{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin:16px 0 10px}
.rc-row{display:grid;grid-template-columns:minmax(90px,1.4fr) 1fr 62px 66px;align-items:center;gap:12px;margin:8px 0}
.rc-row .l{font-family:var(--mono);font-size:.72rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-row .t{height:8px;border-radius:5px;background:var(--row);overflow:hidden}
.rc-row .t i{display:block;height:100%;background:var(--accent);opacity:.85;border-radius:5px}
.rc-row .a{font-family:var(--mono);font-size:.72rem;text-align:right;color:var(--ink)}
.rc-row .w{font-family:var(--mono);font-size:.64rem;text-align:right;color:var(--ink-faint);white-space:nowrap}

.geo{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.geo .st{border:1px solid var(--line);border-radius:6px;padding:5px 8px;font-family:var(--mono);font-size:.6rem;color:var(--ink-dim)} .geo .st b{color:var(--ink);margin-left:5px}

.fields{display:grid;grid-template-columns:1fr;gap:0}
.frow{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line-soft);font-size:.76rem}
.frow:first-child{border-top:none}
.frow .fk{color:var(--ink-dim)} .frow .fv{color:var(--ink);text-align:right;font-family:var(--mono);font-size:.72rem}
.certrow{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid var(--line-soft);font-size:.78rem}
.certrow:first-child{border-top:none}
.certrow .cdot{width:18px;height:18px;border-radius:5px;flex:none;display:grid;place-items:center;font-size:.7rem}
.certrow .cdot.y{background:rgba(143,191,122,.16);color:var(--green)} .certrow .cdot.n{background:var(--row);color:var(--ink-faint)}
.certrow .cn{color:var(--ink)} .certrow .cx{margin-left:auto;font-family:var(--mono);font-size:.58rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em}

.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 12px;color:var(--ink-faint);text-align:center}
.empty .ei{font-size:1.5rem;color:var(--ink-faint)} .empty .et{font-size:.78rem;line-height:1.5;max-width:320px}
.databanner{display:none;align-items:flex-start;gap:11px;background:rgba(232,161,60,.08);border:1px solid rgba(232,161,60,.3);border-radius:11px;padding:13px 15px;margin-bottom:16px;font-size:.78rem;color:var(--ink-dim);line-height:1.5}
body.sparse .databanner{display:flex}
.databanner .bi{color:var(--accent);font-size:1.05rem;line-height:1}

.aibadge{font-family:var(--mono);font-size:.52rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);border:1px solid rgba(232,161,60,.5);border-radius:100px;padding:2px 7px;display:inline-flex;align-items:center;gap:4px}
.prose{font-size:.84rem;color:var(--ink);line-height:1.62}
.aimeta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px;font-family:var(--mono);font-size:.58rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em}
.aimeta .cf{color:var(--green)} .aimeta .src{color:var(--ink-dim)}
.regen{border:1px solid var(--line);background:transparent;color:var(--ink-dim);border-radius:100px;padding:3px 10px;font-size:.56rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;margin-left:auto}
.regen:hover{border-color:var(--accent);color:var(--ink)}
.lead-row{display:flex;align-items:center;gap:11px;padding:8px 0;border-top:1px solid var(--line-soft)}
.lead-row:first-child{border-top:none}
.lead-av{width:30px;height:30px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:.6rem;color:var(--ink-dim);flex:none}
.lead-n{font-size:.8rem;color:var(--ink)} .lead-p{font-size:.68rem;color:var(--ink-dim)}
.szflag{display:flex;align-items:center;gap:11px;background:var(--row);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:13px}
.szflag .v{font-family:var(--serif);font-size:1.15rem;color:var(--ink);line-height:1.1}
.ctab{width:100%;font-size:.74rem;border-collapse:collapse}
.ctab th{font-family:var(--mono);font-size:.54rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);text-align:left;padding:5px 6px;border-bottom:1px solid var(--line)}
.ctab th.rt,.ctab td.rt{text-align:right;font-family:var(--mono)}
.ctab td{padding:6px 6px;border-bottom:1px solid var(--line-soft);color:var(--ink)}
.ctab td.a{color:var(--green)} .ctab td.n{color:var(--ink-faint)} .ctab td.p{color:var(--ink-dim)}

.modal{position:fixed;inset:0;z-index:70;background:rgba(5,6,8,.72);display:none;align-items:flex-start;justify-content:center;padding:48px 24px;overflow:auto}
.modal.on{display:flex}
.sheet{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;width:100%;max-width:730px;padding:22px 24px;box-shadow:0 30px 70px -20px rgba(0,0,0,.7)}
.sheet-hd{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.sheet-hd h2{font-family:var(--serif);font-size:1.7rem;font-weight:400;color:var(--ink);line-height:1}
.sheet-hd .ic{color:var(--accent);font-size:1.1rem}
.sheet-hd .x{margin-left:auto}
.help-sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:18px}
.help-sec{margin-top:19px}
.help-sec h4{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);margin-bottom:9px}
.help-sec p{font-size:.82rem;color:var(--ink-dim);line-height:1.6;margin:0 0 8px}
.help-sec b{color:var(--ink);font-weight:500}
.kbd{font-family:var(--mono);font-size:.62rem;background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--ink-dim)}
.help-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.help-cards .hc{border:1px solid var(--line-soft);border-radius:8px;padding:9px 11px}
.help-cards .hc .n{font-size:.76rem;color:var(--ink)}
.help-cards .hc .d{font-size:.67rem;color:var(--ink-faint);margin-top:3px;line-height:1.4}
@media(max-width:560px){.help-cards{grid-template-columns:1fr}}

.loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:80px 20px;color:var(--ink-dim)}
.loading .spin{width:26px;height:26px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:vspin .8s linear infinite}
@keyframes vspin{to{transform:rotate(360deg)}}
.nf-box{max-width:560px;margin:60px auto;text-align:center}
.nf-box h2{font-family:var(--serif);font-size:1.8rem;font-weight:400;margin-bottom:8px}
.nf-box p{color:var(--ink-dim);font-size:.85rem;margin-bottom:18px}
.nf-search{display:flex;gap:8px;justify-content:center;margin-bottom:18px}
.nf-search input{background:var(--panel);border:1px solid var(--line);border-radius:100px;color:var(--ink);font:inherit;font-size:.85rem;padding:9px 16px;width:320px;outline:none}
.nf-search input:focus{border-color:var(--accent)}
.cand{display:block;text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:11px 14px;margin:8px auto;max-width:480px;transition:.2s}
.cand:hover{border-color:var(--accent)}
.cand .cn{font-size:.84rem;color:var(--ink)} .cand .cs{font-family:var(--mono);font-size:.62rem;color:var(--ink-faint);margin-top:2px}

@media(max-width:1160px){#board{grid-template-columns:1fr}.card.span2{grid-column:auto}.kpis{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.shell{grid-template-columns:1fr}.rail{display:none}}

/* ============================================================
   fy-stack card — "top 5 + all other, stacked by fiscal year".
   FY colors are CATEGORICAL (one hue per year, fixed order) from the
   brand slide palette, stepped into each theme's lightness band and
   validated (CVD-safe order, contrast) on both surfaces. Muted set =
   the same hues 55% toward the surface — the "All other" remainder.
   ============================================================ */
:root{
  --fys0:#1e99db; --fys1:#26ae5b; --fys2:#8e6fe0; --fys3:#ff1f8e; --fys4:#c4811d;
  --fyso0:#164f6f; --fyso1:#1a5835; --fyso2:#493c71; --fyso3:#7c184c; --fyso4:#614419;
}
body.light{
  --fys0:#1d97d8; --fys1:#24ab58; --fys2:#8e6fe0; --fys3:#ff1f8e; --fys4:#e6951b;
  --fyso0:#97cce6; --fyso1:#9ad5ac; --fyso2:#cabae9; --fyso3:#fd96c4; --fyso4:#f2cb91;
}
.fys-ctl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:2px 0 4px}
.fys-ctl .fys-sp{flex:1}
.fys-sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:8px 0 0}
.fys-legend{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 2px;padding:8px 10px;border:1px solid var(--line-soft);border-radius:9px;background:var(--row)}
.fys-lg{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.62rem;color:var(--ink);cursor:pointer;padding:3px 9px 3px 5px;border-radius:100px;transition:.15s;
  background:color-mix(in srgb, var(--lgc) 13%, transparent);border:1px solid color-mix(in srgb, var(--lgc) 32%, transparent)}
.fys-lg:hover{background:color-mix(in srgb, var(--lgc) 24%, transparent)}
.fys-lg.pin{background:color-mix(in srgb, var(--lgc) 30%, transparent);border-color:color-mix(in srgb, var(--lgc) 65%, transparent)}
.fys-lg .sw{width:10px;height:10px;border-radius:3px;flex:none}
.fys-lg .ytd{font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sub, #7fb6c9);border:1px solid rgba(127,182,201,.42);border-radius:5px;padding:0 4px;margin-left:2px}
.fys-legend .hint{margin-left:auto;font-family:var(--mono);font-size:.52rem;letter-spacing:.05em;color:var(--ink-faint)}
.fys-plot{position:relative;margin-top:10px}
.fys-grid{position:absolute;top:0;bottom:22px;left:var(--fys-l,220px);right:var(--fys-r,104px);pointer-events:none}
.fys-grid .gl{position:absolute;top:0;bottom:0;width:1px;background:var(--line-soft)}
.fys-grid .gl.zero{background:var(--line)}
.fys-rows{position:relative}
/* EVERY ROW IS EXACTLY --fys-rh TALL. Height must not follow content: a row that happens to carry
   a sub-line used to grow ~11px, so the bars stopped sitting on a fixed ladder and two lengths
   could no longer be compared by eye. The label block CLIPS inside its own box instead
   (.nm clamps to two lines, .cd to one) — nothing it contains can push the row. */
.fys-row{--fys-rh:52px;display:grid;grid-template-columns:250px minmax(0,1fr) 96px;column-gap:14px;
  align-items:center;height:var(--fys-rh);padding:0}
/* the remainder's rule is a margin, never padding — padding would make this row the odd one out */
.fys-row.other{border-top:1px solid var(--line-soft);margin-top:6px}
.fys-row .bl{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px}
/* two lines, then ellipsis. 'National Security Space Launch Phase 3 Lane 1' and '…Lane 2' are one
   truncated line apart on a single line and plainly different on two. */
.fys-row .nm{font-size:.76rem;line-height:1.28;color:var(--ink);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fys-row.other .nm{color:var(--ink-dim)}
.fys-row .cd{font-family:var(--mono);font-size:.52rem;letter-spacing:.04em;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fys-row .trk{position:relative;height:16px}
.fys-seg{position:absolute;top:0;height:100%;display:block;transition:left .4s cubic-bezier(.4,0,.2,1),width .4s cubic-bezier(.4,0,.2,1),opacity .2s}
.fys-seg.last{border-radius:0 4px 4px 0}
.fys-plot.hl .fys-seg{opacity:.22}.fys-plot.hl .fys-seg.hlon{opacity:1}
.fys-row .bv{text-align:right}
.fys-row .bv .t{font-family:var(--mono);font-size:.72rem;color:var(--ink);font-variant-numeric:tabular-nums}
.fys-row .bv .s{font-family:var(--mono);font-size:.52rem;color:var(--ink-faint);margin-top:1px}
.fys-axis{position:relative;height:22px;margin-left:var(--fys-l,220px);margin-right:var(--fys-r,104px)}
.fys-axis .tk{position:absolute;top:5px;transform:translateX(-50%);font-family:var(--mono);font-size:.56rem;color:var(--ink-faint);white-space:nowrap}
.fys-axis .tk:first-child{transform:none}
.fys-tip{position:fixed;z-index:70;pointer-events:none;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:.72rem;color:var(--ink-dim);box-shadow:0 8px 28px rgba(0,0,0,.45);opacity:0;transition:opacity .12s;max-width:290px;line-height:1.5}
.fys-tip.on{opacity:1}
.fys-tip .t1{color:var(--ink);font-weight:500;font-size:.74rem;margin-bottom:1px}
.fys-tip .t1 .fy{font-family:var(--mono);font-size:.6rem;color:var(--accent-soft);margin-left:6px}
.fys-tip .nums{font-family:var(--mono);font-size:.66rem;color:var(--ink);margin-top:2px}
.fys-tip .sh{font-family:var(--mono);font-size:.58rem;color:var(--ink-faint);margin-top:2px}
.fys-tip .pd{font-family:var(--mono);font-size:.54rem;color:var(--sub,#7fb6c9);margin-top:3px}
.fys-tbl{width:100%;border-collapse:collapse;margin-top:10px;font-size:.74rem}
.fys-tbl th{font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:400;text-align:right;padding:6px 9px;border-bottom:1px solid var(--line)}
.fys-tbl th:first-child{text-align:left;padding-left:2px}
.fys-tbl th .ytd{font-size:.48rem;color:var(--sub,#7fb6c9);border:1px solid rgba(127,182,201,.42);border-radius:5px;padding:0 4px;margin-left:4px}
.fys-tbl td{padding:6px 9px;text-align:right;font-family:var(--mono);font-size:.68rem;color:var(--ink);font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line-soft)}
/* The table is the "show me all of it" view of the same rows, so its name column WRAPS rather
   than clipping — there is no bar ladder here for a varying row height to break. */
.fys-tbl td:first-child{text-align:left;font-family:var(--sans);padding-left:2px;max-width:320px;overflow-wrap:anywhere}
.fys-tbl tr.other td{color:var(--ink-dim)}
.fys-tbl td.tot{color:var(--accent-soft)} .fys-tbl td.dim{color:var(--ink-faint)}
/* A phone cannot spare a 250px label gutter, so it buys the characters back in HEIGHT: a third
   clamped line at 148px reads more of the name than two lines at 250px did. The row stays a
   fixed height — that is the whole point of the ladder and it does not get relaxed on mobile. */
@media(max-width:760px){
  .fys-row{--fys-rh:66px;grid-template-columns:148px minmax(0,1fr) 80px;column-gap:10px}
  .fys-row .nm{-webkit-line-clamp:3;line-clamp:3}
}

/* ============================ PIPELINE STAGE RAIL ============================
   Ported from the opportunities app (opportunities/opps.css) so the control
   reads identically on both surfaces. Keep the two copies in step. */
.opp-pipe{display:flex;align-items:flex-start;gap:12px;margin:14px 0 4px;padding-top:14px;border-top:1px solid var(--line-soft)}
.opp-pipe-label{flex:none;font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);padding-top:6px}
.opp-pipe .plsect{flex:1;min-width:0}
.plsect{border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:var(--panel)}
.plsect.bare{border:none;background:none;padding:0}
.plsect .plmeta{font-family:var(--mono);font-size:.58rem;color:var(--ink-faint);letter-spacing:.05em;line-height:1.6}
.pipewrap{flex:1;min-width:0;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.piperow{display:flex;align-items:center;gap:7px;flex:none}
.pipepick{max-width:220px;background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:.82rem;font-family:var(--sans);font-weight:500}
.pipepick:focus{outline:none;border-color:var(--accent)}
.piperemove{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink-faint);font-size:.8rem;cursor:pointer;transition:.18s}
.piperemove:hover{color:var(--warn);border-color:var(--warn)}
/* first-run: an invitation, not a dropdown with nothing in it */
.pipestart{background:none;border:1px dashed var(--line);border-radius:100px;color:var(--ink-dim);font-family:var(--sans);font-size:.8rem;font-weight:500;padding:7px 16px;cursor:pointer;transition:.18s}
.pipestart:hover{border-color:var(--accent);border-style:solid;color:var(--accent)}
.pipetrack{position:relative;flex:1;min-width:260px;display:flex;justify-content:space-between;align-items:flex-start;padding:6px 2px 2px}
/* not on this board yet — the whole rail reads as an offer until a stage is picked */
.pipetrack.untracked{opacity:.72;transition:opacity .25s var(--ease)}
.pipetrack.untracked:hover{opacity:1}
.piperail{position:absolute;left:12px;right:12px;top:13px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.pipetrack.hasright .piperail{right:128px}
.pipetrack.hasleft .piperail{left:128px}
/* width is always var(--fillw) (correct even if animations don't run); the
   sweep is a transform reveal so a frozen/headless renderer never masks it */
.pipefill{position:absolute;inset:0 auto 0 0;width:var(--fillw,0);transform-origin:left center;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-soft),var(--accent));background-size:200% 100%;animation:pipeshimmer 2.4s linear infinite,pipegrow .75s var(--ease);box-shadow:0 0 12px rgba(232,161,60,.55)}
@keyframes pipeshimmer{0%{background-position:0 0}100%{background-position:200% 0}}
@keyframes pipegrow{from{transform:scaleX(0)}}
.pnode{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;min-width:0;background:none;border:none;cursor:pointer;padding:0}
.pnode .pdot{width:20px;height:20px;border-radius:50%;background:var(--bg);border:2px solid var(--ink-faint);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease),border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)}
.pnode .pdot::after{content:"";width:6px;height:6px;border-radius:50%;background:transparent;transition:background .4s var(--ease)}
/* max-width + ellipsis is the safety net at EVERY width: the label is nowrap
   and the node is min-width:0, so without it a track with more stages than it
   has room for draws its labels on top of one another — and, because they
   overflow the track rather than fill it, the overflow escapes to the page. */
.pnode .plbl{font-family:var(--mono);font-size:.58rem;letter-spacing:.04em;color:var(--ink-faint);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;transition:color .4s var(--ease)}
.pnode:hover .pdot{border-color:var(--ink-dim)}
.pnode.done .pdot{border-color:var(--accent);background:rgba(232,161,60,.14)}
.pnode.done .pdot::after{background:var(--accent)}
.pnode.done .plbl{color:var(--ink-dim)}
.pnode.cur .pdot{border-color:var(--accent);background:var(--accent);transform:scale(1.25);box-shadow:0 0 0 5px rgba(232,161,60,.18),0 0 16px rgba(232,161,60,.5);animation:pnodepop .5s var(--ease) both}
@keyframes pnodepop{0%{transform:scale(.6);box-shadow:0 0 0 0 rgba(232,161,60,.4)}60%{transform:scale(1.35)}}
.pnode.cur .pdot::after{background:#1a1206}
.pnode.cur .plbl{color:var(--accent-soft);font-weight:500}
.pterm{position:relative;z-index:2;display:flex;flex-direction:column;gap:5px;flex:none;width:100px;padding-left:16px;border-left:1px dashed var(--line);margin-left:6px}
.pterm .tbtn{font-family:var(--mono);font-size:.58rem;letter-spacing:.05em;text-transform:uppercase;background:none;color:var(--ink-faint);border:1px solid var(--line);border-radius:100px;padding:4px 0;cursor:pointer;transition:.18s}
.pterm .tbtn:hover{color:var(--ink);border-color:var(--ink-dim)}
.pterm .tbtn.won.on{background:var(--good);border-color:var(--good);color:#0a1206;font-weight:500;box-shadow:0 0 14px rgba(123,191,123,.4)}
.pterm .tbtn.lost.on{background:var(--warn);border-color:var(--warn);color:#1a0606;font-weight:500;box-shadow:0 0 14px rgba(217,140,95,.4)}
/* leading No-Bid chicklet — mirrors Won/Lost but on the left, neutral when chosen */
.pterm.left{padding-left:0;padding-right:16px;border-left:none;border-right:1px dashed var(--line);margin-left:0;margin-right:6px}
.pterm .tbtn.nobid.on{background:var(--ink-dim);border-color:var(--ink-dim);color:var(--bg);font-weight:500;box-shadow:0 0 14px rgba(154,152,143,.3)}
/* "Cancelled" docks in the same left rail as "No bid" and must not read as the
   same act: no-bid is our decision, cancelled is the Government pulling the
   solicitation. Same rail, outlined rather than filled. */
.pterm .tbtn.cancelled.on{background:rgba(154,152,143,.14);border-color:var(--ink-dim);color:var(--ink);font-weight:500}
/* the inline "name a pipeline" form, shared with the opps app's markup */
.wsform{display:flex;gap:6px;align-items:stretch}
.wsform input{flex:1;min-width:0;max-width:340px;background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:.76rem;font-family:var(--sans);font-weight:300}
.wsform input::placeholder{color:var(--ink-faint)}
.wsform input:focus{outline:none;border-color:var(--accent)}
.wsadd{flex:0 0 30px;background:none;border:1px dashed var(--line);border-radius:8px;color:var(--ink-faint);font-size:.9rem;cursor:pointer;transition:.15s}
.wsadd:hover{border-color:var(--accent);color:var(--accent)}
/* NARROW SCREENS — the rail becomes a wrapped row of stage pills.
   One node per stage stops fitting somewhere around 900px: nodes collapsed to
   a bare 12px dot each while their nowrap labels overlapped, and since the
   labels overflowed the track instead of filling it, `overflow-x:auto` never
   engaged and the PAGE scrolled sideways instead. Pills wrap onto as many
   lines as the stages need, so nothing overlaps at any stage count and every
   stage stays tappable. The connecting rail is dropped here on purpose — a
   line swept across a multi-row wrap describes nothing. Progress still reads:
   done pills keep the accent dot, the current one stays filled. */
@media(max-width:900px){
  .opp-pipe{flex-direction:column;gap:8px}
  .pipewrap{gap:10px}
  .piperow{flex:1 1 100%}
  .pipepick{flex:1;min-width:0;max-width:420px}
  .pipetrack{flex:1 1 100%;min-width:0;flex-wrap:wrap;justify-content:flex-start;gap:6px;padding:2px 0}
  .piperail{display:none}
  .pnode{flex:0 0 auto;flex-direction:row;gap:7px;padding:6px 12px;border:1px solid var(--line);border-radius:100px}
  .pnode .pdot{width:12px;height:12px}
  .pnode .pdot::after{width:4px;height:4px}
  .pnode .plbl{font-size:.62rem}
  .pnode.done{border-color:rgba(232,161,60,.35)}
  .pnode.cur{border-color:var(--accent);background:rgba(232,161,60,.12)}
  /* the desktop dot grows and pops against a bare rail; inside a pill both the
     scale and the 5px ring break the pill's edge, so neither runs here */
  .pnode.cur .pdot{transform:none;box-shadow:0 0 10px rgba(232,161,60,.45);animation:none}
  .pterm,.pterm.left{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;gap:6px;width:auto;border:none;padding:0;margin:0}
  .pterm .tbtn{padding:6px 14px}
  /* dashed until chosen — what keeps No bid / Won / Lost reading as outcomes
     off the track once the dashed divider that said so is gone */
  .pterm .tbtn:not(.on){border-style:dashed}
}