/* JandeCalc: layout and theme */

:root{
  --bg:#E9E7E2; --key:#F7F6F3; --key2:#DEDCD6; --ink:#22211E; --muted:#7C7A73; --faint:#B3B0A8;
  --lcd:#CFD8C8; --lcd-ink:#1E2A1F; --lcd-muted:#6B7A69; --lcd-faint:#A3B09F;
  --amber:#B87814; --amber-ink:#FFFFFF; --edge:rgba(0,0,0,.07);
  --ts:1.18;   /* text size scale: Small 1, Medium 1.18, Large 1.35 (set by applyTextSize in theme.js) */
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:var(--safe-bottom);
  /* Bottom safe-area inset only where the page is really edge to edge.
     Firefox for Android reports a non-zero inset inside a normal tab,
     which would double the space above its toolbar. */
  --safe-bottom:0px;
}
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui){
  :root{--safe-bottom:env(safe-area-inset-bottom,0px)}
}
@supports (-webkit-touch-callout: none){       /* iOS Safari: home indicator */
  :root{--safe-bottom:env(safe-area-inset-bottom,0px)}
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1B1A18; --key:#2E2D2A; --key2:#252422; --ink:#ECEAE4; --muted:#8A877F; --faint:#55534E;
    --lcd:#1F2620; --lcd-ink:#D6E4D0; --lcd-muted:#7A8C77; --lcd-faint:#465244;
    --amber:#E0A33A; --amber-ink:#1B1206; --edge:rgba(255,255,255,.04);
  }
}
:root[data-theme="dark"]{
  --bg:#1B1A18; --key:#2E2D2A; --key2:#252422; --ink:#ECEAE4; --muted:#8A877F; --faint:#55534E;
  --lcd:#1F2620; --lcd-ink:#D6E4D0; --lcd-muted:#7A8C77; --lcd-faint:#465244;
  --amber:#E0A33A; --amber-ink:#1B1206; --edge:rgba(255,255,255,.04);
}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:"IBM Plex Sans Condensed","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  display:flex;justify-content:center;align-items:center;overflow:hidden;
  overscroll-behavior:none;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.app{
  width:100%;max-width:440px;height:100%;max-height:880px;
  display:flex;flex-direction:column;gap:12px;
  padding:12px max(12px, env(safe-area-inset-left,0px)) 14px max(12px, env(safe-area-inset-right,0px));
}
@media (min-width:600px) and (min-height:700px){ .app{height:calc(100% - 48px)} }

.display{
  flex:0 0 auto;background:var(--lcd);color:var(--lcd-ink);border-radius:20px;
  padding:12px 18px 14px;display:flex;flex-direction:column;gap:1px;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
}
.ann{
  display:flex;gap:12px;align-items:center;height:calc(16px * var(--ts));margin-bottom:6px;
  font:500 calc(12px * var(--ts))/1 "IBM Plex Sans Condensed","Arial Narrow",sans-serif;color:var(--lcd-muted);
}
.ann .grow{flex:1}
.ann .hot{color:var(--amber)}
.line{display:flex;align-items:baseline;gap:10px;min-height:calc(22px * var(--ts))}
.line .lbl{width:calc(10px * var(--ts));flex:none;font-size:calc(12px * var(--ts));color:var(--lcd-faint)}
.line .val{flex:1;min-width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(16px * var(--ts));color:var(--lcd-muted)}
.line.msg .val{color:var(--lcd-ink);text-align:left;white-space:normal;overflow-wrap:anywhere;line-height:1.3}
.line.msg .lbl{visibility:hidden}
/* X register: one fixed size, sized so the longest normal number fits (see sizeX()
   in ui.js), and a fixed line height so the layout never moves. */
.line.x{margin-top:2px;height:calc(var(--x-size,34px) * 1.2);align-items:center;overflow:hidden}
.line.x .val{font-size:var(--x-size,34px);color:var(--lcd-ink);line-height:1.2;text-overflow:clip}
.val .e{font-size:.62em;opacity:.65;margin:0 .06em}
.cur{display:inline-block;width:.5em;height:.08em;background:var(--amber);margin-left:.08em;vertical-align:baseline;animation:blink 1.06s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cur{animation:none}.key .s,.key .m{transition:none}}

