/* Hearth & Hue back office - same look as the storefront: deep charcoal, brass accents, Caslon headings. */
:root{
  color-scheme:dark;
  --bg:#14161B; --surface:#1C1F26; --surface2:#23262E; --ink:#F1EDE6; --muted:#A6ABB4; --faint:#6C7078; --line:#34383F;
  --brass:#B8874A; --brass-bright:#D3A667; --brass-ink:#14161B;
  --ok:#5DB660; --ok-bg:rgba(93,182,96,.14); --warn:#E0A860; --warn-bg:rgba(224,168,96,.14);
  --bad:#E58B7D; --bad-bg:rgba(229,139,125,.14); --info:#8FB3C6; --info-bg:rgba(85,112,127,.28);
  --font:'Manrope',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:'Libre Caslon Display',Georgia,'Times New Roman',serif;
  /* back-office section headings (h1/h2) - everywhere except .brand, which keeps the serif above */
  --display:'Orbitron',var(--font);
  /* bridge so the control-room panel classes in hud.css (which is loaded on every admin page)
     work outside the #hud element too - keeps every plain tab visually uniform with Overview */
  --h-bg:#0F1115; --h-panel:rgba(24,27,33,.78); --h-line:#3a3f47; --h-line2:#2a2e35;
  --h-brass:#D3A667; --h-brass2:#B8874A; --h-steel:#8FB3C6; --h-mint:#9ED0B5; --h-rose:#E58B7D;
  --h-ok:#5DB660; --h-warn:#E0A860; --h-ink:#F1EDE6; --h-mut:#A6ABB4; --h-faint:#6C7078;
  --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
  /* colour-channel and tint tokens: everything that used to be a hard-coded brass/steel/rose literal in
     admin.css, hud.css, hud.js and hud-map.js now reads one of these, so an alternative HUD theme
     (see hud-ember.css) can re-colour the whole back office by redefining them - the values below are
     the original Brass look, unchanged */
  --h-brass-rgb:211,166,103; --h-brass2-rgb:184,135,74; --h-steel-rgb:143,179,198; --h-steel2-rgb:85,112,127;
  --h-rose-rgb:229,139,125; --h-ok-rgb:93,182,96; --h-warn-rgb:224,168,96; --h-live-rgb:110,231,154;
  --h-lav-rgb:185,164,214; --h-mint-rgb:158,208,181;
  --h-lav:#B9A4D6; --h-on:#14161B; --h-brass-hi:#e3b878; --h-live:#6EE79A;
  --h-g1:#efcb92; --h-g2:#c99a55; --h-g3:#f6d9a4; --h-g4:#d9ab63; --h-tint:#f0d8ab; --h-tint2:#fff3dc;
  --h-rose-tint:#f4b8ae; --h-ok-tint:#b3e0b5;
  /* shared control height so text fields, selects and buttons in the same row always line up,
     regardless of their different font sizes - matches the storefront checkout's field height */
  --field-h:44px;
  /* shorter shared height for the compact top-bar controls (View store / Sound / Sign out),
     so those three always match each other even though one is a link and two are buttons -
     measured to match the nav tab pills beside them (~27px), not invented */
  --top-ctrl-h:27px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:radial-gradient(1200px 500px at 85% -10%,rgba(var(--h-brass2-rgb),.08),transparent 60%),var(--bg);color:var(--ink);font:15px/1.55 var(--font);-webkit-font-smoothing:antialiased;position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 520px at 50% 20%,rgba(var(--h-brass2-rgb),.06),transparent 70%),
    linear-gradient(rgba(var(--h-brass-rgb),.03) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,rgba(var(--h-brass-rgb),.03) 1px,transparent 1px) 0 0/48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 25%,#000 35%,transparent 85%);mask-image:radial-gradient(ellipse at 50% 25%,#000 35%,transparent 85%)}
a{color:var(--brass-bright)}
/* Distinct, separated pill buttons for a small set of sub-views (e.g. Sourcing's
   Suppliers / Stock locations / Shipments) - each its own button with a real gap
   between them, rather than one fused segmented control. */
.subtabs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 20px}
.subtabs a{border:1px solid var(--brass);border-radius:999px;padding:7px 16px;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brass-bright);text-decoration:none;transition:background .15s,color .15s}
.subtabs a:hover{background:rgba(var(--h-brass-rgb),.16)}
.subtabs a.on{background:var(--brass-bright);color:var(--h-on);border-color:var(--brass-bright)}
.top{position:sticky;top:0;z-index:5;background:rgba(20,22,27,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--brass);box-shadow:0 8px 24px rgba(0,0,0,.35);display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;padding:12px 20px;transition:padding .18s ease}
.brand{font-family:var(--serif);font-size:24px;letter-spacing:.01em;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand span{color:var(--brass-bright)} .brand small{font:600 10px var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--brass-bright);margin-left:10px;border:1px solid var(--brass);border-radius:99px;padding:3px 9px;vertical-align:middle}
/* "Back office" now shares the exact pill shape as the "View store" link beside it (see
   .store-link below) - since the two would otherwise be indistinguishable, this one gets a
   small soft-pulsing dot to mark it as the page you're actually on, the way a nav item shows
   "you are here" elsewhere in the app. */
