/* R47 Web — portrait skin @ 526×980.
   Styling and sizes mirror src/c47-gtk/gtkGui.c + res/c47_pre.css so the
   web UI looks the same as ./r47. */

@font-face {
  font-family: "C47StandardFont";
  src: url("static/fonts/C47__StandardFont.woff2") format("woff2"),
       url("static/fonts/C47__StandardFont.ttf")   format("truetype");
  font-weight: normal;
  font-style:  normal;
  font-display: block;
}
@font-face {
  font-family: "C47NumericFont";
  src: url("static/fonts/C47__NumericFont.woff2") format("woff2"),
       url("static/fonts/C47__NumericFont.ttf")   format("truetype");
  font-weight: normal;
  font-style:  normal;
  font-display: block;
}

:root {
  /* ---- Default = HP Classic ------------------------------------------ */
  --bg:                #2B2A29;
  --skin-w:            493px;
  --skin-h:            980px;
  --key-border:        #25292F;
  --key-bg:            #212121;
  --key-hover:         #744a2e;
  --key-label:         #ffffff;
  --letter-grey:       #a5a5a5;
  --f-gold:            #E5AE5A;
  --f-hover-gold:      #ffff00;
  --g-blue:            #7EB6BA;
  --g-hover-blue:      #00ffff;
  --skin-filter:       none;
  --lcd-bg:            #e0e0e0;
}

/* ---- Dark themes --------------------------------------------------- */
html[data-theme="nord-dark"] {
  --bg:#2E3440; --key-bg:#3B4252; --key-border:#434C5E; --key-hover:#5E81AC;
  --key-label:#ECEFF4; --letter-grey:#D8DEE9;
  --f-gold:#EBCB8B; --f-hover-gold:#FBE7A6;
  --g-blue:#88C0D0; --g-hover-blue:#B4DCE5;
  --skin-filter: hue-rotate(-40deg) saturate(0.75);
  --lcd-bg:#D8DEE9;
}
html[data-theme="dracula"] {
  --bg:#282A36; --key-bg:#44475A; --key-border:#6272A4; --key-hover:#BD93F9;
  --key-label:#F8F8F2; --letter-grey:#BFBFBF;
  --f-gold:#FFB86C; --f-hover-gold:#FFD39E;
  --g-blue:#8BE9FD; --g-hover-blue:#B8F5FF;
  --skin-filter: hue-rotate(200deg) saturate(0.65);
  --lcd-bg:#F8F8F2;
}
html[data-theme="monokai"] {
  --bg:#272822; --key-bg:#3E3D32; --key-border:#75715E; --key-hover:#F92672;
  --key-label:#F8F8F2; --letter-grey:#CCCCC6;
  --f-gold:#FD971F; --f-hover-gold:#FFB74D;
  --g-blue:#66D9EF; --g-hover-blue:#A5E8F5;
  --skin-filter: hue-rotate(60deg) saturate(0.7);
  --lcd-bg:#F8F8F0;
}
html[data-theme="solarized-dark"] {
  --bg:#002B36; --key-bg:#073642; --key-border:#586E75; --key-hover:#268BD2;
  --key-label:#EEE8D5; --letter-grey:#93A1A1;
  --f-gold:#B58900; --f-hover-gold:#DDB53A;
  --g-blue:#2AA198; --g-hover-blue:#5FC5BA;
  --skin-filter: hue-rotate(-140deg) saturate(0.55);
  --lcd-bg:#EEE8D5;
}
html[data-theme="tokyo-night"] {
  --bg:#1A1B26; --key-bg:#24283B; --key-border:#414868; --key-hover:#7AA2F7;
  --key-label:#C0CAF5; --letter-grey:#9AA5CE;
  --f-gold:#E0AF68; --f-hover-gold:#F2CB94;
  --g-blue:#7DCFFF; --g-hover-blue:#B0DEFC;
  --skin-filter: hue-rotate(-90deg) saturate(0.85);
  --lcd-bg:#C0CAF5;
}