.pad{
  flex:1;min-height:0;display:grid;gap:8px;
  grid-template-columns:repeat(30,1fr);
  grid-template-rows:repeat(3,.84fr) repeat(4,1fr);
}
.key{
  position:relative;border:0;padding:0;margin:0;min-height:0;min-width:0;overflow:hidden;
  border-radius:12px;background:var(--key2);color:var(--ink);cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--edge);
  font:500 calc(15px * var(--ts))/1 "IBM Plex Sans Condensed","Arial Narrow",sans-serif;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .12s, transform .06s, box-shadow .15s;
  touch-action:manipulation;
}
.key:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.key.num,.key.enter{background:var(--key)}
.key.num .m{font:400 calc(24px * var(--ts))/1 "IBM Plex Mono",ui-monospace,monospace}
.key.op .m{font:400 calc(24px * var(--ts))/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--amber)}
.key .s{
  position:absolute;left:2px;right:2px;top:5px;text-align:center;white-space:nowrap;
  font-size:calc(10px * var(--ts) * var(--rest-fit,1));font-weight:600;letter-spacing:.02em;color:var(--amber);
  transition:top .16s ease, transform .16s ease, font-size .16s ease, opacity .16s;
}
.key .s.na{color:var(--faint);font-weight:500}
/* symbol labels (Σ−, yˣ, x², 10ˣ, eˣ, π, %): larger, with real superscripts */
.key .s.sym{top:calc(3px * var(--ts));font-size:calc(13px * var(--ts) * var(--rest-fit,1));line-height:1.1;letter-spacing:0}
.key .s sup{font-size:.72em;line-height:0;vertical-align:.5em;margin-left:.04em}
.key.has-sym .m{margin-top:calc(13px * var(--ts))}
.key .m{margin-top:calc(10px * var(--ts));transition:opacity .14s, transform .16s ease;white-space:nowrap}
.key .m.na{color:var(--faint)}
.key.down{transform:scale(.955);filter:brightness(.93)}
.key.shiftkey .m{margin-top:0;font-size:calc(15px * var(--ts) * var(--rest-fit,1));font-weight:600;letter-spacing:.04em;color:var(--amber)}
.shifted .key:not(.shiftkey) .m{opacity:0;transform:translateY(8px)}
.shifted .key .s{top:50%;transform:translateY(-50%);font-size:var(--shift-size,calc(14px * var(--ts)));letter-spacing:0}
.shifted .key .s.sym{font-size:var(--shift-size,calc(19px * var(--ts)))}
.shifted .key.shiftkey{background:var(--amber)}
.shifted .key.shiftkey .m{color:var(--amber-ink)}
.key.menu{background:transparent;box-shadow:inset 0 0 0 1.5px var(--amber)}
.key.menu .s{opacity:0}
.key.menu .m{margin-top:0;font-size:calc(13px * var(--ts) * var(--m-fit,1));font-weight:600;color:var(--ink)}
.key.menu .m.short{font-size:calc(22px * var(--ts) * var(--m-fit,1));font-weight:500}
.key.menu .m.small{font-size:calc(11px * var(--ts) * var(--m-fit,1));letter-spacing:-.01em}
.key.menu.on::after{content:"";position:absolute;bottom:6px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--amber)}
.key.menu.blank{box-shadow:inset 0 0 0 1px var(--edge)}
.shifted .key.menu{background:var(--key2);box-shadow:inset 0 0 0 1px var(--edge)}
.shifted .key.menu .s{opacity:1}
.shifted .key.menu .m.small{font-size:calc(11px * var(--ts) * var(--m-fit,1));letter-spacing:-.01em}
.key.menu.on::after{display:none}
@media (max-height:640px){
  .display{padding:8px 14px 10px}
  .line{min-height:calc(18px * var(--ts))}
  .line .val{font-size:calc(14px * var(--ts))}
  .pad{gap:6px}
  .key .s{top:3px;font-size:calc(9px * var(--ts) * var(--rest-fit,1))}
  .key .m{margin-top:calc(8px * var(--ts))}
  .app:not(.shifted) .key .s.sym{top:calc(2px * var(--ts));font-size:calc(11px * var(--ts) * var(--rest-fit,1))}
  .key.has-sym .m{margin-top:calc(11px * var(--ts))}
}

