/* HK Cover Desk v3 - loaded last. Two jobs:
   1. Type: Geist for reading, Geist Mono for the small gallery labels (never under 10px), Bodoni for display.
   2. Controls with weight: every button is a raised key (gradient body, lit top edge, shadow under it)
      that lifts on hover and presses down on click. No more hairline outlines.
   Also here: the card footer, the Doctor, the back-to-top key. */
:root{
  --sans:"Geist","Hanken Grotesk",system-ui,-apple-system,"Segoe UI","Nirmala UI",sans-serif;
  --mono:"Geist Mono","Martian Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --key:linear-gradient(180deg,#29322d 0%,#1b221e 46%,#131815 100%);
  --key-hi:linear-gradient(180deg,#343f38 0%,#232b26 46%,#181e1a 100%);
  --key-down:linear-gradient(180deg,#111613 0%,#171d19 100%);
  --key-edge:0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.4),0 2px 2px rgba(0,0,0,.35),0 12px 22px -12px rgba(0,0,0,.95);
  --key-edge-hi:0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.4),0 3px 3px rgba(0,0,0,.35),0 20px 30px -14px #000;
  --key-edge-down:0 0 0 1px rgba(0,0,0,.7),inset 0 2px 6px rgba(0,0,0,.6);
  --ivory:linear-gradient(180deg,#ffffff 0%,#f0f4ec 44%,#d2dbcf 100%);
  --emer:linear-gradient(180deg,#b2f9de 0%,#62e7b5 44%,#2cbd8c 100%);
  --amber:linear-gradient(180deg,#f8dfa0 0%,#e8c26a 46%,#c99a3a 100%);
}
body{font:400 15px/1.55 var(--sans);letter-spacing:-.008em;text-rendering:optimizeLegibility}
b,strong{font-weight:650}

/* ------------------------------------------------------------ small labels */
.eyebrow,.st-h,.cap-s,.field>span,.pf-sec>h4,.tw-facts .fact span,.lg-card h4,.cv-veil .hint,.stage-hint,.mode{
  font:500 10.5px/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase}
.cv-badge,.cv-ai,.tag,.daychip small,.daychip i,.cap-no small,.pf-row label,.pf-ver small,.pk-row small,.cv-client small,
.pf-top .who small,.pf-box::before,.pf-guides.safe .g-safe::after,.pf-guides.grid .g-top::after,.brand-t small{
  font:500 10px/1.3 var(--mono);letter-spacing:.08em}
.chip b,.btn .n,.lg-row time,.pf-row output,.stepper output{font:500 11px/1 var(--mono);letter-spacing:0}
.brand-t small{letter-spacing:.17em;color:var(--muted)}
.brand-t b{font-size:23px}
.eyebrow{color:var(--soft)}
.st-h{color:var(--soft)}
.st-n span{font-size:12.5px;color:var(--soft);max-width:150px}
.h2{font-size:30px}
.muted{color:#97a199}

/* ------------------------------------------------------------------- keys */
.btn{height:44px;padding:0 20px;border-radius:14px;font:600 14px/1 var(--sans);letter-spacing:-.005em;color:var(--text);
  background:var(--key);box-shadow:var(--key-edge);
  transition:transform .18s var(--ease),box-shadow .25s,background .25s,filter .2s,color .2s}
.btn .ic{width:18px;height:18px;stroke-width:1.9}
.btn .ic.sm{width:17px;height:17px}
.btn:hover{background:var(--key-hi);box-shadow:var(--key-edge-hi);transform:translateY(-1px)}
.btn:active{background:var(--key-down);box-shadow:var(--key-edge-down);transform:translateY(1px) scale(.985)}
.btn.primary,.btn.cyan{color:#08110d;background:var(--ivory);
  box-shadow:0 0 0 1px rgba(255,255,255,.55),inset 0 1px 0 #fff,inset 0 -2px 0 rgba(12,40,28,.16),0 2px 2px rgba(0,0,0,.4),0 16px 30px -14px rgba(240,243,237,.6)}
.btn.primary:hover,.btn.cyan:hover{background:var(--ivory);filter:brightness(1.04);
  box-shadow:0 0 0 1px #fff,inset 0 1px 0 #fff,inset 0 -2px 0 rgba(12,40,28,.16),0 3px 3px rgba(0,0,0,.4),0 22px 38px -14px rgba(240,243,237,.75)}
.btn.primary:active,.btn.cyan:active{background:linear-gradient(180deg,#cfd8cc,#e6ebe2);box-shadow:0 0 0 1px rgba(255,255,255,.4),inset 0 2px 5px rgba(12,40,28,.3)}
.btn.good{color:#02170f;background:var(--emer);
  box-shadow:0 0 0 1px rgba(178,249,222,.6),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -2px 0 rgba(0,70,46,.24),0 2px 2px rgba(0,0,0,.4),0 16px 34px -12px rgba(95,230,179,.75)}
.btn.good:hover{background:var(--emer);filter:brightness(1.05);
  box-shadow:0 0 0 1px #c8ffe9,inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(0,70,46,.24),0 3px 3px rgba(0,0,0,.4),0 24px 44px -12px rgba(95,230,179,.9)}
.btn.good:active{background:linear-gradient(180deg,#2cbd8c,#55dcab);box-shadow:0 0 0 1px rgba(178,249,222,.5),inset 0 2px 6px rgba(0,60,40,.45)}
.btn.warn{color:#221703;background:var(--amber);
  box-shadow:0 0 0 1px rgba(248,223,160,.6),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(90,60,0,.25),0 2px 2px rgba(0,0,0,.4),0 16px 34px -12px rgba(232,194,106,.6)}
.btn.warn:hover{background:var(--amber);filter:brightness(1.05)}
.btn.ghost{color:var(--soft);background:transparent;box-shadow:0 0 0 1px var(--hair2)}
.btn.ghost:hover{color:var(--text);background:rgba(255,255,255,.06);box-shadow:0 0 0 1px var(--hair3);transform:none}
.btn.danger{color:#ffb4ab;background:linear-gradient(180deg,#3a201d,#261513);box-shadow:0 0 0 1px rgba(242,119,108,.45),inset 0 1px 0 rgba(255,180,170,.16),0 12px 22px -12px #000}
.btn.sm{height:38px;padding:0 15px;border-radius:12px;font-size:13.5px}
.btn .n{padding:5px 8px;border-radius:8px;background:rgba(0,0,0,.2);font-weight:600}
.btn:not(.primary):not(.good):not(.warn):not(.cyan) .n{background:rgba(255,255,255,.1);color:var(--text)}
.btn[disabled]{opacity:.42;filter:saturate(.6)}
.icon-btn{width:42px;height:42px;border-radius:13px;color:var(--soft);background:var(--key);box-shadow:var(--key-edge)}
.icon-btn .ic{width:19px;height:19px;stroke-width:1.85}
.icon-btn:hover{color:var(--text);background:var(--key-hi);box-shadow:var(--key-edge-hi);transform:translateY(-1px)}
.icon-btn:active{background:var(--key-down);box-shadow:var(--key-edge-down);transform:translateY(1px) scale(.96)}
.icon-btn.on{color:#02170f;background:var(--emer);box-shadow:0 0 0 1px rgba(178,249,222,.6),inset 0 1px 0 rgba(255,255,255,.7),0 12px 26px -12px rgba(95,230,179,.8)}
.ic{stroke-width:1.7}

/* chips, switches, day chips, nav */
.chip{height:38px;padding:0 15px;border-radius:12px;font:600 13.5px/1 var(--sans);color:var(--soft);background:var(--key);box-shadow:var(--key-edge)}
.chip:hover{color:var(--text);background:var(--key-hi)}
.chip b{padding:4px 7px;border-radius:7px;background:rgba(255,255,255,.08);opacity:1}
.chip.on{color:#08110d;background:var(--ivory);box-shadow:0 0 0 1px rgba(255,255,255,.55),inset 0 1px 0 #fff,inset 0 -2px 0 rgba(12,40,28,.16),0 12px 26px -14px rgba(240,243,237,.6)}
.chip.on b{background:rgba(0,0,0,.12)}
.switch,.pill-switch{height:44px;padding:0 14px 0 16px;border-radius:14px;font:600 14px/1 var(--sans);color:var(--soft);background:var(--key);box-shadow:var(--key-edge)}
.pill-switch{height:42px}
.switch:hover,.pill-switch:hover{color:var(--text);background:var(--key-hi)}
.switch i,.pill-switch .sw{width:38px;height:22px;background:rgba(0,0,0,.45);box-shadow:inset 0 1px 3px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.08)}
.switch i::after,.pill-switch .sw::after{top:2px;left:2px;width:18px;height:18px;background:linear-gradient(180deg,#b9c2bc,#7f8a83);box-shadow:0 2px 4px rgba(0,0,0,.6)}
.switch.on,.pill-switch.on{color:var(--text);background:linear-gradient(180deg,#1f4a3a,#143629 50%,#0f2a21);
  box-shadow:0 0 0 1px rgba(95,230,179,.5),inset 0 1px 0 rgba(190,255,230,.22),0 2px 2px rgba(0,0,0,.35),0 14px 28px -14px rgba(95,230,179,.6)}
.switch.on i,.pill-switch.on .sw{background:var(--acc2);box-shadow:inset 0 1px 3px rgba(0,60,40,.6),0 0 14px rgba(95,230,179,.5)}
.switch.on i::after,.pill-switch.on .sw::after{transform:translateX(16px);background:linear-gradient(180deg,#fff,#dfe8e0)}
.daychip{height:46px;padding:0 16px;border-radius:14px;color:var(--soft);background:var(--key);box-shadow:var(--key-edge)}
.daychip:hover{color:var(--text);background:var(--key-hi)}
.daychip b{font:500 italic 23px/46px var(--display)}
.daychip.on{color:#08110d;background:var(--ivory);box-shadow:0 0 0 1px rgba(255,255,255,.55),inset 0 1px 0 #fff,inset 0 -2px 0 rgba(12,40,28,.16),0 14px 28px -14px rgba(240,243,237,.65)}
.dayrail{gap:8px;padding:4px 4px 12px;margin-bottom:-8px}
.nav{padding:5px;border-radius:18px;background:rgba(0,0,0,.4);box-shadow:inset 0 2px 6px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.07),0 0 0 1px var(--hair)}
.nav button{padding:10px 19px;border-radius:13px;font:600 14px/1 var(--sans);color:#a3ada6}
.nav button .ic{width:19px;height:19px}
.glide{top:5px;height:calc(100% - 10px);border-radius:13px;background:var(--ivory);
  box-shadow:0 0 0 1px rgba(255,255,255,.55),inset 0 1px 0 #fff,inset 0 -2px 0 rgba(12,40,28,.16),0 10px 24px -10px rgba(240,243,237,.6)}
.seg{padding:4px;border-radius:14px;background:rgba(0,0,0,.42);box-shadow:inset 0 2px 5px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.06)}
.seg button{padding:9px 15px;border-radius:10px;font:600 13.5px/1 var(--sans)}
.seg .glide{top:4px;height:calc(100% - 8px);border-radius:10px}
.me{height:42px;padding:0 14px;border-radius:14px;font:600 14px/1 var(--sans);background:var(--key);box-shadow:var(--key-edge)}
.mode{height:34px;padding:0 13px;border-radius:11px}
.top{height:72px}
:root{--bar:72px}

/* inputs */
input[type=text],input[type=password],input[type=search],input:not([type]),textarea,select{
  padding:13px 15px;border-radius:14px;font-size:15px;background:rgba(0,0,0,.36);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.07),0 0 0 1px var(--hair2)}
input:focus,textarea:focus,select:focus{background:rgba(0,0,0,.44);box-shadow:inset 0 2px 5px rgba(0,0,0,.65),0 0 0 1.5px var(--acc),0 0 0 5px rgba(95,230,179,.14)}
.toolbar .search input{height:44px;border-radius:14px;padding-left:42px}
.toolbar .search .ic{left:15px;width:17px;height:17px}
.field>span{color:var(--soft)}

/* menus, toasts, tooltips, dialogs */
.menu{min-width:236px;padding:7px;border-radius:18px;background:linear-gradient(180deg,#1b221e,#111613);
  box-shadow:0 0 0 1px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.1),0 30px 70px -20px #000}
.menu button{gap:12px;padding:11px 12px;border-radius:11px;font:500 14px/1.2 var(--sans)}
.menu button .ic{width:18px;height:18px}
.toast{padding:13px 20px;border-radius:16px;font:500 14px/1.35 var(--sans);background:linear-gradient(180deg,#1d2420,#121714);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1),0 24px 60px -18px #000}
.toast.ok{box-shadow:0 0 0 1px var(--accline),inset 0 1px 0 rgba(190,255,230,.14),0 24px 60px -18px #000}
.toast.bad{box-shadow:0 0 0 1px rgba(242,119,108,.55),0 24px 60px -18px #000}
.tip{padding:8px 12px;border-radius:10px;font:500 12.5px/1.35 var(--sans);max-width:300px}
.dialog h3{font-size:34px}
.dialog .sub{font-size:14.5px;color:#a3ada6}
.sheet-h h3{font-size:32px}
.banner{font-size:14px;border-radius:16px}

/* stage furniture */
.st{min-width:112px;padding:13px 16px 12px;border-radius:18px;background:linear-gradient(180deg,rgba(24,31,27,.82),rgba(10,14,12,.82));
  box-shadow:0 0 0 1px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1),0 18px 34px -20px #000}
.st-h .ic{width:14px;height:14px}
.st-n b{font-size:44px}
.stage-nav{width:52px;height:52px;margin-top:-26px;border-radius:17px;background:var(--key);box-shadow:var(--key-edge)}
.stage-nav:hover{background:var(--key-hi);box-shadow:var(--key-edge-hi)}
.cap{padding:14px 16px 14px 24px;border-radius:24px;background:linear-gradient(180deg,rgba(24,31,27,.86),rgba(9,13,11,.88));
  box-shadow:0 0 0 1px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.11),0 34px 70px -30px #000}
.cap-no{font-size:40px;min-width:52px}
.cap-t b{font:650 19px/1.2 var(--sans)}
.cap-t span{font-size:14.5px;margin-top:3px}
.cap-s{margin-top:8px}
.cap-a .btn.sm{height:42px;padding:0 18px;font-size:14px;border-radius:13px}
.stage-hint{color:#7d877f;left:32px;bottom:30px;top:auto;transform:none;white-space:normal;text-align:left;line-height:2;max-width:250px}
@media (max-width:1320px){.stage-hint{display:none}}
.st-n span{max-width:170px}
.deck{padding:18px 20px 16px}
.line-note{font-size:13.5px;color:#97a199;flex-basis:100%;margin-top:2px}

/* ---------------------------------------------------------- contact sheet */
.grid{grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:34px 22px}
.cv-frame{border-radius:20px;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 0 2px rgba(255,255,255,.07),0 30px 54px -26px #000}
.cv-sheet:hover .cv-frame{box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 0 2px rgba(255,255,255,.2),0 44px 76px -28px #000,0 0 70px -30px var(--acc)}
.cv-no{top:12px;left:14px;font-size:24px}
.cv-badge,.cv-ai,.cv-dr{height:26px;padding:0 10px;border-radius:9px;background:rgba(6,9,8,.74);box-shadow:0 0 0 1px rgba(255,255,255,.16),0 6px 14px -6px #000}
.cv-badge{top:12px;right:12px}
.cv-ai{bottom:12px;left:12px;color:var(--text)}
.cv-ai .ic{width:13px;height:13px}
.cv-dr{position:absolute;bottom:12px;right:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;color:var(--acc);
  font:500 10px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px);cursor:help}
.cv-dr .ic{width:13px;height:13px;stroke-width:2.2}
.cv[data-flag="1"] .cv-dr{color:var(--warn)}
.cv[data-flag="1"] .cv-badge{color:var(--warn)}
.cv[data-flag="1"] .cv-frame{box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 0 2px rgba(232,194,106,.75),0 30px 54px -26px #000,0 0 60px -26px var(--warn)}
.cv-veil p{font-size:13.5px;line-height:1.4}
.cv-meta{padding:14px 2px 0}
.cv-client b{font:650 16px/1.25 var(--sans);letter-spacing:-.015em}
.cv-client small{color:#77827a}
.cv-title{font-size:14px;line-height:1.4;color:#aab4ad;min-height:2.95em;margin-top:4px}
.cv-title:hover{color:var(--text)}
.cv-edit{font-size:14px}
.cv-acts{display:grid;grid-template-columns:minmax(0,1fr) 42px 42px;gap:8px;margin-top:12px}
.cv-acts .row1{grid-column:1/-1;display:flex;gap:8px;min-width:0}
.cv-acts .row1 .btn{flex:1;min-width:0;height:44px;padding:0 12px;font-size:14px}
.cv-acts .row1 .icon-btn{width:44px;height:44px}
.cv-acts .enh.wide{grid-column:1/3}
/* the Enhance key: a labelled switch, not a mystery icon */
.enh{position:relative;overflow:hidden;display:flex;align-items:center;gap:9px;height:42px;min-width:0;padding:0 11px 0 8px;border-radius:13px;
  font:600 13.5px/1 var(--sans);color:var(--soft);text-align:left;background:var(--key);box-shadow:var(--key-edge);
  transition:transform .18s var(--ease),box-shadow .25s,background .25s,color .2s}
.enh:hover{color:var(--text);background:var(--key-hi);box-shadow:var(--key-edge-hi);transform:translateY(-1px)}
.enh:active{background:var(--key-down);box-shadow:var(--key-edge-down);transform:translateY(1px) scale(.985)}
.enh .orb{flex:none;width:27px;height:27px;display:grid;place-items:center;border-radius:9px;color:var(--acc);background:rgba(95,230,179,.11);box-shadow:inset 0 0 0 1px rgba(95,230,179,.32)}
.enh .orb .ic{width:16px;height:16px;stroke-width:1.9}
.enh span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enh i{flex:none;position:relative;width:30px;height:18px;border-radius:999px;background:rgba(0,0,0,.5);box-shadow:inset 0 1px 3px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.08)}
.enh i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:linear-gradient(180deg,#b9c2bc,#7f8a83);box-shadow:0 2px 4px rgba(0,0,0,.6);transition:transform .35s var(--spring),background .25s}
.enh.on{color:var(--text);background:linear-gradient(180deg,#20503e,#14382b 50%,#0f2a21);
  box-shadow:0 0 0 1px rgba(95,230,179,.5),inset 0 1px 0 rgba(190,255,230,.24),0 2px 2px rgba(0,0,0,.35),0 14px 28px -14px rgba(95,230,179,.65)}
.enh.on .orb{color:#02170f;background:var(--emer);box-shadow:0 0 16px rgba(95,230,179,.65),inset 0 1px 0 rgba(255,255,255,.7)}
.enh.on i{background:var(--acc2);box-shadow:inset 0 1px 3px rgba(0,60,40,.6)}
.enh.on i::after{transform:translateX(12px);background:linear-gradient(180deg,#fff,#dfe8e0)}
.enh.on .orb .ic{animation:twinkle 2.6s ease-in-out infinite}
@keyframes twinkle{50%{transform:scale(1.18) rotate(12deg)}}

/* ----------------------------------------------------------------- Doctor */
.doc{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 14px 0 10px;border-radius:16px;text-align:left;
  color:var(--text);background:linear-gradient(180deg,#1f4a3a,#14382b 50%,#0e2820);
  box-shadow:0 0 0 1px rgba(95,230,179,.45),inset 0 1px 0 rgba(190,255,230,.24),0 2px 2px rgba(0,0,0,.35),0 16px 32px -14px rgba(95,230,179,.55);
  transition:transform .18s var(--ease),box-shadow .25s,filter .2s}
.doc:hover{transform:translateY(-1px);filter:brightness(1.1)}
.doc:active{transform:translateY(1px) scale(.985)}
.doc-pulse{flex:none;width:58px;height:34px;border-radius:10px;background:rgba(0,0,0,.4);box-shadow:inset 0 1px 4px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.08);display:grid;place-items:center;overflow:hidden}
.doc-pulse svg{width:120px;height:24px;fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px var(--acc));animation:ecg 2.2s linear infinite}
@keyframes ecg{from{transform:translateX(30px)}to{transform:translateX(-30px)}}
.doc-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.doc-t b{font:650 14.5px/1 var(--sans)}
.doc-t small{font:500 10.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#a9e9d0;white-space:nowrap}
.doc .n{font:600 12px/1 var(--mono);font-style:normal;padding:6px 9px;border-radius:9px;background:rgba(0,0,0,.34);color:var(--acc)}
.doc[data-s=warn]{background:linear-gradient(180deg,#52401a,#3a2c10 50%,#2a200b);
  box-shadow:0 0 0 1px rgba(232,194,106,.55),inset 0 1px 0 rgba(255,236,190,.24),0 2px 2px rgba(0,0,0,.35),0 16px 32px -14px rgba(232,194,106,.55)}
.doc[data-s=warn] .doc-pulse svg{stroke:var(--warn);filter:drop-shadow(0 0 4px var(--warn));animation-duration:1.1s}
.doc[data-s=warn] .doc-t small{color:#f3dba3}.doc[data-s=warn] .n{color:var(--warn)}
.doc[data-s=busy] .doc-pulse svg{animation-duration:.9s}
.dr-top{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.dr-tile{padding:14px 14px 12px;border-radius:16px;background:linear-gradient(180deg,rgba(28,36,31,.9),rgba(13,18,15,.9));box-shadow:0 0 0 1px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.09)}
.dr-tile b{display:block;font:400 40px/.9 var(--display);letter-spacing:-.02em}
.dr-tile span{display:block;margin-top:8px;font:500 10.5px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--soft)}
.dr-tile.g b{color:var(--acc)}.dr-tile.y b{color:var(--warn)}.dr-tile.r b{color:var(--bad)}
.dr-tile.zero b{color:var(--dim)}
.dr-say{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:20px;border-radius:14px;color:#a9b3ac;font-size:13.5px;line-height:1.45;background:rgba(0,0,0,.28);box-shadow:inset 0 1px 3px rgba(0,0,0,.5),0 0 0 1px var(--hair)}
.dr-say .btn{flex:none}
.dr-h{display:flex;align-items:center;gap:9px;margin:22px 0 10px;font:500 italic 23px/1.1 var(--display)}
.dr-h i{font:600 11px/1 var(--mono);font-style:normal;padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.08);color:var(--soft)}
.dr-h.y{color:var(--warn)}.dr-h.r{color:#ffb4ab}.dr-h.g{color:var(--acc)}
.dr-row{display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px;padding:12px;margin-top:8px;border-radius:16px;background:linear-gradient(180deg,rgba(25,32,28,.8),rgba(13,18,15,.8));box-shadow:0 0 0 1px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07)}
.dr-row img{width:54px;height:96px;object-fit:cover;border-radius:9px;background:#161c19;box-shadow:0 0 0 1px var(--hair2)}
.dr-row .noimg{width:54px;height:96px;border-radius:9px;display:grid;place-items:center;color:var(--dim);background:#121714;box-shadow:0 0 0 1px var(--hair2)}
.dr-who{display:flex;align-items:baseline;gap:8px;min-width:0}
.dr-who em{flex:none;font:400 italic 19px/1 var(--display);color:var(--acc)}
.dr-who b{font:650 15.5px/1.25 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-ttl{color:#aab4ad;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-notes{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:5px}
.dr-notes li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.45;color:var(--text)}
.dr-notes li::before{content:"";position:absolute;left:3px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.dr-row.y .dr-notes li::before{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.dr-row.r .dr-notes li::before{background:var(--bad);box-shadow:0 0 8px var(--bad)}
.dr-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.dr-owner{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:10px 12px;border-radius:12px;font-size:13.5px;line-height:1.45;color:var(--text);background:linear-gradient(180deg,rgba(255,196,84,.13),rgba(255,196,84,.05));box-shadow:inset 0 0 0 1px rgba(255,196,84,.32)}
.dr-owner svg{flex:none;width:17px;height:17px;margin-top:2px;color:var(--warn)}
.dr-owner b{font-weight:680;color:#ffe1a3}
.dr-wait{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:14px;font-size:13.5px;line-height:1.5;color:#a9b3ac;background:rgba(0,0,0,.26);box-shadow:inset 0 1px 3px rgba(0,0,0,.5),0 0 0 1px var(--hair)}
.dr-wait svg{flex:none;width:17px;height:17px;margin-top:2px;color:var(--soft)}
.dr-wait b{font-weight:620;color:var(--text)}
/* a title that is still waiting for its photo: calm, not a warning */
.cv[data-s=wait] .cv-veil{display:flex}
.cv[data-s=wait] .cv-veil .hint{color:var(--soft)}
.cv[data-s=wait] .cv-veil p{max-width:22ch;color:#93a098}
.cv[data-s=wait] .cv-badge{color:var(--soft)}
.cv[data-s=wait] .cv-veil .mark.wait{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;margin-bottom:10px;color:var(--soft);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair2);animation:waitPulse 2.6s ease-in-out infinite}
.cv[data-s=wait] .cv-veil .mark.wait svg{width:20px;height:20px}
.cap[data-s=wait] .cap-s{color:var(--soft)}
@keyframes waitPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.cv[data-s=wait] .cv-veil .mark.wait{animation:none}}
.dr-none{padding:26px 16px;text-align:center;border-radius:16px;border:1px dashed var(--hair2);color:var(--muted)}
.dr-none b{display:block;font:500 italic 24px/1.2 var(--display);color:var(--text);margin-bottom:4px}
.pf-dr{box-shadow:0 0 0 1px rgba(95,230,179,.4)!important;background:rgba(95,230,179,.06)!important}
.pf-dr.y{box-shadow:0 0 0 1px rgba(232,194,106,.5)!important;background:rgba(232,194,106,.07)!important}
.pf-dr.y>h4{color:var(--warn)}.pf-dr>h4{color:var(--acc)}
.pf-dr .dr-notes li{font-size:13px}

/* back to the top */
.totop{position:fixed;right:26px;bottom:26px;z-index:35;width:52px;height:52px;display:grid;place-items:center;border-radius:17px;color:var(--text);
  background:var(--key);box-shadow:var(--key-edge),0 20px 40px -16px #000;opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
  transition:opacity .3s,transform .35s var(--spring),background .2s}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--key-hi)}
.totop .ic{transform:rotate(-90deg);width:22px;height:22px;stroke-width:2}

/* editor + other pages */
.pf-top{height:72px;gap:16px;padding:0 22px}
.pf-top .who b{font-size:27px}
.pf-sec{padding:16px;border-radius:20px;background:linear-gradient(180deg,rgba(26,33,29,.6),rgba(13,18,15,.6));box-shadow:0 0 0 1px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07)}
.pf-sec>h4{color:var(--soft);margin-bottom:13px}
.pf-note{font-size:13.5px;color:#97a199}
.pf-pad{grid-template-columns:repeat(3,38px);grid-template-rows:repeat(3,38px);gap:5px}
.pf-pad button{border-radius:12px;background:var(--key);box-shadow:var(--key-edge)}
.pf-pad button:hover{background:var(--key-hi)}
.pf-tools{padding:7px;gap:7px;border-radius:18px;background:linear-gradient(180deg,rgba(26,33,29,.95),rgba(11,15,13,.95));box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1),0 24px 54px -18px #000}
.pf-style b{font-size:15px}.pf-style small{font-size:12.5px}
.pf-check{font-size:14px}
.tw b{font:650 16px/1.25 var(--sans)}
.tw small{font-size:13px;color:#97a199}
.swatches i{width:18px;height:18px;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 0 2px rgba(255,255,255,.14)}
.tw-frame,.lb-job .f{border-radius:20px}
.pg-head p.sub{font-size:15.5px;color:#a3ada6}
.lg-row{font-size:14px}
.kv{font-size:14px;padding:9px 0}
.lock-row,.lb-job,.tw-facts .fact,.tw-try{background:linear-gradient(180deg,rgba(26,33,29,.6),rgba(13,18,15,.6));box-shadow:0 0 0 1px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07)}
.stepper button{width:34px;height:34px;border-radius:11px;background:var(--key);box-shadow:var(--key-edge)}
.pk-row{padding:9px 10px;border-radius:14px}
.pk-row b{font-size:15px}
.empty h3{font-size:34px}
.empty p{font-size:15px}
.gate-card .btn{height:50px;font-size:15px}

.seg button{white-space:nowrap}
.pf-insta .seg button{padding:9px 12px}
.brand-t b{white-space:nowrap}
.cv-title{min-height:calc(2.8em + 6px)}
/* iPad landscape and small laptops: the bar keeps everything, only tighter */
@media (max-width:1280px){
  .top{gap:12px;padding:0 18px}
  .brand-t small{display:none}
  .nav button{padding:10px 13px;gap:7px}
  .pill-switch span,.me span,.mode span{display:none}
  .pill-switch{padding:0 9px 0 12px}
  .top-r{gap:8px}
}
@media (max-width:980px){
  .nav button span{display:none}
  .nav button{padding:10px 14px}
}
@media (max-width:1100px){
  .hud-tr .st{min-width:86px;padding:10px 12px}
  .st-n b{font-size:34px}
}
@media (max-width:860px){
  body{font-size:15px}
  .top{height:64px}
  :root{--bar:64px}
  .pill-switch{padding:0 8px 0 12px}
  .top{gap:8px}
  .brand{flex:1;min-width:0;gap:9px}
  .brand-t{min-width:0}
  .brand-t b{font-size:19px;overflow:hidden;text-overflow:ellipsis}
  .top-r{gap:7px;flex:none}
  .pill-switch{padding:0 7px 0 10px;gap:6px}
  .me{padding:0 11px}
  .mode{height:32px;padding:0 9px;font-size:9.5px;letter-spacing:.06em}
  .mode span{display:none}
  .enh i{display:none}
  .hud-tr .st{padding:8px 10px 8px;min-width:0;flex-direction:column-reverse;align-items:flex-start;justify-content:flex-start;gap:5px}
  .st-h{font-size:9px;letter-spacing:.04em}
  .st-n b{font-size:26px}
  .cap{padding:10px 10px 10px 16px}
  .cap-no{font-size:28px;min-width:34px}
  .cap-t b{font-size:16px}.cap-t span{font-size:13px}
  .cap-a .btn.sm{height:40px;padding:0 14px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px}
  .cv-acts{grid-template-columns:minmax(0,1fr) 42px}
  .cv-acts [data-act=cmp]{display:none}
  .cv-acts .enh.wide{grid-column:1/2}
  .cv-acts .row1 .btn{padding:0 8px;font-size:13.5px}
  .enh{padding:0 9px 0 7px;gap:7px}
  .enh span{font-size:13px}
  .doc{flex:1 1 100%;justify-content:flex-start}
  .dr-top{gap:7px}.dr-tile b{font-size:32px}
  .totop{right:14px;bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .deck-row .btn,.deck-row .switch{height:46px}
}
@media (pointer:coarse){
  .btn:hover,.icon-btn:hover,.enh:hover,.doc:hover{transform:none}
  .cv-dr{backdrop-filter:none}
}