/* ════════════════════════════════════════════════════════════════════════
   CodeNSM texture layer — surface grain, machined elevation, motion craft.
   Loads AFTER codensm.css / product.css / cadence.css / security.css
   (linked from templates/codensm/_nav.html, so it wins specificity ties).

   EXTENDS the instrument-panel language in DESIGN_LANGUAGE.md: same pastel
   neons, same house ease (.2,.7,.2,1), same "glow is reserved for live
   data" rule. This file adds the physical layer: film grain, dual-tone
   machined edges, layered ambient+key shadows, brushed-glass sheen on
   verdict surfaces, page-load stagger, one-time number settle, and
   micro-interactions (row accent reveal, chip glow, press states).

   Constraints honored: transform/opacity-only motion (zero CLS), no JS,
   no images/fonts/CDNs, full prefers-reduced-motion kill-switch at EOF.
   Office page (office.css/office.js canvas) is deliberately untouched.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── texture ─────────────────────────────────────────────────────────── */
  --tx-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* ── elevation: ambient wash + key light, layered ────────────────────── */
  --tx-el-1:0 1px 2px rgba(0,0,0,.35),0 6px 18px -10px rgba(0,0,0,.6);
  --tx-el-2:0 1px 2px rgba(0,0,0,.4),0 14px 34px -16px rgba(0,0,0,.72);
  --tx-el-3:0 2px 4px rgba(0,0,0,.45),0 26px 54px -20px rgba(0,0,0,.8);
  /* ── machined dual-tone edge: light catch on top, shadow underneath ──── */
  --tx-edge:inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.42);
  --tx-edge-soft:inset 0 1px 0 rgba(255,255,255,.04);
  /* ── pressed / etched ────────────────────────────────────────────────── */
  --tx-inset:inset 0 2px 5px rgba(0,0,0,.5),inset 0 1px 0 rgba(0,0,0,.28);
  /* ── brushed-glass sheen (verdict strips, hero bands) ────────────────── */
  --tx-sheen:linear-gradient(178deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.014) 38%,rgba(0,0,0,0) 55%,rgba(0,0,0,.12) 100%);
  /* ── motion ──────────────────────────────────────────────────────────── */
  --tx-ease:cubic-bezier(.2,.7,.2,1);
  --tx-fast:120ms;
  --tx-med:200ms;
  --tx-settle:560ms;
}