/* ---------- keypad area & sheets ---------- */
.lower{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
.pad{flex:1}
.has-sheet .pad{visibility:hidden}
.sheet{
  position:absolute;inset:0;display:flex;flex-direction:column;
  background:var(--key2);border-radius:18px;box-shadow:inset 0 0 0 1px var(--edge);overflow:hidden;
}
.sheet[hidden]{display:none}
.sheet-head{display:flex;align-items:center;gap:8px;padding:12px 12px 10px 16px;border-bottom:1px solid var(--edge)}
.sheet-head h2{margin:0;flex:1;font:600 calc(17px * var(--ts))/1.2 "IBM Plex Sans Condensed","Arial Narrow",sans-serif}
.sheet-actions{display:flex;gap:6px}
.sheet-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:10px 12px 16px;-webkit-user-select:text;user-select:text}
.chip{
  border:0;border-radius:999px;padding:8px 14px;cursor:pointer;
  font:600 calc(14px * var(--ts))/1 "IBM Plex Sans Condensed","Arial Narrow",sans-serif;
  background:var(--key);color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge);
}
.chip.done{background:var(--amber);color:var(--amber-ink)}
.chip.quiet{background:transparent;color:var(--muted)}
.chip.danger{color:#C2412D}
.chip:focus-visible,.regrow:focus-visible,.seg button:focus-visible,.slot:focus-visible,.fn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.hint{margin:2px 4px 10px;color:var(--muted);font-size:calc(14px * var(--ts));line-height:1.35}

.reglist{display:flex;flex-direction:column;gap:2px}
.regrow{
  display:flex;align-items:baseline;gap:14px;width:100%;border:0;background:transparent;color:var(--ink);
  padding:9px 8px;border-radius:10px;cursor:pointer;text-align:left;
  font:400 calc(16px * var(--ts))/1.2 "IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
}
.regrow.open{background:var(--key)}
.regrow .rn{color:var(--muted);font-size:calc(13px * var(--ts))}
.regrow .rv{flex:1;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.regrow.zero .rv{color:var(--faint)}
.regacts{display:flex;gap:6px;padding:4px 8px 10px;justify-content:flex-end}

.tape{display:flex;flex-direction:column;gap:2px;font:400 calc(15px * var(--ts))/1.35 "IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.tline{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;padding:3px 4px}
.tin{text-align:right;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top{color:var(--amber);font-family:"IBM Plex Sans Condensed","Arial Narrow",sans-serif;font-weight:600}
.tout{text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.setting{padding:10px 4px 12px;border-bottom:1px solid var(--edge)}
.slabel{font-size:calc(14px * var(--ts));color:var(--muted);margin-bottom:8px}
.seg{display:flex;background:var(--key);border-radius:12px;padding:3px;box-shadow:inset 0 0 0 1px var(--edge)}
.seg button{
  flex:1;border:0;background:transparent;color:var(--ink);padding:9px 6px;border-radius:9px;cursor:pointer;
  font:500 calc(15px * var(--ts))/1 "IBM Plex Sans Condensed","Arial Narrow",sans-serif;
}
.seg button.on{background:var(--amber);color:var(--amber-ink)}
.copyright{margin:18px 4px 0;color:var(--muted);font-size:calc(12px * var(--ts));text-align:center}

.slots{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:12px}
.slot{
  border:0;border-radius:10px;padding:12px 2px;background:var(--key);color:var(--ink);cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--edge);font:600 calc(12px * var(--ts))/1 "IBM Plex Sans Condensed","Arial Narrow",sans-serif;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.slot.empty{color:var(--faint)}
.slot.on{box-shadow:inset 0 0 0 2px var(--amber)}
.search{
  width:100%;border:0;border-radius:12px;padding:11px 14px;margin-bottom:10px;
  background:var(--key);color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge);
  font:400 calc(16px * var(--ts))/1.2 "IBM Plex Sans Condensed","Arial Narrow",sans-serif;
}
.search:focus{outline:2px solid var(--amber);outline-offset:0}
.fnlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
.fn{
  border:0;border-radius:10px;padding:11px 4px;background:transparent;color:var(--ink);cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--edge);font:500 calc(14px * var(--ts))/1 "IBM Plex Sans Condensed","Arial Narrow",sans-serif;
}

/* ---------- OFF ---------- */
.off{position:fixed;inset:0;background:var(--bg);z-index:10;cursor:pointer}
.off[hidden]{display:none}