/* hud.css — Josh's Dashboard shared design system (work + personal).
   Work side: cyan accent (default). Personal side: <body class="side-personal"> → green.
   Both pages import this; page files carry structure + behavior only. */

:root {
  --bg:#05080F; --panel:rgba(11,18,30,.88); --panel2:rgba(14,24,38,.6);
  --line:#16283C; --ink:#D9E6EE; --mut:#6E8496;
  --acc:#4FD8EB; --acc-dim:#2E7E96; --glow:rgba(79,216,235,.45); --glow-soft:rgba(79,216,235,.12);
  --am:#F0A840; --rd:#FF5C57; --gn:#3FE0A0; --sel:rgba(79,216,235,.07);
  --disp:'Rajdhani',sans-serif; --mono:'Share Tech Mono',ui-monospace,Menlo,monospace;
}
.side-personal {
  --bg:#060C09; --panel:rgba(10,20,15,.9); --line:#173028; --mut:#6E9483; --ink:#DCE9E2;
  --acc:#3FE0A0; --acc-dim:#2A8F68; --glow:rgba(63,224,160,.4); --glow-soft:rgba(63,224,160,.12);
  --sel:rgba(63,224,160,.07);
}
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.55 var(--mono); overflow-x:hidden; }
body::before { content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1000px 500px at 50% -10%, var(--glow-soft), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 39px, color-mix(in srgb, var(--acc) 4%, transparent) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, color-mix(in srgb, var(--acc) 4%, transparent) 39px 40px); }
body::after { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.12) 2px 4px); opacity:.5; }
[hidden] { display:none !important; }
:focus-visible { outline:1px solid var(--acc); outline-offset:2px; }

.wrap { max-width:960px; margin:0 auto; padding:26px 18px 90px; display:flex; flex-direction:column; gap:30px; }

/* ---------- header ---------- */
header.hud { display:flex; justify-content:space-between; align-items:flex-end; gap:14px; flex-wrap:wrap;
  padding-bottom:14px; border-bottom:1px solid var(--line); position:relative; }
header.hud::after { content:''; position:absolute; left:0; bottom:-1px; width:34%; height:1px;
  background:linear-gradient(90deg, var(--acc), transparent); box-shadow:0 0 12px var(--glow); }
.brand { display:flex; align-items:center; gap:14px; }
.reticle { width:40px; height:40px; flex:none; position:relative; }
.reticle svg { position:absolute; inset:0; }
h1.hud-title { font-family:var(--disp); font-size:clamp(22px,4.5vw,30px); font-weight:700;
  letter-spacing:.22em; margin:0; text-transform:uppercase; text-shadow:0 0 18px var(--glow); }
h1.hud-title small { display:block; font-family:var(--mono); font-size:10px; letter-spacing:.34em;
  color:var(--mut); text-shadow:none; margin-top:1px; }
.hud-right { text-align:right; font-size:11px; color:var(--mut); letter-spacing:.12em; }
.hud-right .clock { font-family:var(--disp); font-size:19px; font-weight:600; color:var(--acc);
  letter-spacing:.14em; text-shadow:0 0 10px var(--glow); font-variant-numeric:tabular-nums; }
.hud-right a { color:var(--acc-dim); text-decoration:none; }
.hud-right a:hover { color:var(--acc); }

/* ---------- panels & sections ---------- */
.panel, .card { position:relative; background:var(--panel); border:1px solid var(--line);
  padding:18px 20px; backdrop-filter:blur(4px);
  background-image:
    linear-gradient(var(--acc),var(--acc)),linear-gradient(var(--acc),var(--acc)),
    linear-gradient(var(--acc),var(--acc)),linear-gradient(var(--acc),var(--acc)),
    linear-gradient(var(--acc),var(--acc)),linear-gradient(var(--acc),var(--acc)),
    linear-gradient(var(--acc),var(--acc)),linear-gradient(var(--acc),var(--acc));
  background-repeat:no-repeat;
  background-size:14px 1px,1px 14px, 14px 1px,1px 14px, 14px 1px,1px 14px, 14px 1px,1px 14px;
  background-position:0 0,0 0, 100% 0,100% 0, 0 100%,0 100%, 100% 100%,100% 100%; }