/* ── keyframes ───────────────────────────────────────────────────────────── */
@keyframes tx-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes tx-settle{0%{opacity:0;transform:translateY(5px) scale(.97)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes tx-underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tx-draw{to{stroke-dashoffset:0}}
@keyframes tx-confirm{0%{transform:scale(1)}35%{transform:scale(1.08)}100%{transform:scale(1)}}

/* ════════════════════════════════════════════════════════════════════════
   1 · FILM GRAIN — one fixed pass over the whole instrument panel.
   Opacity-only (no blend mode: cheap to composite over the office canvas).
   Sits above content, below nav (60) / drawer (90) / loadbar (9999).
   ════════════════════════════════════════════════════════════════════════ */
html::after{content:"";position:fixed;inset:0;z-index:55;pointer-events:none;
  background-image:var(--tx-grain);background-size:160px 160px;opacity:.03}

/* ════════════════════════════════════════════════════════════════════════
   2 · MACHINED ELEVATION — raised surfaces get layered ambient+key shadows
   plus the dual-tone edge (light top lip, dark under-edge). Surfaces that
   carry a data glow keep it — glow re-stated after the edge.
   ════════════════════════════════════════════════════════════════════════ */
.panel,.card,.f,.step,.dev-card,.proj-card,.trend-card,.reco-panel,
.bp-pool,.mermaid-pool,.waitcard,.plan,.term,.metrics,.emp-hero,
.cd-card,.cd-stat-card,.cd-signal,.cd-profile,.cd-ctx-q,.cd-act,.cd-msg,
.sec-empty,.sec-gap,.sec-dead,.snap-g,.dept-card,.dept-card2,.ingest-help{
  box-shadow:var(--tx-el-2),var(--tx-edge)}
.card,.f,.step,.dept-card,.dept-card2,.cd-card,.cd-signal,.cd-stat-card,
.cd-profile,.cd-ctx-q,.cd-act,.cd-msg,.sec-gap,.sec-dead,.snap-g{
  box-shadow:var(--tx-el-1),var(--tx-edge)}
/* glow carriers: edge + elevation + their reserved data glow, restated */
.nsm2{box-shadow:var(--tx-el-2),var(--tx-edge),inset 0 0 40px -30px var(--bc,transparent)}
.okr-hero{box-shadow:var(--tx-el-2),var(--tx-edge),inset 0 0 60px -46px var(--mint)}
.plan.hot{box-shadow:var(--tx-el-2),var(--tx-edge),0 0 40px -22px var(--mint)}
.wiz-card{box-shadow:var(--tx-el-3),var(--tx-edge)}
.dept-card2.active{box-shadow:var(--tx-el-1),var(--tx-edge),0 0 0 2px rgba(169,230,201,.25)}
/* cards that lift on hover rise a full elevation step */
.card:hover,.f:hover,.proj-card:hover,.dept-card2:hover{
  box-shadow:var(--tx-el-3),var(--tx-edge)}
.card,.f,.proj-card,.dept-card2,.chip,.quicknav a{
  transition:transform var(--tx-fast) var(--tx-ease),box-shadow var(--tx-fast) var(--tx-ease),border-color var(--tx-med) var(--tx-ease)}

/* ════════════════════════════════════════════════════════════════════════
   3 · BRUSHED-GLASS SHEEN — verdict strips and hero bands read as one
   machined pane: faint top light, hairline mid, weighted base.
   ════════════════════════════════════════════════════════════════════════ */
.nsm2,.okr-hero,.metrics,.emp-hero,.snap-g,.cd-signal,.cd-stat-card,.wiz-card{position:relative}
.nsm2::after,.okr-hero::after,.metrics::after,.emp-hero::after,.snap-g::after,
.cd-signal::after,.cd-stat-card::after,.wiz-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--tx-sheen);pointer-events:none}

/* ════════════════════════════════════════════════════════════════════════
   4 · PRESSED STATES — active tabs sit INTO the panel; small controls give
   a key-press. (.btn already has the house key-cap travel — untouched.)
   ════════════════════════════════════════════════════════════════════════ */
.cn-tabs a.on{background:var(--sunken);box-shadow:var(--tx-inset)}
.cn-dashtabs button.on{box-shadow:var(--tx-inset)}
.f-chip:active,.sec-lens-btn:active,.copybtn:active,.fresh-badge:active,
.cn-dashtabs button:active,.proj-switch:active,.drawer-x:active,
.quicknav a:active,.chip:active{transform:scale(.98)}

/* ════════════════════════════════════════════════════════════════════════
   5 · PAGE-LOAD ORCHESTRATION — dash-page blocks stagger-fade-up, 28ms
   apart, capped after eight. Landing keeps its own scroll-reveal system.
   ════════════════════════════════════════════════════════════════════════ */
main.wrap.dash>*:not(.cn-rail){animation:tx-fade-up .5s var(--tx-ease) both}
main.wrap.dash>:nth-child(2){animation-delay:28ms}
main.wrap.dash>:nth-child(3){animation-delay:56ms}
main.wrap.dash>:nth-child(4){animation-delay:84ms}
main.wrap.dash>:nth-child(5){animation-delay:112ms}
main.wrap.dash>:nth-child(6){animation-delay:140ms}
main.wrap.dash>:nth-child(7){animation-delay:168ms}
main.wrap.dash>:nth-child(8){animation-delay:196ms}
main.wrap.dash>:nth-child(n+9){animation-delay:220ms}

/* one-time settle on verdict numbers — the reading lands, then holds */
.nsm2-num .big,.kr-v,.snap-g b,.dl-n,.cov-v,.stat-tile .v,.metric .v,
.dc-h,.pc-health,.dev-align .v,.cd-sig-val,.cd-stat .cd-pct,.demo-nsm .v{
  animation:tx-settle var(--tx-settle) var(--tx-ease) both .12s}

