/* Hearth & Hue control room (Overview). Charcoal and brass, with a cool steel accent for contrast. */
body.hud-on main{max-width:1720px;padding:14px 16px 60px}
.hud{position:relative;color:var(--h-ink);isolation:isolate}
.hud *{box-sizing:border-box}
.hud::before{content:"";position:fixed;inset:0;z-index:-1;background:
  radial-gradient(900px 520px at 50% 30%,rgba(var(--h-brass2-rgb),.10),transparent 70%),
  linear-gradient(rgba(var(--h-brass-rgb),.045) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,rgba(var(--h-brass-rgb),.045) 1px,transparent 1px) 0 0/48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 35%,#000 35%,transparent 85%);mask-image:radial-gradient(ellipse at 50% 35%,#000 35%,transparent 85%);pointer-events:none}
.hud .lines{position:fixed;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}
.hud button{font-family:var(--mono)}
/* header */
.h-chip{font:11px var(--mono);letter-spacing:.14em;color:var(--h-mut);text-transform:uppercase;white-space:nowrap} .h-chip b{color:var(--h-ink);font-weight:600}
.h-btn{cursor:pointer;background:transparent;color:var(--h-brass);border:1px solid var(--h-brass2);padding:6px 12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;border-radius:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:background .15s,color .15s,transform .1s}
.h-btn:hover{background:rgba(var(--h-brass-rgb),.16)} .h-btn:active{transform:scale(.96)} .h-btn.on{background:var(--h-brass);color:var(--h-on)}
.h-btn.live{color:var(--h-ok);border-color:rgba(var(--h-ok-rgb),.6)} .h-btn.demo{color:var(--h-warn);border-color:rgba(var(--h-warn-rgb),.7)}
.h-btn.big{padding:12px 14px;font-size:12px;font-weight:700;text-align:left;display:flex;flex-direction:column;gap:2px;min-height:58px}
/* every Command Deck subtitle reserves a fixed two-line slot, so buttons whose blurb happens to
   wrap ("Phone, WhatsApp or in person") don't grow taller than their neighbours in the same row */
.h-btn.big small{font-size:9.5px;letter-spacing:.06em;color:var(--h-mut);text-transform:none;font-weight:400;white-space:normal;line-height:1.3;min-height:2.6em;display:block}
.deck>button{min-width:0}
.deck{align-items:stretch}
.h-btn.pri{background:var(--h-brass);color:var(--h-on)} .h-btn.pri small{color:rgba(20,22,27,.75)} .h-btn.pri:hover{background:var(--h-brass-hi)}
.h-btn.danger{color:var(--h-rose);border-color:rgba(var(--h-rose-rgb),.6)}
.h-clock{text-align:right;line-height:1.15}
.h-clock .t{font:600 26px var(--mono);letter-spacing:.1em;color:var(--h-brass);text-shadow:0 0 14px rgba(var(--h-brass-rgb),.55)}
.h-clock .d{font:11px var(--mono);letter-spacing:.16em;color:var(--h-mut);text-transform:uppercase}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--h-ok);box-shadow:0 0 9px var(--h-ok);margin-right:6px;animation:h-blink 1.6s infinite}
@keyframes h-blink{50%{opacity:.25}}
@keyframes h-blink-soft{50%{opacity:.62}}
#hud[data-vis="mod"] .edot{animation-name:h-blink-soft;animation-duration:2.3s}
#hud[data-vis="min"] .edot{animation:none;opacity:.9}
/* layout */
.h-grid{display:grid;gap:12px;margin-top:12px;grid-template-columns:minmax(270px,1fr) minmax(430px,1.55fr) minmax(280px,1fr)}
.h-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.h-bottom{display:grid;gap:12px;margin-top:12px;grid-template-columns:1.4fr 1fr 1fr 1.1fr}
.p{position:relative;background:var(--h-panel);border:1px solid var(--h-line);padding:12px 14px 14px;backdrop-filter:blur(5px);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));min-width:0}
.p::before,.p::after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--h-brass);pointer-events:none}
.p::before{left:-1px;top:-1px;border-right:0;border-bottom:0} .p::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.p h3{margin:0 0 9px;font:11px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--h-brass);display:flex;justify-content:space-between;gap:8px;align-items:center;font-weight:600}
.p h3 span{color:var(--h-faint);letter-spacing:.1em;font-weight:400}
.big{font:300 42px/1 var(--font);color:#fff;text-shadow:0 0 18px rgba(var(--h-brass-rgb),.5);letter-spacing:.01em;white-space:nowrap}
.big small{font-size:17px;color:var(--h-brass);margin-right:3px}
.mid{font:300 27px/1.05 var(--font);color:#fff;white-space:nowrap} .mid small{font-size:13px;color:var(--h-brass);margin-right:2px}
.delta{font:11px var(--mono);color:var(--h-ok);margin-top:2px;letter-spacing:.04em} .delta.dn{color:var(--h-rose)} .delta.flat{color:var(--h-mut)}
.lbl{font:10px var(--mono);letter-spacing:.18em;color:var(--h-faint);text-transform:uppercase;margin-bottom:3px}
.kgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--h-line2)}
.spark{display:block;width:100%;height:46px;margin-top:10px}
.rings{display:flex;flex-wrap:wrap;justify-content:space-around;gap:10px 4px}
.ring{text-align:center;font:9.5px var(--mono);letter-spacing:.12em;color:var(--h-mut);text-transform:uppercase;flex:0 0 auto}
.ring svg{width:74px;height:74px}
.ring svg{display:block;margin:0 auto 4px}
/* products */
.prod{display:grid;grid-template-columns:64px 1fr;gap:10px;padding:8px 0;border-top:1px dashed var(--h-line2);align-items:center}
.prod:first-of-type{border-top:0;padding-top:0}
.pimg{position:relative;width:64px;height:64px;border:1px solid var(--h-line);overflow:hidden;background:#111}
.pimg img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) contrast(1.05)}
.pimg i{position:absolute;left:2px;top:2px;width:9px;height:9px;border:1px solid var(--h-brass);border-right:0;border-bottom:0}
.pname{font-size:12.5px;font-weight:600;display:flex;justify-content:space-between;gap:6px}
.pname em{font:11px var(--mono);font-style:normal;color:var(--h-brass)}
.meter{height:7px;background:rgba(255,255,255,.07);margin:6px 0 4px;position:relative}
.meter u{position:absolute;inset:0 auto 0 0;background:var(--c,var(--h-brass));box-shadow:0 0 9px var(--c,var(--h-brass));transition:width 1.4s cubic-bezier(.2,.8,.2,1);width:0}
.meter s{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--h-rose)}
.psub{display:flex;justify-content:space-between;font:10.5px var(--mono);color:var(--h-mut);letter-spacing:.04em}
.tagc{font:9.5px var(--mono);letter-spacing:.14em;padding:1px 6px;border:1px solid currentColor;text-transform:uppercase}
.tagc.ok{color:var(--h-ok)} .tagc.watch{color:var(--h-warn)} .tagc.crit{color:var(--h-rose);animation:h-blink 1.2s infinite} .tagc.na{color:var(--h-faint)}
.note{display:flex;gap:9px;align-items:center;padding:7px 10px;margin-top:8px;border:1px solid rgba(var(--h-warn-rgb),.5);background:rgba(var(--h-warn-rgb),.08);color:var(--h-warn);font-size:12px}
.note.crit{border-color:rgba(var(--h-rose-rgb),.55);background:rgba(var(--h-rose-rgb),.09);color:var(--h-rose)} .note.ok{border-color:rgba(var(--h-ok-rgb),.45);background:rgba(var(--h-ok-rgb),.07);color:var(--h-ok)}
.note b{font:600 10.5px var(--mono);letter-spacing:.14em;white-space:nowrap}
/* centre */
.core{position:relative;display:flex;align-items:center;justify-content:center;min-height:330px}
.core svg{width:100%;max-width:470px;height:auto;overflow:visible}
.r1{transform-origin:250px 250px;animation:h-spin 60s linear infinite}.r2{transform-origin:250px 250px;animation:h-spin 34s linear infinite reverse}.r3{transform-origin:250px 250px;animation:h-spin 16s linear infinite}
.sweep{transform-origin:250px 250px;animation:h-spin 6s linear infinite}
@keyframes h-spin{to{transform:rotate(360deg)}}
.blip{transform-box:fill-box;transform-origin:center;animation:h-ping 3s ease-out infinite}
@keyframes h-ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(4.2)}}
/* Sales Core "activity": how much the dial spins and pulses. High is the values above (unchanged).
   Moderate (the default) drops one ring and calms the sweep and pings; minimal quiets it further. */