.sec { display:flex; flex-direction:column; gap:12px; }
.sec-h { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sec-h .idx { font-family:var(--disp); font-weight:700; font-size:13px; color:var(--am); letter-spacing:.2em; }
.sec-h .t, .card h2 { font-family:var(--disp); font-weight:600; font-size:15px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--acc); text-shadow:0 0 12px var(--glow); margin:0; }
.card h2 { font-size:13px; margin-bottom:10px; }
.sec-h .rule { flex:1; height:1px; background:linear-gradient(90deg, var(--line), transparent); min-width:30px; }
.sec-h .tag { font-size:10px; color:var(--mut); letter-spacing:.2em; }
.sub { color:var(--mut); font-size:12.5px; max-width:66ch; margin:0; }
.subline { color:var(--mut); font-size:11.5px; letter-spacing:.06em; margin-top:8px; }
.subline b { color:var(--ink); font-weight:400; }
.loading { color:var(--mut); font-size:12px; letter-spacing:.14em; }

/* ---------- stats & rings ---------- */
.statrow { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.stat { text-align:left; }
.stat .lbl { font-size:10px; letter-spacing:.24em; color:var(--mut); text-transform:uppercase; }
.stat .val { font-family:var(--disp); font-size:30px; font-weight:700; line-height:1.15;
  color:var(--ink); font-variant-numeric:tabular-nums; }
.stat .val.cy { color:var(--acc); text-shadow:0 0 14px var(--glow); }
.stat .val.am { color:var(--am); text-shadow:0 0 14px rgba(240,168,64,.35); }
.stat .val.rd { color:var(--rd); text-shadow:0 0 14px rgba(255,92,87,.35); }
.stat .sub2 { font-size:11px; color:var(--mut); letter-spacing:.06em; }
.ringrow { display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.ring { position:relative; width:118px; height:118px; flex:none; }
.ring svg { transform:rotate(-90deg); width:100%; height:100%; }
.ring .c { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring .c b { font-family:var(--disp); font-size:24px; font-weight:700; color:var(--acc);
  text-shadow:0 0 10px var(--glow); font-variant-numeric:tabular-nums; }
.ring .c span { font-size:8.5px; letter-spacing:.2em; color:var(--mut); text-transform:uppercase; }

/* ---------- tables ---------- */
table { width:100%; border-collapse:collapse; font-size:12.5px; }
th { text-align:left; color:var(--mut); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  padding:8px 10px; border-bottom:1px solid var(--line); font-weight:400; }
td { padding:8px 10px; border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent); vertical-align:top; }
tr:last-child td { border-bottom:none; }
td.r, th.r { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tablewrap { overflow-x:auto; }
.led { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:1px; }
.led.ok { background:var(--gn); box-shadow:0 0 8px var(--gn); animation:pulse 2.4s infinite; }
.led.err { background:var(--rd); box-shadow:0 0 8px var(--rd); animation:pulse 1s infinite; }
.led.warn { background:var(--am); box-shadow:0 0 8px var(--am); }
@keyframes pulse { 50% { opacity:.45; } }
.badge { font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; padding:2px 7px;
  border:1px solid var(--line); color:var(--mut); }
.badge.warn { color:var(--am); border-color:rgba(240,168,64,.4); }
.age { font-variant-numeric:tabular-nums; }
.age.warn { color:var(--am); } .age.crit { color:var(--rd); font-weight:700; }

/* ---------- attention list (Today) ---------- */
.attn { display:flex; flex-direction:column; }
.attn a { color:var(--acc); text-decoration:none; }
.attn a:hover { text-decoration:underline; }
.attn .it { display:flex; gap:11px; align-items:baseline; padding:9px 0;
  border-bottom:1px solid color-mix(in srgb, var(--line) 45%, transparent); font-size:13px; }
.attn .it:last-child { border-bottom:none; }
.attn .sev { flex:none; width:8px; height:8px; border-radius:50%; align-self:center; }
.attn .sev.crit { background:var(--rd); box-shadow:0 0 8px var(--rd); }
.attn .sev.warn { background:var(--am); box-shadow:0 0 8px var(--am); }
.attn .sev.info { background:var(--acc-dim); }
.attn .allclear { color:var(--gn); letter-spacing:.14em; padding:14px 0; text-align:center; font-size:12.5px; }

/* ---------- gates (device page renders its own; PIN gate shared) ---------- */
.gatewrap { min-height:78vh; display:flex; align-items:center; justify-content:center; }
.gate { width:min(360px,92vw); text-align:center; padding:38px 30px 34px; }
.gate h2 { font-family:var(--disp); letter-spacing:.34em; font-size:15px; margin:18px 0 4px;
  color:var(--acc); text-shadow:0 0 12px var(--glow); border:none; }
.gate p { color:var(--mut); font-size:11px; letter-spacing:.18em; margin:0 0 20px; text-transform:uppercase; }
.gate input { width:100%; background:rgba(5,8,15,.8); border:1px solid var(--line); color:var(--acc);
  font-family:var(--disp); font-size:34px; font-weight:700; letter-spacing:.6em; text-align:center;
  padding:10px 0 10px .6em; outline:none; }
.gate input:focus { border-color:var(--acc); box-shadow:0 0 18px var(--glow-soft); }
.gate button { margin-top:18px; width:100%; background:transparent; border:1px solid var(--acc-dim);
  color:var(--acc); font-family:var(--disp); font-weight:600; letter-spacing:.34em; font-size:13px;
  padding:11px 0; cursor:pointer; text-transform:uppercase; }
.gate button:hover { border-color:var(--acc); box-shadow:0 0 16px var(--glow-soft); }
.gatemsg { min-height:16px; margin-top:12px; font-size:11px; letter-spacing:.12em; color:var(--mut); }
.gatemsg.err { color:var(--rd); }
.shake { animation:shake .3s; }
@keyframes shake { 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* ---------- inputs & buttons ---------- */
.filter, .fornote, .tin { width:100%; margin-top:9px; background:rgba(5,8,15,.7); border:1px solid var(--line);
  color:var(--ink); font:inherit; padding:9px 12px; outline:none; }
.filter:focus, .tin:focus { border-color:var(--acc); box-shadow:0 0 14px var(--glow-soft); }
.fornote { border-style:dashed; color:var(--gn); font-size:12.5px; }
.fornote::placeholder { color:var(--mut); }
.fornote:focus { border-color:var(--gn); border-style:solid; }
.hbtn { background:transparent; border:1px solid var(--acc-dim); color:var(--acc);
  font-family:var(--disp); font-weight:600; letter-spacing:.2em; font-size:12px; padding:8px 16px;
  cursor:pointer; text-transform:uppercase; }
.hbtn:hover { border-color:var(--acc); box-shadow:0 0 12px var(--glow-soft); }

/* ---------- review tool ---------- */
.rv-row1 { display:flex; justify-content:space-between; gap:14px; align-items:baseline; flex-wrap:wrap; }
.rv-desc { font-family:var(--disp); font-size:19px; font-weight:600; letter-spacing:.03em; }
.rv-amt { font-family:var(--disp); font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; }
.rv-amt.neg { color:var(--rd); text-shadow:0 0 12px rgba(255,92,87,.3); }
.rv-amt.pos { color:var(--gn); text-shadow:0 0 12px rgba(63,224,160,.3); }
.rv-meta { color:var(--mut); font-size:11.5px; margin-top:5px; display:flex; gap:12px; flex-wrap:wrap; letter-spacing:.05em; }
.oldcat { color:var(--am); }
.precedent { color:var(--acc-dim); font-size:10.5px; letter-spacing:.08em; }
.cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:6px; margin-top:10px; }
.cat { border:1px solid var(--line); padding:7px 10px; font-size:12px; cursor:pointer;
  color:var(--ink); background:transparent; text-align:left; font-family:var(--mono); }
.cat:hover { border-color:var(--acc-dim); }
.cat.hi { border-color:var(--acc); color:var(--acc); background:var(--sel); box-shadow:0 0 12px var(--glow-soft); }
.rv-keys { color:var(--mut); font-size:10.5px; display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; letter-spacing:.08em; }
.rv-keys b { color:var(--ink); }

/* ---------- checklist / log / archive ---------- */
.step { display:flex; gap:12px; align-items:flex-start; padding:11px 0;
  border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.step:last-child { border-bottom:none; }
.step input[type=checkbox] { margin-top:3px; accent-color:var(--acc); width:14px; height:14px; }
.step .t b { display:block; font-size:13px; font-family:var(--disp); font-weight:600; letter-spacing:.06em; }
.step .t span { color:var(--mut); font-size:11.5px; }
.step code { display:block; background:rgba(5,8,15,.75); border:1px solid var(--line);
  padding:7px 10px; margin-top:6px; font-size:11px; overflow-x:auto; white-space:pre; color:var(--acc); }
.step.done .t b { color:var(--mut); text-decoration:line-through; }
.logline { display:flex; gap:12px; padding:7px 0;
  border-bottom:1px solid color-mix(in srgb, var(--line) 40%, transparent); font-size:12.5px; }
.logline:last-child { border-bottom:none; }
.logline .d { color:var(--am); flex:none; width:44px; letter-spacing:.06em; }
.logline .x { color:var(--mut); } .logline .x b { color:var(--ink); font-weight:400; }
.artrow { display:flex; gap:10px; flex-wrap:wrap; }
.artrow a { border:1px solid var(--line); color:var(--acc); text-decoration:none; font-size:11.5px;
  letter-spacing:.1em; padding:8px 14px; text-transform:uppercase; }
.artrow a:hover { border-color:var(--acc); box-shadow:0 0 12px var(--glow-soft); }
details.fold > summary { cursor:pointer; list-style:none; color:var(--mut); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; padding:4px 0; }
details.fold > summary::before { content:'▸ '; color:var(--acc); }
details.fold[open] > summary::before { content:'▾ '; }

/* ---------- jump nav ---------- */
#jump { position:sticky; top:0; z-index:8; display:flex; gap:4px; padding:10px 0;
  background:linear-gradient(180deg, var(--bg) 78%, transparent); overflow-x:auto; }
#jump a { color:var(--mut); text-decoration:none; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; padding:5px 11px; border:1px solid transparent; white-space:nowrap; }
#jump a:hover { color:var(--acc); border-color:var(--line); }
#jump .sp { flex:1; }
#jump .sync { color:var(--am); cursor:pointer; border:1px solid transparent; background:none;
  font:inherit; font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:5px 11px; }
#jump .sync:hover { border-color:rgba(240,168,64,.4); }
#jump .stamp { color:var(--mut); font-size:9.5px; letter-spacing:.14em; align-self:center; padding-right:4px; }

/* ---------- chat (both sides: comm ids or personal chat ids) ---------- */
.chatbtn, .askbtn { margin-left:8px; background:transparent; border:1px solid var(--line); color:var(--mut);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; padding:3px 10px; cursor:pointer; }
.chatbtn:hover, .askbtn:hover { color:var(--acc); border-color:var(--acc-dim); }
.askbtn { float:right; margin-top:-2px; }
#comm, #chat { position:fixed; right:14px; bottom:14px; z-index:20; width:min(400px, calc(100vw - 28px));
  max-height:min(560px, 76vh); display:none; flex-direction:column; }
#comm.open, #chat.open { display:flex; }
#comm > .panel, #chat > .panel { display:flex; flex-direction:column; flex:1; min-height:0; padding:0; }
.chat-head { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); }
.chat-head .tt { font-family:var(--disp); font-weight:600; font-size:13px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--acc); text-shadow:0 0 10px var(--glow); }
.chat-head .ctx { font-size:10px; color:var(--am); letter-spacing:.14em; text-transform:uppercase; }
.chat-head .x { margin-left:auto; background:none; border:none; color:var(--mut); font:inherit;
  font-size:16px; cursor:pointer; }