.brand small{display:inline-flex;align-items:center;gap:6px}
.brand small::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok);animation:h-office-blink 1.8s ease-in-out infinite}
@keyframes h-office-blink{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.brand small::before{animation:none}}
.top .emblem{order:0;width:26px;height:26px;border-radius:50%;display:block;flex:0 0 auto;box-shadow:0 0 0 1px rgba(var(--h-brass-rgb),.4)}
.top .brand{order:1} .top .store-link{order:2} .top .who{order:2} .top .out{order:2} .top nav{order:3}
/* the control room used to have its own clock; now that its old toolbar is gone, it sits here
   instead - nav grows to fill the bar but its own tab links don't reach nearly that far, so this
   just claims the blank stretch that was already going spare between the tabs and the collapse
   arrow, rather than adding any extra width to the bar. */
.top .h-clock{order:4;flex:0 0 auto;margin:0 16px 0 auto;text-align:right;line-height:1.1}
.top .h-clock .t{font:600 15px var(--mono);letter-spacing:.08em;color:var(--brass-bright)}
.top .h-clock .d{font:10px var(--mono);letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
@media (max-width:899px){.top .h-clock{display:none}}
/* collapse toggle: always visible, pinned to the far right regardless of what's hidden */
.top-toggle{order:5;margin-left:auto;flex:0 0 auto;width:24px;height:24px;padding:0;display:none;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--h-line);color:var(--h-brass);border-radius:50%;font-size:9px;line-height:1;cursor:pointer;clip-path:none}
.top-toggle:hover{border-color:var(--brass-bright);color:var(--brass-bright)}
/* the bar collapses to a slim strip (emblem + wordmark + toggle) on desktop only - the tab nav,
   email and sign-out/sound controls tuck away until the arrow is used to expand it again */