/* sparklines draw in — live data announces itself once */
.spark polyline,.sprint-line{stroke-dasharray:900;stroke-dashoffset:900;
  animation:tx-draw .9s var(--tx-ease) .25s forwards}

/* ════════════════════════════════════════════════════════════════════════
   6 · MICRO-INTERACTIONS
   ════════════════════════════════════════════════════════════════════════ */
/* table rows: left accent bar reveals on hover */
.fn-row,.wk-row,.commit-row,.emp-table tbody tr{
  transition:background var(--tx-fast) var(--tx-ease),box-shadow var(--tx-fast) var(--tx-ease)}
.fn-row:hover,.wk-row:hover,.emp-table tbody tr:hover{
  box-shadow:inset 2px 0 0 var(--mint)}
.commit-row:hover{background:rgba(255,255,255,.025);box-shadow:inset 2px 0 0 var(--sky)}

/* section tabs: underline slides in; idle tabs preview it on hover */
.cn-tabs a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;
  border-radius:2px;background:rgba(255,255,255,.22);transform:scaleX(0);
  transform-origin:left center;transition:transform var(--tx-med) var(--tx-ease)}
.cn-tabs a:hover::after{transform:scaleX(1)}
.cn-tabs a.on::after{background:linear-gradient(90deg,var(--sky),var(--mint));
  box-shadow:0 0 8px -1px var(--mint);transform:scaleX(1);
  animation:tx-underline .45s var(--tx-ease)}

/* chips: pill depth at rest, soft self-colored glow on hover */
.p-chip,.sec-chip,.cd-pill,.q-pill,.reco-tag,.lang-pill,.sev-count{
  box-shadow:var(--tx-edge-soft);
  transition:box-shadow var(--tx-fast) var(--tx-ease)}
.p-chip:hover,.sec-chip:hover,.cd-pill:hover,.q-pill:hover{
  box-shadow:var(--tx-edge-soft),0 0 10px -3px currentColor}

/* copy button: confirmation pulse when JS flips .copied */
.copybtn.copied{animation:tx-confirm .36s var(--tx-ease)}

/* ── the newer report pages (align / next / debt / ideas) ────────────────── */
.nsm-strip{position:relative;box-shadow:var(--tx-el-2),var(--tx-edge)}
.nsm-strip::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--tx-sheen);pointer-events:none}
.kpi-chip,.q-items li,.nx-card,.idea,.dm-batch{box-shadow:var(--tx-el-1),var(--tx-edge)}
.nsm-num,.q-metric b,.id-tally b,.dm-cost-range{
  animation:tx-settle var(--tx-settle) var(--tx-ease) both .12s}
.dm-row{transition:box-shadow var(--tx-fast) var(--tx-ease)}
.dm-row:not(.dm-row-head):hover{box-shadow:inset 2px 0 0 var(--sky)}
.nx-filters a{transition:box-shadow var(--tx-fast) var(--tx-ease),transform var(--tx-fast) var(--tx-ease)}
.nx-filters a:hover{box-shadow:0 0 10px -3px currentColor}
.nx-filters a:active,.al-lens-btn:active,.dm-trail-toggle:active{transform:scale(.98)}

/* ════════════════════════════════════════════════════════════════════════
   7 · RAIL — etched grooves between groups; the directory feels routed
   into the panel, not drawn on it.
   ════════════════════════════════════════════════════════════════════════ */