.chat-log { flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:9px; min-height:120px; }
.cmsg, .msg { max-width:88%; padding:8px 12px; font-size:12.5px; white-space:pre-wrap; border:1px solid var(--line); }
.cmsg.josh, .msg.josh { align-self:flex-end; border-color:color-mix(in srgb, var(--acc) 35%, transparent);
  background:var(--sel); }
.cmsg.claude, .msg.alfred, .msg.claude { align-self:flex-start; background:rgba(5,8,15,.6); }
.cmsg .cm, .msg .meta { display:block; font-size:9px; color:var(--mut); letter-spacing:.12em; margin-top:4px;
  text-transform:uppercase; }
.cmsg.pending, .msg.pending { opacity:.55; }
.chat-form { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
.chat-form textarea { flex:1; background:rgba(5,8,15,.75); border:1px solid var(--line); color:var(--ink);
  font:inherit; font-size:16px; padding:8px 11px; resize:none; height:46px; outline:none; }
.chat-form textarea:focus { border-color:var(--acc); }
.chat-form button { background:transparent; border:1px solid var(--acc-dim); color:var(--acc);
  font-family:var(--disp); font-weight:600; letter-spacing:.2em; font-size:12px; padding:0 16px;
  cursor:pointer; text-transform:uppercase; }
.chat-fab { position:fixed; right:14px; bottom:14px; z-index:19; background:var(--panel);
  border:1px solid var(--acc-dim); color:var(--acc); font-family:var(--disp); font-weight:600;
  letter-spacing:.18em; font-size:12px; padding:11px 18px; cursor:pointer; text-transform:uppercase;
  box-shadow:0 0 18px var(--glow-soft); }
.chat-fab:hover { border-color:var(--acc); }
.chat-fab .dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--am);
  box-shadow:0 0 8px var(--am); margin-left:8px; vertical-align:1px; }