#hud[data-vis="mod"] .r3{display:none}
#hud[data-vis="mod"] .sweep{animation-duration:11s}
#hud[data-vis="mod"] .blip{animation-duration:4.4s}
#hud[data-vis="min"] .r2,#hud[data-vis="min"] .r3{display:none}
#hud[data-vis="min"] .sweep{animation-duration:26s}
#hud[data-vis="min"] .blip{animation:none;opacity:.35}
/* Last sync/session/clock, relocated from the toolbar above into the dial's own empty corners -
   the SVG's outer ring stops well short of the box's actual corners, so this sits in genuinely
   spare space rather than crowding the dial. Hidden once the column narrows enough that the dial
   itself fills the box (see the max-width:900px rule below) so it never overlaps the ticks. */
.core-corner{position:absolute;z-index:2;pointer-events:none}
.core-corner .h-chip{white-space:nowrap}
.cm-tl{top:2px;left:6px}
.cm-tr{top:2px;right:6px}
.cm-br{bottom:2px;right:6px;text-align:right}
.cm-br .h-clock{line-height:1.1}
.cm-br .h-clock .t{font-size:16px}
.cm-br .h-clock .d{font-size:9px}
@media (max-width:900px){.core-corner{display:none}}
.coretext{position:absolute;text-align:center;left:50%;top:50%;transform:translate(-50%,-50%);width:230px}
.coretext .l{font:10.5px var(--mono);letter-spacing:.3em;color:var(--h-brass)}
.coretext .n{font:300 50px/1.05 var(--font);color:#fff;text-shadow:0 0 24px rgba(var(--h-brass-rgb),.7)}
.coretext .s{font:10.5px var(--mono);color:var(--h-mut);letter-spacing:.1em;line-height:1.5}
.coretext button{margin-top:4px;padding:3px 9px;font-size:9.5px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs .h-btn{padding:3px 9px;font-size:10px}
.chartbox{position:relative}
.chartbox svg{display:block;width:100%;height:auto}
.axis{font:11.5px var(--mono);fill:var(--h-faint)}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font:10.5px var(--mono);color:var(--h-mut);letter-spacing:.06em}
.legend i{display:inline-block;width:9px;height:9px;margin-right:6px;vertical-align:-1px}
.pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;padding:8px 0 4px}
.pipe::before{content:"";position:absolute;left:10%;right:10%;top:34px;height:2px;background:repeating-linear-gradient(90deg,var(--h-line) 0 6px,transparent 6px 12px)}
.pipe::after{content:"";position:absolute;left:10%;top:31px;width:9px;height:9px;border-radius:50%;background:var(--h-brass);box-shadow:0 0 12px var(--h-brass);animation:h-packet 4.2s linear infinite}
@keyframes h-packet{from{left:10%;opacity:0}8%{opacity:1}92%{opacity:1}to{left:calc(90% - 9px);opacity:0}}
.stage{text-align:center;cursor:pointer;position:relative;z-index:1;background:none;border:0;color:inherit;padding:0}
.stage .c{width:56px;height:56px;margin:0 auto 9px;border:2px solid var(--h-line);border-radius:50%;background:var(--h-on);display:flex;align-items:center;justify-content:center;font:600 20px var(--mono);color:#fff;transition:.2s}
.stage.hot .c{border-color:var(--h-brass);box-shadow:0 0 16px rgba(var(--h-brass-rgb),.5);color:var(--h-brass)}
.stage:hover .c{transform:scale(1.07)}
/* reserve two lines' worth of height even for one-word labels ("Paid", "Packed", "Delivered"),
   so the whole row sits flush regardless of which labels happen to wrap ("Awaiting payment",
   "In transit") - previously the row's own height came only from its tallest label, so the
   circle/label group as a whole read as cramped against the dashed connector line above it */
.stage .n{display:block;min-height:23px;padding-top:2px;font:9.5px/1.35 var(--mono);letter-spacing:.14em;color:var(--h-mut);text-transform:uppercase}
/* feed + log */
.feed{list-style:none;margin:0;padding:0}
.feed li{display:grid;grid-template-columns:66px 1fr auto;gap:2px 8px;padding:7px 4px;border-bottom:1px dashed var(--h-line2);cursor:pointer;font-size:12.5px;animation:h-in .6s ease both;transition:background .15s}
.feed li:hover{background:rgba(var(--h-brass-rgb),.09)}
.feed li.fresh{background:linear-gradient(90deg,rgba(var(--h-live-rgb),.2),transparent)}
.feed .t{font:11.5px var(--mono);color:var(--h-ink);grid-row:span 2} .feed .t small{display:block;font-size:9px;color:var(--h-faint);letter-spacing:.1em} .feed .a{font:12px var(--mono);color:var(--h-brass);text-align:right}
.feed .s{font:10.5px var(--mono);color:var(--h-faint);grid-column:2/4;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@keyframes h-in{from{opacity:0;transform:translateX(18px)}}
.st{font:9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:0 5px;border:1px solid currentColor}
.st.pending{color:var(--h-warn)}.st.paid{color:var(--h-steel)}.st.packed{color:var(--h-mint)}.st.shipped{color:var(--h-brass)}.st.delivered{color:var(--h-ok)}.st.cancelled,.st.refunded{color:var(--h-rose)}
.term{font:11px/1.6 var(--mono);height:176px;overflow:hidden;color:var(--h-mut);display:flex;flex-direction:column}
.term div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:h-in .4s ease both}
.term div.noanim{animation:none}
.term .ts{color:var(--h-faint)} .term .sys{color:var(--h-steel)} .term .ord{color:var(--h-live);text-shadow:0 0 6px rgba(var(--h-live-rgb),.5)} .term .wrn{color:var(--h-warn)} .term .err{color:var(--h-rose)} .term .ok{color:#7ED6CF}
/* the live cursor sits above the newest register (which now renders at the top) rather than trailing
   the oldest one at the bottom - a fixed prompt row, always blinking, never itself re-animated */
.term::before{content:"_";color:var(--h-brass);animation:h-blink 1s steps(1) infinite;line-height:1.6}
.bar{display:grid;grid-template-columns:96px 1fr 34px;gap:8px;align-items:center;margin:6px 0;font-size:12px}
.bar i{display:block;height:8px;background:rgba(255,255,255,.07);position:relative}
.bar i u{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--h-brass2),var(--h-brass));box-shadow:0 0 9px rgba(var(--h-brass-rgb),.6);transition:width 1.4s cubic-bezier(.2,.8,.2,1);width:0}
.bar span:last-child{text-align:right;font:12px var(--mono);color:var(--h-mut)}
.donutwrap{display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:center}
.donutwrap svg{width:130px;height:130px}
.leg{font:11px var(--mono);color:var(--h-mut);display:flex;flex-direction:column;gap:10px}
.leg div{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center}.leg i{width:10px;height:10px;display:block}.leg b{color:var(--h-ink);font-weight:600}
/* the units/revenue line sits snug under its own product (small positive gap, never overlapping it),
   while .leg's own gap keeps each product's pair clearly apart from the next one */
