/* CodeNSM product surfaces — dashboard OKR layer, employees, flow, devs.
   Loads AFTER codensm.css; reuses its custom props (--mint --sky --peach
   --lav --rose --amber, --panel, --line, --raise, --press, --mono).
   Futuristic, precise, data-dense but calm. */

/* ======================================================================== */
/*  section tabs (pill row under the nav)                                    */
/* ======================================================================== */
.cn-tabs{display:flex;gap:4px;margin:0 0 18px;padding:5px;width:max-content;max-width:100%;
  overflow-x:auto;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,var(--panel),var(--bg-2));box-shadow:var(--raise);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.cn-tabs a{position:relative;padding:9px 16px 11px;border-radius:9px;color:var(--dim);
  white-space:nowrap;transition:color .15s,background .15s}
.cn-tabs a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.cn-tabs a.on{color:var(--ink)}
.cn-tabs a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,var(--sky),var(--mint));
  box-shadow:0 0 8px -1px var(--mint)}

/* ======================================================================== */
/*  chips: worker state / debt level / logic split                          */
/* ======================================================================== */
.p-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:20px;
  border:1px solid var(--line);color:var(--soft);white-space:nowrap;vertical-align:middle}
.p-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}

/* states */
.st-keystone{color:var(--mint);border-color:rgba(126,240,201,.45);background:rgba(126,240,201,.08)}
.st-fit{color:var(--sky);border-color:rgba(125,215,255,.4);background:rgba(125,215,255,.07)}
.st-vital_rare{color:var(--lav);border-color:rgba(198,184,242,.45);background:rgba(198,184,242,.08)}
.st-overloaded{color:var(--amber);border-color:rgba(239,217,163,.5);background:rgba(239,217,163,.08)}
.st-fragile{color:#f1857f;border-color:rgba(241,133,127,.5);background:rgba(241,133,127,.08)}
.st-freeloader{color:var(--peach);border-color:rgba(244,203,168,.5);background:rgba(244,203,168,.08)}
.st-dormant{color:var(--dim);border-color:var(--line);background:rgba(255,255,255,.03)}

/* debt levels */
.debt-none{color:var(--dim);border-color:var(--line);background:rgba(255,255,255,.02)}
.debt-emerging{color:var(--sky);border-color:rgba(125,215,255,.4);background:rgba(125,215,255,.06)}
.debt-accruing{color:var(--amber);border-color:rgba(239,217,163,.5);background:rgba(239,217,163,.08)}
.debt-critical{color:#f1857f;border-color:rgba(241,133,127,.55);background:rgba(241,133,127,.1)}
.debt-critical::before{box-shadow:0 0 8px 1px currentColor}

/* logic split */
.sp-business_logic{color:var(--sky);border-color:rgba(125,215,255,.4);background:rgba(125,215,255,.06)}
.sp-unique_ip{color:var(--mint);border-color:rgba(126,240,201,.5);background:rgba(126,240,201,.08)}
.sp-vanilla_integration{color:var(--peach);border-color:rgba(244,203,168,.45);background:rgba(244,203,168,.07)}
.sp-technical{color:var(--lav);border-color:rgba(198,184,242,.4);background:rgba(198,184,242,.06)}

/* segment fills reuse the same hues (stacked distribution bars) */
.seg-keystone{background:var(--mint)}.seg-fit{background:var(--sky)}
.seg-vital_rare{background:var(--lav)}.seg-overloaded{background:var(--amber)}
.seg-fragile{background:#f1857f}.seg-freeloader{background:var(--peach)}
.seg-dormant{background:#4a5163}
.seg-business_logic{background:var(--sky)}.seg-unique_ip{background:var(--mint)}
.seg-vanilla_integration{background:var(--peach)}.seg-technical{background:var(--lav)}

/* ======================================================================== */
/*  page header shared by product pages                                     */
/* ======================================================================== */
.pg-head{margin-bottom:6px}
.pg-head .idx{margin-bottom:4px}
.pg-sub{color:var(--soft);font-size:.92rem;max-width:70ch;margin-top:8px}
.icp-note{font-family:var(--mono);font-size:.68rem;color:var(--dim);margin-top:10px}
.icp-note b{color:var(--sky);font-weight:600}

/* ======================================================================== */
/*  OKR hero band (project dashboard)                                       */
/* ======================================================================== */
.okr-hero{margin-top:20px;border:1px solid var(--line-lum);border-radius:20px;
  padding:26px 28px;background:linear-gradient(180deg,var(--panel),var(--bg-2));
  box-shadow:var(--raise),inset 0 0 60px -46px var(--mint)}
.okr-obj{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:4px}
.okr-obj b{color:var(--mint);font-weight:600}
.okr-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start}
@media(max-width:880px){.okr-grid{grid-template-columns:1fr}}
.kr-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px}
@media(max-width:520px){.kr-row{grid-template-columns:1fr}}
.kr-tile{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--sunken);
  box-shadow:var(--press);position:relative;overflow:hidden}
.kr-tile::before{content:"";position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--kc)}
.kr-tile.ok{--kc:var(--mint)}
.kr-tile.miss{--kc:var(--amber)}
.kr-l{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.kr-v{font-family:var(--mono);font-size:1.35rem;font-weight:700;margin-top:2px;color:var(--ink)}
.kr-t{font-family:var(--mono);font-size:.64rem;color:var(--dim);margin-top:2px}
.kr-flag{position:absolute;top:10px;right:12px;font-family:var(--mono);font-size:.8rem}
.kr-tile.ok .kr-flag{color:var(--mint)}
.kr-tile.miss .kr-flag{color:var(--amber)}

/* quick nav (order personalized by ICP focus) */
.quicknav{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.quicknav a{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;padding:6px 12px;
  border-radius:18px;border:1px solid var(--line);color:var(--soft);background:var(--panel);
  transition:transform .12s,border-color .15s}
.quicknav a:hover{transform:translateY(-1px);border-color:var(--line-lum);color:var(--ink)}
.quicknav a:first-child{border-color:var(--line-lum);color:var(--mint)}

/* ======================================================================== */
/*  team health snapshot: stacked state bar                                 */
/* ======================================================================== */
.state-bar{display:flex;height:18px;border-radius:9px;overflow:hidden;background:var(--sunken);
  box-shadow:var(--press);margin:8px 0 12px}
.state-bar span{display:block;height:100%;min-width:0;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.state-legend{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:.7rem;color:var(--soft)}
.state-legend .lg{display:inline-flex;align-items:center;gap:6px}
.state-legend .lg i{width:9px;height:9px;border-radius:3px;display:inline-block}
.state-legend .lg b{color:var(--ink);font-weight:600}

/* ======================================================================== */
/*  worker lists (critical / optimize / freeloaders / experts)              */
/* ======================================================================== */
.wk-why{border:1px solid rgba(126,240,201,.25);border-radius:10px;background:rgba(126,240,201,.05);
  padding:10px 14px;font-size:.84rem;color:var(--soft);margin-bottom:12px}
.wk-why b{color:var(--mint)}
.wk-list{display:flex;flex-direction:column}
.wk-row{display:grid;grid-template-columns:minmax(180px,1.4fr) auto auto 1fr auto;gap:12px;
  align-items:center;padding:11px 10px;border-bottom:1px solid var(--line-2);border-radius:8px;
  transition:background .15s;cursor:pointer;text-decoration:none}
.wk-row:last-child{border-bottom:0}
.wk-row:hover{background:rgba(255,255,255,.035)}
@media(max-width:760px){.wk-row{grid-template-columns:1fr auto;row-gap:6px}}
.wk-id .wk-short{font-family:var(--mono);font-size:.86rem;font-weight:600;color:var(--ink)}
.wk-id .wk-role{font-size:.72rem;color:var(--dim)}
.wk-stats{display:flex;gap:14px;font-family:var(--mono);font-size:.7rem;color:var(--soft);justify-content:flex-end}
.wk-stats b{color:var(--ink)}
.wk-arr{font-family:var(--mono);color:var(--dim);transition:transform .18s,color .18s}
.wk-row:hover .wk-arr{transform:translateX(3px);color:var(--mint)}
.wk-empty{color:var(--dim);font-size:.86rem;padding:8px 0}

/* ======================================================================== */
/*  tech-debt ladder                                                        */
/* ======================================================================== */
.debt-ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
@media(max-width:680px){.debt-ladder{grid-template-columns:1fr 1fr}}
.dl-step{border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:var(--sunken);
  box-shadow:var(--press);position:relative}
.dl-step::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  border-radius:0 0 12px 12px;background:var(--dc);opacity:.85}
.dl-step.d-none{--dc:#3d4353}.dl-step.d-emerging{--dc:var(--sky)}
.dl-step.d-accruing{--dc:var(--amber)}.dl-step.d-critical{--dc:#f1857f}
.dl-step.d-critical{box-shadow:var(--press),inset 0 0 30px -22px #f1857f}
.dl-n{font-family:var(--mono);font-size:1.6rem;font-weight:700;color:var(--ink)}
.dl-l{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:2px}
.dl-hint{font-size:.72rem;color:var(--dim);margin-top:6px;line-height:1.45}
.debt-recos{border-top:1px solid var(--line-2);padding-top:10px}
.debt-reco{display:flex;gap:10px;align-items:baseline;padding:7px 0;font-size:.84rem;color:var(--soft);
  border-bottom:1px solid var(--line-2)}
.debt-reco:last-child{border-bottom:0}
.debt-reco .mono{font-size:.76rem;color:var(--sky)}

/* ======================================================================== */
/*  business-vs-technical split + coverage                                  */
/* ======================================================================== */
.split-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:22px}
@media(max-width:760px){.split-grid{grid-template-columns:1fr}}
.split-row{display:grid;grid-template-columns:170px 1fr 46px;gap:12px;align-items:center;
  padding:8px 0;font-size:.82rem}
.split-row .sl{color:var(--soft)}
.split-row .bar{height:12px;border-radius:6px;background:var(--sunken);box-shadow:var(--press);overflow:hidden}
.split-row .bar i{display:block;height:100%;border-radius:6px;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.split-row .n{font-family:var(--mono);font-size:.76rem;color:var(--ink);text-align:right}
.cov-tile{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--sunken);
  box-shadow:var(--press);text-align:center;align-self:start}
.cov-v{font-family:var(--mono);font-size:2.1rem;font-weight:700;color:var(--mint)}
.cov-v.na{color:var(--dim)}
.cov-l{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.cov-hint{font-size:.7rem;color:var(--dim);margin-top:8px;line-height:1.5}
.topshare-note{font-family:var(--mono);font-size:.72rem;color:var(--dim);margin-top:12px}
.topshare-note b{color:var(--lav)}

/* ======================================================================== */
/*  employees table                                                         */
/* ======================================================================== */
.emp-toolbar{display:flex;flex-direction:column;gap:10px;margin:16px 0 14px}
.emp-search{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.emp-search input{font-family:var(--mono);font-size:.82rem;color:var(--ink);background:var(--sunken);
  border:1px solid var(--line);border-radius:10px;padding:10px 14px;box-shadow:var(--press);
  min-width:260px;flex:0 1 340px}
.emp-search input:focus{outline:none;border-color:var(--mint);box-shadow:var(--press),0 0 0 3px rgba(126,240,201,.12)}
.emp-count{font-family:var(--mono);font-size:.72rem;color:var(--dim)}
.emp-count b{color:var(--mint)}
.f-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.f-chips .f-lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin-right:4px;flex:0 0 auto}
.f-chip{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;padding:5px 11px;border-radius:16px;
  border:1px solid var(--line);background:var(--panel);color:var(--soft);cursor:pointer;
  transition:border-color .15s,color .15s,transform .12s}
.f-chip:hover{transform:translateY(-1px);color:var(--ink)}
.f-chip.on{color:#06120c;background:linear-gradient(180deg,#bdeed6,#8fdcb8);border-color:transparent;font-weight:600}
.emp-table td{vertical-align:middle}
.emp-table .p-chip{font-size:.58rem;padding:2px 8px}
.emp-name .short{font-family:var(--mono);font-size:.84rem;font-weight:600;color:var(--ink)}
.emp-name .role{font-size:.7rem;color:var(--sky)}
.emp-name .full{font-family:var(--mono);font-size:.62rem;color:var(--dim);word-break:break-all}
.share-cell{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.share-bar{width:64px;height:8px;border-radius:4px;background:var(--sunken);box-shadow:var(--press);overflow:hidden}
.share-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--sky),var(--mint));border-radius:4px}
.tests-yes{color:var(--mint)}.tests-no{color:#f1857f}.tests-na{color:var(--dim)}

/* ======================================================================== */
/*  employee drilldown                                                      */
/* ======================================================================== */
.emp-hero{margin-top:20px;border:1px solid var(--line-lum);border-radius:18px;padding:24px 26px;
  background:linear-gradient(180deg,var(--panel),var(--bg-2));box-shadow:var(--raise)}
.emp-hero-top{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.emp-hero h1{font-family:var(--mono);font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.01em}
.emp-hero .chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.emp-role{font-size:.9rem;color:var(--sky);font-weight:600}
.emp-blurb{color:var(--soft);font-size:.9rem;max-width:70ch}
.emp-story{font-size:.88rem;color:var(--soft);margin-top:6px}
.emp-story b{color:var(--ink)}
.emp-loc{font-family:var(--mono);font-size:.68rem;color:var(--dim);margin-top:10px;word-break:break-all}
.stat-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:18px}
@media(max-width:760px){.stat-tiles{grid-template-columns:repeat(2,1fr)}}
.stat-tile{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--sunken);box-shadow:var(--press)}
.stat-tile .v{font-family:var(--mono);font-size:1.25rem;font-weight:700;color:var(--ink)}
.stat-tile .l{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:2px}
.spark-wrap{border:1px solid var(--line-2);border-radius:12px;background:var(--sunken);box-shadow:var(--press);
  padding:10px 12px 6px;overflow:hidden}
.spark-wrap svg{display:block;width:100%;height:auto}
.spark-x{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.62rem;color:var(--dim);padding:4px 2px 2px}
.spark-legend{display:flex;gap:14px;font-family:var(--mono);font-size:.66rem;color:var(--dim);margin-top:8px}
.spark-legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:middle}
.commit-list{display:flex;flex-direction:column}
.commit-row{display:grid;grid-template-columns:78px 1fr auto;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line-2);font-size:.84rem}
.commit-row:last-child{border-bottom:0}
.commit-sha{font-family:var(--mono);font-size:.72rem;color:var(--sky)}
.commit-msg{color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.commit-meta{font-family:var(--mono);font-size:.66rem;color:var(--dim);white-space:nowrap}
.commit-meta .add{color:var(--mint)}.commit-meta .del{color:#f1857f}
.fixprompt pre{font-family:var(--mono);font-size:.74rem;line-height:1.65;color:#c8d1e0;background:var(--sunken);
  border:1px solid var(--line-2);border-radius:10px;padding:16px;max-height:420px;overflow:auto;white-space:pre-wrap}
.two-pane{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start}
@media(max-width:860px){.two-pane{grid-template-columns:1fr}}

/* ======================================================================== */
/*  flow surfaces (OKF map + BPMN detail)                                   */
/* ======================================================================== */
.flow-stage{position:relative;border:1px solid var(--line-2);border-radius:14px;background:var(--sunken);
  box-shadow:var(--press);overflow:auto;margin-top:14px}
.flow-stage svg{display:block;min-width:100%}
.flow-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-family:var(--mono);font-size:.68rem;color:var(--soft)}
.flow-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:middle}
.flow-meta{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;color:var(--dim);margin-top:8px}
.flow-meta b{color:var(--ink)}
.live-dot{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.68rem;color:var(--mint)}
.live-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 9px 1px var(--mint);animation:pulse 2.4s infinite}
@media(prefers-reduced-motion:reduce){.live-dot::before{animation:none}}

/* call-graph nodes (colored by archetype kind, ring by state) */
.fm-node{cursor:pointer}
.fm-node rect{rx:9;stroke-width:1.2;transition:filter .2s}
.fm-node:hover rect{filter:brightness(1.3) drop-shadow(0 0 8px rgba(126,240,201,.35))}
.fm-node text{font-family:var(--mono);pointer-events:none}
.fm-node .nm{fill:#e7ebf3;font-size:11px;font-weight:600}
.fm-node .ct{fill:#6d7589;font-size:8.5px}
.fmk-business rect{fill:rgba(126,240,201,.13);stroke:rgba(126,240,201,.55)}
.fmk-technical rect{fill:rgba(125,215,255,.11);stroke:rgba(125,215,255,.5)}
.fmk-integration rect{fill:rgba(244,203,168,.12);stroke:rgba(244,203,168,.5)}
.fms-fragile rect{stroke:#f1857f}
.fms-overloaded rect{stroke:var(--amber)}
.fms-dormant rect{opacity:.45}
.fm-edge{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1.3}
.fm-edge.flowing{stroke:var(--mint);stroke-dasharray:5 9;
  animation:fm-flow 2s linear 1;filter:drop-shadow(0 0 3px rgba(126,240,201,.6))}
@keyframes fm-flow{from{stroke-dashoffset:112}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.fm-edge.flowing{animation:none;stroke-dasharray:none}}

/* BPMN shapes */
.bp-pool{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:16px;
  background:linear-gradient(180deg,var(--panel),var(--bg-2));box-shadow:var(--raise)}
.bp-pool-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:13px 18px;
  border-bottom:1px solid var(--line-2);background:rgba(255,255,255,.02)}
.bp-pool-h .nm{font-family:var(--mono);font-size:.86rem;font-weight:700;color:var(--ink);word-break:break-all}
.bp-canvas{overflow:auto;padding:10px}
.bp-canvas svg{display:block;margin:0 auto}
.bp-node text{font-family:var(--mono);fill:#e7ebf3;font-size:10.5px}
.bp-task{fill:rgba(125,215,255,.09);stroke:rgba(125,215,255,.5);stroke-width:1.2;rx:9}
.bp-decision{fill:rgba(239,217,163,.12);stroke:var(--amber);stroke-width:1.3}
.bp-start{fill:rgba(126,240,201,.12);stroke:var(--mint);stroke-width:1.4}
.bp-end{fill:rgba(126,240,201,.14);stroke:var(--mint);stroke-width:3}
.bp-error{fill:rgba(241,133,127,.13);stroke:#f1857f;stroke-width:3}
.bp-join{fill:#6d7589}
.bp-loop{fill:rgba(198,184,242,.1);stroke:var(--lav);stroke-width:1.2;rx:9}
.bp-guard{fill:rgba(126,240,201,.07);stroke:rgba(126,240,201,.45);stroke-width:1.2;rx:4}
.bp-badge{font-size:11px}
.bp-edge{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.3;marker-end:url(#bpArrow)}
.bp-edge-back{fill:none;stroke:rgba(198,184,242,.45);stroke-width:1.2;stroke-dasharray:4 5;marker-end:url(#bpArrowBack)}
.bp-elabel{font-family:var(--mono);font-size:8.5px;fill:#8d96aa}
.bp-elabel-bg{fill:#0b0e13;opacity:.85;rx:3}
.bp-live-dot{fill:var(--mint);filter:drop-shadow(0 0 5px rgba(126,240,201,.8))}
.bp-mini .bp-canvas{padding:4px}

/* upsell empty state (full-code mode) */
.upsell{border:1px dashed var(--line-lum);border-radius:18px;padding:34px 30px;margin-top:22px;
  text-align:center;background:linear-gradient(180deg,var(--panel),var(--bg-2))}
.upsell h2{font-size:1.3rem;margin-bottom:8px}
.upsell p{color:var(--soft);max-width:62ch;margin:0 auto 8px;font-size:.94rem}
.upsell pre{text-align:left;max-width:560px;margin:18px auto 0;border-radius:10px;border:1px solid var(--line);
  background:var(--sunken);padding:16px;font-family:var(--mono);font-size:.78rem;line-height:1.7;color:#c8d1e0;overflow:auto}
.upsell .k{color:var(--lav)}.upsell .s{color:var(--mint)}.upsell .c{color:var(--dim)}

/* ======================================================================== */
/*  developers                                                              */
/* ======================================================================== */
.devs-intro{color:var(--soft);font-size:.9rem;max-width:74ch;margin-top:8px}
.dev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;margin-top:20px}
.dev-card{border:1px solid var(--line);border-radius:16px;padding:20px 22px;
  background:linear-gradient(180deg,var(--panel),var(--bg-2));box-shadow:var(--raise);
  display:flex;flex-direction:column;gap:14px}
.dev-id .nm{font-weight:700;font-size:1.02rem}
.dev-id .em{font-family:var(--mono);font-size:.68rem;color:var(--dim);word-break:break-all}
.dev-align{display:flex;align-items:baseline;gap:10px}
.dev-align .v{font-family:var(--mono);font-size:2rem;font-weight:700;color:var(--mint)}
.dev-align .l{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.dev-align-bar{height:10px;border-radius:5px;background:var(--sunken);box-shadow:var(--press);overflow:hidden}
.dev-align-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--sky),var(--mint));
  transition:width 1s cubic-bezier(.2,.7,.2,1) .15s}
.dev-mini{display:flex;flex-direction:column;gap:7px}
.dev-mini .mrow{display:grid;grid-template-columns:118px 1fr 40px;gap:10px;align-items:center;
  font-family:var(--mono);font-size:.66rem;color:var(--soft)}
.dev-mini .mrow .mb{height:7px;border-radius:4px;background:var(--sunken);box-shadow:var(--press);overflow:hidden}
.dev-mini .mrow .mb i{display:block;height:100%;border-radius:4px}
.dev-mini .m-keystone i{background:var(--mint)}
.dev-mini .m-fragile i{background:#f1857f}
.dev-mini .m-vanilla i{background:var(--peach)}
.dev-mini .pc{text-align:right;color:var(--ink)}
.dev-facts{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:.68rem;color:var(--dim);
  border-top:1px solid var(--line-2);padding-top:10px}
.dev-facts b{color:var(--ink)}
.dev-advice{border-top:1px solid var(--line-2);padding-top:12px}
.dev-advice .h{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sky);margin-bottom:8px}
.dev-advice ol{margin:0;padding-left:18px;display:grid;gap:8px;font-size:.82rem;color:var(--soft)}
.dev-advice li::marker{color:var(--mint);font-family:var(--mono)}
.dev-note{font-family:var(--mono);font-size:.7rem;color:var(--dim);margin-top:20px;max-width:78ch;line-height:1.7}

/* ======================================================================== */
/*  shared small bits                                                       */
/* ======================================================================== */
.panel .h-mini{font-size:.95rem;margin-bottom:10px}
.mini-note{font-family:var(--mono);font-size:.68rem;color:var(--dim)}
.anchor-target{scroll-margin-top:96px}
.tbl-scroll{overflow-x:auto}
@media(max-width:640px){
  .wk-stats{flex-wrap:wrap;justify-content:flex-start}
  .cn-tabs{font-size:.62rem}
  .cn-tabs a{padding:8px 11px 10px}
}

/* ======================================================================
   MERMAID CONTROL-FLOW POOLS (flow-mermaid.js) — replaces the hand-rolled
   BPMN SVG panels. Header keeps the FULL dotted function name visible:
   it wraps, never ellipsizes.
   ====================================================================== */
.mermaid-pool{margin-top:18px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,var(--panel),var(--bg-2));box-shadow:var(--raise);
  overflow:hidden}
.mermaid-pool-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;
  padding:13px 18px;border-bottom:1px solid var(--line)}
.mermaid-fn-name{font-family:var(--mono);font-weight:600;font-size:.86rem;
  color:var(--ink);min-width:0;flex:1 1 260px;white-space:normal;
  overflow-wrap:anywhere;word-break:break-word;text-overflow:clip}
.mermaid-meta{margin:0}
.mermaid-canvas{padding:16px 18px 20px;overflow-x:auto;overflow-y:hidden;min-height:120px}
.mermaid-canvas svg{display:block;margin:0 auto;max-width:100%;height:auto}
.mermaid-mini{padding:10px 8px 12px;min-height:90px}
.mermaid-mini svg{max-height:360px}
.mermaid-fallback{font-family:var(--mono);font-size:.72rem;color:var(--dim);
  margin:0;padding:8px 4px}

/* ══ project side rail — the building directory ══════════════════════════
   Included via codensm/_rail.html as the first child of main.wrap.dash.
   ≥1100px: main.wrap becomes a 2-col grid; the rail owns col 1 and sticks;
   every other child stacks in col 2 — no per-template layout changes.
   <1100px: the rail flattens into a horizontal scroll directory. */

body:has(.cn-rail) main.wrap.dash{max-width:1500px}
@media(min-width:1100px){
  body:has(.cn-rail) main.wrap.dash{
    display:grid;grid-template-columns:216px minmax(0,1fr);
    column-gap:36px;align-items:start}
  body:has(.cn-rail) main.wrap.dash>*{grid-column:2;min-width:0}
  body:has(.cn-rail) main.wrap.dash>.cn-rail{
    grid-column:1;grid-row:1/span 400;
    position:sticky;top:74px;align-self:start;
    max-height:calc(100vh - 90px);overflow-y:auto}
}

.cn-rail{display:flex;flex-direction:column;gap:18px;padding:16px 14px 14px;
  background:rgba(255,255,255,.02);border:1px solid var(--line,rgba(255,255,255,.08));
  border-radius:14px}
.rail-head{display:flex;gap:10px;align-items:flex-start;padding:0 2px 14px;
  border-bottom:1px solid var(--line,rgba(255,255,255,.08))}
.rail-lamp{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none;
  background:var(--dim,#6d7589);box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.rail-lamp.band-good{background:var(--mint,#7ef0c9);box-shadow:0 0 10px rgba(126,240,201,.5);
  animation:railPulse 3.2s ease-in-out infinite}
.rail-lamp.band-warn{background:#ffd27d;box-shadow:0 0 10px rgba(255,210,125,.45);
  animation:railPulse 2.2s ease-in-out infinite}
.rail-lamp.band-bad{background:#ff8d7a;box-shadow:0 0 10px rgba(255,141,122,.5);
  animation:railPulse 1.4s ease-in-out infinite}
@keyframes railPulse{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.rail-lamp{animation:none!important}}
.rail-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.rail-proj{font-weight:700;font-size:.92rem;color:var(--ink,#e7ebf3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-org{font-family:var(--mono,monospace);font-size:.68rem;color:var(--dim,#6d7589);
  text-decoration:none}
.rail-org:hover{color:var(--sky,#7dd7ff)}
.rail-switch{width:100%;background:transparent;color:var(--ink,#e7ebf3);
  border:1px solid var(--line,rgba(255,255,255,.08));border-radius:8px;
  font:600 .82rem/1.3 inherit;padding:5px 8px;max-width:160px}

.rail-grp{display:flex;flex-direction:column;gap:1px}
.rail-cap{font-family:var(--mono,monospace);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim,#6d7589);padding:0 10px 7px}
.rail-grp a{position:relative;display:block;padding:7px 10px;border-radius:9px;
  color:var(--dim,#6d7589);text-decoration:none;font-size:.88rem;font-weight:500;
  transition:color .15s,background .15s}
.rail-grp a:hover{color:var(--ink,#e7ebf3);background:rgba(255,255,255,.04)}
.rail-grp a.on{color:var(--mint,#7ef0c9);background:rgba(126,240,201,.07)}
.rail-grp a.on::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:2px;
  border-radius:2px;background:var(--mint,#7ef0c9)}
/* section header (top-level destination) — bolder than its children */
.rail-top{font-weight:700;font-size:.92rem;color:var(--ink,#e7ebf3)!important;padding:8px 10px 6px}
.rail-top .rail-purpose{font-weight:400}
.rail-top.on{color:var(--mint,#7ef0c9)!important}
.rail-badge{margin-left:4px}
/* second-level rail — the active section's children, indented */
.rail-sub{display:flex;flex-direction:column;gap:1px;margin:0 0 2px 4px;
  padding-left:8px;border-left:1px solid var(--line,rgba(255,255,255,.08))}
.rail-sub a{font-size:.82rem;padding:5px 10px}
.rail-open{padding-bottom:6px}

.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;
  padding:12px 10px 0;border-top:1px solid var(--line,rgba(255,255,255,.08));
  font-size:.8rem}
.rail-foot a{color:var(--dim,#6d7589);text-decoration:none}
.rail-foot a:hover{color:var(--ink,#e7ebf3)}

/* mobile: horizontal directory strip */
@media(max-width:1099px){
  .cn-rail{flex-direction:row;align-items:center;gap:4px;overflow-x:auto;
    padding:10px 12px;margin:0 0 18px;scrollbar-width:none}
  .cn-rail::-webkit-scrollbar{display:none}
  .rail-head{border-bottom:0;padding:0 10px 0 0;border-right:1px solid var(--line,rgba(255,255,255,.08));
    margin-right:6px;flex:none}
  .rail-switch{max-width:130px}
  .rail-grp{flex-direction:row;flex:none;align-items:center}
  .rail-cap{display:none}
  .rail-purpose{display:none}
  .rail-grp a{white-space:nowrap;padding:6px 10px}
  .rail-top{padding:6px 10px}
  .rail-sub{flex-direction:row;margin:0 0 0 4px;padding-left:6px;border-left:1px solid var(--line,rgba(255,255,255,.08))}
  .rail-grp a.on::before{left:10px;right:10px;top:auto;bottom:2px;width:auto;height:2px}
  .rail-foot{margin:0 0 0 6px;padding:0 0 0 10px;border-top:0;
    border-left:1px solid var(--line,rgba(255,255,255,.08));flex-direction:row;flex:none}
}

/* ══ the one page: prioritised queue + drill tiles ══════════════════════ */
.home-verdict{display:flex;align-items:flex-start;gap:10px;margin:2px 0 14px;
  padding:12px 16px;border:1px solid var(--line,rgba(255,255,255,.08));border-radius:12px;
  background:rgba(255,255,255,.02)}
.home-verdict .hv-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:none;background:var(--mint,#7ef0c9)}
.home-verdict p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink,#e7ebf3)}
.home-queue-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 0 10px}
.home-queue-h h2{margin:0;font-size:1.15rem}
.home-queue-h .hq-count{font-family:var(--mono,monospace);font-size:.72rem;letter-spacing:.06em;color:var(--dim,#6d7589)}
.home-queue-h .hq-count a{color:var(--sky,#7dd7ff);text-decoration:none}
.home-queue{display:flex;flex-direction:column;gap:12px}
.home-empty{padding:16px;border:1px dashed var(--line,rgba(255,255,255,.12));border-radius:12px;
  color:var(--dim,#6d7589);font-size:14px}
.home-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:16px 0 8px}
.home-tile{display:block;text-decoration:none;border:1px solid var(--line,rgba(255,255,255,.08));
  border-radius:13px;padding:15px 16px;background:rgba(255,255,255,.02);transition:border-color .15s,background .15s}
.home-tile:hover{border-color:rgba(126,240,201,.4);background:rgba(126,240,201,.04)}
.home-tile .ht-label{font-weight:700;font-size:.98rem;color:var(--ink,#e7ebf3)}
.home-tile .ht-purpose{font-family:var(--mono,monospace);font-size:.6rem;letter-spacing:.02em;
  color:var(--dim,#6d7589);text-transform:none;margin:2px 0 10px;line-height:1.4}
.home-tile .ht-stats{display:flex;flex-wrap:wrap;gap:14px}
.home-tile .ht-stat{display:flex;flex-direction:column}
.home-tile .ht-v{font-family:var(--mono,monospace);font-size:1.3rem;color:var(--mint,#7ef0c9);line-height:1.1}
.home-tile .ht-l{font-size:.68rem;color:var(--dim,#6d7589);margin-top:2px}
.home-tile .ht-go{display:block;margin-top:10px;font-size:.72rem;color:var(--sky,#7dd7ff)}

/* ══ settings hub ═══════════════════════════════════════════════════════ */
.set-head{margin:4px 0 22px}
.set-head h1{font-size:1.7rem;margin:0 0 6px}
.set-locked{margin-top:10px;padding:10px 14px;border:1px solid rgba(255,210,125,.35);
  border-radius:10px;background:rgba(255,210,125,.06);font-size:.9rem}
.set-locked a{color:var(--sky,#7dd7ff)}
.set-card{background:rgba(255,255,255,.02);border:1px solid var(--line,rgba(255,255,255,.08));
  border-radius:14px;padding:22px 24px;margin:0 0 18px}
.set-card-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.set-card-h h2{font-size:1.08rem;margin:0}
.set-status{font-family:var(--mono,monospace);font-size:.7rem;padding:3px 10px;border-radius:99px;
  border:1px solid var(--line,rgba(255,255,255,.08));color:var(--dim,#6d7589)}
.set-status.ok{color:var(--mint,#7ef0c9);border-color:rgba(126,240,201,.3)}
.set-status.todo{color:#ffd27d;border-color:rgba(255,210,125,.3)}
.set-status.err{color:#ff8d7a;border-color:rgba(255,141,122,.35)}
.set-why{color:var(--dim,#6d7589);font-size:.92rem;max-width:66ch;margin:8px 0 16px}
.set-why code{color:var(--ink,#e7ebf3)}
.set-row{margin:0 0 14px}
.set-key .keypre{margin:6px 0 10px;user-select:all}
.set-key-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn.quiet{opacity:.65}
.btn.quiet:hover{opacity:1}
.set-more{margin-top:14px}
.set-more summary,.set-guide summary{cursor:pointer;color:var(--sky,#7dd7ff);font-size:.9rem}
.set-guide{margin-top:16px;border:1px dashed var(--line,rgba(255,255,255,.12));
  border-radius:12px;padding:14px 18px}
.guide-steps{margin:12px 0 8px;padding-left:20px;display:flex;flex-direction:column;gap:9px;
  font-size:.92rem}
.guide-steps li b{color:var(--ink,#e7ebf3)}
.guide-steps li i{color:var(--sky,#7dd7ff);font-style:normal}
.guide-alt{margin-top:12px;padding:10px 14px;border-left:2px solid var(--line,rgba(255,255,255,.12));
  font-size:.86rem;color:var(--dim,#6d7589)}
.guide-alt b{color:var(--ink,#e7ebf3)}
.set-err{margin:0 0 14px;padding:12px 16px;border:1px solid rgba(255,141,122,.35);
  border-radius:10px;background:rgba(255,141,122,.06);font-size:.9rem}
.set-inline-actions{margin-top:12px;display:flex;gap:8px}
.set-split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.set-split{grid-template-columns:1fr}}
.cfg-link{margin:14px 0 0;font-size:.9rem;color:var(--dim,#6d7589)}
.cfg-link a{color:var(--sky,#7dd7ff)}

/* collapsed dashboard drawers (demo trim): header row visible, body one click away */
details.dash-drawer > summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px}
details.dash-drawer > summary::-webkit-details-marker{display:none}
details.dash-drawer .drawer-cue{margin-left:auto;font-family:var(--mono,monospace);font-size:.68rem;color:var(--dim,#6d7589);border:1px solid var(--line,rgba(255,255,255,.08));padding:2px 10px;border-radius:99px}
details.dash-drawer[open] .drawer-cue{color:var(--mint,#7ef0c9)}
details.dash-drawer[open] > summary{margin-bottom:12px}


/* dashboard sub-tabs: comprehension over completeness */
.cn-dashtabs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 18px;position:sticky;top:64px;z-index:20;background:rgba(10,12,17,.94);backdrop-filter:blur(8px);padding:10px 0;border-bottom:1px solid var(--line,rgba(255,255,255,.08))}
.cn-dashtabs button{font:600 .8rem/1 Inter,sans-serif;color:var(--dim,#6d7589);background:transparent;border:1px solid var(--line,rgba(255,255,255,.08));border-radius:99px;padding:8px 16px;cursor:pointer;transition:color .15s,border-color .15s}
.cn-dashtabs button:hover{color:var(--ink,#e7ebf3)}
.cn-dashtabs button.on{color:var(--mint,#7ef0c9);border-color:var(--mint,#7ef0c9);background:rgba(126,240,201,.07)}
.cn-dashtabs .dt-read{flex-basis:100%;font-size:.8rem;color:var(--dim,#6d7589);padding-top:6px}
/* employees live-update microanimations */
@keyframes cnPulseUp{0%{background:rgba(126,240,201,.35)}100%{background:transparent}}
@keyframes cnPulseErr{0%{background:rgba(255,141,122,.5);transform:translateX(0)}25%{transform:translateX(-2px)}50%{transform:translateX(2px)}100%{background:transparent;transform:none}}
.cell-up{animation:cnPulseUp 1.2s ease-out}
.cell-err{animation:cnPulseErr .7s ease-out}
@media(prefers-reduced-motion:reduce){.cell-up,.cell-err{animation:none}}


/* commit drill-down */
.cmt-detail{margin-top:10px}
.cmt-detail summary{cursor:pointer;font-size:.72rem;color:var(--sky,#7dd7ff);list-style:none}
.cmt-detail summary::-webkit-details-marker{display:none}
.cmt-detail-in{margin-top:10px;padding:12px 16px;border:1px dashed var(--line,rgba(255,255,255,.1));border-radius:10px}
.cd-h{font-size:.62rem;letter-spacing:.14em;color:var(--dim,#6d7589);margin:10px 0 6px}
.cd-h:first-child{margin-top:0}
.cd-files{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:.78rem}
.cd-read{margin-top:12px;font-size:.86rem;border-left:2px solid var(--mint,#7ef0c9);padding-left:10px}

/* ── Team health snapshot: the founder's read-in-two-seconds verdict ──── */
.snap-verdict{font-size:1.08rem;line-height:1.5;color:var(--ink);font-weight:600;
  max-width:56ch;margin:0 0 16px}
.snap-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 20px}
.snap-g{border:1px solid var(--line);border-top:3px solid var(--dim);border-radius:12px;
  padding:12px 14px;background:var(--raise,#161b25)}
.snap-g b{display:block;font-size:1.9rem;font-weight:700;line-height:1;letter-spacing:-.02em}
.snap-g span{display:block;font-weight:600;color:var(--ink);margin:5px 0 3px;font-size:.9rem}
.snap-g i{display:block;font-style:normal;font-size:.72rem;color:var(--dim);line-height:1.4}
.snap-g-healthy{border-top-color:var(--mint)}
.snap-g-healthy b{color:var(--mint)}
.snap-g-attention{border-top-color:var(--amber)}
.snap-g-attention b{color:var(--amber)}
.snap-g-idle{border-top-color:var(--dim)}
.snap-g-idle b{color:var(--dim)}
.snap-detail-lead{font-family:var(--mono);font-size:.7rem;color:var(--dim);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px}
@media(max-width:560px){.snap-groups{grid-template-columns:1fr}}


/* ═══════════════════════════════════════════════════════════════════════════
   Settings gear (.cn-gear) — the sitewide "where do I change this?" control.
   Markup: templates/codensm/_gear.html. Sized to sit in a page header's
   top-right without disturbing the baseline of the h1 beside it.
   ═══════════════════════════════════════════════════════════════════════ */
.cn-gear{position:relative;display:inline-block}
.cn-gear>summary{list-style:none;cursor:pointer}
.cn-gear>summary::-webkit-details-marker{display:none}
.cn-gear>summary::marker{content:""}
.cn-gear-btn{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:9px;color:var(--dim,#6d7589);
  border:1px solid var(--line,rgba(255,255,255,.08));background:transparent;
  transition:color .15s,border-color .15s,background .15s}
.cn-gear-btn:hover{color:var(--ink,#e7ebf3);border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.04)}
.cn-gear-btn:focus-visible{outline:2px solid var(--sky,#7dd7ff);outline-offset:2px}
.cn-gear[open]>.cn-gear-btn{color:var(--ink,#e7ebf3);border-color:rgba(255,255,255,.2)}
/* The gear rotates only as feedback for a state change the user just caused. */
.cn-gear>summary svg{transition:transform .25s ease}
.cn-gear[open]>summary svg{transform:rotate(45deg)}
.cn-gear-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:40;
  min-width:210px;padding:6px;border-radius:11px;
  background:var(--raise,#141926);border:1px solid var(--line,rgba(255,255,255,.1));
  box-shadow:0 16px 40px rgba(0,0,0,.5);display:grid;gap:1px;
  animation:cnGearIn .13s ease-out}
@keyframes cnGearIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .cn-gear-menu{animation:none}
  .cn-gear>summary svg{transition:none}
}
.cn-gear-item{display:block;padding:8px 10px;border-radius:7px;font:500 .84rem/1.3 Inter,sans-serif;
  color:var(--ink,#e7ebf3);text-decoration:none;white-space:nowrap}
.cn-gear-item:hover{background:rgba(255,255,255,.06)}
.cn-gear-item:focus-visible{outline:2px solid var(--sky,#7dd7ff);outline-offset:-2px}
/* A header that hosts a gear puts it opposite the title rather than under it. */
.cn-gear-host{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}


/* ═══════════════════════════════════════════════════════════════════════════
   Integrations directory (.zc-*) — one card per source, Zapier-shaped:
   mark, name, what-flows-in, a status you can read from across the room, and
   exactly one primary action. Everything else hides in a kebab or a panel.
   ═══════════════════════════════════════════════════════════════════════ */
.zc-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:26px 0 6px}
.zc-search{flex:1 1 280px;max-width:420px;position:relative;display:flex;align-items:center}
.zc-search svg{position:absolute;left:12px;color:var(--dim,#6d7589);pointer-events:none}
.zc-search input{width:100%;padding:10px 12px 10px 36px;border-radius:10px;
  background:#0B0F19;border:1px solid var(--line,rgba(255,255,255,.1));
  color:var(--ink,#e7ebf3);font:400 .88rem/1 Inter,sans-serif}
.zc-search input:focus{outline:none;border-color:var(--sky,#7dd7ff)}
.zc-search input::placeholder{color:var(--dim,#6d7589)}
.zc-count{font:400 .78rem/1 Inter,sans-serif;color:var(--dim,#6d7589)}

.zc-group{margin-top:30px;scroll-margin-top:20px}
.zc-group>h2{font:600 .72rem/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim,#6d7589);margin:0 0 12px;display:flex;align-items:center;gap:10px}
.zc-group>h2::after{content:"";flex:1;height:1px;background:var(--line,rgba(255,255,255,.08))}
.zc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;align-items:start}

.zc{background:#0B0F19;border:1px solid var(--line,rgba(255,255,255,.09));
  border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;
  transition:border-color .16s,transform .16s}
.zc:hover{border-color:rgba(255,255,255,.18)}
.zc[data-state="connected"]{border-color:rgba(16,185,129,.28)}
.zc[data-state="error"]{border-color:rgba(239,68,68,.4)}
.zc-h{display:flex;align-items:flex-start;gap:11px}
.zc-mark{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.05);
  border:1px solid var(--line,rgba(255,255,255,.08));color:var(--ink,#e7ebf3)}
.zc[data-state="connected"] .zc-mark{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);color:#10B981}
.zc-id{flex:1;min-width:0}
.zc-id h3{margin:0;font:600 .96rem/1.25 Inter,sans-serif;color:var(--ink,#e7ebf3)}
.zc-flow{margin:4px 0 0;font:400 .78rem/1.45 Inter,sans-serif;color:var(--dim,#6d7589)}

.zc-status{display:flex;align-items:center;gap:7px;font:600 .8rem/1 Inter,sans-serif}
.zc-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:#6d7589}
.zc[data-state="connected"] .zc-dot{background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.16)}
.zc[data-state="error"] .zc-dot{background:#EF4444;box-shadow:0 0 0 3px rgba(239,68,68,.16)}
.zc[data-state="connected"] .zc-word{color:#10B981}
.zc[data-state="error"] .zc-word{color:#EF4444}
.zc-word{color:var(--dim,#6d7589)}
.zc-sub{color:var(--dim,#6d7589);font-weight:400;font-size:.76rem}
.zc-meta{font:400 .71rem/1.5 var(--mono,'JetBrains Mono',monospace);color:var(--dim,#6d7589);
  margin:0;word-break:break-word}
.zc-err{font:400 .76rem/1.45 Inter,sans-serif;color:#EF4444;margin:0;word-break:break-word}
.zc-act{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:2px}
.zc-act .btn{font-size:.8rem}
.zc-conns{display:grid;gap:8px;margin:0}
.zc-conn{border:1px solid var(--line,rgba(255,255,255,.07));border-radius:9px;
  padding:9px 10px;background:rgba(255,255,255,.015);display:flex;
  justify-content:space-between;align-items:flex-start;gap:8px}
.zc-conn-id{min-width:0}
.zc-conn-id b{display:block;font:600 .82rem/1.3 Inter,sans-serif;color:var(--ink,#e7ebf3)}

/* Kebab: the overflow menu for a source that is already working. */
.zc-kebab{position:relative;flex:0 0 auto}
.zc-kebab>summary{list-style:none;cursor:pointer;width:26px;height:26px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;color:var(--dim,#6d7589)}
.zc-kebab>summary::-webkit-details-marker{display:none}
.zc-kebab>summary::marker{content:""}
.zc-kebab>summary:hover{background:rgba(255,255,255,.06);color:var(--ink,#e7ebf3)}
.zc-kebab>summary:focus-visible{outline:2px solid var(--sky,#7dd7ff);outline-offset:1px}
.zc-kebab-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:30;min-width:150px;
  padding:5px;border-radius:10px;background:var(--raise,#141926);
  border:1px solid var(--line,rgba(255,255,255,.1));box-shadow:0 14px 34px rgba(0,0,0,.5);
  display:grid;gap:1px}
.zc-kebab-menu form{display:block;margin:0}
.zc-kebab-menu button,.zc-kebab-menu a{display:block;width:100%;text-align:left;
  padding:7px 9px;border-radius:6px;border:0;background:transparent;cursor:pointer;
  font:500 .8rem/1.3 Inter,sans-serif;color:var(--ink,#e7ebf3);text-decoration:none}
.zc-kebab-menu button:hover,.zc-kebab-menu a:hover{background:rgba(255,255,255,.06)}
.zc-kebab-menu button.danger{color:#EF4444}

/* Panel: the connect form, as a modal, with no framework and no state to lose.
   :target means the URL says which panel is open — so a redirect back to
   #meetings closes it, and the back button does what it looks like it does. */
.zc-panel{display:none}
.zc-panel:target{display:block;position:fixed;inset:0;z-index:100}
.zc-scrim{position:absolute;inset:0;background:rgba(4,6,12,.72);backdrop-filter:blur(3px);
  display:block}
.zc-panel-in{position:relative;z-index:1;margin:6vh auto;max-width:620px;width:calc(100% - 32px);
  max-height:88vh;overflow:auto;background:#0B0F19;
  border:1px solid var(--line,rgba(255,255,255,.14));border-radius:16px;padding:22px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);animation:zcPanelIn .16s ease-out}
@keyframes zcPanelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.zc-panel-in{animation:none}}
.zc-panel-h{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:6px}
.zc-panel-h h3{margin:0;font:600 1.1rem/1.3 Inter,sans-serif;color:var(--ink,#e7ebf3)}
.zc-x{color:var(--dim,#6d7589);text-decoration:none;font-size:1.4rem;line-height:1;
  padding:2px 8px;border-radius:7px}
.zc-x:hover{background:rgba(255,255,255,.07);color:var(--ink,#e7ebf3)}
.zc-panel-flow{font:400 .82rem/1.5 Inter,sans-serif;color:var(--dim,#6d7589);margin:0 0 14px}
.zc-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.zc-row input[type=text],.zc-row input[type=password],.zc-row select{flex:1 1 200px;min-width:0}
.zc-steps{margin:16px 0 0;padding:14px 14px 14px 30px;border-radius:10px;
  background:rgba(255,255,255,.02);border:1px solid var(--line,rgba(255,255,255,.07));
  font:400 .82rem/1.6 Inter,sans-serif;color:var(--dim,#6d7589)}
.zc-steps li{margin:0 0 6px}
.zc-steps li:last-child{margin-bottom:0}
.zc-steps b{color:var(--ink,#e7ebf3)}

/* The installer prompt: a wall of text nobody reads and every agent does. */
.zc-prompt{margin-top:14px}
.zc-prompt-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.zc-prompt-h b{font:600 .84rem/1.3 Inter,sans-serif;color:var(--ink,#e7ebf3)}
.zc-prompt pre{max-height:340px;overflow:auto;white-space:pre-wrap;word-break:break-word;
  font:400 .7rem/1.55 var(--mono,'JetBrains Mono',monospace);
  background:#070A11;border:1px solid var(--line,rgba(255,255,255,.09));
  border-radius:10px;padding:14px;color:#b9c2d4;margin:0}
.zc-why{font:400 .78rem/1.5 Inter,sans-serif;color:var(--dim,#6d7589);margin:8px 0 0}

.zc-empty{grid-column:1/-1;padding:22px;text-align:center;border-radius:12px;
  border:1px dashed var(--line,rgba(255,255,255,.12));color:var(--dim,#6d7589);
  font:400 .85rem/1.5 Inter,sans-serif}
@media(max-width:560px){.zc-grid{grid-template-columns:1fr}}

/* Corner variant: for the existing `.pg-head` blocks, whose children are a flat
   run of <div>/<h1>/<p>. Absolute placement buys the gear its top-right seat
   without wrapping four pages' worth of markup in a new flex container. */
.cn-gear-corner{position:relative}
.cn-gear-corner>.cn-gear{position:absolute;top:2px;right:0;z-index:20}
@media(max-width:640px){.cn-gear-corner>.cn-gear{position:static;display:block;margin-bottom:8px}}
/* project.html: the freshness badge already owns the header's top-right corner,
   so the gear shares that seat rather than stacking on top of it. */
.cn-gear-pair{display:flex;align-items:center;gap:8px}