.chat-fab .ct { display:inline-block; background:var(--am); color:#05080F; border-radius:9px;
  font-size:10px; padding:1px 7px; margin-left:8px; font-weight:700; font-family:var(--mono); }
.cmsg.typing { color:var(--mut); letter-spacing:.12em; font-size:11px; text-transform:uppercase; }
.tdots i { display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--acc);
  margin-left:4px; animation:tblink 1.2s infinite; }
.tdots i:nth-child(2) { animation-delay:.2s; } .tdots i:nth-child(3) { animation-delay:.4s; }
@keyframes tblink { 0%,60%,100% { opacity:.25; } 30% { opacity:1; } }
.accept { display:block; width:100%; margin-top:10px; padding:11px 14px; text-align:left;
  background:var(--sel); border:1px solid var(--acc); color:var(--acc); font-family:var(--mono);
  font-size:13.5px; font-weight:700; cursor:pointer; }
.accept small { display:block; color:var(--mut); font-weight:400; font-size:9px;
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:2px; }
.accept:hover { box-shadow:0 0 14px var(--glow-soft); }
.hud-date { font-size:10px; letter-spacing:.22em; color:var(--mut); text-transform:uppercase; }

/* ---------- side switch arrows ---------- */
.side-arrow { position:fixed; top:50%; transform:translateY(-50%); z-index:10;
  background:var(--panel); border:1px solid var(--line); text-decoration:none;
  padding:18px 9px; font-size:20px; }
