/* The extra screens (js/screens/extra.js, js/screens/extra-more.js), in the app's look: the same tokens, cards, chips and
   pressable surfaces as css/base.css and css/screens.css. Every class starts with x- so nothing here touches another
   screen. Landscape tablet first (1280×800). Chrome/Edge 109 and Firefox 115: no :has(), no nesting. */

/* ── the ⌄ menu holds more screens now: two columns, and never taller than the screen ── */
#more.menu{display:block;columns:2;column-gap:.4rem;width:34rem;max-height:calc(100vh - 3.4rem);overflow-y:auto}
#more.menu>button{display:flex;width:100%;break-inside:avoid}
#more.menu>.g{break-after:avoid;break-inside:avoid}

.x-pic{width:1.8rem;height:1.8rem;flex:none}
.x-big{width:2.9rem;height:2.9rem;border-radius:.9rem;background:var(--s2);display:grid;place-items:center;flex:none}
.x-big img{width:1.9rem;height:1.9rem}
@keyframes xpop{from{opacity:0;transform:translateY(.5rem) scale(.97)}}
@keyframes xfade{to{opacity:1}}

/* ── the Today strip (D.today) ── */
.x-today{display:flex;gap:.6rem;align-items:stretch}
.x-tlab{display:flex;flex-direction:column;justify-content:center;padding:0 .3rem;min-width:6.4rem}
.x-tlab b{font-size:1.15rem;font-weight:800;line-height:1.1}
.x-step{flex:1;min-width:0;display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border-radius:1rem;background:var(--s1);border:1px solid var(--hair);
  box-shadow:0 4px 0 var(--d-shadow);text-align:left;transition:transform .07s,box-shadow .07s;position:relative}