.leg .mix-sub{grid-template-columns:10px 1fr;margin-top:2px;color:var(--h-faint);font-size:10px}
.leg .mixrow{display:block;cursor:pointer;padding:3px 5px;margin:-3px -5px;border-radius:3px;transition:background .15s}
.leg .mixrow:hover{background:rgba(var(--h-brass-rgb),.1)}
.heat{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.heat i{aspect-ratio:1.16;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:rgba(255,255,255,.06);display:block;cursor:crosshair;transition:transform .12s;box-shadow:none}
.heat i:hover{transform:scale(1.18)}
.heat i.sun{box-shadow:inset 0 0 0 999px rgba(var(--h-steel-rgb),.16)}
.heat i.hol{box-shadow:inset 0 0 0 999px rgba(var(--h-rose-rgb),.22)}
.heatlbl{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;font:9px var(--mono);color:var(--h-faint);text-align:center;margin-bottom:4px;letter-spacing:.1em}
.heatlbl span:last-child{color:var(--h-mut)}
.heatkey{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font:10px var(--mono);letter-spacing:.08em;color:var(--h-faint);text-transform:uppercase}
.heatkey span{display:inline-flex;align-items:center;gap:6px}
.heatkey .hk{width:10px;height:10px;border-radius:2px;background:rgba(255,255,255,.08)}
.heatkey .hk.sun{background:rgba(var(--h-steel-rgb),.5)}
.heatkey .hk.hol{background:rgba(var(--h-rose-rgb),.55)}
.htbl{width:100%;min-width:0;border-collapse:collapse;font-size:12.5px}
.htbl td,.htbl th{padding:6px 4px;text-align:left;border-bottom:1px dashed var(--h-line2)} .htbl th{background:none;font:9.5px var(--mono);letter-spacing:.14em;color:var(--h-faint);font-weight:400;text-transform:uppercase} .htbl .r{text-align:right;font-family:var(--mono)}
.deck{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.tip{position:fixed;z-index:60;pointer-events:none;background:rgba(15,17,21,.96);border:1px solid var(--h-brass2);padding:8px 10px;font:11px/1.5 var(--mono);color:var(--h-ink);max-width:260px;box-shadow:0 8px 28px rgba(0,0,0,.6);display:none}
.tip b{color:var(--h-brass)} .tip i{display:inline-block;width:8px;height:8px;margin-right:6px}
/* modal + boot */
.h-modal,.h-boot{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(8,9,12,.82);backdrop-filter:blur(6px);padding:16px}
.h-modal .box,.h-boot .box{width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--h-on);border:1px solid var(--h-brass2);padding:18px 20px;position:relative;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));animation:h-pop .25s ease}
@keyframes h-pop{from{opacity:0;transform:scale(.96) translateY(8px)}}
.box h4{margin:0 0 4px;font:400 26px var(--serif);color:#fff} .box .sub{font:11px var(--mono);letter-spacing:.14em;color:var(--h-mut);margin-bottom:12px;text-transform:uppercase}
.box .row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--h-line2);font-size:13px} .box .row span:first-child{font:10.5px var(--mono);letter-spacing:.12em;color:var(--h-faint);text-transform:uppercase}
.box .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.box input,.box select{width:100%;background:var(--h-bg);border:1px solid var(--h-line);color:#fff;padding:10px 12px;font:16px var(--mono);margin:8px 0}
.box select option{background:var(--h-on);color:#fff}
.tl{margin:8px 0 2px;border-left:2px solid var(--h-line2);padding-left:12px;font:11.5px var(--mono);color:var(--h-mut)} .tl div{position:relative;padding:3px 0} .tl div::before{content:"";position:absolute;left:-18px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--h-brass)}
.boot-lines{font:12px/1.7 var(--mono);color:var(--h-mut);min-height:150px;margin:10px 0} .boot-lines div{animation:h-in .3s ease both} .boot-lines .ok{color:var(--h-ok)}
.boot-bar{height:4px;background:rgba(255,255,255,.08);margin:10px 0 14px}.boot-bar u{display:block;height:100%;width:0;background:var(--h-brass);box-shadow:0 0 10px var(--h-brass);transition:width .4s}
.h-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;background:var(--h-on);border:1px solid var(--h-brass);color:var(--h-brass);font:12px var(--mono);letter-spacing:.1em;padding:9px 16px;animation:h-in .3s ease both}
.hud.full{background:var(--h-bg);overflow:auto;padding:14px}
/* responsive */
@media (max-width:1250px){.h-grid{grid-template-columns:1fr 1fr}.h-col.mid-col{grid-column:1/-1;order:-1}.h-bottom{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.p h3 .tabs{width:100%;margin-left:0}.h-grid,.h-bottom{grid-template-columns:1fr}.h-clock{text-align:left;width:100%}.h-clock .t{font-size:22px}.big{font-size:34px}.coretext .n{font-size:38px}.core{min-height:290px}.deck{grid-template-columns:1fr 1fr}.donutwrap{grid-template-columns:110px 1fr}.donutwrap svg{width:110px;height:110px}body.hud-on main{padding:10px 8px 60px}}
@media (prefers-reduced-motion:reduce){.hud *{animation:none!important}}
/* keep the control room's own small tables as real tables on phones (the rest of the back office turns tables into cards) */
.hud .htbl{display:table;width:100%;min-width:0}
.hud .htbl tbody{display:table-row-group;width:auto} .hud .htbl tr,.hud .htbl tr:has(th){display:table-row;width:auto;border:0;background:none;padding:0;margin:0}
.hud .htbl td,.hud .htbl th{display:table-cell;width:auto;padding:6px 4px;border-bottom:1px dashed var(--h-line2);background:none}
.hud .htbl td::before{content:none}
.p h3{flex-wrap:wrap} .p h3 .tabs{margin-left:auto}
.hud .htbl td:first-child,.hud .htbl th:first-child{text-align:left!important}

/* ---- brand mark: the TM sits in the same brass as the ampersand */
.tm{font:600 .4em var(--mono,monospace);vertical-align:super;color:var(--h-brass,var(--h-brass));margin-left:3px;letter-spacing:0;line-height:0}
.box h4 .amp{color:var(--h-brass)}
/* ---- sticky toolbar: the view switch, sound, live/demo and the period stay in reach while you scroll.
   Collapsed by default (a thin strip with the clock and an arrow); the arrow brings the full bar back. */
.seg{display:inline-flex;border:1px solid var(--h-brass2);border-radius:99px;overflow:hidden}
.seg button,.seg a{border:0;background:transparent;color:var(--h-brass);padding:6px 12px;font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s;border-radius:0;text-decoration:none;display:inline-block}
.seg button:hover,.seg a:hover{background:rgba(var(--h-brass-rgb),.16)} .seg button.on,.seg a.on{background:var(--h-brass);color:var(--h-on)}
.h-btn[data-snd-btn].on{background:var(--h-brass);color:var(--h-on)}
.chipsrow{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.chipsrow .h-btn{padding:2px 7px;font-size:9.5px}
/* a small dot between period groups (7D-6M vs 12M-Q4) reads lighter than a hard vertical rule
   while still marking the grouping */
.chipsrow .sep{width:3px;height:3px;border-radius:50%;background:var(--h-mut);margin:0 2px}
.h-prange{flex:0 1 220px;font:9.5px/1.4 var(--mono);letter-spacing:.05em;color:var(--h-mut);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-prange b{color:var(--h-brass);font-weight:600}
/* ---- the three columns scroll on their own (wide screens) */
@media (min-width:1251px){
  .h-grid{align-items:start}
  .h-col{max-height:calc(100vh - var(--adm-h,0px) - var(--hs-h,0px) - 26px);overflow-y:auto;overflow-x:hidden;padding:2px}
}
/* ---- desktop layout choice (Appearance > Devices): "page" = no inner scrolling, every container shown, the whole page scrolls as one */
@media (min-width:1251px){
  html[data-layout="page"] .h-col{max-height:none;overflow:visible}
}
/* Vertical scrollbars are removed for good (they nudged the width of neighbouring containers).
   Wheel, touch and keyboard scrolling all still work. */
html,body,.h-col,dialog,*{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,.h-col::-webkit-scrollbar,*::-webkit-scrollbar{display:none;width:0;height:0}
/* ---- stock slideshow */
.show{margin-bottom:12px}
.shframe{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0c0d10;border:1px solid var(--h-line)}
.shframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;filter:saturate(.9) contrast(1.05)}
.shframe img.on{opacity:1}
.shscan{position:absolute;left:0;right:0;height:34px;background:linear-gradient(180deg,transparent,rgba(var(--h-brass-rgb),.32),transparent);animation:h-shscan 3.4s linear infinite;pointer-events:none}
@keyframes h-shscan{from{top:-34px}to{top:100%}}
.shframe .c1,.shframe .c2,.shframe .c3,.shframe .c4{position:absolute;width:14px;height:14px;border:2px solid var(--h-brass);pointer-events:none}
.shframe .c1{left:6px;top:6px;border-right:0;border-bottom:0}.shframe .c2{right:6px;top:6px;border-left:0;border-bottom:0}.shframe .c3{left:6px;bottom:8px;border-right:0;border-top:0}.shframe .c4{right:6px;bottom:8px;border-left:0;border-top:0}
.shtop{position:absolute;left:24px;right:24px;top:8px;display:flex;justify-content:space-between;font:9.5px var(--mono);letter-spacing:.16em;color:var(--h-brass);text-shadow:0 1px 4px #000}
.shcap{position:absolute;left:0;right:0;bottom:3px;padding:22px 22px 9px;background:linear-gradient(0deg,rgba(8,9,12,.94),transparent);display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
#shCap b{display:block;font-size:14px;color:#fff;font-weight:600} #shCap span{font:10.5px var(--mono);color:var(--h-mut)}
.shbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08)}
.shbar u{display:block;height:100%;width:0;background:var(--h-brass);box-shadow:0 0 6px var(--h-brass)}
.shbar u.run{animation:h-shbar 4.8s linear forwards} .shbar u.paused{animation-play-state:paused}
@keyframes h-shbar{from{width:0}to{width:100%}}
.shctl{display:flex;align-items:center;gap:6px;margin-top:8px}
.shctl .h-btn{padding:4px 10px;min-width:34px}
.shdots{display:flex;gap:4px;flex:1;justify-content:center;flex-wrap:wrap;min-width:0}
.shdots i{width:14px;height:4px;background:rgba(255,255,255,.16);cursor:pointer;display:block;transition:background .2s} .shdots i:hover{background:rgba(var(--h-brass-rgb),.5)} .shdots i.on{background:var(--h-brass);box-shadow:0 0 6px var(--h-brass)}
.shstate{font:9.5px var(--mono);letter-spacing:.14em;color:var(--h-faint);white-space:nowrap}
.prod{cursor:pointer} .prod.cur .pimg{border-color:var(--h-brass);box-shadow:0 0 9px rgba(var(--h-brass-rgb),.55)}
/* ---- delivery watch: the crawler travels from the purchase date towards the optimal delivery date */
.wsum{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;font:10.5px var(--mono);letter-spacing:.12em}
.wsum span{padding:2px 8px;border:1px solid currentColor;cursor:pointer;transition:background .15s,opacity .15s;user-select:none}
.wsum span:hover{background:rgba(255,255,255,.1)}
.wsum span.off{opacity:.4}
.wc-late{color:var(--h-rose)} .wc-delayed{color:var(--h-warn)} .wc-watch{color:var(--h-steel)} .wc-ok{color:var(--h-ok)}
.wc-late.active{background:var(--h-rose);color:var(--h-on)}
.wc-delayed.active{background:var(--h-warn);color:var(--h-on)}
.wc-watch.active{background:var(--h-steel);color:var(--h-on)}
.wc-ok.active{background:var(--h-ok);color:var(--h-on)}
.wleg{display:flex;flex-wrap:wrap;gap:4px 12px;margin:8px 0 4px;font:9.5px var(--mono);letter-spacing:.1em;color:var(--h-mut)}
.wleg i{display:inline-block;width:14px;height:6px;margin-right:5px;vertical-align:1px;opacity:.75}
.wleg i.hz{background:repeating-linear-gradient(135deg,var(--h-rose) 0 3px,#3a1d1a 3px 6px);opacity:1} .wleg i.dd{width:2px;height:11px;background:var(--h-ink);vertical-align:-2px;opacity:1}
.wrow{padding:10px 4px 11px;border-top:1px dashed var(--h-line2);cursor:pointer;transition:background .15s} .wrow:first-child{border-top:0}
.wrow:hover{background:rgba(var(--h-brass-rgb),.06)}
.wh{display:flex;gap:8px;align-items:baseline;font-size:12.5px}
.wh b{font:600 12px var(--mono);color:var(--h-brass)} .wn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--h-mut);font-size:12px} .wst{font:600 10px var(--mono);letter-spacing:.1em;white-space:nowrap}
.st-late .wst{color:var(--h-rose)} .st-delayed .wst{color:var(--h-warn)} .st-watch .wst{color:var(--h-steel)} .st-ok .wst{color:var(--h-ok)}
.wt{position:relative;height:16px;margin:9px 0 6px;background:rgba(255,255,255,.04)}
.ws{position:absolute;top:0;bottom:0;background:var(--c);opacity:.2} .ws.cur{opacity:.38;outline:1px solid var(--c);outline-offset:-1px}
.wf{position:absolute;left:0;top:4px;bottom:4px;background:repeating-linear-gradient(90deg,var(--h-brass) 0 8px,var(--h-brass2) 8px 16px);background-size:16px 100%;animation:h-ants 1s linear infinite;box-shadow:0 0 8px rgba(var(--h-brass-rgb),.55);transition:width 1s linear}
@keyframes h-ants{to{background-position:16px 0}}
.wz{position:absolute;top:2px;bottom:2px;min-width:2px;background:repeating-linear-gradient(135deg,var(--h-rose) 0 4px,#4a2420 4px 8px);background-size:11.3px 100%;animation:h-ants 1.2s linear infinite;transition:left 1s linear,width 1s linear}
.wd{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--h-ink);box-shadow:0 0 6px var(--h-ink);margin-left:-1px}
.wc{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(var(--h-brass-rgb),.9);transition:left 1s linear;z-index:2}
.wc::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--h-brass);animation:h-ping2 1.7s ease-out infinite}
@keyframes h-ping2{from{transform:scale(.6);opacity:1}to{transform:scale(2.2);opacity:0}}
.st-delayed .wc,.st-late .wc{box-shadow:0 0 10px 3px rgba(var(--h-rose-rgb),.9)} .st-delayed .wc::after,.st-late .wc::after{border-color:var(--h-rose)}
.wl{display:flex;justify-content:space-between;gap:8px;font:9px var(--mono);letter-spacing:.08em;color:var(--h-faint)}
.wsub{font:9.5px/1.5 var(--mono);letter-spacing:.04em;color:var(--h-mut);margin-top:3px}
.wmore{margin-top:8px}
.tgl{display:block;margin:12px 0 0} .tgl span{display:block;font:11px var(--mono);letter-spacing:.1em;color:var(--h-mut);text-transform:uppercase} .tgl small{display:block;color:var(--h-faint);font-size:11px;line-height:1.4} .tgl input{margin:5px 0 3px}
/* ---- entities (anonymous visitors), funnel, reading */
.c-browse{--cc:var(--h-steel)}.c-cart{--cc:var(--h-brass)}.c-checkout{--cc:var(--h-mint)}.c-reading{--cc:var(--h-lav)}.c-done{--cc:var(--h-ok)}
.entTop{display:flex;justify-content:space-between;gap:12px;align-items:flex-end}
.entLeg{display:flex;flex-direction:column;gap:3px;font:10px var(--mono);letter-spacing:.1em;color:var(--h-mut);min-width:150px}
.entLeg span{display:flex;align-items:center;gap:6px} .entLeg i{width:8px;height:8px;border-radius:50%;background:var(--cc);box-shadow:0 0 6px var(--cc);display:block} .entLeg b{color:#fff;margin-left:auto}
.edots{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;min-height:14px;align-items:center}
.edot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--cc);box-shadow:0 0 8px var(--cc);animation:h-blink 2.4s infinite}
.ents{list-style:none;margin:0;padding:0}
.ent{display:grid;grid-template-columns:14px 1fr auto auto;gap:2px 8px;align-items:center;padding:7px 4px;border-top:1px dashed var(--h-line2);cursor:pointer;font-size:12px;transition:background .15s}
.ent:hover{background:rgba(var(--h-brass-rgb),.08)} .ent.idle{opacity:.55}
.ent .edot{width:8px;height:8px}
.ename{font:600 11.5px var(--mono);color:var(--h-ink);letter-spacing:.06em} .estate{font:10px var(--mono);letter-spacing:.08em;color:var(--cc);text-align:right;white-space:nowrap} .etime{font:600 12px var(--mono);color:#fff;min-width:42px;text-align:right}
.esub{grid-column:2/-1;font:9.5px/1.45 var(--mono);letter-spacing:.04em;color:var(--h-faint)}
.entFoot{margin-top:8px;font:10px var(--mono);letter-spacing:.06em;color:var(--h-mut)} .entFoot b{color:var(--h-brass)}
.fun .fr{display:grid;grid-template-columns:118px 1fr 84px;gap:8px;align-items:center;margin:6px 0;font:11px var(--mono);color:var(--h-mut)}
.fun .fr i{height:9px;background:rgba(255,255,255,.07);display:block;position:relative}
.fun .fr u{position:absolute;inset:0 auto 0 0;width:0;background:var(--c);box-shadow:0 0 8px var(--c);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.fun .fr span:last-child{text-align:right;color:#fff} .fun .fr em{font-style:normal;color:var(--h-faint);margin-left:3px}
.rd{display:grid;grid-template-columns:minmax(110px,150px) 1fr auto;gap:8px;align-items:center;margin:6px 0;font-size:12px}
.rd i{height:7px;background:rgba(255,255,255,.07);display:block;position:relative} .rd u{position:absolute;inset:0 auto 0 0;width:0;background:var(--h-lav);box-shadow:0 0 8px rgba(var(--h-lav-rgb),.6);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.rd span:last-child{font:11px var(--mono);color:var(--h-mut);text-align:right;white-space:nowrap}
.nowr{font:9px var(--mono);color:var(--h-ok);margin-left:4px;letter-spacing:.1em;animation:h-blink 1.6s infinite}
/* ---- the classic overview (the earlier, plainer screen) and its switch */
.viewbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 14px}
.viewbar .seg{border-color:var(--brass)} .viewbar .seg button{color:var(--brass-bright,var(--h-brass))} .viewbar .seg button.on{background:var(--brass-bright,var(--h-brass));color:var(--h-on)}
.viewbar small{color:var(--muted,var(--h-mut))}
@media (max-width:760px){.h-prange{text-align:left}.entLeg{min-width:0}.fun .fr{grid-template-columns:96px 1fr 76px}.rd{grid-template-columns:100px 1fr auto}
  /* Reading & browsing, phones only: every title reserves the same two-line slot, whether it's
     short or long, and whether or not its live "N NOW" ticker is showing - so rows line up neatly
     and don't jump around as readers come and go. */
  .rd span:first-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;min-height:2.7em;align-self:start;padding-top:1px}
  .nowr{display:inline-block;margin-top:1px}
}

/* ---- One header instead of two: the control-room bar now sits directly under the top bar as part of the
   same surface. Its own brand, tag, sound button and collapse arrow are gone (the top bar already has them),
   and the clock is a single line. The top bar's arrow collapses the whole header (see admin.js). */


/* =====================================================================================================
   BUTTONS. Two families that share one accent variable (--bc, "r,g,b"):
   1. TERMINAL for every content button (forms, tables, dialogs, action decks): a ">" prompt marker and a brass
      edge line at the left, a see-through brass fill, and on hover the fill wipes across in coarse steps while
      the prompt turns to a solid arrow that blinks twice.
   2. SLANT PLATE for the top bar, the control-room toolbar, the period chips and the small chart/slideshow
      tabs: a leaning parallelogram with a slanted brass edge; on hover solid brass floods in from the left.
   Selectors start with :root so they win over the older per-button rules without needing !important.
   ===================================================================================================== */
:root button:where(:not(.top-toggle,.mi-exit,.stage,header.top *,.chipsrow *,.tabs *,.shctl *)){
  --bc:var(--h-brass-rgb);position:relative;overflow:visible;clip-path:none!important;border-radius:0!important;border:0;
  padding:9px 16px 9px 30px;color:var(--h-tint);font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  background:linear-gradient(90deg,rgb(var(--bc)),rgb(var(--bc))) 0 0/0% 100% no-repeat,rgba(var(--bc),.09);
  box-shadow:none;transition:background-size .32s steps(9),color .1s}
:root button:where(:not(.top-toggle,.mi-exit,.stage,header.top *,.chipsrow *,.tabs *,.shctl *))::before{
  content:'>';position:absolute;left:12px;top:50%;transform:translateY(-50%);font:600 12px var(--mono);color:rgb(var(--bc));z-index:1;letter-spacing:0}
:root button:where(:not(.top-toggle,.mi-exit,.stage,header.top *,.chipsrow *,.tabs *,.shctl *))::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:rgb(var(--bc))}
:root button:where(:not(.top-toggle,.mi-exit,.stage,header.top *,.chipsrow *,.tabs *,.shctl *)):hover{background-size:100% 100%,auto;color:var(--h-on);box-shadow:none}
:root button:where(:not(.top-toggle,.mi-exit,.stage,header.top *,.chipsrow *,.tabs *,.shctl *)):hover::before{content:'\25B6';color:var(--h-on);animation:hh-blink 1.5s steps(1) 2}
:root button:where(:not(.top-toggle,.mi-exit,.stage,header.top *,.chipsrow *,.tabs *,.shctl *)):active{transform:none;box-shadow:inset 0 0 0 2px rgba(20,17,10,.45)}
@keyframes hh-blink{0%{opacity:1}50%{opacity:.1}100%{opacity:1}}
:root .h-btn.big{padding:12px 14px 12px 30px}
:root .h-btn.big::before{top:17px;transform:none}
:root .h-btn.big{background:linear-gradient(100deg,transparent 0 38%,rgba(255,236,200,.30) 50%,transparent 62% 100%) no-repeat -170% 0/60% 100%,linear-gradient(180deg,rgba(var(--bc),.16),rgba(var(--bc),.06));transition:background-position .55s ease,box-shadow .25s,color .2s}
/* the big command-deck buttons keep the fast glow that washes across to the right, instead of the stepped wipe */
:root .h-btn.big:hover{background-position:270% 0,0 0;background-size:60% 100%,auto;color:var(--h-tint2);box-shadow:0 0 20px rgba(var(--bc),.3),inset 0 0 16px rgba(var(--bc),.16)}
:root .h-btn.big:hover::before{color:rgb(var(--bc))}
:root .h-btn.big.pri{background:linear-gradient(100deg,transparent 0 38%,rgba(255,255,255,.5) 50%,transparent 62% 100%) no-repeat -170% 0/60% 100%,linear-gradient(180deg,var(--h-g1),var(--h-g2))!important}
:root .h-btn.big.pri:hover{background-position:270% 0,0 0!important;background-size:60% 100%,auto!important;color:var(--h-on)!important;box-shadow:0 0 22px rgba(var(--h-brass-rgb),.45)}
:root .h-btn.big.pri:hover::before{color:var(--h-on)}
:root td button,:root tr button{padding:5px 10px 5px 24px;font-size:10px}
:root td button::before,:root tr button::before{left:9px;font-size:10px}

/* ---- Slant plate ----
   header.top .store-link ("View store") deliberately sits OUTSIDE this family now - it's styled
   as a plain rounded pill in admin.css instead, to match the "Back office" badge beside it. */
:root header.top button,:root .chipsrow button,:root .tabs button,:root .shctl button{
  --bc:var(--h-brass-rgb);position:relative;overflow:visible;display:inline-flex;align-items:center;justify-content:center;margin:0 4px;border:0;border-radius:0!important;
  --h:34px;--sk:calc(var(--h)*.325);height:var(--h);clip-path:polygon(var(--sk) 0,100% 0,calc(100% - var(--sk)) 100%,0 100%)!important;padding:0 24px;color:var(--h-tint);font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  background:linear-gradient(90deg,var(--h-g1),var(--h-g2)) 0 0/0% 100% no-repeat,rgba(var(--bc),.10);box-shadow:none;transition:background-size .38s cubic-bezier(.7,0,.2,1),color .15s}
:root header.top button::before,:root .chipsrow button::before,:root .tabs button::before,:root .shctl button::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:calc(var(--sk) + 4px);background:rgb(var(--bc));clip-path:polygon(var(--sk) 0,calc(var(--sk) + 3px) 0,3px 100%,0 100%);transform:none;transition:background .2s}
:root header.top button::after,:root .chipsrow button::after,:root .tabs button::after,:root .shctl button::after{display:none}
:root header.top button:hover,:root .chipsrow button:hover,:root .tabs button:hover,:root .shctl button:hover{background-size:100% 100%,auto;color:var(--h-on)}
:root header.top button:hover::before,:root .chipsrow button:hover::before,:root .tabs button:hover::before,:root .shctl button:hover::before{background:rgba(20,17,10,.5)}
:root header.top button:active,:root .chipsrow button:active,:root .tabs button:active,:root .shctl button:active{transform:translateX(1px)}
:root .shctl button{--h:22px;padding:0 14px;font-size:10px;letter-spacing:.1em;margin:0 3px}
/* the Sales Trend (R/Orders) and Delivery Watch (Targets) toggle buttons sit right beside an 11px
   heading - at the shared 22px control height they read heavier and boxier than the text next to
   them, so they get their own shorter height here; font-size and padding are untouched. */
:root .tabs button{--h:17px;padding:0 14px;font-size:10px;letter-spacing:.1em;margin:0 3px}
/* the period chips (7D/14D/1M.../Q4) are the smallest control in the room already - shrink them
   a size further than the shared 22px, since there are a dozen of them sitting in one row and
   they're picked, not read */
:root .chipsrow button{--h:18px;padding:0 10px;font-size:9px;letter-spacing:.08em;margin:0 2px}

/* ---- shared states (both families) ---- */
:root button.on,:root .h-btn.on,:root button.pri,:root .h-btn.pri{background:linear-gradient(180deg,var(--h-g1),var(--h-g2))!important;color:var(--h-on)!important}
:root button.on::before,:root .h-btn.on::before,:root button.pri::before,:root .h-btn.pri::before{color:var(--h-on)}
:root button.on::after,:root .h-btn.on::after,:root button.pri::after,:root .h-btn.pri::after{background:var(--h-on)}
:root header.top button.on::before,:root .chipsrow button.on::before,:root .tabs button.on::before{background:var(--h-on)}
:root button.on:hover,:root .h-btn.on:hover,:root button.pri:hover,:root .h-btn.pri:hover{background:linear-gradient(180deg,var(--h-g3),var(--h-g4))!important}
:root button.danger,:root .h-btn.danger{--bc:var(--h-rose-rgb);color:var(--h-rose-tint)}
:root .h-btn.live{--bc:var(--h-ok-rgb);color:var(--h-ok-tint)}
:root .h-btn.demo{--bc:var(--h-warn-rgb)}
:root button:disabled,:root .h-btn:disabled{opacity:.4;cursor:default}
:root button:disabled:hover{background-size:0% 100%,auto;color:var(--h-tint)}
:root button:disabled:hover::before{animation:none;content:'>'}
:root button:focus-visible,:root .store-link:focus-visible{outline:1px dashed rgba(var(--h-brass-rgb),.85);outline-offset:3px}
:root header.top .top-toggle{clip-path:none!important;padding:0;margin:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center}
:root header.top .top-toggle::before{display:none}
/* #snd ("sound on/off") is a fixed round icon button, not a slanted text-label pill, so it's fully
   excluded from the plate family below rather than patched around it - same border/background as
   the neighbouring top-toggle (▲) icon button, for a small, quiet circle instead of the plate's big
   gradient-filled box. The plate's decorative left notch is a ::before; since the icon itself now
   lives on ::after (admin.css), the notch is simply switched off rather than fought property by
   property. */
:root header.top #snd{clip-path:none!important;border-radius:50%!important;border:1px solid rgba(var(--h-brass-rgb),.5)!important;background:rgba(var(--h-brass-rgb),.06)!important;color:var(--brass-bright)!important;transition:background .15s,border-color .15s}
:root header.top #snd:hover{border-color:var(--h-brass-hi)!important;background:rgba(var(--h-brass-rgb),.2)!important}
:root header.top #snd.on{border-color:var(--brass-bright)!important;background:var(--brass-bright)!important;color:var(--h-on)!important}
:root header.top #snd::before{display:none!important}
:root header.top #snd::after{display:block!important}
:root .top-toggle{border-radius:0!important;border:1px solid rgba(var(--h-brass-rgb),.5);background:rgba(var(--h-brass-rgb),.06)}
:root .top-toggle:hover{border-color:var(--h-brass-hi);background:rgba(var(--h-brass-rgb),.2)}
@media (prefers-reduced-motion:reduce){:root button,:root button::before{transition:none!important;animation:none!important}}
/* phones */
@media (max-width:640px){
  :root button:where(:not(.top-toggle,.mi-exit,.stage,header.top *,.chipsrow *,.tabs *,.shctl *)){min-height:32px;padding:6px 11px 6px 26px;font-size:9.5px;letter-spacing:.1em}
  :root button:where(:not(.top-toggle,.mi-exit,.stage,header.top *,.chipsrow *,.tabs *,.shctl *))::before{left:10px}
  :root header.top button{--h:30px;padding:0 16px;font-size:9.5px;letter-spacing:.1em}
}

/* good news (a new order): a bright green with a soft glow, distinct from the ordinary OK green */
.h-toast.good{background:#0F1A14;border-color:var(--h-live);color:#8BF0B0;box-shadow:0 0 18px rgba(var(--h-live-rgb),.35)}

/* the period selector now lives at the top of the left column (it used to be a second row under the toolbar) */
.h-periodp .chipsrow{display:flex;flex-wrap:wrap;gap:10px 2px;align-items:center;margin-top:8px}
.h-periodp .chipsrow .sep{margin:0 5px}
.h-periodp .h-prange{flex:none;text-align:left;white-space:normal;margin-top:10px}

/* ---- compact header (desktop): both top panels are smaller so more of the page is left for the data ---- */
@media (min-width:641px){
  :root header.top{padding:5px 16px;gap:2px 12px}
  :root header.top .emblem{width:20px;height:20px}
  :root header.top .brand{font-size:17px}
  :root header.top .brand small{font-size:8.5px;padding:2px 7px;margin-left:7px;letter-spacing:.14em}
  /* View store shrinks in lockstep with the Back office badge above, so the two stay the same
     height at this width too, not just at the base (narrow-window) size in admin.css */
  :root header.top .store-link{font-size:8.5px;padding:2px 7px;letter-spacing:.14em}
  :root header.top .brand sup.tm{font-size:8px}
  :root header.top nav a{padding:3px 10px;font-size:12.5px}
  :root header.top .who{font-size:10.5px}
  :root header.top button{--h:24px;padding:0 14px;font-size:9.5px;letter-spacing:.14em}
  :root header.top .top-toggle{width:22px;height:22px}
}


/* =====================================================================================================
   THE MAP: South Africa on a fine grid, tilted like a table seen at an angle, behind the whole control room.
   It opens on the Western Cape. "Map: front" pulls it forward (panels dim), eases out to most of the country and
   lets you drag to pan, scroll to zoom and adjust tilt and rotation. --k is "map units per screen pixel" so
   labels and dots stay the same size on screen at any zoom.
   ===================================================================================================== */
.hud{--h-panel:rgba(22,25,31,.66)}
.h-map{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;perspective:1150px;perspective-origin:50% 28%;transition:background-color .5s}
.h-map-plane{position:absolute;left:-50%;top:-50%;width:200%;height:200%;transform-origin:50% 50%;will-change:transform;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 30%,transparent 78%);transition:opacity .5s}
.h-map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.h-map svg *{vector-effect:non-scaling-stroke}
.h-map .m-grat line{stroke:rgba(var(--h-steel-rgb),.06);stroke-width:1}
.h-map .m-grat line.maj{stroke:rgba(var(--h-steel-rgb),.15)}
.h-map .m-grat text{fill:rgba(var(--h-steel-rgb),.4);font-size:calc(var(--k,1) * 9px);font-family:var(--mono)}
.h-map .m-za{fill:rgba(var(--h-steel-rgb),.06);stroke:rgba(var(--h-steel-rgb),.6);stroke-width:1.5;stroke-linejoin:round}
.h-map .m-ls,.h-map .m-sz{fill:rgba(12,14,18,.6);stroke:rgba(var(--h-steel-rgb),.35);stroke-width:1}
.h-map .m-nb{fill:none;stroke:rgba(var(--h-steel-rgb),.18);stroke-width:1;stroke-dasharray:4 5}
.h-map .m-names text{fill:rgba(var(--h-steel-rgb),.22);font-size:calc(var(--k,1) * 9px);font-family:var(--mono);letter-spacing:.3em}
.h-map .mp-in{transform:scale(var(--k,1))}
.h-map .mp .dot{fill:rgba(var(--h-steel-rgb),.5)}
.h-map .mp.hub .dot{fill:rgba(var(--h-steel-rgb),.75)}
.h-map .mp .ring,.h-map .mp .oring{fill:none;opacity:0;stroke:var(--c,var(--h-steel));stroke-width:1.2}
.h-map .mp .oring{stroke:var(--h-live)}
.h-map .mp.on .dot{fill:var(--c,var(--h-steel));filter:drop-shadow(0 0 4px var(--c,var(--h-steel)))}
.h-map .mp.on .ring{animation:mp-ping 2.4s ease-out infinite}
.h-map .mp.has-ord .oring{opacity:.5}
.h-map .mp.pop .oring{animation:mp-pop 2.6s ease-out}
@keyframes mp-ping{0%{r:3;opacity:.9}100%{r:17;opacity:0}}
@keyframes mp-pop{0%{r:4;opacity:1;stroke-width:3}100%{r:38;opacity:0;stroke-width:.5}}
.h-map .mp .lbl{fill:rgba(190,198,208,0);font-size:9px;font-family:var(--mono);letter-spacing:.06em}
.h-map .mp.hub .lbl{fill:rgba(190,198,208,.42)}
.h-map .mp.on .lbl{fill:rgba(232,236,242,.92)}
.h-map .mp .cnt{fill:var(--c,var(--h-steel));font-size:8.5px;font-family:var(--mono);opacity:0}
.h-map .mp.on .cnt{opacity:.95}
.h-map-info{display:none}
.hud[data-vis="min"] .h-map .mp.on .ring{animation:none;opacity:.6;r:9}
/* "Blink" control in the map panel (All / Peninsula / Off) - a way to isolate whether the pulsing
   markers are part of any scrolling slowdown, without losing the activity signal for the Cape
   Peninsula specifically (hud-map.js tags those markers with .pen). "Off" and "Peninsula" only stop
   the *animation*; the marker, its colour and its label stay exactly as before. */
.hud[data-blink="off"] .h-map .mp.on .ring,.hud[data-blink="off"] .h-map .mp.pop .oring{animation:none}
.hud[data-blink="peninsula"] .h-map .mp.on:not(.pen) .ring,.hud[data-blink="peninsula"] .h-map .mp.pop:not(.pen) .oring{animation:none}
.h-grid{transition:opacity .5s,filter .5s}

/* map in front: everything else steps back, the map can be dragged.
   The cursor stays the ordinary pointer at rest - it only switches to the closed "grabbing" hand
   for the actual duration of a drag (the .drag class hud-map.js toggles on pointerdown/up). An
   ever-present open hand made it harder to land a click on a small blinking blip, and it doesn't
   tell you anything a click doesn't already. Dragging also shouldn't select the map's own text
   (city names, lat/long labels) the way a fast mouse-drag over text normally would. */
.hud.map-front .h-map{z-index:25;pointer-events:auto;background-color:rgba(9,11,15,.78);user-select:none;-webkit-user-select:none}
.hud.map-front .h-map.drag{cursor:grabbing}
.hud.map-front .h-map-plane{-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 40%,transparent 92%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 40%,transparent 92%)}
.hud.map-front .h-grid{opacity:.06;filter:blur(1.5px);pointer-events:none}
.hud.map-front .h-map .m-za{fill:rgba(var(--h-steel-rgb),.1);stroke:rgba(var(--h-steel-rgb),.85)}
.hud.map-front .h-map .m-grat line{stroke:rgba(var(--h-steel-rgb),.09)}
.hud.map-front .h-map .m-grat line.maj{stroke:rgba(var(--h-steel-rgb),.22)}
.hud.map-front .h-map .mp .lbl{fill:rgba(215,222,230,.8);font-size:9.5px}
.hud.map-front .h-map .mp.on .lbl{fill:#fff}
.hud.map-front .h-map-info{display:block;position:absolute;left:22px;top:calc(var(--adm-h,0px) + var(--hs-h,0px) + 18px);width:276px;padding:12px 14px 12px;cursor:default;background:rgba(15,17,21,.88);border:1px solid var(--h-line);backdrop-filter:blur(6px);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.h-map-info .mi-h{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.h-map-info .mi-h b{font:600 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--h-brass)}
.h-map-info .mi-h span{font:10px var(--mono);color:var(--h-mut);letter-spacing:.06em}
.h-map-info .mi-r{display:flex;align-items:center;gap:8px;font:10.5px var(--mono);color:#e6e2da;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.h-map-info .mi-r i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);flex:0 0 auto}
.h-map-info .mi-r b{margin-left:auto;font-weight:500;color:var(--c);white-space:nowrap}
.h-map-info .mi-empty{font:10.5px/1.5 var(--mono);color:var(--h-mut)}
.h-map-info .mi-ctl{margin-top:12px;padding-top:10px;border-top:1px solid var(--h-line2);display:grid;gap:8px}
.h-map-info .mi-ctl label{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:8px;font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--h-mut)}
.h-map-info .mi-ctl input[type=range]{accent-color:var(--h-brass);width:100%;margin:0}
.h-map-info .mi-btns{display:flex;gap:8px;margin-top:2px}
.h-map-info .mi-btns button{flex:1;padding:6px 10px 6px 24px;font-size:9.5px}
.h-map-info .mi-blink{display:flex;gap:4px}
.h-map-info .mi-blink button{flex:1;padding:4px 5px 4px 15px;font-size:8px}
.h-map-info .mi-tip{font:9.5px var(--mono);color:var(--h-faint);letter-spacing:.06em}
.h-map-info .mi-leg{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:10px;font:9px var(--mono);letter-spacing:.06em;color:var(--h-mut)}
.h-map-info .mi-leg span::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--c);margin-right:5px}
@media (max-width:760px){.hud.map-front .h-map-info{left:10px;right:10px;width:auto;max-height:46vh;overflow:auto}}
@media (prefers-reduced-motion:reduce){.h-map .mp.on .ring,.h-map .mp.pop .oring{animation:none}}