.side-arrow span { display:block; font-size:8.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mut); writing-mode:vertical-rl; margin-top:7px; }
.side-arrow.right { right:0; border-right:none; color:var(--gn); }
.side-arrow.right:hover { border-color:var(--gn); box-shadow:0 0 16px rgba(63,224,160,.2); }
.side-arrow.left { left:0; border-left:none; color:#4FD8EB; }
.side-arrow.left:hover { border-color:#4FD8EB; box-shadow:0 0 16px rgba(79,216,235,.2); }

/* ---------- toast / boot / misc ---------- */
.toast { position:fixed; bottom:20px; right:64px; background:var(--panel); border:1px solid var(--acc-dim);
  padding:9px 15px; font-size:12px; opacity:0; transition:opacity .2s; z-index:25; letter-spacing:.05em;
  box-shadow:0 0 18px var(--glow-soft); }
.toast.show { opacity:1; } .toast.err { border-color:var(--rd); color:var(--rd); }
.booted .sec { opacity:0; transform:translateY(12px); animation:rise .5s cubic-bezier(.2,.7,.2,1) forwards; }
.booted .sec:nth-child(1){animation-delay:.05s} .booted .sec:nth-child(2){animation-delay:.14s}
.booted .sec:nth-child(3){animation-delay:.23s} .booted .sec:nth-child(4){animation-delay:.32s}
.booted .sec:nth-child(5){animation-delay:.41s} .booted .sec:nth-child(6){animation-delay:.5s}
@keyframes rise { to { opacity:1; transform:none; } }

/* ---------- mobile ---------- */
@media (max-width:620px) {
  body { font-size:13.5px; }
  .wrap { padding:12px 12px calc(120px + env(safe-area-inset-bottom)); gap:22px; }
  h1.hud-title { letter-spacing:.14em; }
  h1.hud-title small { letter-spacing:.22em; }
  .reticle { width:32px; height:32px; }
  .hud-right .clock { font-size:16px; }
  .panel, .card { padding:14px 14px; }
  .stat .val { font-size:24px; }
  .ring { width:94px; height:94px; }
  .ringrow { gap:14px; }
  .sec-h .tag { display:none; }
  .sec-h .t { font-size:14px; letter-spacing:.22em; }
  #jump { gap:0; }
  #jump a { padding:7px 8px; }
  #jump .stamp { display:none; }
  td, th { padding:7px 8px; }
  .cats { grid-template-columns:repeat(2, 1fr); }
  .cat { padding:11px 10px; font-size:12.5px; }  /* comfortable touch targets */
  .chatbtn, .askbtn { padding:6px 12px; font-size:10px; }
  .filter, .fornote, .tin { font-size:16px; }   /* stops iOS focus zoom */
  .rv-desc { font-size:16px; } .rv-amt { font-size:22px; }
  #comm, #chat { right:0; left:0; bottom:0; width:100vw; max-height:84vh; }
  #comm > .panel, #chat > .panel { border-left:none; border-right:none; border-bottom:none; }
  .chat-form { padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
  .chat-fab { right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); padding:12px 16px; }
  .toast { right:12px; bottom:calc(88px + env(safe-area-inset-bottom)); }
  .side-arrow { top:auto; transform:none; bottom:calc(70px + env(safe-area-inset-bottom));
    padding:9px 6px; font-size:14px; }
  .side-arrow span { font-size:8px; margin-top:5px; }
  header.hud { align-items:flex-start; }
  .hud-right { display:flex; gap:12px; align-items:baseline; text-align:left; width:100%;
    justify-content:space-between; order:2; }
  .attn .it { font-size:12.5px; gap:9px; }
  .step code { font-size:10px; }
  .rv-keys { display:none; }   /* keyboard hints are noise on touch */
}
@media (prefers-reduced-motion: reduce) { .tdots i { animation:none; opacity:.6; } }
@media (prefers-reduced-motion: reduce) {
  .led.ok, .led.err { animation:none; } .shake { animation:none; }
  .booted .sec { animation:none; opacity:1; transform:none; }
}