/* ---- Light themes -------------------------------------------------- */
html[data-theme="hp-silver"] {
  --bg:#C0C0C0; --key-bg:#E8E8E8; --key-border:#888888; --key-hover:#A8A8A8;
  --key-label:#1A1A1A; --letter-grey:#555555;
  --f-gold:#B57600; --f-hover-gold:#E0A030;
  --g-blue:#0F66AA; --g-hover-blue:#3099DD;
  --skin-filter: invert(1) hue-rotate(180deg);
  --lcd-bg:#C9D5A9;
}
html[data-theme="solarized-light"] {
  --bg:#FDF6E3; --key-bg:#EEE8D5; --key-border:#93A1A1; --key-hover:#268BD2;
  --key-label:#002B36; --letter-grey:#657B83;
  --f-gold:#B58900; --f-hover-gold:#E8B840;
  --g-blue:#2AA198; --g-hover-blue:#5FC5BA;
  --skin-filter: invert(1) hue-rotate(180deg) saturate(0.7);
  --lcd-bg:#FDF6E3;
}
html[data-theme="nord-light"] {
  --bg:#ECEFF4; --key-bg:#E5E9F0; --key-border:#D8DEE9; --key-hover:#81A1C1;
  --key-label:#2E3440; --letter-grey:#4C566A;
  --f-gold:#D08770; --f-hover-gold:#E8A89B;
  --g-blue:#5E81AC; --g-hover-blue:#88B0D8;
  --skin-filter: invert(1) hue-rotate(210deg) saturate(0.5);
  --lcd-bg:#ECEFF4;
}
html[data-theme="gruvbox-light"] {
  --bg:#FBF1C7; --key-bg:#EBDBB2; --key-border:#BDAE93; --key-hover:#D79921;
  --key-label:#3C3836; --letter-grey:#7C6F64;
  --f-gold:#B57614; --f-hover-gold:#D99A3F;
  --g-blue:#076678; --g-hover-blue:#3688A8;
  --skin-filter: invert(1) hue-rotate(200deg) saturate(0.6);
  --lcd-bg:#FBF1C7;
}
html[data-theme="github-light"] {
  --bg:#FFFFFF; --key-bg:#F6F8FA; --key-border:#D0D7DE; --key-hover:#DDF4FF;
  --key-label:#24292F; --letter-grey:#57606A;
  --f-gold:#BF8700; --f-hover-gold:#E8B448;
  --g-blue:#0969DA; --g-hover-blue:#54AEFF;
  --skin-filter: invert(1) hue-rotate(180deg) saturate(0.35);
  --lcd-bg:#FFFFFF;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  font-family: "C47StandardFont", system-ui, sans-serif;
  color: #fff;
  overscroll-behavior: none;
  touch-action: manipulation;
  overflow: hidden;
  position: fixed;     /* Locks the page in place so Safari PWA can't */
  top: 0; left: 0;      /* scroll the calculator around (was "floating" */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* #device holds the calculator at its native 526x980 dimensions. We
   position it absolutely so fitScale() can center it via left/top
   rather than by margin (which interacts awkwardly with transform
   and safe-area insets on iPhone PWA standalone mode). */
#device {
  position: absolute;
  width:  var(--skin-w);
  height: var(--skin-h);
  left: 50%;
  top: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(var(--device-scale, 1));
}
/* When the calculator is scaled to fill width and would overflow height,
   pin it to the top (below the safe-area inset) so the LCD stays visible
   and the R47 logo at the bottom gets clipped instead. */
html[data-fill-width="1"] #device {
  top: env(safe-area-inset-top, 0);
  transform-origin: top center;
  transform: translate(-50%, 0) scale(var(--device-scale, 1));
}

#skin {
  position: absolute;
  top: 0; left: 0;
  width:  var(--skin-w);
  height: var(--skin-h);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: var(--skin-filter);
}

/* LCD canvas.
   The engine renders the display at its native 400x240. The skin's LCD
   cutout is actually 480x272 at (23, 40) on the 526x980 skin, so we
   CSS-scale the canvas to fill that full cutout (no black border around
   it). Aspect shifts from 5:3 (1.667) to 1.765 - about a 6% horizontal
   stretch that's imperceptible for readable text. image-rendering:
   pixelated keeps each engine pixel as a sharp block through the scale. */
#lcd {
  position: absolute;
  top:   40px;
  left:  6px;
  width: 480px;
  height: 272px;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
  background: var(--lcd-bg);
}

#keys { position: absolute; inset: 0; }