/* ---- map-front's own exit button: a small square icon in the info panel's top-right corner,
   excluded from both button families above (added to their shared :not() list, same as
   .top-toggle) so it stays a plain, minimal box rather than a slanted plate or a terminal prompt. */
.h-map-info{padding-right:44px}
.mi-exit{position:absolute;top:10px;right:10px;width:24px;height:24px;min-height:0;padding:0;display:flex;
  align-items:center;justify-content:center;border:1px solid rgba(var(--h-brass-rgb),.5);background:rgba(var(--h-brass-rgb),.06);
  color:var(--h-brass);border-radius:0;font-size:12px;clip-path:none;cursor:pointer;transition:background .15s,border-color .15s}
.mi-exit:hover{border-color:var(--h-brass-hi);background:rgba(var(--h-brass-rgb),.2)}

/* ---- Controls card: plain clickable labels instead of boxed/slanted/pilled buttons - brass for
   the active one, muted grey otherwise, with a small dot (the same one the period chips use)
   marking off one control from the next. The former "Control room / Classic" pair loses the pill
   border that used to join them; #hView is now just a grouping hook, not a visual container. */
.hview{display:inline-flex;align-items:center;gap:10px}
#hModeChips{gap:10px 14px;row-gap:10px}
#hModeChips button{
  background:none!important;border:0!important;clip-path:none!important;border-radius:0!important;
  padding:2px 1px!important;margin:0!important;box-shadow:none!important;min-height:0!important;
  color:var(--h-mut);font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;transition:color .15s}
