/* 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}