/* ---- Primary keys ----
   Each key is rendered as two layers:
     1. The <button> element itself — the HIT zone. It's transparent and
        borderless, sized LARGER than the visual button so touches are
        generous (PAD px of extra tap area all around).
     2. A ::before pseudo-element painted INWARD by PAD px. That's the
        VISUAL button — it keeps the GTK-matching size, background,
        border, and label position.
   The label <span> sits above the pseudo-element via z-index so the
   text appears on top of the painted button body. */
.key {
  --pad: 12px;            /* touch padding around the visual */
  --btn-y-offset: 8px;    /* visual button body shifts DOWN so its bottom
                             aligns with the bottom of the letter label
                             next to it (letter sits at y+18 with 18px
                             font, bottom y+36; button is 28px tall so
                             8px shift puts its bottom at y+36 too). */
  position: absolute;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--key-label);
  font-family: "C47StandardFont", "C47NumericFont", system-ui, sans-serif;
  font-size: 22px;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: filter 60ms ease-out;
  /* width / height / left / top set inline per button: they are the
     HIT dimensions (visual + 2 * pad in each direction). */
}

/* The visual button body, painted inward by the --pad amount and shifted
   DOWN by --btn-y-offset so its bottom aligns with the bottom of the
   letter label next to it. */
.key::before {
  content: "";
  position: absolute;
  top:    calc(var(--pad) + var(--btn-y-offset));
  right:  var(--pad);
  bottom: calc(var(--pad) - var(--btn-y-offset));
  left:   var(--pad);
  background: var(--key-bg);
  border: 2px solid var(--key-border);
  border-radius: 3px;
  transition: background 60ms ease-out;
}

/* Primary label (the center text on the button). Shift DOWN by the same
   amount as the visual body so it stays vertically centered on the
   dark rectangle. */
.key-label {
  position: relative;       /* above ::before */
  z-index: 1;
  font: inherit;
  pointer-events: none;
  line-height: 1;
  transform: translateY(var(--btn-y-offset));
}
.key:active::before,
.key.pressed::before {
  background: var(--key-hover);
}

/* Letter labels and shift rows have pointer-events: none so they don't
   eat touches that should hit a nearby key. */
.key-letter, .key-shift-row { pointer-events: none; }

/* Numeric digit keys use a larger font (matches #calcNumericKey, 33px). */
.key.numeric {
  font-size: 33px;
}

/* The shift keys themselves render in gold/cyan (matches #calcKeyF/G). */
.key.shift-f { color: black; font-size: 27px; }
.key.shift-f::before { background: var(--f-gold); }
.key.shift-f:active::before,
.key.shift-f.pressed::before { background: var(--f-hover-gold); }

.key.shift-g { color: black; font-size: 27px; }
.key.shift-g::before { background: var(--g-blue); }
.key.shift-g:active::before,
.key.shift-g.pressed::before { background: var(--g-hover-blue); }

/* F-row keys (F1..F6) are drawn into the skin; the pseudo-element is
   transparent so only the press tint shows. */
.key.key-fn::before {
  background: transparent;
  border: 0;
}
.key.key-fn:active::before,
.key.key-fn.pressed::before {
  background: rgba(255,255,255,0.18);
}

/* Letter labels (A..Z) sit to the right of each key, vertically
   offset 18px below the button top (matches gtkGui.c:5716). */
.key-letter {
  position: absolute;
  font: normal 18px/1 "C47StandardFont", system-ui, sans-serif;
  color: var(--letter-grey);
  pointer-events: none;
  user-select: none;
}

/* F- and G-shift labels sit just above the button. In GTK the widgets
   sit 25px above button-top (Y_OFFSET_Aim) but GTK's labels have extra
   visual gap from their own font metrics. Here we use the same 25px
   offset and 18px font, baseline-aligned so the label sits flush to
   the button below it. */
.key-shift-row {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font: normal 18px/1 "C47StandardFont", system-ui, sans-serif;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  gap: 4px;
  line-height: 18px;
  height: 18px;
  overflow: visible;
}
.key-shift-row .shift-f { color: var(--f-gold); }
.key-shift-row .shift-g { color: var(--g-blue); }

/* ---------- Toolbar ---------- */
/* Right edge of the LCD cutout is x=502 in the skin; keep the toolbar
   inside that so the Restore button doesn't overflow past the screen. */
