/* =====================================================================================================
   EMBER DECK - the optional HUD theme for the whole back office (Brass, the original look, is the default).
   Applied only while <html data-theme="ember"> (set by hud-theme.js). Nothing here changes what is shown:
   every panel, figure, chart, label, tooltip and dialog is the same one Brass draws - Ember re-colours it
   through the shared --h-* tokens, swaps the type, and gives buttons their per-area behaviour.

   Palette   warm graphite #0C0A09 · Ember Orange #FF6A2B · cool cyan #6FC3D6 for contrast
   Type      Share Tech Mono (figures, headings, clocks) · JetBrains Mono (labels, buttons, data) · Manrope (prose)
   Buttons   one engine, six areas (hud-theme.js tags each button with data-z):
               tab   the top tab bar ............ Corner Lock  + Scanline Drop
               cr    the control room ........... Corner Lock  + Scanline Drop
               save  every Save button .......... Dock Pips    + Confirm Roll
               set   Settings & data ............ Double Lock  + Scanline Drop, Terminal shape (only here)
               oth   the other tabs ............. Corner Lock  + Decrypt Label
               glob  everything else ............ Perimeter Trace + Decrypt Label
             When two areas overlap the more specific one wins: Save > Settings & data > tab bar > control room >
             other tabs > everything else. All shapes are plain rectangles.
   Hover effects live on ::before/::after only, so the text and markup that the page's own scripts write into
   a button are never touched. Click effects are throw-away overlays (see hud-theme.js).
   ===================================================================================================== */

/* ---------------------------------------------------------------------------- palette + type */
:root[data-theme="ember"]{
  --bg:#0C0A09; --surface:#14110F; --surface2:#1A1613; --ink:#EDE6DA; --muted:#A79E92; --faint:#6E655B; --line:#2C2521;
  --brass:#C8501C; --brass-bright:#FF6A2B; --brass-ink:#140A04;
  --ok:#5FD98A; --ok-bg:rgba(95,217,138,.14); --warn:#FFB13B; --warn-bg:rgba(255,177,59,.14);
  --bad:#FF6B8B; --bad-bg:rgba(255,107,139,.14); --info:#6FC3D6; --info-bg:rgba(40,80,92,.34);
  --display:"Share Tech Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
  --h-num:"Share Tech Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
  --h-bg:#0C0A09; --h-panel:rgba(20,17,15,.84); --h-line:#3A2E27; --h-line2:#251E19;
  --h-brass:#FF6A2B; --h-brass2:#C8501C; --h-steel:#6FC3D6; --h-mint:#4FD1A5; --h-rose:#FF6B8B; --h-lav:#B79CFF;
  --h-ok:#5FD98A; --h-warn:#FFB13B; --h-ink:#EDE6DA; --h-mut:#A79E92; --h-faint:#6E655B;
  --h-brass-rgb:255,106,43; --h-brass2-rgb:200,80,28; --h-steel-rgb:111,195,214; --h-steel2-rgb:40,80,92;
  --h-rose-rgb:255,107,139; --h-ok-rgb:95,217,138; --h-warn-rgb:255,177,59; --h-live-rgb:77,240,160;
  --h-lav-rgb:183,156,255; --h-mint-rgb:79,209,165;
  --h-on:#140A04; --h-brass-hi:#FF8A57; --h-live:#4DF0A0;
  --h-g1:#FF9A6A; --h-g2:#FF6A2B; --h-g3:#FFB08A; --h-g4:#FF7E45; --h-tint:#FFC9A8; --h-tint2:#FFE6D6;
  --h-rose-tint:#FFB3C4; --h-ok-tint:#B8F0D0;
}
:root[data-theme="ember"] .hud{--h-panel:rgba(20,17,15,.72)}
:root[data-theme="ember"] body{background:radial-gradient(1200px 500px at 85% -10%,rgba(var(--h-brass2-rgb),.10),transparent 60%),var(--bg)}
:root[data-theme="ember"] main{counter-reset:sys}
:root[data-theme="ember"] #hud{counter-reset:sys}