.cn-rail{box-shadow:var(--tx-el-1),var(--tx-edge)}
.rail-head{border-bottom-color:rgba(0,0,0,.5);box-shadow:0 1px 0 rgba(255,255,255,.045)}
.rail-foot{border-top-color:rgba(0,0,0,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
@media(max-width:1099px){
  .rail-head{box-shadow:1px 0 0 rgba(255,255,255,.045);border-right-color:rgba(0,0,0,.5)}
  .rail-foot{box-shadow:inset 1px 0 0 rgba(255,255,255,.045);border-left-color:rgba(0,0,0,.5)}
}

/* ════════════════════════════════════════════════════════════════════════
   8 · UTILITIES — for future templates; same tokens, opt-in classes.
   ════════════════════════════════════════════════════════════════════════ */
.tx-card{box-shadow:var(--tx-el-2),var(--tx-edge)}
.tx-lift{transition:transform var(--tx-fast) var(--tx-ease),box-shadow var(--tx-fast) var(--tx-ease)}
.tx-lift:hover{transform:translateY(-1px);box-shadow:var(--tx-el-3),var(--tx-edge)}
.tx-press{transition:transform var(--tx-fast) var(--tx-ease)}
.tx-press:active{transform:scale(.98)}
.tx-inset{box-shadow:var(--tx-inset)}
.tx-sheen{position:relative}
.tx-sheen::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--tx-sheen);pointer-events:none}
.tx-num{animation:tx-settle var(--tx-settle) var(--tx-ease) both .12s}
.tx-stagger>*{animation:tx-fade-up .5s var(--tx-ease) both}
.tx-stagger>:nth-child(2){animation-delay:28ms}
.tx-stagger>:nth-child(3){animation-delay:56ms}
.tx-stagger>:nth-child(4){animation-delay:84ms}
.tx-stagger>:nth-child(5){animation-delay:112ms}
.tx-stagger>:nth-child(6){animation-delay:140ms}
.tx-stagger>:nth-child(7){animation-delay:168ms}
.tx-stagger>:nth-child(8){animation-delay:196ms}
.tx-stagger>:nth-child(n+9){animation-delay:220ms}

/* ════════════════════════════════════════════════════════════════════════
   9 · REDUCED MOTION — everything static, instantly visible. Mandatory.
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  main.wrap.dash>*:not(.cn-rail),.tx-stagger>*,.tx-num,
  .nsm2-num .big,.kr-v,.snap-g b,.dl-n,.cov-v,.stat-tile .v,.metric .v,
  .dc-h,.pc-health,.dev-align .v,.cd-sig-val,.cd-stat .cd-pct,.demo-nsm .v,
  .nsm-num,.q-metric b,.id-tally b,.dm-cost-range,
  .cn-tabs a.on::after,.copybtn.copied{animation:none!important;opacity:1!important;transform:none!important}
  .spark polyline,.sprint-line{animation:none!important;stroke-dasharray:none;stroke-dashoffset:0}
  .cn-tabs a::after{transition:none}
  .card,.f,.proj-card,.dept-card2,.chip,.quicknav a,.fn-row,.wk-row,
  .commit-row,.emp-table tbody tr,.p-chip,.sec-chip,.cd-pill,.q-pill,
  .reco-tag,.lang-pill,.sev-count,.dm-row,.nx-filters a,.tx-lift,.tx-press{transition:none!important}
  .f-chip:active,.sec-lens-btn:active,.copybtn:active,.fresh-badge:active,
  .cn-dashtabs button:active,.proj-switch:active,.drawer-x:active,
  .quicknav a:active,.chip:active,.nx-filters a:active,.al-lens-btn:active,
  .dm-trail-toggle:active,.tx-press:active,.tx-lift:hover{transform:none!important}
}

/* ════════════════════════════════════════════════════════════════════════
   10 · INSIGHT LADDER + TABLE ENHANCER + NAV PURPOSE  (appended layer)
   Shared components: _ladder.html cards, tables.js toolbar, rail/page purpose
   sub-labels. Same --tx-* tokens and house pastels; no new colour system.
   ════════════════════════════════════════════════════════════════════════ */