#toolbar {
  position: absolute;
  top: 6px;
  right: 28px;
  display: flex;
  gap: 4px;
  z-index: 10;
}
#toolbar button {
  background: rgba(255,255,255,0.08);
  color: var(--f-gold);
  border: 1px solid rgba(229,174,90,0.3);
  border-radius: 4px;
  padding: 4px 10px;
  font: 11px/1 "C47StandardFont", sans-serif;
  cursor: pointer;
}
#toolbar button:hover { background: rgba(229,174,90,0.2); }

/* ---------- Printer tape ---------- */
#printer {
  position: fixed;
  top: 0; right: 0;
  width: min(420px, 90vw);
  height: 100vh;
  background: #1a1a1a;
  border-left: 1px solid #333;
  color: #eee;
  display: flex;
  flex-direction: column;
  z-index: 20;
  box-shadow: -4px 0 20px rgba(0,0,0,0.4);
}
#printer[hidden] { display: none; }
#printer-head {
  padding: 8px 12px;
  border-bottom: 1px solid #333;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
}
#printer-head span { flex: 1; font-weight: 600; }
#printer-head button {
  background: rgba(255,255,255,0.05);
  color: #eee;
  border: 1px solid #444;
  border-radius: 3px;
  padding: 3px 8px;
  font: 11px/1 "C47StandardFont", sans-serif;
  cursor: pointer;
}
#printer-head button:hover { background: rgba(255,255,255,0.12); }
#printer-tape {
  flex: 1;
  margin: 0;
  padding: 10px 14px;
  overflow-y: auto;
  font: 12px/1.4 ui-monospace, "SF Mono", Consolas, monospace;
  white-space: pre-wrap;
  background: #f5f0e8;
  color: #222;
}

/* iPhone safe-area insets are handled in shell.js fitScale() rather
   than via body padding, because padding+position:fixed produces a
   visually offset content area that doesn't center the calculator
   through the transform correctly. */

/* Install-to-home-screen banner. Shown on first visit in a mobile
   browser (not when already running as a PWA via standalone mode).
   Dismissed for the session via localStorage. */
#install-banner {
  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 0; right: 0;
  background: rgba(43, 42, 41, 0.96);
  color: #fff;
  border-bottom: 1px solid var(--f-gold);
  padding: 8px 12px;
  font: 12px/1.3 "C47StandardFont", system-ui, sans-serif;
  z-index: 30;
  backdrop-filter: blur(6px);
}
#install-banner[hidden] { display: none; }
.install-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
}
.install-text { flex: 1; font-weight: 600; }
.install-hint { color: var(--f-gold); font-size: 11px; display: none; }
html.is-ios     #install-banner .install-hint[data-ios]     { display: inline; }
html.is-android #install-banner .install-hint[data-android] { display: inline; }
#install-btn {
  background: var(--f-gold);
  color: #000;
  border: 0;
  border-radius: 4px;
  padding: 6px 10px;
  font: 12px/1 "C47StandardFont", sans-serif;
  cursor: pointer;
}
#install-dismiss {
  background: transparent;
  border: 0;
  color: #aaa;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

/* ---------- Theme picker modal ---------- */
#theme-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
}
#theme-modal[hidden] { display: none; }
.theme-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
}
.theme-panel {
  position: relative;
  background: #2B2A29;
  color: #fff;
  border: 1px solid #555;
  border-radius: 8px;
  width: min(92vw, 520px);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.theme-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #444;
  font: 13px/1 "C47StandardFont", system-ui, sans-serif;
  font-weight: 600;
}
.theme-head span { flex: 1; }
#theme-close {
  background: transparent;
  border: 0;
  color: #ccc;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.theme-grid {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  overflow-y: auto;
}
.theme-tile {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: #1d1d1d;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  color: #eee;
  font: 12px/1.2 "C47StandardFont", system-ui, sans-serif;
  transition: border-color 120ms, transform 80ms;
}
.theme-tile:hover { border-color: var(--f-gold); }
.theme-tile.selected { border-color: var(--f-gold); box-shadow: 0 0 0 1px var(--f-gold); }
.theme-tile:active { transform: scale(0.98); }
.theme-swatch {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}
.theme-swatch > span { display: block; }
.theme-name { font-weight: 600; }
.theme-kind { font-size: 10px; color: #9a9a9a; letter-spacing: 0.5px; text-transform: uppercase; }