/* fonts: figures and headings in Share Tech Mono, everything else that was mono becomes JetBrains Mono */
:root[data-theme="ember"] h1,:root[data-theme="ember"] h2{font-family:var(--display);font-weight:400;letter-spacing:.06em}
:root[data-theme="ember"] h1{font-size:28px}
:root[data-theme="ember"] .big,:root[data-theme="ember"] .mid,:root[data-theme="ember"] .coretext .n,:root[data-theme="ember"] .stat b,:root[data-theme="ember"] .h-clock .t,:root[data-theme="ember"] .h-num{font-family:var(--h-num);font-weight:400;letter-spacing:.03em}
:root[data-theme="ember"] .big{font-size:44px}
:root[data-theme="ember"] .mid{font-size:28px}
:root[data-theme="ember"] .coretext .n{font-size:52px}
:root[data-theme="ember"] .h-clock .t{letter-spacing:.06em}
:root[data-theme="ember"] .p h3{font-family:var(--h-num);font-size:12px;font-weight:400;letter-spacing:.2em}
:root[data-theme="ember"] .p h3 span{font-family:var(--mono);font-size:10px}
:root[data-theme="ember"] .brand small,:root[data-theme="ember"] .store-link{font-family:var(--mono)}

/* ---------------------------------------------------------------------------- chrome: top bar, panels, cards */
:root[data-theme="ember"] .top{background:rgba(12,10,9,.94);border-bottom:1px solid var(--brass);box-shadow:0 8px 24px rgba(0,0,0,.5),0 1px 0 rgba(var(--h-brass-rgb),.25)}
:root[data-theme="ember"] .top .emblem{box-shadow:0 0 0 1px rgba(var(--h-brass-rgb),.5),0 0 12px rgba(var(--h-brass-rgb),.25)}
:root[data-theme="ember"] .brand small{border-radius:0;letter-spacing:.14em}
:root[data-theme="ember"] .store-link{border-radius:0}
:root[data-theme="ember"] .subtabs a{border-radius:0}
:root[data-theme="ember"] .chip{border-radius:0}
:root[data-theme="ember"] .media-badge{border-radius:0}
:root[data-theme="ember"] .notice{border-radius:0}
:root[data-theme="ember"] .p{background:linear-gradient(180deg,rgba(var(--h-brass-rgb),.05),transparent 46px),var(--h-panel);box-shadow:inset 0 1px 0 rgba(var(--h-brass-rgb),.16)}
:root[data-theme="ember"] .card,:root[data-theme="ember"] .tbl{box-shadow:inset 0 1px 0 rgba(var(--h-brass-rgb),.14)}
/* telemetry code in the bottom edge of every panel: [SYS_01], [SYS_02] ... numbered in reading order */
:root[data-theme="ember"] .p h3::before{counter-increment:sys;content:"[SYS_" counter(sys,decimal-leading-zero) "]";position:absolute;right:24px;bottom:3px;font:400 8px var(--h-num);letter-spacing:.18em;color:var(--h-faint);opacity:.75;pointer-events:none}
:root[data-theme="ember"] .p{padding-bottom:16px}
:root[data-theme="ember"] th{background:rgba(var(--h-brass-rgb),.07);font-family:var(--mono)}
:root[data-theme="ember"] tr.click:hover td{background:rgba(var(--h-brass-rgb),.07)}
:root[data-theme="ember"] input:not(:where(#hud *)),:root[data-theme="ember"] select:not(:where(#hud *)),:root[data-theme="ember"] textarea:not(:where(#hud *)){border-radius:0;border-color:var(--h-line)}
:root[data-theme="ember"] input:not(:where(#hud *)):hover,:root[data-theme="ember"] select:not(:where(#hud *)):hover,:root[data-theme="ember"] textarea:not(:where(#hud *)):hover{border-color:rgba(var(--h-brass-rgb),.45)}
:root[data-theme="ember"] input:not(:where(#hud *)):focus,:root[data-theme="ember"] select:not(:where(#hud *)):focus,:root[data-theme="ember"] textarea:not(:where(#hud *)):focus{border-color:var(--h-brass);box-shadow:0 0 0 1px rgba(var(--h-brass-rgb),.35)}
:root[data-theme="ember"] dialog{border-radius:0;background:var(--h-on);border-color:var(--h-brass2)}
:root[data-theme="ember"] dialog::backdrop{background:rgba(6,4,3,.78)}
:root[data-theme="ember"] #toast{border-radius:0;font-family:var(--mono);letter-spacing:.06em}
:root[data-theme="ember"] .h-modal,:root[data-theme="ember"] .h-boot{background:rgba(6,4,3,.84)}
:root[data-theme="ember"] .tip{background:rgba(12,10,9,.96)}
:root[data-theme="ember"] .term .sys{color:var(--h-steel)}
:root[data-theme="ember"] .danger-card{border-radius:0}
:root[data-theme="ember"] .h-toast.good{background:#0A1610}
:root[data-theme="ember"] .switch{font-family:var(--mono)}

/* the dispatch pipeline's five columns may shrink below their label width (JetBrains Mono runs wider than the default mono) */
:root[data-theme="ember"] .pipe{grid-template-columns:repeat(5,minmax(0,1fr))}
:root[data-theme="ember"] .stage .n{letter-spacing:.06em;font-size:9px;overflow-wrap:anywhere}
:root[data-theme="ember"] .stage .c{font-family:var(--h-num);font-weight:400}

/* ---------------------------------------------------------------------------- mission strip (control room) */
.e-strip{display:none}
:root[data-theme="ember"] .e-strip{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;margin:0 0 12px;padding:8px 16px;position:relative;
  border:1px solid var(--h-line);background:linear-gradient(90deg,rgba(var(--h-brass-rgb),.12),transparent 55%),var(--h-panel);
  font:10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--h-mut);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
:root[data-theme="ember"] .e-strip::before{content:"";position:absolute;left:-1px;top:-1px;width:16px;height:16px;border:2px solid var(--h-brass);border-right:0;border-bottom:0}
:root[data-theme="ember"] .e-strip b{color:var(--h-ink);font-family:var(--h-num);font-weight:400;font-size:12.5px;letter-spacing:.08em}
:root[data-theme="ember"] .e-strip .k{color:var(--h-faint)}
:root[data-theme="ember"] .e-tag{display:inline-flex;align-items:center;gap:8px;color:var(--h-brass);font-weight:700;letter-spacing:.2em}
:root[data-theme="ember"] .e-led{width:7px;height:7px;background:var(--h-live);box-shadow:0 0 9px var(--h-live);animation:e-blink 1.6s steps(2) infinite}
:root[data-theme="ember"] .e-strip[data-mode="demo"] .e-led{background:var(--h-warn);box-shadow:0 0 9px var(--h-warn)}
:root[data-theme="ember"] .e-strip[data-mode="demo"] #esMode{color:var(--h-warn)}
:root[data-theme="ember"] .e-sast{margin-left:auto}
:root[data-theme="ember"] .e-sast b{color:var(--h-brass)}
@keyframes e-blink{50%{opacity:.25}}
@media (max-width:760px){:root[data-theme="ember"] .e-strip{gap:4px 14px;padding:7px 12px}:root[data-theme="ember"] .e-sast{margin-left:0}}

/* ---------------------------------------------------------------------------- BUTTON ENGINE */
:root[data-theme="ember"] [data-z]:where(:is(button,a):not([data-z="ico"])){
  --bc:var(--h-brass-rgb);--e:rgb(var(--bc));
  position:relative;isolation:isolate;overflow:visible;clip-path:none!important;border-radius:0!important;
  border:1px solid rgba(var(--bc),.42);background:rgba(var(--bc),.07);color:var(--e);
  font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;box-shadow:none;
  transition:color .2s,background-color .2s,border-color .2s,box-shadow .2s;background-size:auto;height:auto;margin:0}
:root[data-theme="ember"] [data-z]:where(:is(button,a):not([data-z="ico"])):hover{color:var(--h-brass-hi);background:rgba(var(--bc),.16);border-color:rgba(var(--bc),.75)}
:root[data-theme="ember"] [data-z]:where(:is(button,a):not([data-z="ico"])):active{transform:translateY(1px)}
:root[data-theme="ember"] [data-z]:where(:is(button,a):not([data-z="ico"])):focus-visible{outline:1px dashed rgba(var(--bc),.9);outline-offset:4px}
:root[data-theme="ember"] :is(button,a)[data-z]:disabled{opacity:.4;cursor:not-allowed}
/* both pseudo-elements start as invisible, full-size, empty layers; each area's effect below dresses them */
:root[data-theme="ember"] [data-z]:where(:is(button,a):not([data-z="ico"]))::before,:root[data-theme="ember"] [data-z]:where(:is(button,a):not([data-z="ico"]))::after{
  content:"";display:block;position:absolute;inset:0;left:0;top:0;right:0;bottom:0;width:auto;height:auto;transform:none;
  background:none;border:0;clip-path:none;animation:none;font:inherit;color:inherit;opacity:0;pointer-events:none;z-index:-1;box-shadow:none}
:root[data-theme="ember"] :is(button,a)[data-z]:disabled::before,:root[data-theme="ember"] :is(button,a)[data-z]:disabled::after{display:none}

/* danger / live / demo keep their meaning, in the theme's own colours */
:root[data-theme="ember"] button.danger[data-z],:root[data-theme="ember"] .h-btn.danger[data-z]{--bc:var(--h-rose-rgb);color:var(--e)}
:root[data-theme="ember"] .h-btn.live[data-z]{--bc:var(--h-ok-rgb)}
:root[data-theme="ember"] .h-btn.demo[data-z]{--bc:var(--h-warn-rgb)}
:root[data-theme="ember"] .media-bulkbar button[data-z]{font-size:9.5px}
/* selected / primary: solid ember with dark type */
:root[data-theme="ember"] button.on[data-z],:root[data-theme="ember"] .h-btn.on[data-z],:root[data-theme="ember"] button.pri[data-z],:root[data-theme="ember"] .h-btn.pri[data-z],:root[data-theme="ember"] [data-z="save"]{
  background:var(--e)!important;color:var(--h-on)!important;border-color:var(--e)}
:root[data-theme="ember"] button.on[data-z]:hover,:root[data-theme="ember"] .h-btn.on[data-z]:hover,:root[data-theme="ember"] button.pri[data-z]:hover,:root[data-theme="ember"] .h-btn.pri[data-z]:hover,:root[data-theme="ember"] [data-z="save"]:hover{background:var(--h-brass-hi)!important;border-color:var(--h-brass-hi);color:var(--h-on)!important}
:root[data-theme="ember"] button.danger.pri[data-z],:root[data-theme="ember"] [data-z="save"].danger{background:rgba(var(--bc),.9)!important;color:var(--h-on)!important}

/* sizes: content buttons keep their old proportions (the shared 44px field height in the plain tabs) */
:root[data-theme="ember"] #hud button[data-z]{padding:7px 14px;min-height:28px}
:root[data-theme="ember"] #hud .chipsrow button[data-z]{min-height:22px;padding:2px 9px;font-size:9.5px;letter-spacing:.06em;margin:0 3px}
:root[data-theme="ember"] #hud .tabs button[data-z],:root[data-theme="ember"] #hud .shctl button[data-z]{min-height:20px;padding:1px 10px;font-size:9.5px;letter-spacing:.08em;margin:0 3px}
:root[data-theme="ember"] #hud .coretext button[data-z]{min-height:22px;padding:3px 10px;font-size:9.5px}
:root[data-theme="ember"] #hud .h-btn.big[data-z]{padding:12px 14px;min-height:58px;font-size:12px;font-weight:700;text-align:left}
:root[data-theme="ember"] #hud .h-btn.big[data-z] small{color:var(--h-mut)}
:root[data-theme="ember"] #hud .h-btn.big[data-z]:hover small{color:var(--h-tint)}
:root[data-theme="ember"] #hud .h-btn.big.pri[data-z] small{color:rgba(20,10,4,.75)}
:root[data-theme="ember"] #hud .h-btn.big[data-z]{background:rgba(var(--bc),.07);box-shadow:none;transition:color .2s,background-color .2s,border-color .2s}
:root[data-theme="ember"] #hud .h-btn.big[data-z]:hover{background:rgba(var(--bc),.16);box-shadow:none;color:var(--h-brass-hi)}
:root[data-theme="ember"] #hud .h-btn.big.pri[data-z]{background:var(--e)!important}
:root[data-theme="ember"] #hud .h-btn.big.pri[data-z]:hover{background:var(--h-brass-hi)!important;color:var(--h-on)!important}
:root[data-theme="ember"] button[data-z]:where(:not(#hud *,header.top *)){padding:9px 18px}
:root[data-theme="ember"] td button[data-z],:root[data-theme="ember"] tr button[data-z]{min-height:26px;padding:4px 10px;font-size:10px}
:root[data-theme="ember"] header.top button[data-z],:root[data-theme="ember"] header.top .store-link[data-z]{min-height:27px;padding:0 14px;font-size:10.5px}
:root[data-theme="ember"] header.top .store-link[data-z]{padding:3px 12px;min-height:0;margin-top:3.25px;font-size:10px;letter-spacing:.14em}
:root[data-theme="ember"] .h-modal button[data-z]{padding:8px 16px;min-height:30px}

/* ---- HOVER: Corner Lock (tab, cr, oth) - four brackets slide in from just outside to lock on the corners */
:root[data-theme="ember"] [data-z="tab"]::before,:root[data-theme="ember"] [data-z="cr"]::before,:root[data-theme="ember"] [data-z="oth"]::before{
  inset:-14px;z-index:1;transition:inset .38s cubic-bezier(.2,.8,.2,1),opacity .25s;
  --e-bg:
    linear-gradient(var(--e),var(--e)) top left/10px 2px no-repeat,linear-gradient(var(--e),var(--e)) top left/2px 10px no-repeat,
    linear-gradient(var(--e),var(--e)) top right/10px 2px no-repeat,linear-gradient(var(--e),var(--e)) top right/2px 10px no-repeat,
    linear-gradient(var(--e),var(--e)) bottom right/10px 2px no-repeat,linear-gradient(var(--e),var(--e)) bottom right/2px 10px no-repeat,
    linear-gradient(var(--e),var(--e)) bottom left/10px 2px no-repeat,linear-gradient(var(--e),var(--e)) bottom left/2px 10px no-repeat;background:var(--e-bg)}
:root[data-theme="ember"] [data-z="tab"]:hover::before,:root[data-theme="ember"] [data-z="cr"]:hover::before,:root[data-theme="ember"] [data-z="oth"]:hover::before,
:root[data-theme="ember"] [data-z="tab"].on::before,:root[data-theme="ember"] [data-z="cr"].on::before,:root[data-theme="ember"] [data-z="oth"].on::before,:root[data-theme="ember"] [data-z="oth"].pri::before{inset:-4px;opacity:1;background:var(--e-bg)}
:root[data-theme="ember"] [data-z="tab"]:focus-visible::before,:root[data-theme="ember"] [data-z="cr"]:focus-visible::before,:root[data-theme="ember"] [data-z="oth"]:focus-visible::before{inset:-4px;opacity:1}

/* ---- HOVER: Perimeter Trace (glob) - a line runs once round the edge, clockwise from the top left */
:root[data-theme="ember"] [data-z="glob"]{--bc:var(--h-brass-rgb);border-color:rgba(var(--bc),.24);background:transparent;color:var(--h-mut)}
:root[data-theme="ember"] [data-z="glob"]:hover{color:var(--h-brass)}
:root[data-theme="ember"] [data-z="glob"]::before{
  inset:-1px;z-index:1;transition:opacity .28s;
  --e-bg:
    linear-gradient(var(--e),var(--e)) top left/100% 2px no-repeat,linear-gradient(var(--e),var(--e)) top right/2px 100% no-repeat,
    linear-gradient(var(--e),var(--e)) bottom right/100% 2px no-repeat,linear-gradient(var(--e),var(--e)) bottom left/2px 100% no-repeat;background:var(--e-bg)}
:root[data-theme="ember"] [data-z="glob"]:hover::before,:root[data-theme="ember"] [data-z="glob"]:focus-visible::before{opacity:1;background:var(--e-bg);animation:e-trace .72s linear both}
@keyframes e-trace{
  0%{background-size:0 2px,2px 0,0 2px,2px 0}
  25%{background-size:100% 2px,2px 0,0 2px,2px 0}
  50%{background-size:100% 2px,2px 100%,0 2px,2px 0}
  75%{background-size:100% 2px,2px 100%,100% 2px,2px 0}
  100%{background-size:100% 2px,2px 100%,100% 2px,2px 100%}}

/* ---- HOVER: Dock Pips (save) - four small squares dock at the middle of each edge */
:root[data-theme="ember"] [data-z="save"]::before{
  inset:-26px;z-index:1;transition:background-position .34s cubic-bezier(.2,.8,.2,1),opacity .25s;
  --e-bg:
    linear-gradient(var(--h-tint2),var(--h-tint2)) left 50% top 0/7px 7px no-repeat,
    linear-gradient(var(--h-tint2),var(--h-tint2)) right 0 top 50%/7px 7px no-repeat,
    linear-gradient(var(--h-tint2),var(--h-tint2)) left 50% bottom 0/7px 7px no-repeat,
    linear-gradient(var(--h-tint2),var(--h-tint2)) left 0 top 50%/7px 7px no-repeat;background:var(--e-bg)}
:root[data-theme="ember"] [data-z="save"]:hover::before,:root[data-theme="ember"] [data-z="save"]:focus-visible::before{
  opacity:1;background:var(--e-bg);
  background-position:left 50% top 23px,right 23px top 50%,left 50% bottom 23px,left 23px top 50%}

/* ---- HOVER: Double Lock (set) - two frames close in from outside and settle just off the edge */
:root[data-theme="ember"] [data-z="set"]::before{inset:-28px;z-index:1;border:1px solid var(--e);transition:inset .5s cubic-bezier(.2,.8,.2,1),opacity .3s}
:root[data-theme="ember"] [data-z="set"]::after{inset:-16px;z-index:1;border:1px solid rgba(var(--bc),.55);transition:inset .5s .08s cubic-bezier(.2,.8,.2,1),opacity .3s .08s}
:root[data-theme="ember"] [data-z="set"]:hover::before,:root[data-theme="ember"] [data-z="set"]:focus-visible::before{inset:-1px;opacity:1}
:root[data-theme="ember"] [data-z="set"]:hover::after,:root[data-theme="ember"] [data-z="set"]:focus-visible::after{inset:-7px;opacity:1}

/* ---- SHAPE: Terminal (Settings & data only) - prompt chevron, lower-case mono, blinking cursor bar */
:root[data-theme="ember"] [data-sh="term"][data-z]{
  text-transform:none;letter-spacing:.04em;padding-left:28px;padding-right:28px;text-align:left;justify-content:flex-start;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M1 1l5 4-5 4' fill='none' stroke='%23FF6A2B' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat 11px 50%/8px 10px,
    linear-gradient(#FF6A2B,#FF6A2B) no-repeat right 11px bottom 9px/8px 2px,
    rgba(var(--bc),.07)}
:root[data-theme="ember"] [data-sh="term"][data-z]:hover{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M1 1l5 4-5 4' fill='none' stroke='%23FF8A57' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat 11px 50%/8px 10px,
    linear-gradient(#FF8A57,#FF8A57) no-repeat right 11px bottom 9px/8px 2px,
    rgba(var(--bc),.16)}
:root[data-theme="ember"] [data-sh="term"][data-z="save"],:root[data-theme="ember"] [data-sh="term"][data-z].pri{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M1 1l5 4-5 4' fill='none' stroke='%23140A04' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat 11px 50%/8px 10px,
    linear-gradient(#140A04,#140A04) no-repeat right 11px bottom 9px/8px 2px,
    var(--e)!important}
:root[data-theme="ember"] [data-sh="term"][data-z="save"]:hover,:root[data-theme="ember"] [data-sh="term"][data-z].pri:hover{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M1 1l5 4-5 4' fill='none' stroke='%23140A04' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat 11px 50%/8px 10px,
    linear-gradient(#140A04,#140A04) no-repeat right 11px bottom 9px/8px 2px,
    var(--h-brass-hi)!important}
:root[data-theme="ember"] [data-sh="term"][data-z]:not(:disabled){animation:e-cursor 1.1s steps(1) infinite}
@keyframes e-cursor{50%{background-size:8px 10px,0 2px,auto}}

/* ---- SHAPE: tab (top bar) - an index tab with its own number key; the current tab is filled in and locked */
:root[data-theme="ember"] header.top nav{gap:3px;counter-reset:etab;padding:6px 6px;margin:-6px -6px}
:root[data-theme="ember"] header.top nav a[data-z]{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;font-weight:500;font-size:10.5px;letter-spacing:.02em;background:transparent;border-color:rgba(var(--bc),.22);color:var(--muted)}
:root[data-theme="ember"] header.top nav a[data-z]:hover{color:var(--h-brass);background:rgba(var(--bc),.08)}
:root[data-theme="ember"] header.top nav a[data-z].on{color:var(--h-brass);background:rgba(var(--bc),.14);border-color:rgba(var(--bc),.6)}
:root[data-theme="ember"] header.top nav a[data-z]::after{
  counter-increment:etab;content:counter(etab,decimal-leading-zero);position:static;inset:auto;order:-1;opacity:.6;
  font:400 8.5px var(--h-num);letter-spacing:.08em;color:var(--h-faint);z-index:auto;transition:color .2s}
:root[data-theme="ember"] header.top nav a[data-z].on::after,:root[data-theme="ember"] header.top nav a[data-z]:hover::after{color:var(--h-brass);opacity:1}
@media (max-width:1500px) and (min-width:901px){:root[data-theme="ember"] header.top nav a[data-z]::after{display:none}}
@media (max-width:900px){:root[data-theme="ember"] header.top nav a[data-z]{padding:9px 14px}:root[data-theme="ember"] header.top nav a[data-z]::after{display:none}}

/* sub-tabs in Sourcing (Suppliers / Stock locations / Shipments) are tab-like buttons in another tab */
:root[data-theme="ember"] .subtabs a[data-z]{padding:7px 16px;font-size:11px;letter-spacing:.1em}
:root[data-theme="ember"] .subtabs a[data-z].on{background:var(--e)!important;color:var(--h-on)!important}

/* the round icon buttons (sound, collapse arrow, media tiles) stay round and small - Ember only re-colours them */
:root[data-theme="ember"] .top-toggle,:root[data-theme="ember"] #snd.out.snd{border-radius:0!important}
:root[data-theme="ember"] header.top #snd{border-color:rgba(var(--h-brass-rgb),.5)!important}
:root[data-theme="ember"] .media-actions button{border-radius:0}
:root[data-theme="ember"] .media-add{border-radius:0}
:root[data-theme="ember"] .media-item{border-radius:0}
:root[data-theme="ember"] .media-bulkbar{border-radius:0}
:root[data-theme="ember"] .media-bulkbar button{border-radius:0}

/* ---------------------------------------------------------------------------- click effects (hud-theme.js) */
.e-fx{position:fixed;z-index:9999;pointer-events:none;overflow:hidden}
.e-scan i{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#FFB08A 20%,#FF6A2B 50%,#FFB08A 80%,transparent);box-shadow:0 0 12px 2px rgba(255,106,43,.8);animation:e-scan .5s ease-in both}
@keyframes e-scan{from{top:0;opacity:1}to{top:calc(100% - 2px);opacity:.25}}
.e-roll{background:#FF8A57;color:#140A04;display:flex;align-items:center;justify-content:center;font:700 11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;animation:e-roll .32s cubic-bezier(.2,.8,.2,1) both}
.e-roll span::before{content:"> "}
.e-roll.bad{background:#FF6B8B}
.e-roll.out{animation:e-roll-out .35s ease-in both}
@keyframes e-roll{from{transform:translateY(110%);opacity:0}to{transform:none;opacity:1}}
@keyframes e-roll-out{from{transform:none;opacity:1}to{transform:translateY(-110%);opacity:0}}

@media (prefers-reduced-motion:reduce){
  :root[data-theme="ember"] [data-z]::before,:root[data-theme="ember"] [data-z]::after{transition:none!important;animation:none!important}
  :root[data-theme="ember"] [data-sh="term"][data-z]{animation:none!important}
  :root[data-theme="ember"] .e-led{animation:none}
}
@media print{:root[data-theme="ember"] .e-strip{display:none}}