.x-step:active{transform:translateY(3px);box-shadow:0 1px 0 var(--d-shadow)}
.x-step .x-pic{width:2rem;height:2rem}
.x-st{display:flex;flex-direction:column;min-width:0}
.x-st b{font-size:.88rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-st .sm{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-step.done{background:linear-gradient(120deg,rgba(111,191,139,.14),var(--s1))}
.x-tick{margin-left:auto;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--green);color:#0F1E1A;display:grid;place-items:center;flex:none}
.x-tick .ic{width:.9rem;height:.9rem;stroke-width:2.6}

/* ── notifications (s14) ── */
.x-ngrid{flex:1;display:grid;grid-template-columns:1.55fr 1fr;gap:1rem;min-height:0;align-items:start}
.x-nlist{display:flex;flex-direction:column;gap:.5rem;min-height:0}
.x-note{display:flex;align-items:center;gap:.8rem;padding:.55rem .7rem .55rem .8rem;cursor:pointer;position:relative;border-left:4px solid var(--s3);
  animation:xpop .45s var(--pop) both;transition:transform .26s var(--ez),opacity .26s,background var(--t-fast)}
.x-note:active{transform:scale(.99)}
.x-note.tone-c{border-left-color:var(--clay)}.x-note.tone-b{border-left-color:var(--blue)}.x-note.tone-g{border-left-color:var(--green)}
.x-note.tone-v{border-left-color:var(--violet)}.x-note.tone-y{border-left-color:var(--gold)}
.x-note.unread{background:linear-gradient(100deg,rgba(240,185,76,.1),var(--s1) 55%)}
.x-note.out{transform:translateX(105%);opacity:0}
.x-note.tap{animation:xtap .24s var(--pop)}
@keyframes xtap{50%{transform:scale(1.02)}}
.x-ndisc{width:2.6rem;height:2.6rem;border-radius:.9rem;display:grid;place-items:center;flex:none;background:var(--s2)}
.tone-c .x-ndisc{background:rgba(224,114,79,.16)}.tone-b .x-ndisc{background:rgba(95,168,224,.16)}.tone-g .x-ndisc{background:rgba(111,191,139,.16)}
.tone-v .x-ndisc{background:rgba(176,140,232,.16)}.tone-y .x-ndisc{background:rgba(240,185,76,.16)}
.x-ndisc .x-pic{width:1.6rem;height:1.6rem}
.x-note.unread .x-ndisc .x-pic{animation:xwig 2.4s ease-in-out 1s 2}
@keyframes xwig{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-12deg)}90%{transform:rotate(10deg)}95%{transform:rotate(-6deg)}}
.x-nb{flex:1;min-width:0;display:flex;flex-direction:column;gap:.05rem}
.x-nb b{font-size:.95rem;line-height:1.25}
.x-nb .sm{font-size:.78rem;line-height:1.3}
.x-nm{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;flex:none}
.x-ago{font-size:.68rem;color:var(--mut);font-weight:800;white-space:nowrap}
.x-udot{width:.55rem;height:.55rem;border-radius:50%;background:var(--gold);box-shadow:0 0 0 .2rem rgba(240,185,76,.2);opacity:0;transition:opacity var(--t-fast)}
.x-note.unread .x-udot{opacity:1}
.x-nx{width:1.7rem;height:1.7rem;border-radius:.55rem;display:grid;place-items:center;color:var(--mut2);flex:none}
.x-nx:hover{background:var(--s2);color:var(--paper)}
.x-nx .ic{width:.95rem;height:.95rem}
.x-empty{display:flex;gap:.5rem;align-items:baseline}
.x-nbuddy .row{align-items:center}
.x-mx{flex:none}
.x-bub{flex:1;max-width:none;font-size:.95rem}
.x-ntools{display:flex;gap:.5rem;align-items:center;margin-top:.6rem}
.x-ntools .seg{flex:1}
.x-push{position:absolute;top:.6rem;left:50%;width:min(31rem,92%);margin-left:max(-15.5rem,-46%);z-index:30;display:flex;gap:.7rem;align-items:center;padding:.7rem .9rem;border-radius:1.2rem;
  background:rgba(246,242,232,.98);color:#1C3127;box-shadow:0 24px 48px -14px #000;cursor:pointer;animation:xdrop .55s var(--pop) both}
.x-push img{width:2.4rem;height:2.4rem;border-radius:.7rem;flex:none}
.x-push .sm{color:#4A6457}
.x-push b{line-height:1.25}
.x-pt{display:flex;gap:.5rem;align-items:baseline;font-size:.72rem}
.x-push.gone{animation:xrise .4s var(--ez) forwards}
@keyframes xdrop{from{transform:translateY(-140%);opacity:0}}
@keyframes xrise{to{transform:translateY(-140%);opacity:0}}

/* ── charts ── */
.x-chartbox svg{display:block;width:100%;height:auto;margin-top:.4rem;overflow:visible}
.x-svg .x-ln{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.x-svg .x-ln.draw{animation:xdraw 1.1s var(--ez) backwards}
.x-svg .x-ln.dash{stroke-width:2.4;opacity:0;animation:xfade .6s .3s forwards}
@keyframes xdraw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
.x-svg .x-area{opacity:0;animation:xfade .8s .5s forwards}
.x-svg .x-pt{opacity:0;animation:xfade .3s .8s forwards}
.x-svg .x-pt.mk{stroke:var(--paper);stroke-width:2}
.x-svg .x-tx{fill:var(--mut);font-size:12px;font-weight:800;font-family:var(--font)}
.x-legend{margin-top:.5rem;flex-wrap:wrap;gap:.4rem}

/* ── progress (s15) ── */
.x-pgrid{flex:1;display:grid;grid-template-columns:1.35fr 1fr;gap:1rem;min-height:0;align-items:start}
.x-says{display:flex;flex-direction:column}
.x-ins{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.15rem .65rem;width:100%;text-align:left;padding:.55rem 0;border-top:1px solid var(--hair2);border-radius:0}
.x-ins .t{font-size:.92rem;font-weight:700}
.x-ins .v{font-size:.8rem;color:var(--gold);font-weight:800;white-space:nowrap}
.x-why{grid-column:2 / 4;font-size:.76rem;line-height:1.35}
.x-ins.open{background:linear-gradient(90deg,rgba(240,185,76,.08),transparent)}

/* ── beyond class (s9) ── */
.x-bgrid{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:1rem;min-height:0;align-items:start}
.x-next{display:grid;grid-template-columns:1fr 1fr;gap:0 1.4rem;margin:.2rem 0 .3rem}
.x-next .lr:first-of-type{border-top:1px solid var(--hair2)}

/* ── events (s20) ── */
.x-egrid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:.8rem;min-height:0;align-content:start}
.x-ev{display:flex;flex-direction:column;gap:.45rem;padding:.75rem 1rem}
.x-ev.match{border-color:rgba(176,140,232,.45);background:linear-gradient(120deg,rgba(176,140,232,.1),var(--s1) 55%)}
.x-mt{display:flex;align-items:center;gap:.6rem}
.x-mt .bar{flex:1}
.x-mt b{font-size:1.15rem;min-width:2rem;text-align:right}
.x-evwhy{min-height:1.2rem}

/* ── look after yourself (s26) ── */
.x-wgrid{flex:1;display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:1rem;min-height:0;align-items:start}
.x-rings{display:flex;justify-content:space-around;margin:.6rem 0 .3rem}
.x-ring{position:relative;width:5.2rem;height:5.2rem}
.x-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.x-rbg{fill:none;stroke:var(--s2);stroke-width:8}
.x-rfg{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .8s var(--ez)}
.x-rl{position:absolute;inset:0;display:grid;place-items:center;align-content:center;line-height:1.05}
.x-rl b{font-size:1.15rem;font-weight:800}
.x-rl span{font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:800}
.x-li{display:grid;place-items:center;flex:none}
.x-li .x-pic{width:1.6rem;height:1.6rem}
.x-breathe{display:flex;flex-direction:column;gap:.45rem}
.x-bstage{position:relative;height:15.5rem;display:grid;place-items:center}
.x-bcirc{position:absolute;width:14rem;height:14rem;border-radius:50%;border:2px solid rgba(111,191,139,.5);
  background:radial-gradient(circle,rgba(111,191,139,.34),rgba(111,191,139,.07) 68%);transform:scale(.6);transition:transform 1.2s ease-in-out,border-color .6s,background .6s}
.x-bcirc.in{transform:scale(1)}
.x-bcirc.out{transform:scale(.6);border-color:rgba(95,168,224,.55);background:radial-gradient(circle,rgba(95,168,224,.3),rgba(95,168,224,.06) 68%)}
.x-bcirc.done{transform:scale(.82);border-color:rgba(240,185,76,.6);background:radial-gradient(circle,rgba(240,185,76,.3),rgba(240,185,76,.06) 68%)}
.x-bmx{position:relative}
.x-bword{text-align:center;font-size:1.45rem;font-weight:800;min-height:2.1rem}
.x-breathe[data-phase="in"] .x-bword{color:var(--green)}
.x-breathe[data-phase="out"] .x-bword{color:var(--blue)}
.x-breathe[data-phase="done"] .x-bword{color:var(--gold)}
.x-bclock{font-size:1.4rem;font-variant-numeric:tabular-nums}
.x-sleep{position:relative;display:flex;gap:.45rem;height:7rem;margin:.7rem 0 1.5rem}
.x-sn{flex:1;position:relative;height:100%}
.x-sb{position:absolute;left:20%;right:20%;border-radius:.45rem;background:linear-gradient(var(--violet),var(--blue));overflow:hidden}
.x-sb span.late{position:absolute;inset:0;background:linear-gradient(var(--clay),#B9573A)}
.x-sn b{position:absolute;left:0;right:0;bottom:-1.25rem;text-align:center;font-size:.62rem;color:var(--mut);font-weight:800}
.x-ten{position:absolute;left:0;right:0;border-top:1px dashed rgba(240,185,76,.65);pointer-events:none}
.x-ten span{position:absolute;right:0;top:-1rem;font-size:.6rem;color:var(--gold);font-weight:800;font-style:normal}
.x-talk .x-lseg{margin-top:.6rem}
.x-care{margin-top:.5rem;display:flex;flex-direction:column;gap:.15rem}
.x-cl{font-weight:700;font-size:.95rem;line-height:1.35}

/* ── practice cards (client demo s5) ── */
.x-cgrid{flex:1;display:grid;grid-template-columns:1.2fr 1fr;gap:1.2rem;min-height:0}
.x-cleft{display:flex;flex-direction:column;gap:.8rem;min-height:0}
.x-cbar{display:flex;align-items:center;gap:.8rem}
.x-cbar .bar{flex:1}
.x-cbar .bar i{transition:width .5s var(--ez)}
.x-flash{position:relative;flex:1;min-height:0;perspective:1400px;cursor:pointer}
.x-fin{position:absolute;inset:0;transition:transform .6s var(--ez);transform-style:preserve-3d}
.x-flash.flip .x-fin{transform:rotateY(180deg)}
.x-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:1.4rem;padding:1.6rem 2rem;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;gap:.9rem;background:linear-gradient(160deg,var(--s2),var(--s1));border:1px solid var(--hair);box-shadow:0 6px 0 rgba(0,0,0,.35)}
.x-front h2{font-size:1.9rem;font-weight:800;line-height:1.2;max-width:34rem}
.x-back{transform:rotateY(180deg);background:linear-gradient(160deg,#1F3A30,var(--s1));border-color:rgba(111,191,139,.4)}
.x-back h2{font-size:1.55rem;font-weight:800;color:var(--green);line-height:1.25;max-width:34rem}
.x-back blockquote{margin:0;font-family:Georgia,'Times New Roman',serif;font-size:.9rem;line-height:1.45;color:#2A2A26;background:#EFE8D8;border-radius:.7rem;padding:.65rem .9rem;text-align:left;max-width:34rem}
.x-res{font-weight:800;font-size:.95rem;min-height:1.4rem}
.x-res.ok{color:var(--green)}.x-res.again{color:var(--gold)}
.x-grade{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.x-grade .btn{height:3.2rem;font-size:1.05rem}
.x-flash.done{cursor:default}
.x-done{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.6rem;padding:2rem;background:var(--s1);border-radius:1.4rem;border:1px solid var(--hair)}
.x-donepic{width:5rem;height:5rem;animation:xpop .6s var(--pop) both}
.x-boxes{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem;margin-top:.6rem}
.x-box{display:flex;flex-direction:column;align-items:center;gap:.05rem;padding:.55rem .2rem;border-radius:.8rem;background:var(--s2);border:1px solid var(--hair2);transition:opacity var(--t-fast)}
.x-box b{font-size:1.45rem;font-weight:800;line-height:1.1}
.x-box span{font-size:.66rem;font-weight:800}
.x-box small{font-size:.56rem;color:var(--mut);font-weight:700;text-align:center;line-height:1.2}
.x-box.b0 b{color:var(--mut)}.x-box.b1 b{color:var(--clay)}.x-box.b2 b{color:var(--gold)}.x-box.b3 b,.x-box.b4 b{color:var(--blue)}.x-box.b5 b{color:var(--green)}
.x-box.empty{opacity:.45}
.x-sline{margin:.35rem 0 .2rem;font-size:1.05rem}

/* ── which stream (s18) ── */
.x-stc{display:block;width:100%;text-align:left;transition:border-color var(--t-fast)}
.x-stc.sel{border-color:rgba(240,185,76,.6)}
.x-stc.best{background:linear-gradient(120deg,rgba(111,191,139,.1),var(--s1) 55%)}
.x-stc .ficon img{width:1.6rem;height:1.6rem}
.x-stc h2 .chip{vertical-align:middle;margin-left:.3rem}
.x-all{display:flex;gap:.4rem;margin-top:.6rem;flex-wrap:wrap}
.x-all .chip{cursor:pointer}

/* ── timeline (s17) ── */
.x-tgrid{flex:1;display:grid;grid-template-columns:1.05fr 1fr;gap:1rem;min-height:0;align-items:start}
.x-tl{position:relative;margin:.7rem 0 .9rem;padding-left:1.6rem;display:flex;flex-direction:column;gap:1rem}
.x-tl::before{content:'';position:absolute;left:.45rem;top:.4rem;bottom:.4rem;width:2px;background:var(--s3)}
.x-tli{position:relative}
.x-tli::before{content:'';position:absolute;left:-1.47rem;top:.2rem;width:.9rem;height:.9rem;border-radius:50%;background:var(--s3);border:2px solid var(--s1)}
.x-tli.st-done::before{background:var(--green)}
.x-tli.st-next::before{background:var(--clay);box-shadow:0 0 0 .3rem rgba(224,114,79,.22)}
.x-tli.st-open::before{background:var(--gold)}
.x-doc{cursor:pointer}
.x-chk{width:1.5rem;height:1.5rem;border-radius:.45rem;border:2px solid var(--s3);display:grid;place-items:center;color:transparent;flex:none;transition:background var(--t-fast)}
.x-chk.on{background:var(--green);border-color:var(--green);color:#0F1E1A}
.x-chk .ic{width:1rem;height:1rem;stroke-width:2.6}
.x-inst{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}

/* ── record overview (s12) ── */
.x-ogrid{flex:1;display:grid;grid-template-columns:1fr 1.1fr;gap:1rem;min-height:0;align-items:start}
.x-yrs{position:relative;height:2.1rem;margin-top:.8rem;border-radius:.7rem;background:var(--s2)}
.x-sch{position:absolute;top:0;bottom:0;display:grid;place-items:center;font-size:.64rem;font-weight:800;color:#0F1E1A;white-space:nowrap;overflow:hidden;box-shadow:inset -2px 0 0 var(--s1)}
.x-sch.s0{background:#F6C445;border-radius:.7rem 0 0 .7rem}.x-sch.s1{background:#7FCB93}.x-sch.s2{background:#74BBEC}.x-sch.s3{background:#C8A8F0;border-radius:0 .7rem .7rem 0;box-shadow:none}
.x-pin{position:absolute;top:-.5rem;width:.85rem;height:.85rem;margin-left:-.42rem;border-radius:50%;border:2px solid var(--paper);background:var(--green)}
.x-pin.y{background:var(--gold)}.x-pin.c{background:var(--clay)}.x-pin.v{background:var(--violet)}.x-pin.g{background:var(--green)}
.x-ages{display:flex;justify-content:space-between;font-size:.58rem;color:var(--mut);font-weight:800;margin:.3rem 0 .2rem}
.x-port{border-color:rgba(111,191,139,.35)}

/* ── offline packs (client demo s11) ── */
.x-kgrid{flex:1;display:grid;grid-template-columns:1fr 1.25fr;gap:1rem;min-height:0;align-items:start}
.x-pack{padding:.8rem 1rem;transition:border-color var(--t-fast)}
.x-pack.sel{border-color:var(--gold)}
.x-pack.hint{border-color:rgba(240,185,76,.6)}
.x-pack .btn+.btn{margin-left:.1rem}
.x-pbar{margin-top:.5rem}
.x-pst{margin-top:.4rem;display:flex;align-items:center;gap:.3rem}
.x-pst .ic{width:.9rem;height:.9rem}
.x-pack.on .x-pst{color:var(--green)}
.x-view{display:flex;flex-direction:column;gap:.6rem;align-self:stretch;min-height:0}
.x-vempty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.6rem;padding:2rem}
.x-vpic{width:4rem;height:4rem}
.x-vic{width:2rem;height:2rem}
.x-etabs{display:flex;flex-wrap:wrap;gap:.35rem}
.x-etabs .chip{cursor:pointer}
.x-entry{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:.45rem}
.x-steps{margin:.15rem 0;padding-left:1.4rem;display:flex;flex-direction:column;gap:.35rem;font-size:.92rem;line-height:1.4}
.x-enote{color:var(--paper)}
.x-call{display:flex;align-items:center;gap:.5rem;padding:.55rem .8rem;border-radius:.8rem;background:rgba(224,114,79,.14);border:1px solid rgba(224,114,79,.4);color:#F3B39E;font-weight:800;font-size:.9rem}
.x-check{display:flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border-radius:.8rem;background:rgba(95,168,224,.12);border:1px solid rgba(95,168,224,.35);font-size:.86rem}
.x-src{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.78rem;color:var(--green);font-weight:700}
.x-url{font-family:var(--mono);font-size:.72rem;color:var(--mut);user-select:text}
.x-vfoot{display:flex;align-items:center;gap:1rem;border-top:1px solid var(--hair2);padding-top:.6rem}
.x-vfoot .sm{flex:1}
.x-vfoot .btn{flex:none}

/* ── read a letter (client demo s8–s9) ── */
.x-dpick{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.x-dbtn{display:flex;align-items:center;gap:.7rem;padding:.65rem .9rem;border-radius:1rem;background:var(--s1);border:2px solid var(--hair);box-shadow:0 4px 0 var(--d-shadow);text-align:left;transition:transform .07s,box-shadow .07s}
.x-dbtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--d-shadow)}
.x-dbtn b{display:block;font-size:.95rem}
.x-dbtn .sm{font-size:.74rem}
.x-dbtn .x-pic{width:2.2rem;height:2.2rem}
.x-dbtn.on{border-color:var(--gold);background:linear-gradient(120deg,rgba(240,185,76,.14),var(--s1))}
.x-dbtn.cam .ic{width:2rem;height:2rem;color:var(--blue)}
.x-dgrid{flex:1;display:grid;grid-template-columns:1fr 1.05fr;gap:1.4rem;min-height:0}
.x-dorig{min-height:0;display:flex}
.x-letter{flex:1;overflow:hidden;padding-bottom:2.6rem}
.x-letter p{font-size:.84rem;margin-bottom:.32rem}
.x-letter p.x-lh{font-family:var(--font);font-weight:800;font-size:.8rem;letter-spacing:.04em}
.x-dexp{display:flex;flex-direction:column;gap:.6rem;min-height:0}
.x-calls{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.x-cv{background:var(--s2);border-radius:.9rem;padding:.55rem .8rem;display:flex;flex-direction:column;gap:.05rem}
.x-cv b{font-size:1.5rem;font-weight:800;line-height:1.15}
.x-cv.urgent b{color:var(--clay)}
.x-dsteps{display:flex;flex-direction:column;gap:.25rem}
.x-ds{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center;text-align:left;padding:.45rem .6rem;border-radius:.8rem;border:1px solid transparent}
.x-ds:hover,.x-ds.on{background:var(--s2);border-color:var(--hair)}
.x-ds .t{font-size:.9rem;font-weight:600;line-height:1.35}
.x-ds .v{font-size:.68rem;color:var(--mut);font-weight:700;white-space:nowrap}
.x-dn{width:1.6rem;height:1.6rem;border-radius:50%;background:var(--gold);color:var(--ink-on-gold);display:grid;place-items:center;font-weight:800;font-size:.8rem}
.x-needs{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.5rem;padding:1.5rem}
.x-ncam{width:4rem;height:4rem;border-radius:1.2rem;background:rgba(95,168,224,.15);display:grid;place-items:center;color:var(--blue)}
.x-ncam .ic{width:2rem;height:2rem}

/* ── under the hood (client demo s12) ── */
.x-hgrid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;min-height:0;align-content:start}
.x-hc{display:flex;flex-direction:column;gap:.45rem}
.x-hic{width:2.3rem;height:2.3rem;border-radius:.75rem;background:rgba(111,191,139,.14);color:var(--green);display:grid;place-items:center;flex:none}
.x-hic .ic{width:1.3rem;height:1.3rem}
.x-hb{color:var(--paper);opacity:.86}
.x-live{margin-top:auto;font-size:.74rem;font-weight:700;color:var(--green);padding:.4rem .6rem;border-radius:.6rem;background:rgba(111,191,139,.08);border:1px solid rgba(111,191,139,.25)}
.x-ny{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:.4rem;font-size:.84rem}
.x-ny span{display:flex;align-items:center;gap:.45rem}

@media (prefers-reduced-motion:reduce){.x-svg .x-ln.draw{animation:none}.x-bcirc{transition-duration:1ms!important}}