/* ===== MeBume Autopilot — Wall kiosk (transparent / glass over Corsair art) =====
   Sizing is in vh so the layout reads identically on the full 2560x720 panel
   and the 853x720 widget cell (both 720 tall). Colors come from the palette
   engine (palettes.js) via CSS custom properties so it re-themes per wallpaper. */

:root{ color-scheme: dark; }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;width:100%;overflow:hidden;background:transparent}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
  user-select:none;cursor:none;
}
/* preview-only wallpaper behind the transparent kiosk (production = transparent) */
body.bg-art{background:#070910 url("./assets/wp.svg") center/cover no-repeat}
body.bg-dark{background:#0a0d13}
body.bg-check{background:
  repeating-conic-gradient(#23272f 0% 25%, #2c313b 0% 50%) 50%/40px 40px}

.stage{
  position:fixed;inset:0;width:100vw;height:100vh;overflow:hidden;background:transparent;
  /* palette defaults (overridden by palettes.js) */
  --c-accent:#b07bff;--c-good:#3ad6a0;--c-warn:#ffb13d;--c-bad:#ff5d7a;
  --c-text:#ffffff;--c-text-dim:#c2cadb;--c-text-faint:rgba(255,255,255,.42);
  --c-scrim:rgba(9,11,17,.34);--c-line:rgba(255,255,255,.18);--blur:12px;--glow:.7;
  color:var(--c-text);
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,calc(.30 + .25*var(--glow)));
}
.num{letter-spacing:-0.01em}

/* ---------- locked (missing/invalid access key) ---------- */
.lockscreen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8vh;text-align:center;padding:0 6vw;color:var(--c-text)}
.lockscreen .lk-ic{width:8.5vh;height:8.5vh;color:var(--c-accent);opacity:.92;filter:drop-shadow(0 0 calc(2vh*var(--glow)) var(--c-accent))}
.lockscreen .lk-t{font-size:3.4vh;font-weight:700;letter-spacing:.01em}
.lockscreen .lk-s{font-size:1.9vh;font-weight:500;color:var(--c-text-dim);max-width:46ch;line-height:1.5}
.glass{background:var(--c-scrim);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--c-line)}

/* ---------- shared atoms ---------- */
.dot{display:inline-block;width:1.5vh;height:1.5vh;border-radius:50%;background:var(--c-text-faint);flex:0 0 auto}
.dot.green{background:var(--c-good);box-shadow:0 0 1.2vh var(--c-good);animation:pulse 2.4s infinite}
.dot.amber{background:var(--c-warn);box-shadow:0 0 1vh var(--c-warn)}
.dot.red{background:var(--c-bad);box-shadow:0 0 1vh var(--c-bad);animation:blink 1.1s steps(1) infinite}
.dot.idle{background:var(--c-text-faint);opacity:.5}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c-good) 55%,transparent)}70%{box-shadow:0 0 0 1.4vh transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes blink{50%{opacity:.25}}

.badge{font-size:1.5vh;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.3vh .9vh;border-radius:5px;line-height:1;text-shadow:none}
.badge.live{color:#06231a;background:var(--c-good)}
.badge.shadow{color:var(--c-text-dim);background:rgba(255,255,255,.10);border:1px solid var(--c-line)}

.chip{font-size:1.5vh;font-weight:600;letter-spacing:.04em;padding:.35vh 1vh;border-radius:6px;line-height:1;white-space:nowrap;background:rgba(255,255,255,.10);text-shadow:none}
.chip.warn{color:var(--c-warn)}
.chip.scale{color:var(--c-good)}
.chip.pause{color:var(--c-bad)}

.metric-good{color:var(--c-good)}
.metric-warn{color:var(--c-warn)}
.metric-bad{color:var(--c-bad)}

.topctl{position:absolute;top:2.2vh;right:2.4vh;z-index:30;display:flex;align-items:center;gap:1vh}
.syncbtn{display:flex;align-items:center;justify-content:center;width:3.6vh;height:3.6vh;border-radius:50%;
  padding:0;cursor:pointer;color:var(--c-text);background:rgba(9,11,17,.5);border:1px solid var(--c-line);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));text-shadow:none}