#hModeChips button::before,#hModeChips button::after{content:none!important;background:none!important}
#hModeChips button:hover{color:#fff}
#hModeChips button.on{color:var(--h-brass)!important}

/* map switched off (Controls > Map): the layer isn't shown at all */
.hud.map-off .h-map,.hud.map-off #hMapBtn{display:none!important}

/* ---- phones: compact, evenly sized period chips and trend tabs; Controls without the separating bullets ---- */
@media (max-width:760px){
  .h-periodp .chipsrow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px 5px;margin-top:8px}
  .h-periodp .chipsrow .sep{display:none}
  :root .h-periodp .chipsrow button{--h:17px;height:17px;min-height:0;width:100%;margin:0;padding:0 0 0 2px;font-size:9px;letter-spacing:.05em;line-height:1}
  :root .tabs button{--h:15px;height:15px;min-height:0;padding:0 9px 0 11px;margin:0 2px;font-size:9px;letter-spacing:.06em;line-height:1}
  .chipsrow .sx > i,.tabs .sx > i{width:5px;height:5px}
  #hModeChips .sep{display:none}
  #hModeChips{gap:6px 12px}
}

/* the start-up window's Hearth & Hue name always keeps the original brand colours, whichever look is chosen */
.h-boot .box h4{--h-brass:#D3A667;--h-brass2:#B8874A;--h-brass-rgb:211,166,103;--serif:'Libre Caslon Display',Georgia,'Times New Roman',serif;color:#fff;font-family:'Libre Caslon Display',Georgia,'Times New Roman',serif}
.h-boot .box h4 .amp,.h-boot .box h4 sup.tm{color:#D3A667!important}