/* ── page + rail purpose sub-labels ──────────────────────────────────────── */
.pg-purpose{font-family:var(--mono,monospace);font-size:.78rem;color:var(--dim,#8ba0b8);
  margin:2px 0 16px;max-width:74ch;line-height:1.5}
.pg-purpose b{color:var(--mint,#7ef0c9);font-weight:600}
.rail-purpose{display:block;font-family:var(--mono,monospace);font-size:.58rem;letter-spacing:.02em;
  color:var(--dim,#6d7589);opacity:.72;margin:1px 0 4px;line-height:1.35;text-transform:none}

/* ── the ladder card ─────────────────────────────────────────────────────── */
.lad{border:1px solid var(--line,rgba(255,255,255,.10));border-radius:13px;
  background:var(--panel,#0D1424);padding:15px 17px;margin:0 0 12px;border-left:3px solid var(--dim,#6d7589)}
.lad-sev-critical{border-left-color:#f1857f}
.lad-sev-warn{border-left-color:#e6c07a}
.lad-sev-info{border-left-color:var(--sky,#7dd7ff)}
.lad-vtop{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.lad-conf{font-family:var(--mono,monospace);font-size:.62rem;padding:2px 8px;border-radius:20px;
  border:1px solid rgba(126,240,201,.4);color:var(--mint,#7ef0c9);letter-spacing:.03em}
.lad-conf-tentative{border-color:rgba(230,192,122,.5);color:#e6c07a}
.lad-sevchip{font-family:var(--mono,monospace);font-size:.6rem;padding:2px 8px;border-radius:20px;
  border:1px solid rgba(255,255,255,.16);color:var(--dim,#9fb4cc);text-transform:uppercase;letter-spacing:.06em}
.lad-sc-critical{color:#f1857f;border-color:#f1857f}.lad-sc-warn{color:#e6c07a;border-color:#e6c07a}
.lad-inference{color:var(--ink,#eaf6ff);font-size:1.02rem;font-weight:600;margin:0 0 10px;line-height:1.4}
.lad-q{cursor:help}
.lad-cta{display:inline-block;font-family:var(--mono,monospace);font-size:.78rem;font-weight:600;
  padding:7px 14px;border-radius:9px;background:var(--mint,#7ef0c9);color:#0b1220;text-decoration:none;
  box-shadow:var(--tx-edge-soft)}
.lad-cta:hover{box-shadow:var(--tx-edge-soft),0 0 12px -3px var(--mint,#7ef0c9)}
.lad-outcome{color:var(--dim,#8ba0b8);font-size:.8rem;margin:8px 0 0;max-width:72ch}
.lad-how{margin-top:12px;border-top:1px solid var(--line,rgba(255,255,255,.08));padding-top:9px}
.lad-how>summary{cursor:pointer;font-family:var(--mono,monospace);font-size:.72rem;color:var(--sky,#7dd7ff);
  list-style:none;display:flex;gap:10px;align-items:baseline}
.lad-how>summary::-webkit-details-marker{display:none}
.lad-how>summary::before{content:"▸";transition:transform var(--tx-fast,120ms) var(--tx-ease)}
.lad-how[open]>summary::before{transform:rotate(90deg)}
.lad-how-hint{color:var(--dim,#6d7589);font-size:.68rem}
.lad-rungs{margin:10px 0 2px;padding-left:6px;display:flex;flex-direction:column;gap:2px}
.lad-rung{border-left:2px solid var(--line,rgba(255,255,255,.1));padding:2px 0 2px 12px}
.lad-rung>summary{cursor:pointer;font-size:.8rem;color:var(--soft,#aab3c4);padding:4px 0;list-style:none}
.lad-rung>summary::-webkit-details-marker{display:none}
.lad-rung>summary::before{content:"+ ";color:var(--dim,#6d7589);font-family:var(--mono,monospace)}
.lad-rung[open]>summary::before{content:"− "}
.lad-rung>summary b{color:var(--ink,#e7ebf3);font-weight:600}
.lad-list{list-style:none;margin:4px 0 8px;padding:0;display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--soft,#aab3c4)}
.lad-list li{line-height:1.5}
.lad-k{font-family:var(--mono,monospace);font-size:.7rem;color:var(--dim,#8ba0b8);text-transform:uppercase;letter-spacing:.04em;margin-right:6px}
.lad-v{color:var(--ink,#e7ebf3)}
.lad-hyp{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.lad-hypv{font-family:var(--mono,monospace);font-size:.6rem;padding:1px 7px;border-radius:20px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.16);color:var(--dim,#9fb4cc)}
.lad-hyp-matched .lad-hypv{color:var(--mint,#7ef0c9);border-color:rgba(126,240,201,.5)}
.lad-hyp-not_matched .lad-hypv{color:var(--dim,#6d7589);border-color:var(--line,rgba(255,255,255,.14))}
.lad-hyp-unknown .lad-hypv{color:#e6c07a;border-color:rgba(230,192,122,.5)}
.lad-note{color:var(--dim,#8ba0b8);font-size:.75rem}
.lad-insight{color:var(--soft,#aab3c4);font-size:.82rem;margin:4px 0 8px;line-height:1.5}
.lad-stat{margin:4px 0 8px;font-size:.82rem}
.lad-statv{color:var(--ink,#e7ebf3)}
.lad-raw{display:inline-block;font-family:var(--mono,monospace);font-size:.72rem;color:var(--mint,#7ef0c9);
  text-decoration:none;margin-top:4px}
.lad-strip{display:flex;flex-direction:column;gap:12px;margin:14px 0 22px}

/* ── tables.js toolbar (progressive enhancement) ─────────────────────────── */
.cnt-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.cnt-search{background:var(--panel,#11151d);border:1px solid var(--line,rgba(255,255,255,.16));
  border-radius:8px;padding:6px 11px;color:var(--ink,#e7ebf3);font:inherit;font-size:.8rem;min-width:200px}
.cnt-search:focus{outline:none;border-color:var(--sky,#7dd7ff)}
.cnt-count{font-family:var(--mono,monospace);font-size:.72rem;color:var(--dim,#8ba0b8)}
.cnt-count b{color:var(--ink,#e7ebf3)}
.cnt-chipgroup{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.cnt-chiplbl{font-family:var(--mono,monospace);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim,#6d7589)}
.cnt-chip{font-family:var(--mono,monospace);font-size:.66rem;padding:3px 9px;border-radius:20px;cursor:pointer;
  background:transparent;border:1px solid var(--line,rgba(255,255,255,.16));color:var(--soft,#9fb4cc);
  transition:transform var(--tx-fast,120ms) var(--tx-ease),box-shadow var(--tx-fast) var(--tx-ease)}
.cnt-chip:hover{box-shadow:0 0 8px -3px currentColor}
.cnt-chip:active{transform:scale(.96)}
.cnt-chip.on{background:var(--mint,#7ef0c9);color:#0b1220;border-color:var(--mint,#7ef0c9)}
th.cnt-sortable{cursor:pointer;user-select:none;position:relative}
th.cnt-sortable:hover{color:var(--ink,#e7ebf3)}
th.cnt-sortable::after{content:"⇅";opacity:.35;font-size:.7em;margin-left:5px}
th.cnt-asc::after{content:"↑";opacity:.9;color:var(--mint,#7ef0c9)}
th.cnt-desc::after{content:"↓";opacity:.9;color:var(--mint,#7ef0c9)}
@media (prefers-reduced-motion:reduce){.cnt-chip{transition:none!important}.cnt-chip:active{transform:none!important}}


/* ── W3 · reach-band chips (cn_num / reach_band template filters) ────────
   hot ≥1000 · warm ≥50 · quiet <50 recorded calls — cuts live in
   apps/codensm/templatetags/codensm_extras.REACH_BANDS. */
.cn-band{font-family:var(--mono,monospace);font-size:.66rem;padding:2px 8px;border-radius:20px;
  border:1px solid;white-space:nowrap;display:inline-block;line-height:1.5}
.cn-band-hot{color:#ff9d7a;border-color:rgba(255,157,122,.45);background:rgba(255,157,122,.08)}
.cn-band-warm{color:#e0b341;border-color:rgba(224,179,65,.4);background:rgba(224,179,65,.08)}
.cn-band-quiet{color:var(--dim,#8ba0b8);border-color:rgba(139,160,184,.35);background:rgba(139,160,184,.06)}