.syncbtn svg{width:2vh;height:2vh}
.syncbtn:active{transform:scale(.94)}
.syncbtn.spin svg{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.statusflag{display:flex;align-items:center;gap:.8vh;
  font-size:1.6vh;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:.6vh 1.2vh;border-radius:7px;text-shadow:none}
.statusflag.ok{color:var(--c-good);background:rgba(9,11,17,.5)}
.statusflag.mock{color:var(--c-warn);background:rgba(9,11,17,.5)}
.statusflag.stale{color:var(--c-bad);background:rgba(9,11,17,.6);animation:blink 1.4s steps(1) infinite}

/* ===================================================================== */
/* FULL LAYOUT  (2560x720 band)                                          */
/* ===================================================================== */
.stage[data-layout="full"] .board{display:grid;grid-template-columns:25% 50.5% 24.5%;height:100vh;width:100vw}
.stage[data-layout="full"] .screen-recs{display:none}
.stage[data-layout="full"][data-screen="recs"] .board{display:none}
.stage[data-layout="full"][data-screen="recs"] .screen-recs{display:grid}

.lrail{padding:3.2vh 3vh 3vh;display:flex;flex-direction:column;background:var(--c-scrim);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border-right:1px solid var(--c-line)}
.brand{display:flex;align-items:center;gap:1.4vh}
.brand .mark{width:4.6vh;height:4.6vh;border-radius:11px;background:var(--c-accent);display:flex;align-items:center;justify-content:center;color:#0a0a14;font-weight:800;font-size:2.6vh;box-shadow:0 0 2.4vh color-mix(in srgb,var(--c-accent) 60%,transparent);text-shadow:none}
.brand .name{font-size:2.2vh;font-weight:700;letter-spacing:.02em;line-height:1.05}
.brand .name small{display:block;font-size:1.5vh;font-weight:500;letter-spacing:.18em;color:var(--c-text-dim);text-transform:uppercase;margin-top:.3vh}

.org-spend{margin-top:auto}
.org-spend .lbl{font-size:1.9vh;color:var(--c-text-dim);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.org-spend .big{font-size:10.5vh;font-weight:800;line-height:.92;margin-top:.6vh;text-shadow:0 2px 3px rgba(0,0,0,.5),0 4px 30px rgba(0,0,0,calc(.4*var(--glow)))}
.org-spend .big .cur{font-size:5vh;font-weight:600;color:var(--c-text-dim);vertical-align:.8vh;margin-right:.4vh}
.org-sub{display:flex;gap:2.6vh;margin-top:2.2vh}
.org-sub .it .v{font-size:3.4vh;font-weight:700;line-height:1}
.org-sub .it .k{font-size:1.55vh;color:var(--c-text-dim);text-transform:uppercase;letter-spacing:.08em;margin-top:.5vh}

.heartbeat{margin-top:3vh;padding-top:2.4vh;border-top:1px solid var(--c-line);display:flex;align-items:center;gap:1.4vh}
.heartbeat .hb-txt .a{font-size:1.9vh;font-weight:600}
.heartbeat .hb-txt .b{font-size:1.55vh;color:var(--c-text-dim);margin-top:.3vh}

.center{padding:2.6vh 2.4vh;display:flex;flex-direction:column;min-width:0}
.center-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.8vh}
.center-head .t{font-size:1.8vh;color:var(--c-text-dim);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.center-head .r{font-size:1.7vh;color:var(--c-text-faint)}
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:1.6vh;flex:1;min-height:0}
.tile{border-radius:14px;padding:2vh 1.7vh;display:flex;flex-direction:column;min-width:0;position:relative;overflow:hidden;background:var(--c-scrim);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--c-line)}
.tile.idle{opacity:.5}
.tile .th{display:flex;align-items:center;gap:.8vh;min-width:0}
.tile .th .nm{font-size:2vh;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.tile .spend{font-size:4.6vh;font-weight:800;line-height:1;margin-top:1.6vh}
.tile .spend .cur{font-size:2.4vh;font-weight:600;color:var(--c-text-dim);vertical-align:.5vh;margin-right:.2vh}
.tile .mrow{display:flex;align-items:baseline;gap:.8vh;margin-top:1vh}
.tile .mrow .mv{font-size:3vh;font-weight:700;line-height:1}
.tile .mrow .mk{font-size:1.5vh;color:var(--c-text-dim);text-transform:uppercase;letter-spacing:.06em}
.tile .spark{margin-top:auto;width:100%;height:8vh}
.tile .foot{display:flex;justify-content:space-between;align-items:center;margin-top:1.3vh;font-size:1.55vh;color:var(--c-text-dim)}
.tile .foot b{color:var(--c-text);font-weight:700}
.tile .modebadge{position:absolute;top:1.7vh;right:1.7vh}

.rrail{padding:2.8vh 2.4vh;display:flex;flex-direction:column;min-width:0;background:var(--c-scrim);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border-left:1px solid var(--c-line)}
.rrail .rhead{display:flex;align-items:baseline;justify-content:space-between}
.rrail .rhead .t{font-size:1.8vh;color:var(--c-text-dim);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.rrail .count{font-size:7vh;font-weight:800;line-height:.95;margin:.4vh 0 1.8vh;text-shadow:0 2px 3px rgba(0,0,0,.5),0 4px 26px rgba(0,0,0,calc(.4*var(--glow)))}
.rrail .count.zero{color:var(--c-good)}
.reclist{display:flex;flex-direction:column;gap:1.4vh;overflow:hidden;flex:1}
.rec{border-radius:10px;border:1px solid var(--c-line);border-left:3px solid var(--c-warn);padding:1.4vh 1.6vh;background:var(--c-scrim);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))}
.rec.scale{border-left-color:var(--c-good)}
.rec.pause{border-left-color:var(--c-bad)}
.rec .rc-top{display:flex;align-items:center;gap:.9vh;margin-bottom:.9vh}
.rec .rc-acct{font-size:1.7vh;font-weight:700}
.rec .rc-conf{margin-left:auto;font-size:1.5vh;color:var(--c-text-dim)}
.rec .rc-txt{font-size:1.7vh;line-height:1.32;color:var(--c-text-dim);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rec .rc-age{font-size:1.45vh;color:var(--c-text-faint);margin-top:.8vh}
.allclear{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:var(--c-text-dim);gap:1.4vh}
.allclear .ic{font-size:7vh;color:var(--c-good);line-height:1}
.allclear .t{font-size:2.2vh;font-weight:600}

.screen-recs{grid-template-columns:1fr 1fr;height:100vh;width:100vw;padding:3vh;gap:2.4vh;align-content:start}
.screen-recs .sr-head{grid-column:1/-1;display:flex;align-items:baseline;gap:1.6vh}
.screen-recs .sr-head .t{font-size:2.6vh;font-weight:700;letter-spacing:.04em}
.screen-recs .sr-head .c{font-size:2.6vh;font-weight:800;color:var(--c-warn)}
.screen-recs .rec .rc-txt{-webkit-line-clamp:4}

/* ===================================================================== */
/* WIDGET LAYOUT  (853x720 near-square cell)                            */
/* ===================================================================== */
.stage[data-layout="widget"] .board{display:none}
.stage[data-layout="widget"] .wrap{display:flex}
.stage[data-layout="widget"][data-screen="recs"] .wrap{display:none}
.stage[data-layout="widget"][data-screen="recs"] .wrecs{display:flex}
.wrap{display:none;flex-direction:column;height:100vh;width:100vw;padding:3vh 3.2vh}
.wrecs{display:none;flex-direction:column;height:100vh;width:100vw;padding:3vh 3.2vh}

.w-top{display:flex;align-items:center;gap:1.2vh;padding-right:23vh}
.w-top .mark{width:4vh;height:4vh;border-radius:9px;background:var(--c-accent);display:flex;align-items:center;justify-content:center;color:#0a0a14;font-weight:800;font-size:2.2vh;box-shadow:0 0 2vh color-mix(in srgb,var(--c-accent) 60%,transparent);text-shadow:none}
.w-top .nm{font-size:2vh;font-weight:700;letter-spacing:.02em}
.w-top .hb{margin-left:auto;display:flex;align-items:center;gap:.8vh;font-size:1.6vh;color:var(--c-text-dim)}

.w-org{margin-top:2.4vh;display:flex;align-items:flex-end;justify-content:space-between}
.w-org .l .k{font-size:1.7vh;color:var(--c-text-dim);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.w-org .l .v{font-size:8.5vh;font-weight:800;line-height:.9;margin-top:.5vh;text-shadow:0 2px 3px rgba(0,0,0,.55),0 4px 28px rgba(0,0,0,calc(.4*var(--glow)))}
.w-org .l .v .cur{font-size:4vh;color:var(--c-text-dim);vertical-align:.6vh;margin-right:.3vh}
.w-org .r{display:flex;gap:1.8vh;text-align:right}
.w-org .r .it .v{font-size:3.4vh;font-weight:700;line-height:1}
.w-org .r .it .v.recs{color:var(--c-warn)}
.w-org .r .it .k{font-size:1.4vh;color:var(--c-text-dim);text-transform:uppercase;letter-spacing:.06em;margin-top:.4vh}

.w-list{margin-top:2.6vh;display:flex;flex-direction:column;gap:1.3vh;flex:1;min-height:0;justify-content:space-between}
.w-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1.4vh;border-radius:11px;padding:1.5vh 1.7vh;background:var(--c-scrim);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--c-line)}
.w-row.idle{opacity:.5}
.w-row .nm{font-size:2vh;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-row .sub{font-size:1.45vh;color:var(--c-text-dim);margin-top:.3vh}
.w-row .spark{width:11vh;height:4.4vh}
.w-row .vals{text-align:right;min-width:13vh}
.w-row .vals .sp{font-size:2.4vh;font-weight:800;line-height:1}
.w-row .vals .mt{font-size:1.6vh;font-weight:600;margin-top:.3vh}

.w-foot{margin-top:1.8vh;display:flex;align-items:center;justify-content:center;gap:1vh;font-size:1.6vh;color:var(--c-text-faint)}
.w-foot .taphint{display:flex;align-items:center;gap:.8vh;padding:.9vh 1.6vh;border:1px solid var(--c-line);border-radius:20px}

.wrecs .wr-head{display:flex;align-items:baseline;gap:1.2vh;margin-bottom:1.8vh}
.wrecs .wr-head .t{font-size:2.2vh;font-weight:700}
.wrecs .wr-head .c{font-size:2.2vh;font-weight:800;color:var(--c-warn)}
.wrecs .reclist{gap:1.2vh}

/* sparkline svg */
.spark svg{display:block;width:100%;height:100%;overflow:visible}
.spark path.area{fill:currentColor;opacity:.12}
.spark path.line{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 .6vh currentColor)}
.spark .nodata{fill:var(--c-text-faint);font-size:9px}