/* Next Muni v2: calculator design.
   b = Adler 81 S, green VFD (dark mode). c = solar LCD with membrane keys (light mode).
   index.html sets <html data-theme="b|c"> from prefers-color-scheme. Values come from the design handoff. */

@font-face{font-family:'DSEG7';src:url('fonts/DSEG7Classic-Bold.woff2') format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'DSEG14';src:url('fonts/DSEG14Classic-Bold.woff2') format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'DSEG14';src:url('fonts/DSEG14Classic-Regular.woff2') format('woff2');font-weight:400;font-display:block}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{overflow:hidden;font-family:Jost,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-user-select:none;user-select:none}
[data-theme=b] .only-c,[data-theme=c] .only-b{display:none !important}

html[data-theme=b],[data-theme=b] body{background:#2f3a48;color:#e7ecf1}
html[data-theme=c]{background:#dcdad4}
[data-theme=c] body{color:#2b2b28;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 3px),linear-gradient(180deg,#e8e7e2,#d1cfc8)}

.app{position:relative;max-width:480px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;
  padding-top:calc(env(safe-area-inset-top) + 8px)}

/* ---------- shared segment text ---------- */
.seg14{font-family:DSEG14,monospace;word-spacing:.45em}

/* ---------- b: aluminium rails ---------- */
.alrail{position:absolute;top:0;bottom:0;width:14px;pointer-events:none}
.alrail.l{left:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 7px),linear-gradient(90deg,#868a8f,#eceeef 50%,#b2b6ba)}
.alrail.r{right:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 7px),linear-gradient(90deg,#b2b6ba,#eceeef 50%,#868a8f)}

/* ---------- b: raised keys ---------- */
.keys-b{flex:none;margin:6px 28px 0;display:grid;gap:12px}
.key{height:44px;border-radius:5px;display:flex;align-items:center;justify-content:center;padding:0 4px;
  font:800 12px/1 Archivo,sans-serif;letter-spacing:.06em;white-space:nowrap;overflow:hidden;min-width:0}
.keys-b.many .key{font-size:10px;letter-spacing:.03em}
.key.orange{color:#1d1d1b;background:linear-gradient(#fbab3a,#f08e16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.16),0 3px 0 rgba(0,0,0,.6),0 5px 8px rgba(0,0,0,.35)}
.key.orange.on,.key.orange:active{transform:translateY(2px);box-shadow:inset 0 2px 4px rgba(0,0,0,.35),inset 0 -1px 0 rgba(0,0,0,.1),0 1px 0 rgba(0,0,0,.6)}
.key.dark{color:#e8edf2;background:linear-gradient(#2a3441,#1d2530);font-size:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,0,0,.25),0 3px 0 #10151b,0 5px 8px rgba(0,0,0,.4)}
.key.dark:active{transform:translateY(2px);box-shadow:inset 0 2px 3px rgba(0,0,0,.4),0 1px 0 #10151b}
.key.blue{color:#1f2833;background:linear-gradient(#a6dcea,#84c6d8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,0,0,.14),0 3px 0 #10151b,0 5px 8px rgba(0,0,0,.4)}
.key.blue:active{transform:translateY(2px);box-shadow:inset 0 2px 3px rgba(0,0,0,.3),0 1px 0 #10151b}

.bottom-b{flex:none;display:flex;align-items:center;gap:12px;margin:16px 28px max(16px,calc(env(safe-area-inset-bottom) + 6px))}
.plate{display:flex;align-items:baseline;gap:8px;padding:6px 10px;margin-right:auto;white-space:nowrap;
  background:#efebe0;border-radius:2px;box-shadow:inset 0 0 0 1px #c9c3b2;color:#1f2a37}
.plate b{font:900 12px/1 Archivo,sans-serif;font-stretch:115%;letter-spacing:.02em}
.plate span{font:500 11px/1 Archivo,sans-serif}
.key.mplus{width:62px;height:50px;font-size:16px}
.key.eq-b{width:92px;height:50px;font-size:28px}

/* ---------- c: brand row, solar cell, annunciators ---------- */
.brand-c{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 24px 0}
.brand-c .bt{display:flex;flex-direction:column;gap:5px;min-width:0}
.brand-name{font:600 17px/1 Jost,sans-serif;letter-spacing:.22em;color:#3b3a36}
.brand-sub{font:500 9px/1 Archivo,sans-serif;letter-spacing:.2em;color:#77756d;white-space:nowrap}
.solar{flex:0 1 128px;min-width:84px;height:28px;border-radius:2px;
  background:repeating-linear-gradient(90deg,transparent 0 31px,#7a6670 31px 32px),linear-gradient(#3d2c35,#221920);box-shadow:inset 0 1px 3px #000,0 1px 0 #fff}

.ann{flex:none;display:flex}
.ann span{flex:0 1 58px;min-width:0;text-align:center;white-space:nowrap;overflow:hidden}
.ann .sp{flex:1 1 0}
.ann .lv{flex:0 0 44px}
.ann-labels{margin:14px 0 0;padding:0 39px;font:700 9px/1 Archivo,sans-serif;letter-spacing:.12em;color:#4a4943}
.ann-marks{font:400 9px/1 Archivo,sans-serif;padding-bottom:4px}
.ann-marks span{color:rgba(28,34,27,.08)}
.ann-marks span.lit{color:#1c221b}

.note{flex:none;margin:10px 30px 0;font:400 12px/1.35 Jost,sans-serif;color:#5d5b54}

/* ---------- c: membrane keypad ---------- */
.pad{flex:none;margin:12px 14px max(14px,env(safe-area-inset-bottom));padding:8px 8px 7px;border-radius:10px;display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(160deg,#3f4246,#2a2c2f);box-shadow:0 1px 0 rgba(255,255,255,.9),inset 0 1px 2px rgba(0,0,0,.6)}
.pad-grid{display:grid;border:1px solid rgba(214,212,200,.42);border-radius:4px;overflow:hidden;background:linear-gradient(120deg,rgba(255,255,255,.05),transparent 45%)}
.mk{display:block;width:100%;min-width:0;height:50px;padding:5px;border-right:1px solid rgba(214,212,200,.42)}
.mk:last-child{border-right:0}
.mp{height:100%;border-radius:3px;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;
  font:700 11px/1 Archivo,sans-serif;letter-spacing:.14em;color:#e9e7e1;
  background:linear-gradient(rgba(255,255,255,.09),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.35)}
.pad-grid.many .mp{font-size:10px;letter-spacing:.06em}
.mk.on .mp,.mk:active .mp{background:rgba(0,0,0,.32);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.mk.on .mp{color:#f2a06a}
.mk.eq .mp{font:800 24px/1 Archivo,sans-serif;color:#1d1d1b;background:linear-gradient(#ef7a3c,#e0622a);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.25)}
.mk.eq:active .mp{background:#b94f1d;box-shadow:inset 0 1px 3px rgba(0,0,0,.45)}
.pad-print{display:flex;justify-content:space-between;align-items:center;padding:0 3px;font:700 7px/1 Archivo,sans-serif;letter-spacing:.22em;color:#a9a79f}

/* ---------- the display ---------- */
.display{flex:1;min-height:0;display:flex}
.glass{flex:1;min-width:0;overflow:hidden;border-radius:3px;display:flex;flex-direction:column}
[data-theme=b] .display{margin:16px 26px 0;padding:9px;border-radius:6px;background:#141a21;box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.07)}
[data-theme=b] .glass{padding:10px 12px;background:linear-gradient(175deg,rgba(255,255,255,.05),transparent 30%),#040b09;box-shadow:inset 0 0 0 1px #000}
[data-theme=c] .display{margin:6px 18px 0;padding:9px;border-radius:8px;background:#2f302d;box-shadow:0 1px 0 #fff,inset 0 1px 3px #000}
[data-theme=c] .glass{padding:4px 12px 10px;background:linear-gradient(170deg,#c6cdb4,#b0b89e);box-shadow:inset 0 2px 6px rgba(0,0,0,.28);color:#1c221b}

.dhead{flex:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:9px;
  font:700 9px/1 DSEG14,monospace;word-spacing:.45em;color:#4dfab0;text-shadow:0 0 6px rgba(77,250,176,.6)}
.dhead span{white-space:nowrap;overflow:hidden}
.dhead #fresh{flex:none}

.list{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none}
.list::-webkit-scrollbar{display:none}

/* ---------- rows ---------- */
.row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0}
.badge{width:34px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:5px;font:700 14px/1 DSEG14,monospace}
.badge.rail{border-radius:50%}
.badge.sm{font-size:10px}
.mid{display:flex;flex-direction:column;gap:6px;min-width:0}
.title{font:700 12px/1 DSEG14,monospace;word-spacing:.45em;white-space:nowrap;overflow:hidden}
.ln{display:flex;align-items:center;gap:6px;min-width:0}
.stop,.meta{font:700 9px/1 DSEG14,monospace;word-spacing:.4em;letter-spacing:.03em;white-space:nowrap;overflow:hidden}
.meta{font-weight:400}
.flag{flex:none;font:800 8px/1 Archivo,sans-serif;letter-spacing:.1em;padding-left:1px}
.mins{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.main{display:flex;align-items:baseline;gap:4px}
.m7{font:700 24px/1 DSEG7,monospace}
.now{font:700 14px/1 DSEG14,monospace}
.unit{font:400 7px/1 DSEG14,monospace}
.then{display:flex;gap:7px;min-height:10px;font:700 10px/1 DSEG7,monospace}

[data-theme=b] .row{border-top:1px dashed #12382a}
[data-theme=b] .badge{border:1.5px solid #4dfab0;color:#4dfab0;text-shadow:0 0 6px rgba(77,250,176,.7);box-shadow:0 0 5px rgba(77,250,176,.35)}
[data-theme=b] .mid{color:#4dfab0;text-shadow:0 0 6px rgba(77,250,176,.55)}
[data-theme=b] .meta{color:#3fd79a}
[data-theme=b] .main{color:#4dfab0;text-shadow:0 0 7px rgba(77,250,176,.7)}
[data-theme=b] .row.miss .main{color:#1d5a43;text-shadow:none}
[data-theme=b] .then{color:#2fa877}

[data-theme=c] .row{grid-template-columns:38px minmax(0,1fr) auto;border-top:2px dotted rgba(28,34,27,.3);text-shadow:1.5px 1.5px 0 rgba(20,25,15,.14)}
[data-theme=c] .badge{border:2px solid #1c221b;box-shadow:1.5px 1.5px 0 rgba(20,25,15,.14)}
[data-theme=c] .row.miss .mins{opacity:.28}

/* Loading: a blinking segment test, like a calculator powering on. */
.row.test{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- messages and list footer ---------- */
.msg{padding:28px 4px;text-align:center}
.mh{font:700 16px/1.2 DSEG14,monospace;word-spacing:.45em;margin-bottom:14px}
.mb{font:400 10px/1.9 DSEG14,monospace;word-spacing:.45em}
[data-theme=b] .msg{color:#4dfab0;text-shadow:0 0 6px rgba(77,250,176,.6)}
[data-theme=b] .mb{color:#3fd79a}
[data-theme=c] .msg{text-shadow:1.5px 1.5px 0 rgba(20,25,15,.14)}
[data-theme=b] .msg{border-top:1px dashed #12382a}
[data-theme=c] .msg{border-top:2px dotted rgba(28,34,27,.3)}

.lfoot{padding:12px 0 4px;font:400 8px/1.9 DSEG14,monospace;word-spacing:.45em;letter-spacing:.03em}
[data-theme=b] .lfoot{color:#2fa877;border-top:1px dashed #12382a}
[data-theme=c] .lfoot{border-top:2px dotted rgba(28,34,27,.3);opacity:.6}

/* ---------- sheets (add / manage a place) ---------- */
.sheet-wrap .scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;z-index:10}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;border-radius:14px 14px 0 0;z-index:11;
  padding:18px 18px calc(env(safe-area-inset-bottom) + 16px);transform:translateY(105%);transition:transform .2s;max-height:85vh;overflow-y:auto}
.sheet-wrap.open .scrim{display:block}
.sheet-wrap.open .sheet{transform:none}
.sheet h3{margin:0 0 14px;font:800 13px/1.2 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.field{display:block;width:100%;font:500 16px/1.2 Archivo,sans-serif;padding:12px;border-radius:4px;margin-bottom:8px;outline:none}
.btn{display:block;width:100%;min-height:46px;border-radius:5px;padding:12px;margin-top:10px;text-align:left;font:700 14px/1.25 Archivo,sans-serif}
.btn.primary{text-align:center;letter-spacing:.08em;text-transform:uppercase;font-weight:800}
.btn.danger{text-align:center}
.btn small{display:block;font:400 12px/1.3 Jost,sans-serif;margin-top:3px;opacity:.75}
.hint{font:400 13px/1.4 Jost,sans-serif;margin:8px 0}
.cancel{display:block;width:100%;margin-top:10px;padding:10px;font:600 14px/1 Archivo,sans-serif;letter-spacing:.06em;opacity:.7}

[data-theme=b] .sheet{background:#2f3a48;color:#e8edf2;box-shadow:0 -1px 0 rgba(255,255,255,.08)}
[data-theme=b] .field{background:#040b09;color:#4dfab0;border:1px solid #12382a;box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
[data-theme=b] .field::placeholder{color:#2b6b50}
[data-theme=b] .btn{color:#e8edf2;background:linear-gradient(#2a3441,#1d2530);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,0,0,.25),0 3px 0 #10151b}
[data-theme=b] .btn:active{transform:translateY(2px);box-shadow:inset 0 2px 3px rgba(0,0,0,.4),0 1px 0 #10151b}
[data-theme=b] .btn.primary{color:#1d1d1b;background:linear-gradient(#fbab3a,#f08e16);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.16),0 3px 0 rgba(0,0,0,.6)}
[data-theme=b] .btn.danger{color:#ff9b84}
[data-theme=b] .hint{color:#a9b4c0}
[data-theme=b] .cancel{color:#e8edf2}

[data-theme=c] .sheet{color:#2b2b28;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 3px),linear-gradient(180deg,#e8e7e2,#d6d4cd);box-shadow:0 -1px 0 #fff}
[data-theme=c] .sheet h3{color:#3b3a36}
[data-theme=c] .field{background:linear-gradient(170deg,#c6cdb4,#b0b89e);color:#1c221b;border:3px solid #2f302d;box-shadow:inset 0 2px 4px rgba(0,0,0,.25)}
[data-theme=c] .field::placeholder{color:rgba(28,34,27,.45)}
[data-theme=c] .btn{color:#e9e7e1;background:linear-gradient(160deg,#45484c,#2e3033);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.35)}
[data-theme=c] .btn:active{background:#1f2123}
[data-theme=c] .btn.primary{color:#1d1d1b;background:linear-gradient(#ef7a3c,#e0622a)}
[data-theme=c] .btn.primary:active{background:#b94f1d}
[data-theme=c] .btn.danger{color:#f2a06a}
[data-theme=c] .hint{color:#5d5b54}
[data-theme=c] .cancel{color:#3b3a36}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 90px);transform:translateX(-50%);padding:10px 16px;border-radius:5px;max-width:90%;text-align:center;
  font:700 13px/1.3 Archivo,sans-serif;letter-spacing:.04em;opacity:0;transition:opacity .2s;z-index:20;pointer-events:none}
.toast.show{opacity:1}
[data-theme=b] .toast{background:#040b09;color:#4dfab0;box-shadow:0 0 0 1px #12382a,0 6px 16px rgba(0,0,0,.5)}
[data-theme=c] .toast{background:#2f302d;color:#e9e7e1}

/* ---------- DAY / NIGHT slide switch (b: above the keys, c: printed line under the keypad) ---------- */
.top-b{flex:none;display:flex;justify-content:flex-end;margin:0 28px 8px}
.tswitch{display:flex;align-items:center;gap:6px;padding:10px 4px;margin:-10px -4px;font:800 7px/1 Archivo,sans-serif;letter-spacing:.22em}
.track{position:relative;width:30px;height:12px;border-radius:2px;background:#10151b;box-shadow:inset 0 1px 2px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.12)}
.nub{position:absolute;top:1px;left:1px;width:14px;height:10px;border-radius:1px;transition:left .12s;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),linear-gradient(#eceeef,#9a9ea3);box-shadow:0 1px 1px rgba(0,0,0,.6)}
[data-theme=b] .nub{left:15px}
[data-theme=b] .tswitch{color:#8f9bab}
[data-theme=b] .tswitch .tl:last-child{color:#e8edf2}
[data-theme=c] .tswitch{color:#a9a79f}
[data-theme=c] .tswitch .tl:first-child{color:#f2a06a}