@media (min-width:900px){
  .top-toggle{display:flex}
  .top.collapsed{padding-top:7px;padding-bottom:7px}
  .top.collapsed .brand small,.top.collapsed .who,.top.collapsed .store-link,.top.collapsed .out.snd,.top.collapsed #out,.top.collapsed nav,.top.collapsed .h-clock{display:none}
}
.brand sup.tm{font:600 11px var(--font);vertical-align:super;color:var(--brass-bright);margin-left:2px;letter-spacing:0;line-height:0}
.out.snd{background:transparent;border:1px solid var(--brass);color:var(--brass-bright)} .out.snd.on{background:var(--brass-bright);color:var(--h-on)}
nav{display:flex;gap:2px;overflow-x:auto;flex:1 1 420px;min-width:0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
nav::-webkit-scrollbar{display:none}
/* the active tab is marked by colour and a soft fill, not a line underneath it - an underline this
   close to the small caps text kept reading as crowding it, at any thickness tried, so it's gone
   rather than tuned further. */
nav a{padding:7px 13px;border-radius:99px;text-decoration:none;color:var(--muted);white-space:nowrap;font-weight:500;transition:color .2s,background .2s}
nav a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
nav a.on{color:var(--brass-bright);background:rgba(var(--h-brass2-rgb),.16)}
.who{font-size:12px;color:var(--faint);margin-left:auto;overflow-wrap:anywhere;text-align:right}
main{max-width:1100px;margin:0 auto;padding:30px 20px 90px}
h1{font:600 30px/1.25 var(--display);margin:0 0 8px;letter-spacing:.01em;text-transform:uppercase} h2{font:600 17px/1.3 var(--display);margin:32px 0 12px;color:var(--ink);letter-spacing:.03em;text-transform:uppercase}
.sub{color:var(--muted);margin:0 0 22px} .muted{color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .row.between{justify-content:space-between}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
/* plain-rectangle panel with 4 independent corner brackets (replaces the earlier chip-cut corners);
   same background/border/transparency as before - only the corner treatment changes */
.card{position:relative;background:var(--h-panel);border:1px solid var(--h-line);padding:16px 18px;backdrop-filter:blur(5px)}
.card::after,.tbl::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;background-repeat:no-repeat;
  background-image:linear-gradient(var(--h-brass),var(--h-brass)),linear-gradient(var(--h-brass),var(--h-brass)),
    linear-gradient(var(--h-brass),var(--h-brass)),linear-gradient(var(--h-brass),var(--h-brass)),
    linear-gradient(var(--h-brass),var(--h-brass)),linear-gradient(var(--h-brass),var(--h-brass)),
    linear-gradient(var(--h-brass),var(--h-brass)),linear-gradient(var(--h-brass),var(--h-brass));
  background-size:14px 1.4px,1.4px 14px,14px 1.4px,1.4px 14px,14px 1.4px,1.4px 14px,14px 1.4px,1.4px 14px;
  background-position:top left,top left,top right,top right,bottom left,bottom left,bottom right,bottom right}
.stat{position:relative;overflow:hidden} .stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--brass)}
.stat b{display:block;font:600 32px/1.15 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)} .stat span{color:var(--muted);font-size:13px}
.tbl{position:relative;background:var(--h-panel);border:1px solid var(--h-line);overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:560px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--h-line2);vertical-align:middle}
th{font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--h-brass);background:rgba(var(--h-brass-rgb),.06)}
tr:last-child td{border-bottom:0} tr.click{cursor:pointer} tr.click:hover td{background:var(--surface2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
/* activity log: give "Who" (short names like "Sizo (admin)") enough room to stay on one line,
   taking the space back from "What", which usually has room to spare next to "Details". */
table.act th:nth-child(2),table.act td:nth-child(2){width:150px;white-space:nowrap}
table.act th:nth-child(3),table.act td:nth-child(3){width:230px}
.chip{display:inline-block;padding:2px 10px;border-radius:99px;font:9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;font-weight:600;background:var(--surface2);color:var(--muted);border:1px solid var(--line)}
/* control-room stat strip, reused across every tab for a quick at-a-glance summary */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px 22px}
.stats-grid .delta{margin-top:4px}
.chip.paid,.chip.delivered,.chip.active{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.chip.pending,.chip.packed,.chip.draft{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.chip.shipped{background:var(--info-bg);color:var(--info);border-color:transparent}
.chip.cancelled,.chip.refunded,.chip.archived{background:var(--bad-bg);color:var(--bad);border-color:transparent}
input,select,textarea,button{font:inherit;color:inherit}
/* text fields: same recipe as the storefront checkout form - plain rounded corners, generous
   padding, a simple border that turns brass on focus. No extra size or corner treatment beyond
   that, so a field never reads as bigger or fussier than the button sitting next to it.
   Every selector in this block excludes #hud (the Control Room / Overview tab) - that room has
   its own complete field and button styling in hud.css, and without this exclusion these bare
   element selectors were leaking in on top of it (e.g. forcing every Control Room button up to
   this --field-h's 44px, blowing past hud.css's own carefully-tuned 20-34px button heights).
   The exclusion is :not(:where(#hud *)), not :not(#hud *) - a plain :not() inherits the
   specificity of its argument, so :not(#hud *) would have quietly made every rule here as
   specific as an ID selector and started beating .out/.store-link's own sizing in the header
   (found the hard way: #snd rendered at this --field-h's 44px instead of its intended 27px).
   :where() always contributes zero specificity, so wrapping the argument in it keeps this
   whole block at its original, plain specificity - only the matching behaviour changes. */
input:not(:where(#hud *)),select:not(:where(#hud *)),textarea:not(:where(#hud *)){background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:0 14px;min-height:var(--field-h);max-width:100%;color:var(--ink);
  transition:border-color .15s,background .15s}
input:not(:where(#hud *))::placeholder,textarea:not(:where(#hud *))::placeholder{color:var(--faint)}
input:not(:where(#hud *)):hover,select:not(:where(#hud *)):hover,textarea:not(:where(#hud *)):hover{border-color:#454a53}
input:not(:where(#hud *)):focus,select:not(:where(#hud *)):focus,textarea:not(:where(#hud *)):focus{outline:none;border-color:var(--brass-bright);background:var(--surface2)}
select:not(:where(#hud *)){appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:36px;
  background-image:linear-gradient(45deg,transparent 50%,var(--h-brass) 50%),linear-gradient(135deg,var(--h-brass) 50%,transparent 50%);
  background-position:calc(100% - 19px) center,calc(100% - 14px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select:not(:where(#hud *)) option{background:var(--surface);color:var(--ink)}
input[type=number]:not(:where(#hud *)){width:110px} textarea:not(:where(#hud *)){width:100%;min-height:80px;padding:12px 14px}
label.f{display:flex;flex-direction:column;gap:5px;font-size:12px;letter-spacing:.03em;color:var(--muted)} label.f input,label.f select,label.f textarea{color:var(--ink);font-size:15px}
button:not(:where(#hud *)){cursor:pointer;border:1px solid var(--h-brass2);background:transparent;color:var(--h-brass);border-radius:3px;min-height:var(--field-h);padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;transition:background .15s,color .15s,transform .1s}
button:not(:where(#hud *)):hover{background:rgba(var(--h-brass-rgb),.16)} button:not(:where(#hud *)):active{transform:scale(.97)} button:not(:where(#hud *)).pri{background:var(--h-brass);color:var(--brass-ink);border-color:var(--h-brass)} button:not(:where(#hud *)).pri:hover{background:var(--h-brass-hi);border-color:var(--h-brass-hi)}
button:not(:where(#hud *)).danger{color:var(--h-rose);border-color:rgba(var(--h-rose-rgb),.55)} button:not(:where(#hud *)):disabled{opacity:.5;cursor:default}
input[type=file]:not(:where(#hud *)){padding:7px;background:var(--surface2)} input[type=file]:not(:where(#hud *))::file-selector-button{margin-right:10px;border:1px solid var(--h-brass2);background:transparent;color:var(--h-brass);border-radius:3px;padding:6px 12px;cursor:pointer;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.form{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .form .wide{grid-column:1/-1}
dialog{border:1px solid var(--h-brass2);border-radius:4px;background:var(--h-on);color:var(--ink);padding:0;width:min(680px,94vw);max-height:92vh;box-shadow:0 30px 80px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(6,7,9,.72)} dialog form{padding:22px 24px;display:flex;flex-direction:column;gap:14px}
dialog h2{margin:0}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--brass);color:var(--brass-ink);font-weight:600;padding:11px 20px;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw;z-index:20;box-shadow:0 10px 30px rgba(0,0,0,.5)}
#toast.show{opacity:1} #toast.err{background:var(--bad);color:#2a0d09}
.notice{padding:13px 16px;background:var(--info-bg);color:var(--info);border:1px solid rgba(var(--h-steel-rgb),.25)} .notice.warn{background:var(--warn-bg);color:var(--warn);border-color:rgba(var(--h-warn-rgb),.3)}
.notice b{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase}
/* Settings' emergency storefront-offline card - same .card shape as everything else, just
   tinted to read as "handle with care" without needing a whole second component. */
.danger-card{border-color:rgba(var(--h-rose-rgb),.4);background:linear-gradient(var(--bad-bg),var(--bad-bg)),var(--h-panel);margin-bottom:16px;display:flex;flex-direction:column;gap:12px}
.danger-card b{color:var(--h-rose)}
/* Plain checkbox reset: the generic input rule a few lines up (line ~122) targets every
   <input>, including checkboxes/radios, and forces them to this room's 44px text-field height -
   fine for text, but it flattens a checkbox into an odd tall blank box. Checkboxes opt back out
   to the browser's own compact rendering here instead. */
input[type=checkbox]:not(:where(#hud *)),input[type=radio]:not(:where(#hud *)){appearance:auto;-webkit-appearance:auto;background:none;border:none;border-radius:0;min-height:0;width:18px;height:18px;padding:0;flex:0 0 auto;accent-color:var(--h-brass)}
.switch{display:flex;align-items:center;gap:8px;cursor:pointer;flex:0 0 auto;white-space:nowrap;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.switch input{margin:0}
.pv{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--line)} .pv:last-child{border-bottom:0}
.pv .t{flex:1;min-width:180px} .pv .t b{display:block;font-weight:600}
/* the Save button has no label text above it, unlike the "Selling" field beside it - align it to
   the bottom of the row instead of the row's centre, so it lines up with the dropdown itself
   rather than with the dropdown's own label+field block */
.pv button.vsave{align-self:flex-end}
/* Drag-and-drop media manager on each product card in Products - a row of rounded
   thumbnails (photo or video), each with a select checkbox, a Live/Hidden badge, and
   always-visible controls (not hover-only - this has to work on touch too), plus a
   dashed "+" tile that also acts as the drop target for real files dragged in from
   Explorer/Finder. Existing tiles are themselves draggable, but only to REORDER within
   the same product (see admin.js, selectGalleryMedia's sibling reorderMedia) - the
   inner <img>/<video> stays draggable="false" so that never gets confused for a file
   drop (see the comment on that attribute in admin.js, mediaThumb()). */
.media-mgr{margin-top:8px}
.media-grid{display:flex;gap:9px;flex-wrap:wrap}
.media-item{position:relative;width:100px;height:112px;border-radius:9px;overflow:hidden;border:1px solid var(--line);background:var(--surface2);flex:0 0 auto;cursor:grab;transition:box-shadow .15s,opacity .15s}
.media-item:active{cursor:grabbing}
.media-item.dragging{opacity:.35}
.media-item.selected{box-shadow:0 0 0 2px var(--h-brass) inset}
.media-item.drop-before{box-shadow:-3px 0 0 0 var(--h-brass)}
.media-item.drop-after{box-shadow:3px 0 0 0 var(--h-brass)}
/* The photo/video fills the whole tile - no separate strip carved out at the bottom for
   controls, since those now float as small icon buttons over the image itself (below). */
.media-item img,.media-item video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.media-item[data-visible="0"] img,.media-item[data-visible="0"] video{opacity:.45}
/* Checkbox and action buttons only earn their space when they're wanted - hidden until the
   tile is hovered/focused, already ticked, or mid an armed countdown (that last one via a
   JS-toggled class, not :hover, so the countdown stays visible even if the pointer wanders
   off the button while it's counting down). Keeps a grid of thumbnails reading as photos
   first, controls second. */
.media-check,.media-actions{opacity:0;transition:opacity .15s}
.media-item:hover .media-check,.media-item:focus-within .media-check,.media-item.selected .media-check,.media-item.show-actions .media-check,
.media-item:hover .media-actions,.media-item:focus-within .media-actions,.media-item.selected .media-actions,.media-item.show-actions .media-actions{opacity:1}
.media-check{position:absolute;top:6px;left:6px;width:16px;height:16px;margin:0;z-index:2;cursor:pointer;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.media-badge{position:absolute;top:6px;right:6px;font:8px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:99px;border:1px solid rgba(255,255,255,.08);background:rgba(20,22,27,.82);color:var(--ok);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.media-item[data-visible="0"] .media-badge{color:var(--muted)}
/* Two small round icon buttons floating over the bottom-right corner of the photo itself -
   no bar, no labels (title/aria-label carry the words for hover/screen readers), just a
   dark glass circle each so they read clearly over any image underneath. hud.css carries a
   site-wide button::before{content:'>'} chevron (for the Control Room's own button style)
   that isn't scoped to #hud, so it's killed here or it'd sit centred on top of the icon -
   same for the bulk bar's buttons and the select checkbox. */
.media-actions{position:absolute;right:6px;bottom:6px;display:flex;gap:5px;z-index:2}
.media-actions button::before,.media-bulkbar button::before,.media-check::before{content:none}
.media-actions button{width:25px;height:25px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(10,11,14,.74);box-shadow:0 2px 7px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1);color:var(--ink);transition:background .15s,color .15s,border-color .15s,transform .12s,box-shadow .15s}
.media-actions button:hover{transform:translateY(-1.5px) scale(1.07);box-shadow:0 4px 11px rgba(0,0,0,.5)}
.media-actions button:active{transform:translateY(0) scale(.95)}
.media-actions button svg{flex:0 0 auto;width:12px;height:12px}
.media-actions .media-toggle:hover{background:var(--h-mint);border-color:var(--h-mint);color:#0c2a1c}
.media-actions .media-del:hover{background:var(--h-rose);border-color:var(--h-rose);color:#3a0f0a}
/* A Live file's Delete button is a native disabled button, not a JS-gated one - no click
   to intercept, no state to bypass. Dimmed and inert rather than hidden entirely, so the
   file's own Hide-first tooltip is still there to read. */
.media-actions .media-del:disabled{opacity:.32;cursor:not-allowed;box-shadow:none}
.media-actions .media-del:disabled:hover{background:rgba(10,11,14,.74);border-color:rgba(255,255,255,.14);color:var(--ink);transform:none;box-shadow:none}
.media-countdown{font:700 10.5px var(--mono)}
/* "Armed" countdown state, shared by per-item buttons and the bulk bar below - amber for
   show/hide, rose for delete, so the colour itself hints at how serious the click was. */
.media-actions button.arming,.media-bulkbar button.arming{background:var(--warn) !important;border-color:var(--warn) !important;color:#3a2405 !important}
.media-actions .media-del.arming,.media-bulkbar .media-bulk-del.arming{background:var(--bad) !important;border-color:var(--bad) !important;color:#3a0f0a !important}
.media-mgr.busy .media-actions button,.media-mgr.busy .media-check{pointer-events:none;opacity:.5}
.media-add{width:100px;height:112px;border:1px dashed var(--h-brass2);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--h-brass);font-size:22px;cursor:pointer;flex:0 0 auto;transition:background .15s,border-style .15s}
.media-add:hover{background:rgba(var(--h-brass-rgb),.1)}
.media-mgr.drag .media-add{background:rgba(var(--h-brass-rgb),.22);border-style:solid}
.media-mgr.busy .media-add{opacity:.5;pointer-events:none}
/* Selection bar: only takes up room once something is ticked. */
.media-bulkbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:rgba(var(--h-brass-rgb),.1);border:1px solid rgba(var(--h-brass-rgb),.35);border-radius:8px;padding:8px 10px;margin-bottom:9px;font:600 10.5px var(--mono);letter-spacing:.03em}
.media-bulkbar[hidden]{display:none}
.media-bulk-count{color:var(--h-brass);margin-right:auto}
.media-bulkbar button{border:1px solid var(--h-brass2);border-radius:99px;padding:0 14px;min-height:28px;font:600 9.5px var(--mono);letter-spacing:.04em;display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);color:var(--h-brass);cursor:pointer;transition:background .15s,color .15s,transform .12s,box-shadow .15s}
.media-bulkbar button svg{width:11px;height:11px;flex:0 0 auto}
.media-bulkbar button:hover{background:rgba(var(--h-brass-rgb),.16);transform:translateY(-1px)}
.media-bulkbar button:active{transform:translateY(0)}
.media-bulkbar .media-bulk-del{border-color:rgba(var(--h-rose-rgb),.55);color:var(--h-rose)}
.media-bulkbar .media-bulk-del:hover{background:rgba(var(--h-rose-rgb),.18)}
.media-bulkbar .media-bulk-clear{border-color:transparent;background:transparent;box-shadow:none;color:var(--muted)}
/* Upload progress - one strip per media manager, shared by drag-drop and the "+" file
   picker since both funnel through the same upload queue. */
.media-upload-bar{display:flex;align-items:center;gap:9px;margin-top:9px;font:600 10px var(--mono);letter-spacing:.03em;color:var(--muted)}
.media-upload-bar[hidden]{display:none}
.media-progress-track{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.media-progress-track i{display:block;height:100%;width:0%;background:var(--h-brass);border-radius:99px;transition:width .15s}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px} .kv dt{color:var(--h-mut);font:10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding-top:2px} .kv dd{margin:0}
.p .lbl,.p .mid,.p .delta,.p .tagc{font-family:var(--mono)}
.right{text-align:right}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* ---- phones and narrow windows ---- */
@media (max-width:900px){
  .top{gap:6px 10px;padding:10px 12px}
  .top nav{flex:1 0 100%;order:3;margin:0 -12px;padding:2px 12px 4px;gap:6px;scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  nav a{padding:9px 16px;font-size:15px;scroll-snap-align:start}
  .who{font-size:11px;max-width:52vw}
  .brand small{display:none}
}
@media (max-width:640px){
  main{padding:16px 12px 90px}
  h1{font-size:28px}
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .card{padding:12px 13px} .stat b{font-size:24px}
  /* sticky top bar: the tab pills shrink to match the smaller phone chrome around them */
  nav a{padding:6px 13px;font-size:12.5px}
  input[type=number]{width:100%}
  /* buttons shrink to fit the smaller screen: a page-level action (top-right of a header row,
     or the primary button in a dialog) stays comfortably tappable; anything sitting inside a
     table row or a stat-strip context is allowed to go tighter since it has less room to breathe */
  button{min-height:32px;padding:6px 11px;font-size:9.5px;letter-spacing:.07em}
  .row.between button.pri,dialog form button.pri,dialog form button[data-close]{min-height:38px;padding:9px 16px;font-size:10.5px}
  td button,tr button{min-height:26px;padding:4px 9px;font-size:9px}
  input[type=file]::file-selector-button{padding:5px 9px;font-size:9px}
  /* text fields shrink in step with the buttons beside them, so a search box or status filter
     sits at roughly the same height as its neighbouring button instead of towering over it */
  input:not([type=file]):not([type=checkbox]):not([type=radio]),select{padding:7px 10px;font-size:13px;min-height:32px}
  select{padding-right:32px;background-position:calc(100% - 16px) center,calc(100% - 11px) center}
  label.f input,label.f select,label.f textarea{font-size:13px}
  textarea{min-height:56px;padding:7px 10px;font-size:13px}
  /* tables become stacked cards - no outer panel left to bracket */
  .tbl{background:none;border:0;overflow:visible}
  .tbl::after{display:none}
  table,tbody,tr,td{display:block;width:100%;min-width:0}
  table{min-width:0}
  tr:has(th){display:none}
  tr{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:6px 12px;margin:0 0 10px}
  td{border:0;padding:5px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:right !important}
  td::before{content:attr(data-label);color:var(--brass-bright);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;text-align:left;flex:0 0 auto}
  td[data-label=""]::before{display:none}
  td[data-label=""]{justify-content:flex-end}
  tr.click:hover td{background:none}
  /* product cards: fields in a tidy two-column grid */
  .pv{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .pv .t{grid-column:1/-1;min-width:0}
  .pv button.vsave{grid-column:1/-1;width:100%}
  .pv label.f input,.pv label.f select{width:100%}
  .kv{grid-template-columns:1fr;gap:0} .kv dt{margin-top:8px}
  dialog{width:100vw;max-height:100vh;height:100vh;border-radius:0;border:0}
  #toast{bottom:14px}
}

/* sign-in screens and account page */
body.signedout #nav,body.signedout #who,body.signedout #out,body.signedout #snd{display:none}
/* Sign out / Sound on-off: same compact height, padding and lettering as the "View store" link
   beside them, so the three top-bar controls read as one matching set */
.out{min-height:var(--top-ctrl-h);padding:0 14px;font-size:11px;letter-spacing:.1em}
/* Sound on/off is icon-only (a speaker glyph) rather than a text pill - "Sound off" read oddly
   next to the plainer "View store"/"Sign out" controls, and a speaker communicates faster than
   the word does anyway. The accessible label lives in the title + aria-label; the icon is purely
   visual. This used to be a phone-only treatment (the words wrapped the bar); it's simply the
   permanent style now. */
/* icon drawn as a masked shape filled with currentColor, not an emoji - a colour emoji glyph
   (🔇/🔊) ignores the CSS color property entirely (it's a fixed-palette bitmap/COLR glyph baked
   into the font), so it could never actually pick up the room's brass theme or its on/off color
   swap. This pseudo-element is ::after, not ::before, so it doesn't collide with the plate family's
   own ::before notch decoration (excluded separately in hud.css). */
/* its own explicit size, not --top-ctrl-h - that variable is shared with .out's min-height (the
   Sign out/View store text pills), so sizing #snd off it directly would also have to change those;
   a plain circle reads oversized well before a text pill does, so it gets a smaller number here. */
#snd.out.snd{font-size:0;width:21px;height:21px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
#snd.out.snd::after{content:'';display:block;width:10px;height:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpolygon%20points=%2711%205%206%209%202%209%202%2015%206%2015%2011%2019%2011%205%27%20fill=%27%23000%27%20stroke=%27none%27/%3E%3Cline%20x1=%2723%27%20y1=%279%27%20x2=%2717%27%20y2=%2715%27/%3E%3Cline%20x1=%2717%27%20y1=%279%27%20x2=%2723%27%20y2=%2715%27/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpolygon%20points=%2711%205%206%209%202%209%202%2015%206%2015%2011%2019%2011%205%27%20fill=%27%23000%27%20stroke=%27none%27/%3E%3Cline%20x1=%2723%27%20y1=%279%27%20x2=%2717%27%20y2=%2715%27/%3E%3Cline%20x1=%2717%27%20y1=%279%27%20x2=%2723%27%20y2=%2715%27/%3E%3C/svg%3E") no-repeat center/contain}
#snd.out.snd.on::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpolygon%20points=%2711%205%206%209%202%209%202%2015%206%2015%2011%2019%2011%205%27%20fill=%27%23000%27%20stroke=%27none%27/%3E%3Cpath%20d=%27M15.54%208.46a5%205%200%200%201%200%207.07%27/%3E%3Cpath%20d=%27M19.07%204.93a10%2010%200%200%201%200%2014.14%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpolygon%20points=%2711%205%206%209%202%209%202%2015%206%2015%2011%2019%2011%205%27%20fill=%27%23000%27%20stroke=%27none%27/%3E%3Cpath%20d=%27M15.54%208.46a5%205%200%200%201%200%207.07%27/%3E%3Cpath%20d=%27M19.07%204.93a10%2010%200%200%201%200%2014.14%27/%3E%3C/svg%3E")}
.login{max-width:420px;margin:7vh auto 0} .login h1{margin-bottom:6px}
.login .stack{margin-top:4px}
.login .pri{width:100%;padding:11px 18px}
.secret{font-family:ui-monospace,Consolas,monospace;font-size:16px;letter-spacing:.12em;word-break:break-all;background:var(--surface2);border:1px solid var(--line);border-radius:4px;padding:10px 12px;user-select:all}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-family:ui-monospace,Consolas,monospace;font-size:15px}
.codes span{background:var(--surface2);border:1px solid var(--line);border-radius:4px;padding:8px 10px;text-align:center;user-select:all}
.stack{display:flex;flex-direction:column;gap:14px} a.who{text-decoration:none;color:var(--faint)} a.who:hover{color:var(--brass-bright)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width:640px){.grid2{grid-template-columns:1fr}}
[hidden]{display:none!important} .stack.card,form.stack{display:flex;flex-direction:column;gap:14px} .who{max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* link from the back office to the public storefront */
/* same fully-rounded pill shape AND the exact same height as the "Back office" badge beside it -
   not just a matching number, but the same recipe (font-size + vertical padding + border) that
   gives Back Office its height, so a future change to one keeps them in step. It's allowed to be
   wider than Back Office (the label is longer), just not taller or shorter; the pulsing dot on
   Back Office is what tells the two apart at a glance. This base rule matches .brand small's own
   base rule; hud.css's compact-header block (@media min-width:641px, where most desktop windows
   actually live) shrinks both of them together too, so they stay level there as well. The two still
   don't share a layout parent though - Back Office sits inside the wordmark link's own inline-flex
   content, View Store is a separate flex item in header.top's row - so even with identical height,
   font and padding they land a couple of pixels apart vertically. margin-top nudges it down to
   actually line up; if the recipe above changes again, re-measure and adjust this by eye rather than
   assuming the numbers alone will keep them level. */
.store-link{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:3px 9px;margin-top:3.25px;font:600 10px var(--font);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--brass-bright);border:1px solid var(--brass);border-radius:99px;white-space:nowrap;transition:background .15s}
.store-link:hover{background:rgba(var(--h-brass-rgb),.16)}

/* The brand corner (emblem, Hearth & Hue wordmark, Back office badge, View store) always keeps the original Brass colours and type,
   whichever look or theme is chosen in the back office. These are set on the elements themselves, so no theme can reach them. */
:root header.top .brand,:root header.top .store-link,:root header.top .emblem{
  --brass:#B8874A;--brass-bright:#D3A667;--brass-ink:#14161B;--ink:#F1EDE6;--ok:#5DB660;
  --h-brass:#D3A667;--h-brass2:#B8874A;--h-brass-rgb:211,166,103;--h-brass2-rgb:184,135,74;
  --font:'Manrope',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:'Libre Caslon Display',Georgia,'Times New Roman',serif}
/* phones: two lines. Line 1 is the brand, your name and two round icon buttons (View store, sound); line 2 is the tabs. */
@media (max-width:900px){
  .top{gap:6px 8px;padding:8px 12px 6px}
  .top .emblem{order:0;width:24px;height:24px}
  .top .brand{order:1;font-size:19px;flex:0 1 auto;min-width:0}
  .top .who{order:2;margin-left:auto;flex:0 1 auto;min-width:0;max-width:30vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top .store-link{order:3}
  .top #snd{order:4}
  .top nav{order:9}
  :root header.top a.store-link{font-size:0!important;width:30px;height:30px;min-height:0!important;padding:0!important;margin:0!important;border-radius:50%!important;letter-spacing:0;flex:0 0 auto;gap:0}
  :root header.top a.store-link::after{content:'';display:block;width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 9l1.5-5h15L21 9%27/%3E%3Cpath d=%27M3 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0%27/%3E%3Cpath d=%27M5 12v8h14v-8%27/%3E%3Cpath d=%27M10 20v-5h4v5%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 9l1.5-5h15L21 9%27/%3E%3Cpath d=%27M3 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0%27/%3E%3Cpath d=%27M5 12v8h14v-8%27/%3E%3Cpath d=%27M10 20v-5h4v5%27/%3E%3C/svg%3E") center/contain no-repeat}
  .top #snd.out.snd{width:30px;height:30px}
  .top #snd.out.snd::after{width:14px;height:14px}
}
:root[data-theme="ember"] header.top .store-link,:root[data-theme="ember"] header.top .store-link[data-z]{color:#D3A667!important;border:1px solid #B8874A!important;background:transparent!important;font-family:'Manrope',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important}
:root[data-theme="ember"] header.top .store-link:hover{background:rgba(211,166,103,.16)!important}

/* ---- feel layer: the storefront's eased hovers, focus glows and press feedback, brought to the back office ---- */
:root{--hh-ease:cubic-bezier(.32,.72,0,1)}
:where(a){transition:color .2s ease}
tr.click td{transition:background-color .22s var(--hh-ease)}
.card{transition:border-color .3s var(--hh-ease),box-shadow .3s var(--hh-ease)}
input:not(:where(#hud *)),select:not(:where(#hud *)),textarea:not(:where(#hud *)){transition:border-color .2s ease,background-color .2s ease,box-shadow .28s var(--hh-ease)}
input:not(:where(#hud *)):focus,select:not(:where(#hud *)):focus,textarea:not(:where(#hud *)):focus{box-shadow:0 0 0 3px rgba(var(--h-brass-rgb),.14)}
.stage .c{transition:border-color .25s var(--hh-ease),box-shadow .3s var(--hh-ease),color .25s var(--hh-ease),background-color .25s var(--hh-ease)}
#lib button{transition:background-color .2s var(--hh-ease),color .2s var(--hh-ease),border-color .2s var(--hh-ease),box-shadow .25s var(--hh-ease)}
#lib .sx > i{transition:opacity .2s var(--hh-ease),transform .25s var(--hh-ease),border-color .2s var(--hh-ease)}
.h-modal{transition:opacity .2s ease}
.h-modal.out{opacity:0;pointer-events:none}
.h-modal.out .box{transform:scale(.97) translateY(6px);transition:transform .2s var(--hh-ease)}
#app>:not(.hud){animation:hh-view-in .38s var(--hh-ease) backwards}
body.lib-open #lib{animation:hh-lib-in .4s var(--hh-ease) backwards}
dialog[open]{animation:hh-view-in .28s var(--hh-ease) backwards}
@keyframes hh-view-in{from{opacity:0;transform:translateY(6px)}}
@keyframes hh-lib-in{from{opacity:0;transform:translateX(-22px)}}
@media (prefers-reduced-motion:reduce){#app>*,#lib,dialog[open],.h-modal,.h-modal .box{animation:none!important;transition:none!important}}
.h-modal:not(.out){animation:hh-fade .2s ease backwards}
@keyframes hh-fade{from{opacity:0}}

/* Back-office switcher (pill beside the logo) - fixed Brass colours so no theme can change it */
.brand small[role=button]{cursor:pointer}
.brand small[role=button]::after{content:'';width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid currentColor;margin-left:1px}
.brand small[role=button]:hover{background:rgba(211,166,103,.16)}
#officeMenu{position:fixed;z-index:60;min-width:220px;background:#1C1F26;border:1px solid #B8874A;border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.55);padding:6px;font:600 12px 'Manrope',ui-sans-serif,system-ui,sans-serif;color:#F1EDE6}
#officeMenu .om-h{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#D3A667;padding:6px 10px 4px}
#officeMenu .om-i{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 10px;border-radius:8px;color:#F1EDE6;text-decoration:none}
#officeMenu a.om-i:hover,#officeMenu a.om-i:focus-visible{background:rgba(211,166,103,.16);outline:none}
#officeMenu .om-i em{font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#A6ABB4}
#officeMenu .om-i.on{background:rgba(93,182,96,.12)} #officeMenu .om-i.on em{color:#5DB660}
#officeMenu .om-f{font-weight:500;font-size:10.5px;color:#6C7078;padding:6px 10px 4px}
/* phones: keep the pill (it is the switcher), just smaller and with roomier menu rows */
@media (max-width:900px){
  :root header.top .brand small{display:inline-flex!important;font-size:8.5px;padding:2px 7px;margin-left:7px;letter-spacing:.12em;gap:4px}
  :root header.top .brand small::before{width:4px;height:4px}
  #officeMenu{min-width:240px}
  #officeMenu .om-i{padding:14px 12px;font-size:13px}
}

/* Sign out now lives in the logo-icon menu (admin/account-menu.js); the bar no longer carries the button */
header.top #out{display:none!important}
header.top .emblem[role=button]{cursor:pointer;transition:box-shadow .2s ease,transform .2s ease}
header.top .emblem[role=button]:hover{box-shadow:0 0 0 1px #D3A667,0 0 10px rgba(211,166,103,.35)}
header.top .emblem[role=button]:focus-visible{outline:2px solid #D3A667;outline-offset:2px}
#acctMenu{position:fixed;z-index:60;min-width:230px;max-width:calc(100vw - 16px);background:#1C1F26;border:1px solid #B8874A;border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.55);padding:6px;font:600 12px 'Manrope',ui-sans-serif,system-ui,sans-serif;color:#F1EDE6}
#acctMenu .am-h{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#D3A667;padding:6px 10px 2px}
#acctMenu .am-who{padding:2px 10px 10px;border-bottom:1px solid #34383F;margin-bottom:6px;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
#acctMenu .am-who b{font-size:13px} #acctMenu .am-who span{font-weight:500;font-size:11px;color:#A6ABB4}
#acctMenu .am-i{display:block;box-sizing:border-box;width:100%;text-align:left;font:inherit;color:#E58B7D;background:none;border:0;border-radius:8px;padding:10px;cursor:pointer;letter-spacing:.08em;text-transform:uppercase;font-size:11px}
#acctMenu .am-i:hover,#acctMenu .am-i:focus-visible{background:rgba(229,139,125,.14);outline:none}
#acctMenu .am-f{font-weight:500;font-size:11px;color:#A6ABB4;padding:4px 10px 6px}
@media (max-width:900px){ #acctMenu{min-width:250px} #acctMenu .am-i{padding:14px 12px;font-size:12px} }

/* Kemera's own wordmark face (Jost, spaced capitals - the same voice as the storefront logo) instead of the serif the
   Hearth & Hue back office uses. Set on the element so no look or theme can change it. */
:root header.top .brand{font-family:'Jost','Manrope',ui-sans-serif,system-ui,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.24em;font-size:15px}
:root header.top .brand small{letter-spacing:.14em;font-family:'Manrope',ui-sans-serif,system-ui,sans-serif}
@media (max-width:900px){ :root header.top .brand{font-size:14px;letter-spacing:.2em} }
/* taps on the switcher pill and the logo icon never zoom or select anything */
.brand small[role=button],header.top .emblem[role=button],#officeMenu,#acctMenu{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}

/* the Live data button's ticker: always green, softly blinking, whatever look is chosen */
#hModeChips #hMode.live .tk{color:#5DB660!important;text-shadow:0 0 7px rgba(93,182,96,.75);animation:h-blink 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){#hModeChips #hMode.live .tk{animation:none}}