/* =========================================================================
   Calculator — layout locked in from variant A; three looks share it:
   A "Tag" (default) · B "Instrument" · C "Matrix"  (T cycles, D light/dark)
   ========================================================================= */

:root {
  /* paper + ink (light) */
  --paper: #F2F1ED;
  --ink: #121211;
  --ink-2: #5E5D58;          /* secondary text, 5.9:1 on paper */
  --ink-3: rgba(18, 18, 17, .26); /* ghost digits (decorative) */
  --rule: rgba(18, 18, 17, .13);
  --hover: rgba(18, 18, 17, .035);
  --flood: rgba(18, 18, 17, .12);
  --accent: #FF5A00;
  --accent-text: #BF4300;   /* the accent as small text: 4.6:1 on paper */
  --on-accent: #121211;
  --accent-flood: rgba(18, 18, 17, .16);
  --pending-bg: #121211;
  --pending-fg: #F2F1ED;
  --pending-flood: rgba(242, 241, 237, .16);

  /* type: Geist Mono for the numerals and keys, Geist for the small print */
  --f-num: "Geist Mono", ui-monospace, monospace;
  --f-text: "Geist", system-ui, sans-serif;
  --w-num: 200;
  --w-key: 300;
  --w-adj: 0;               /* dark mode thins the numerals a touch */
  --track-num: -0.04em;
  --sep-x: -0.15em;         /* mono , and . sit in full cells: pull them in */

  /* look hooks (B and C override these) */
  --f-key: var(--f-num);    /* key labels + history results */
  --stretch: 100%;          /* Archivo's width axis (C) */
  --num-vars: normal;       /* hero font-variation-settings (Doto's ROND in C) */
  --num-pull: -0.02em;      /* hero's optical right pull: the face's digit side bearing, less tracking */
  --cap-track: .14em;       /* tiny caps tracking */
  --surface: var(--paper);  /* display + history panel */
  --eq-bg: var(--accent);
  --eq-fg: var(--on-accent);
  --eq-flood: var(--accent-flood);

  /* spacing scale: 4 8 12 16 24 32 48 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --g: clamp(16px, 2.4vw, 36px);  /* outer gutter */
  --kp-x: var(--g);         /* key cell padding = the display gutter, so the
                               operator column ends right under the number */
  --kp-y: clamp(10px, 1.4vmin, 18px);
  --fn-size: clamp(17px, min(2.8vw, 3.6vh), 30px); /* AC ± % ⌫ labels */
  --key-size: clamp(20px, min(3.6vw, 4.6vh), 40px); /* the keys' numbers, and the input cells' values */
  --foot-h: 32px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  --fs: 120px;      /* big-number size, set by JS (measured auto-fit) */
  --lh: 1;          /* big-number slot height, in em (JS mirrors this) */
  --g-shift: 0em;   /* per-font baseline correction, set by JS */
  --dot-top: .2;    /* cap-height of the digits (× fs), set by JS */
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #0E0E0D;
  --ink: #EDEBE6;
  --ink-2: #9C9A94;          /* 7.2:1 on paper */
  --ink-3: rgba(237, 235, 230, .24);
  --rule: rgba(237, 235, 230, .13);
  --hover: rgba(237, 235, 230, .04);
  --flood: rgba(237, 235, 230, .14);
  --accent: #F2560C;
  --accent-text: var(--accent);   /* 5.6:1 on dark paper already */
  --on-accent: #0E0E0D;
  --accent-flood: rgba(14, 14, 13, .18);
  --pending-bg: #2B2A26;     /* a tone, not an inversion */
  --pending-fg: #EDEBE6;
  --pending-flood: rgba(237, 235, 230, .10);
  --w-adj: -20;
  color-scheme: dark;
}

/* ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);   /* nothing inside may widen the page */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-stretch: var(--stretch);
  font-size: 12px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* No drawn focus boxes: keyboard focus shows in each control's own quiet state
   (keys: the hover tint; the active input cell is the focused one; the % switch
   and the menu's cross: a tint; footer words: an underline). */
button:focus, button:focus-visible, a:focus, a:focus-visible { outline: none; }
.key:focus-visible { background: var(--hover); }
.key--eq:focus-visible { box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .08); }
.key.is-pending:focus-visible { box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, .08); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Tiny caps label — the "printed matter" voice */
.tiny {
  font-family: var(--f-text);
  font-size: 10px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: var(--cap-track);
  text-transform: uppercase;
  color: var(--ink-2);
}

.ctl { display: inline-flex; align-items: center; min-height: 32px; }

/* ------------------------------ layout ---------------------------------- */

main { min-height: 0; display: grid; }

.calc {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 42fr) minmax(0, 58fr);
  grid-template-columns: minmax(0, 1fr);
}
/* always stacked: the number on top, keypad and controls along the bottom.
   Placed explicitly, so the calculator list can lie over the keypad's cell. */
.calc > .display { grid-row: 1; grid-column: 1; }
.calc > .keys { grid-row: 2; grid-column: 1; }

/* ------------------------------ display --------------------------------- */

.display {
  --pad-t: calc(var(--safe-t) + var(--g));
  --pad-r: calc(var(--safe-r) + var(--g));
  --pad-b: var(--s4);
  --pad-l: calc(var(--safe-l) + var(--g));
  --hb-nudge: 0px;
  position: relative;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
  background: var(--surface);
  overflow: hidden;
}

/* top line: holds the history button; takes no room */
.display__bar { position: relative; z-index: 3; height: 0; flex: none; }
.hist-btn {
  position: absolute;
  left: -7px;                                   /* the 18px glyph's edge sits on the gutter */
  top: calc(-7px + var(--hb-nudge));
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--ink-2);
}
.hist-ico {
  grid-area: 1 / 1;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity .18s ease, transform .4s cubic-bezier(.2, .9, .2, 1);
}
.hist-ico--close { opacity: 0; transform: rotate(-90deg) scale(.5); }
.is-hist .hist-ico--open { opacity: 0; transform: rotate(90deg) scale(.5); }
.is-hist .hist-ico--close { opacity: 1; transform: none; }
.is-hist .hist-btn { color: var(--ink); }
.hist-btn:focus-visible { outline-offset: -3px; }
.hist-btn[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hist-btn:hover { color: var(--ink); }
  .hist-btn:hover .hist-ico--open { transform: rotate(-30deg); }
}
.fig-scale { cursor: default; }

/* the figure: expression caption + hero number */
.figure {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* the expression reads as the number's caption, right above it */
  align-items: stretch;
  position: relative;
}

.expr {
  margin: var(--s3) 0 clamp(8px, calc(var(--fs) * .06), 24px);
  flex: none;
  display: flex;
  justify-content: flex-end;     /* numbers align right; the newest input stays in view */
  overflow: hidden;
  font-size: clamp(13px, 1.25vw + 6px, 18px);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.expr__text { flex: none; white-space: nowrap; }
.expr.is-cap { white-space: normal; }
.expr.is-squeezed { display: none; }
.expr.is-cap .expr__text { flex: 0 1 auto; min-width: 0; white-space: normal; text-align: right; text-wrap: balance; }
/* too long: fade the start */
.expr.is-over {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px);
  mask-image: linear-gradient(90deg, transparent, #000 28px);
}
.expr .op { color: var(--ink); padding: 0 .08em; }
.expr .eq, .expr .msg { color: var(--ink); }
.expr .sep { margin: 0 .28em; }   /* the breakdown's dots: about two spaces either side */

.figure-inner {
  position: relative;
  flex: none;
  display: flex;
  justify-content: flex-end;  /* right-aligned: the last digit typed stays put */
  max-width: 100%;
}
.fig-scale {
  display: flex;
  align-items: flex-start;
  transform-origin: 100% 100%;
}

.num, .num-out {
  font-family: var(--f-num);
  font-weight: calc(var(--w-num) + var(--w-adj));
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variation-settings: var(--num-vars);
  letter-spacing: var(--track-num);
  white-space: nowrap;
}
.num {
  font-size: var(--fs);
  line-height: var(--lh);
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-right: var(--num-pull); /* optical: last digit's ink onto the right edge */
}
.num.is-error { margin-right: 0; } /* the error dash is nearly full-width: no optical pull */
.num-out { position: absolute; inset: 0; pointer-events: none; }

.slot {
  position: relative;
  display: block;
  height: calc(var(--lh) * 1em);
  clip-path: inset(max(-0.05em, -16px) -0.3em 0);   /* clip the roll at the bottom; glyphs may overhang sideways and a hair above (never into the caption) */
  flex: none;
}
.slot .g, .reel > span {
  display: block;
  height: calc(var(--lh) * 1em);
  line-height: var(--lh);
  text-align: left;
}
.slot > .g, .slot > .reel { margin-top: var(--g-shift); }
.reel { display: flex; flex-direction: column; }
.slot.is-ghost { color: var(--ink-3); }
.slot.is-exp { color: var(--ink-2); }
.slot.is-dash { color: var(--ink-3); }
.slot.is-sep { margin-inline: var(--sep-x); }
.slot.is-sep .g, .slot.is-sep .reel > span { letter-spacing: 0; }
.slot.is-sym { margin-right: .02em; }
.num-out .slot { position: absolute; margin: 0; }

.dot {
  flex: none;
  width: clamp(8px, calc(var(--fs) * .095), 26px);
  height: clamp(8px, calc(var(--fs) * .095), 26px);
  border-radius: 50%;
  background: var(--accent);
  align-self: flex-start;
  margin-right: clamp(6px, calc(var(--fs) * .05), 16px);
  margin-top: calc(var(--fs) * var(--dot-top));
  transform: scale(0);
  opacity: 0;
  position: relative;
}

/* ------------------------------ history ---------------------------------- */

/* the paper tape: covers the display (mirrors its padding), keypad stays live */
.history {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
  background: var(--surface);
}
.history[hidden] { display: none; }
.history__head {
  flex: none;
  height: 18px;
  margin-top: var(--hb-nudge);
  padding-left: 26px;                           /* clear of the button */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.history__clear {
  font-family: var(--f-text);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 8px 0;
  margin-right: -.14em;
}
.history__clear.is-armed { color: var(--accent); }
.history__clear[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .history__clear:hover { color: var(--ink); }
  .history__clear.is-armed:hover { color: var(--accent); }
}
.history__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.history__list::-webkit-scrollbar { display: none; }
.hrow {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: ". expr" "time res";
  column-gap: var(--s4);
  row-gap: 3px;
  align-items: baseline;
  padding: var(--s3) 0;
  border-top: 1px solid var(--rule);
  text-align: right;
  cursor: default;
}
.hrow__time {
  grid-area: time;
  text-align: left;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hrow__expr {
  grid-area: expr;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.hrow__res {
  grid-area: res;
  font-family: var(--f-key);
  font-weight: calc(var(--w-key) + var(--w-adj));
  font-size: clamp(20px, min(2.4vw, 3.6vh), 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-right: -0.03em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.hrow:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .hrow:hover .hrow__expr { color: var(--ink); }
}
.history__empty { margin: auto 0; text-align: center; }
.history__empty[hidden] { display: none; }

/* ------------------------------ copy tag --------------------------------- */

/* rides beside the pointer over anything copyable: "click to copy" → "copied" */
.copy-cap {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px calc(8px - .14em) 6px 8px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-text);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 0 0 1px var(--paper);   /* a paper hairline: keeps it crisp over the digits */
  opacity: 0;
  transition: opacity .14s ease;
}
.copy-cap.is-on { opacity: 1; }
.copy-cap__dot { display: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.copy-cap.is-copied .copy-cap__dot { display: block; }

/* ------------------------------ keypad ---------------------------------- */

.keys {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}

.key {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;       /* labels and captions sit on the cell's right edge */
  text-align: right;
  padding: var(--kp-y) var(--kp-x);
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  min-width: 0;
  min-height: 0;
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
}
.key:nth-child(4n + 1) { border-left: 0; }
.key:nth-child(-n + 4) { border-top: 0; }
/* safe areas live inside the edge cells, so the grid still bleeds */
.key:nth-child(4n + 1) { padding-left: calc(var(--kp-x) + var(--safe-l)); }
.key:nth-child(4n) { padding-right: calc(var(--kp-x) + var(--safe-r)); }

.key__l {
  position: relative;
  z-index: 1;
  font-family: var(--f-key);
  font-weight: calc(var(--w-key) + var(--w-adj));
  font-size: var(--key-size);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-right: -0.03em;       /* optical: glyph side bearing onto the padding edge */
}
.key--fn .key__l { font-size: var(--fn-size); }
.key__l--icon { display: block; height: 1em; margin-right: -0.1em; }
.key__l--icon svg { display: block; width: 1.3em; height: .87em; margin-top: .1em; overflow: visible; }
.key__c {
  position: relative;
  z-index: 1;
  font-family: var(--f-text);
  font-size: 10px;
  line-height: 1;
  letter-spacing: var(--cap-track);
  text-transform: uppercase;
  color: var(--ink-2);
  margin-right: calc(var(--cap-track) * -1);   /* trailing tracking: the last letter ends on the edge */
  transition: opacity .18s ease;
}

.ink, .pfill {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ink { background: var(--flood); opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .key:hover { background: var(--hover); }
  .key--eq:hover { background: var(--eq-bg); }
}

/* the single orange block */
.key--eq { background: var(--eq-bg); color: var(--eq-fg); border-color: transparent; }
.key--eq .key__c { color: var(--eq-fg); }
.key--eq .ink { background: var(--eq-flood); }

/* pending operator: the ink spreads from the finger and stays printed */
.pfill { background: var(--pending-bg); opacity: 0; transition: opacity .12s ease; }
.key.is-pending .pfill { opacity: 1; transition: none; }
.key.is-pending { color: var(--pending-fg); transition: color 0s 90ms; }
.key.is-pending .key__c { color: var(--pending-fg); opacity: .78; transition: color 0s 90ms, opacity .18s ease; }
.key.is-pending .ink { background: var(--pending-flood); }

/* Review: centered key style (K / footer switch) — no captions, every
   number and symbol centered in its cell. Captions fade out in place. */
:root[data-keys="centered"] .key { justify-content: center; align-items: center; text-align: center; }
:root[data-keys="centered"] .key .key__l { margin-right: 0; }
/* optical centering: operators sit on the font's math axis (~.07em below the
   middle of the line), and the ⌫ outline's point pulls its mass left */
:root[data-keys="centered"] .key--op .key__l,
:root[data-keys="centered"] .key--eq .key__l { top: -0.07em; }
:root[data-keys="centered"] .key .key__l--icon { left: 0.045em; top: -0.05em; }
:root[data-keys="centered"] .key .key__c {
  position: absolute;
  right: var(--kp-x);
  bottom: var(--kp-y);
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------ footer ---------------------------------- */

.foot {
  display: flex;
  justify-content: space-between;   /* credit on the left gutter, commands end on the number's edge */
  align-items: center;
  gap: var(--s4);
  min-height: calc(var(--foot-h) + var(--safe-b));
  padding: 0 calc(var(--safe-r) + var(--g)) var(--safe-b) calc(var(--safe-l) + var(--g));
  border-top: 1px solid var(--rule);
  font-size: 10.5px;
  color: var(--ink-2);
  letter-spacing: .01em;
}
/* credit: "Calc from @fhlcreative" — "from" whispers like the hotkeys;
   only "from @fhlcreative" is the link */
.foot__credit {
  flex: none;                       /* never squeezed under its own text */
  display: inline-flex;
  align-items: center;
  height: var(--foot-h);
  gap: .3em;
  margin: 0;
  white-space: nowrap;
  min-width: 0;
}
.credit__link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  gap: .3em;
  color: var(--ink-2);
  text-decoration: none;
}
.credit__from { opacity: .45; }
.credit__link:focus { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .credit__link:hover { color: var(--ink); }
}

.foot__ctl { display: flex; align-items: center; gap: var(--s5); flex: none; }

/* footer commands: "Theme T", "Labels K" — the word is the button, the key is a whisper */
.ctl--cmd {
  min-height: 0;
  height: var(--foot-h);
  gap: 6px;
  white-space: nowrap;
  color: var(--ink-2);
}
.cmd__key { font: inherit; opacity: .45; }
@media (hover: none) and (pointer: coarse) {
  .cmd__key { display: none; }      /* no keyboard, no shortcut */
}
@media (hover: hover) and (pointer: fine) {
  .ctl--cmd:hover { color: var(--ink); }
}
/* When the footer gets tight (app.js measures it: data-fit 1-4), in order:
   the hotkey letters go, the credit stacks on two lines, the type steps
   down, and the review switch steps aside (K still works). */
.foot:is([data-fit="1"], [data-fit="2"], [data-fit="3"], [data-fit="4"]) .cmd__key { display: none; }
.foot:is([data-fit="1"], [data-fit="2"]) .foot__ctl { gap: var(--s4); }
.foot:is([data-fit="2"], [data-fit="3"], [data-fit="4"]) .foot__credit {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; line-height: 1.1;
}
.foot:is([data-fit="2"], [data-fit="3"], [data-fit="4"]) .credit__link { height: auto; }
.foot:is([data-fit="3"], [data-fit="4"]) { font-size: 10px; }
.foot:is([data-fit="3"], [data-fit="4"]) .foot__ctl { gap: var(--s3); }
.foot[data-fit="4"] #keysBtn { display: none; }
/* the commands fill the footer's height and have no side padding: their focus
   ring sits inside top and bottom, and outside left and right of the word */
.ctl--cmd:focus-visible, .credit__link:focus-visible { color: var(--ink); }
.ctl--cmd:focus-visible .cmd__name, .credit__link:focus-visible {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}

/* ------------------------------ modes ----------------------------------- */

/* a mode's inputs: one strip of cells across the top of the display, like a
   row of keys (label top-left, value bottom-right), with the answer under
   it. Phones put four inputs two by two. The strip sits under the answer,
   right on top of the keypad, and bleeds out of the display's padding like
   the keypad does: its lines run edge to edge, the text sits inside each cell. */
.fields {
  flex: none;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin: var(--s3) calc(var(--pad-r) * -1) calc(var(--pad-b) * -1) calc(var(--pad-l) * -1);
}
.fields[hidden] { display: none; }
.cells {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  --cols: 3;
}
.cells[data-n="1"] { --cols: 1; }
.cells[data-n="2"] { --cols: 2; }
.cells[data-n="4"] { --cols: 4; }
@media (max-width: 639px) {
  .cells[data-n="4"] { --cols: 2; }
  /* Tip on a phone: the bill gets half the row, tip and split (short values) share the rest */
  .cells[data-n="3"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* Percent's type switch: a full-bleed row on top of the input strip, edge to
   edge like the cells. A sunk track (black in dark themes, a light grey in
   light ones) and a block of ink that fills, and slides to, the chosen part. */
.ftypes {
  flex: none;
  border-top: 1px solid var(--rule);
}
.seg {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  background: var(--seg-track);
}
.seg__thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--i) * 100% / var(--n));
  width: calc(100% / var(--n));
  background: var(--ink);
  transition: left .32s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.ftype {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 13px 6px;
  font-size: clamp(11px, .3vw + 9.5px, 13px);   /* it swaps the whole set of inputs: a step up from the captions */
  line-height: 1;
  letter-spacing: var(--cap-track);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--ink-2);
  transition: color .2s ease;
}
.ftype[aria-pressed="true"] { color: var(--paper); }
:root { --seg-track: color-mix(in srgb, var(--ink) 7%, transparent); }
:root[data-theme="dark"] { --seg-track: #000; }
@media (prefers-reduced-motion: reduce) { .seg__thumb, .ftype { transition: none; } }
/* Windows high contrast: the menu's bars and focus stay visible */
@media (forced-colors: active) {
  .mitem::before { background: CanvasText; forced-color-adjust: none; }
  .mitem[aria-current="true"]::before { background: Highlight; }
  .mitem:focus-visible { outline: 2px solid Highlight; outline-offset: -4px; }
}
/* Windows high contrast: the chosen part keeps a visible block */
@media (forced-colors: active) {
  .seg__thumb { background: Highlight; forced-color-adjust: none; }
  .ftype[aria-pressed="true"] { color: HighlightText; forced-color-adjust: none; }
}

/* a cell: hairline under it and between columns; the first in a row starts
   on the gutter, the last ends on it */
.field {
  position: relative;
  display: block;
  min-width: 0;
  padding: var(--kp-y) var(--kp-x);
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);    /* the keypad's own top line closes the strip below */
  text-align: left;
}
.cells .field:first-child { border-left: 0; padding-left: calc(var(--kp-x) + var(--safe-l)); }
.cells .field:last-child { padding-right: calc(var(--kp-x) + var(--safe-r)); }
@media (max-width: 639px) {
  .cells[data-n="4"] .field:nth-child(3) { border-left: 0; padding-left: calc(var(--kp-x) + var(--safe-l)); }
  .cells[data-n="4"] .field:nth-child(2) { padding-right: calc(var(--kp-x) + var(--safe-r)); }
}
.field__in {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 20px);
  min-width: 0;
}
.field.is-on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--ink); pointer-events: none;
}
/* the active cell: its label at full strength and the keypad's hover tint behind it */
.field.is-on { background: var(--hover); }
.field.is-on .field__l { color: var(--ink); }
.field__l {
  align-self: flex-start;
  font-size: 10px;
  line-height: 1;
  letter-spacing: var(--cap-track);
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.field__row {
  align-self: stretch;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: .3em;
  font-family: var(--f-key);
  font-weight: calc(var(--w-key) + var(--w-adj));
  font-size: var(--key-size);     /* the same size as the keys' numbers */
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.field__cur { flex: none; margin-right: auto; color: var(--ink-2); }   /* dollars: the sign sits apart, on the left */
.field__v {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;     /* a long entry keeps its newest digits in view */
  gap: .3em;
  overflow: hidden;
  margin-right: -0.03em;
}
.field__n { flex: none; }
.field__v.is-over {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.4em);
  mask-image: linear-gradient(90deg, transparent, #000 1.4em);
}
.field__n.is-ph { color: var(--ink-3); }
.field__u { flex: none; color: var(--ink-2); }

.ftype:not([aria-pressed="true"]):focus-visible { color: var(--ink); background: var(--hover); }
@media (hover: hover) and (pointer: fine) {
  .field:not(.is-on):hover .field__l { color: var(--ink); }
  .ftype:not([aria-pressed="true"]):hover { color: var(--ink); }
}
/* the answer's currency sign: on the left of the answer's line, the answer's
   size, in the quieter ink (the answer's auto-fit leaves room for it) */
.cur {
  flex: none;
  margin-right: auto;
  align-self: flex-start;
  font-family: var(--f-num);
  font-weight: calc(var(--w-num) + var(--w-adj));
  font-variation-settings: var(--num-vars);
  font-size: var(--fs);
  line-height: var(--lh);
  height: calc(var(--lh) * 1em);
  overflow: hidden;
  color: var(--ink-2);
  margin-left: -0.04em;
}
.cur .g { display: block; height: calc(var(--lh) * 1em); line-height: var(--lh); margin-top: var(--g-shift); }
.cur[hidden] { display: none; }
.num.is-blank ~ .cur, .figure-inner.is-blank .cur { color: var(--ink-3); }
/* waiting for its inputs: the answer is a quiet ghost */
.num.is-blank { color: var(--ink-3); }

/* the calculator list: the keypad turns into one wide key per calculator */
.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-rows: auto repeat(4, minmax(0, 1fr));
  background: var(--paper);
  --mi-x: calc(var(--kp-x) * 2);   /* the rows' text sits twice the gutter in from the edge */
}
/* the slim bar on top: what this is, and the way out */
.menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  height: calc(44px + var(--safe-t));
  padding: var(--safe-t) calc(var(--kp-x) + var(--safe-r)) 0 calc(var(--kp-x) + var(--safe-l));   /* the label and the cross sit the same distance in from their edges */
  border-bottom: 1px solid var(--rule);
}
.menu__title {
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: var(--cap-track);
  text-transform: uppercase;
  color: var(--ink-2);
}
.menu__x {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -17.5px;           /* the cross's ink on the gutter (the icon's own inset too), the hit area beyond it */
  color: var(--ink-2);
}
.menu__x svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.menu__x:focus-visible { color: var(--ink); background: var(--hover); }
@media (hover: hover) and (pointer: fine) {
  .menu__x:hover { color: var(--ink); }
}
.menu[hidden] { display: none; }
.mitem {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;       /* the name and its subheader, together, in the middle of the block */
  align-items: flex-start;
  gap: clamp(5px, .9vh, 9px);
  text-align: left;
  min-height: 0;
  overflow: hidden;
  padding: var(--kp-y) calc(var(--kp-x) + var(--safe-r)) var(--kp-y) calc(var(--mi-x) + var(--safe-l));
  border-top: 1px solid var(--rule);
}
.menu__bar + .mitem { border-top: 0; }
.mitem:last-child { padding-bottom: calc(var(--kp-y) + var(--safe-b)); }
.mitem:focus-visible { outline: none; }   /* the bar and the wash show where the keyboard is */
/* a bar on the left edge: orange on the current calculator; ink (black / white)
   on the one under the pointer or the keyboard */
.mitem::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--ink);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .16s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.mitem:focus-visible::before { transform: none; }
.mitem[aria-current="true"]::before { background: var(--accent); transform: none; transition: none; }
/* names: the current one at full strength, the others at 90% until the pointer
   (or the keyboard) is on them, which also lays a faint ink wash under the row
   (an image layer, so each look's own row colour stays) */
:root { --mi-hov: color-mix(in srgb, var(--ink) 5%, transparent); }
.mitem__l { color: color-mix(in srgb, var(--ink) 90%, transparent); }
.mitem[aria-current="true"] .mitem__l, .mitem:focus-visible .mitem__l { color: var(--ink); }
.mitem:focus-visible { background-image: linear-gradient(var(--mi-hov), var(--mi-hov)); }   /* the current row too: focus shows */
@media (prefers-reduced-motion: reduce) { .mitem::before { transition: none; } }
.mitem__l {
  display: block;
  font-family: var(--f-key);
  font-weight: calc(var(--w-key) + var(--w-adj));
  font-size: clamp(26px, min(8vw, 6.4vh), 72px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-left: -0.04em;          /* optical: the first glyph's side bearing onto the padding edge */
}
/* hover (or the keyboard): the name and its subheader ease a few pixels right */
.mitem__l, .mitem__c { translate: 0 0; transition: translate .24s cubic-bezier(.2, .8, .2, 1); }
.mitem:focus-visible .mitem__l, .mitem:focus-visible .mitem__c { translate: 6px 0; }
@media (hover: hover) and (pointer: fine) {
  .mitem:hover .mitem__l, .mitem:hover .mitem__c { translate: 6px 0; }
}
@media (prefers-reduced-motion: reduce) { .mitem__l, .mitem__c { transition: none; } }
/* each row's shortcut, a small keycap on the right (no keyboard on touch: hidden) */
.mitem__k {
  position: absolute;
  top: 50%;
  right: calc(var(--kp-x) + var(--safe-r));
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--rule);
  border-radius: var(--key-r, 0);
  font-family: var(--f-text);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--ink-2);
  transition: color .2s ease, border-color .2s ease;
}
.mitem:focus-visible .mitem__k { color: var(--ink); border-color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) {
  .mitem:hover .mitem__k { color: var(--ink); border-color: var(--ink-3); }
}
@media (hover: none) and (pointer: coarse) {
  .mitem__k { display: none; }
}
.mitem__c {
  font-family: var(--f-text);
  font-size: clamp(11px, .25vw + 9.5px, 13px);
  line-height: 1;
  letter-spacing: var(--cap-track);
  text-transform: uppercase;
  color: var(--ink-2);
}
@media (hover: hover) and (pointer: fine) {
  .mitem:hover::before { transform: none; }
  .mitem:not([aria-current="true"]):hover { background-image: linear-gradient(var(--mi-hov), var(--mi-hov)); }
  .mitem:hover .mitem__l { color: var(--ink); }
}

/* ------------------------------ short screens --------------------------- */

@media (max-height: 520px) {
  :root { --foot-h: 26px; }
  .expr { margin-top: var(--s2); }
  .display { --pad-t: calc(var(--safe-t) + var(--s3)); --pad-b: var(--s3); --hb-nudge: 0px; }
  .key { --kp-y: 8px; }
  .key__c { font-size: 9px; }
}
/* phone-height displays (iPhone SE and smaller): tighter cells give the answer room */
@media (max-height: 700px) and (min-height: 521px) {
  .field__in { gap: 6px; }
  .ftype { padding: 11px 6px; }
}
/* short displays (landscape phones): each cell's label and value share one line */
@media (max-height: 520px) {
  .field { padding-top: 6px; padding-bottom: 6px; }
  .field__in { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; }
  .field__l, .field__row { align-self: baseline; }
  .ftype { padding: 8px 6px; }
}
/* B's tiles lose their gap and padding to the tray: no room for captions */
@media (max-height: 520px) {
  :root[data-style="b"] .key__c { display: none; }
}
@media (max-height: 420px) {
  :root[data-style="b"] .key { --kp-y: 3px; }   /* B's tiles are shortest: labels must fit */
  .key__c { display: none; }                     /* no room under the labels in any look */
  .field { padding-top: 5px; padding-bottom: 5px; }
  .ftype { padding: 7px 6px; }
}
/* the widest caption faces at 320px: a little less tracking so "multiply" fits */
@media (max-width: 340px) {
  :root[data-style="b"] .key__c, :root[data-style="c"] .key__c { --cap-track: .04em; }
}

/* =========================================================================
   Looks. Same layout; each brings its palette, type and key treatment.
   ========================================================================= */

/* ---- B "Instrument": Martian Mono throughout, rounded tiles in a quiet tray, red dot ---- */
:root[data-style="b"] {
  --paper: #ECECEC;
  --surface: #F6F6F6;
  --tile: #F7F7F7;
  --tile-soft: #E2E2E2;        /* the outer keys: a soft fill, no outline */
  --tile-soft-hover: #DBDBDB;
  --tile-line: rgba(20, 20, 20, .075);
  --tile-line-2: rgba(20, 20, 20, .15);
  --ink: #141414;
  --ink-2: #666666;
  --ink-3: rgba(20, 20, 20, .22);
  --rule: rgba(20, 20, 20, .075);
  --hover: rgba(20, 20, 20, .03);
  --flood: rgba(20, 20, 20, .10);
  --accent: #FF2D2D;
  --accent-text: #D62626;
  --on-accent: #FFFFFF;
  --accent-flood: rgba(255, 255, 255, .2);
  --eq-bg: #141414;
  --eq-fg: #F7F7F7;
  --eq-flood: rgba(247, 247, 247, .16);
  --pending-bg: #F7F7F7;
  --pending-fg: #141414;
  --pending-flood: rgba(20, 20, 20, .08);
  --f-num: "Martian Mono", ui-monospace, monospace;
  --f-text: "Martian Mono", ui-monospace, monospace;
  --stretch: 87.5%;           /* Martian's semi-condensed cut: a readout, not a typewriter */
  --num-pull: -0.07em;        /* Martian's digits carry ~.10em on the right */
  --w-num: 140;
  --w-key: 300;
  --track-num: -0.03em;
  --cap-track: .08em;
  --b-gap: clamp(6px, .9vmin, 8px);
  --b-r-tile: clamp(12px, 2vmin, 18px);
  --b-r-panel: calc(var(--b-r-tile) + 6px);
}
:root[data-style="b"][data-theme="dark"] {
  --paper: #000000;
  --surface: #0B0B0B;
  --tile: #151515;
  --tile-soft: #222222;
  --tile-soft-hover: #2A2A2A;
  --tile-line: rgba(255, 255, 255, .08);
  --tile-line-2: rgba(255, 255, 255, .16);
  --ink: #F2F2F2;
  --ink-2: #8C8C8C;
  --ink-3: rgba(242, 242, 242, .22);
  --rule: rgba(255, 255, 255, .08);
  --hover: rgba(255, 255, 255, .04);
  --flood: rgba(255, 255, 255, .12);
  --accent: #FF3B30;
  --accent-text: var(--accent);
  --eq-bg: #E4E4E4;
  --eq-fg: #0A0A0A;
  --eq-flood: rgba(10, 10, 10, .14);
  --pending-bg: #151515;
  --pending-fg: #F2F2F2;
  --pending-flood: rgba(255, 255, 255, .08);
}
:root[data-style="b"] .calc { gap: var(--b-gap); padding: var(--b-gap); }
:root[data-style="b"] .display { border: 1px solid var(--rule); border-radius: var(--b-r-panel); }
:root[data-style="b"] .keys { gap: var(--b-gap); border: 0; }
:root[data-style="b"] .key { border: 1px solid var(--tile-line); border-radius: var(--b-r-tile); background: var(--tile); }
:root[data-style="b"] .key--fn,
:root[data-style="b"] .key--op { background: var(--tile-soft); border-color: transparent; }
:root[data-style="b"] .key.key--eq { background: var(--eq-bg); border-color: var(--eq-bg); }
:root[data-style="b"] .key.is-pending { border-color: var(--ink); }
:root[data-style="b"] .foot { border-top: 0; }
:root[data-style="b"] { --key-r: 6px; }
@media (hover: hover) and (pointer: fine) {
  :root[data-style="b"] .key--num:hover { background: var(--tile); border-color: var(--tile-line-2); }
  :root[data-style="b"] .key--fn:hover,
  :root[data-style="b"] .key--op:hover { background: var(--tile-soft-hover); border-color: transparent; }
  :root[data-style="b"] .key.key--eq:hover { background: var(--eq-bg); }
  :root[data-style="b"] .key.is-pending:hover { border-color: var(--ink); }
}

/* ---- C "Matrix": dot-matrix figure, extended type, tonal sage bands ---- */
:root[data-style="c"] {
  --paper: #E9EAE4;
  --ink: #1E211C;
  --ink-2: #48523F;
  --ink-3: rgba(30, 33, 28, .24);
  --rule: rgba(30, 33, 28, .11);
  --hover: rgba(30, 33, 28, .05);
  --flood: rgba(30, 33, 28, .14);
  --accent: #E8643C;
  --accent-text: #AC4A2C;
  --on-accent: #1E211C;
  --accent-flood: rgba(30, 33, 28, .16);
  --pending-bg: #5E6B57;
  --pending-fg: #F1F2EC;
  --pending-flood: rgba(241, 242, 236, .16);
  --band-1: #E1E2DA;
  --band-2: #DADCD2;
  --band-3: #D2D5CA;
  --band-4: #CACEBF;
  --band-5: #C3C8B4;
  --f-num: "Doto", ui-monospace, monospace;
  --f-key: "Archivo", system-ui, sans-serif;
  --f-text: "Archivo", system-ui, sans-serif;
  --stretch: 125%;
  --num-vars: "ROND" 100;
  --num-pull: -0.115em;      /* Doto's dot grid: every digit carries exactly .115em on the right */
  --w-num: 640;
  --w-key: 260;
  --track-num: 0em;
  --cap-track: .1em;
}
:root[data-style="c"][data-theme="dark"] {
  --paper: #121411;
  --ink: #E4E7DB;
  --ink-2: #A3AC98;
  --ink-3: rgba(228, 231, 219, .2);
  --rule: rgba(228, 231, 219, .09);
  --hover: rgba(228, 231, 219, .05);
  --flood: rgba(228, 231, 219, .12);
  --accent: #D85A31;
  --accent-text: var(--accent);
  --on-accent: #121411;
  --accent-flood: rgba(18, 20, 17, .18);
  --pending-bg: #C3C8B4;
  --pending-fg: #121411;
  --pending-flood: rgba(18, 20, 17, .12);
  --band-1: #161914;
  --band-2: #1A1E18;
  --band-3: #1F231C;
  --band-4: #252A21;
  --band-5: #2C3227;
  --w-adj: 0;
}
:root[data-style="c"] .keys { border: 0; }
:root[data-style="c"] .key { --row: var(--band-1); border: 0; }
:root[data-style="c"] .key:nth-child(n + 5) { --row: var(--band-2); }
:root[data-style="c"] .key:nth-child(n + 9) { --row: var(--band-3); }
:root[data-style="c"] .key:nth-child(n + 13) { --row: var(--band-4); }
:root[data-style="c"] .key:nth-child(n + 17) { --row: var(--band-5); }
:root[data-style="c"] .key { background: var(--row); }
:root[data-style="c"] .key.key--eq { background: var(--eq-bg); }
@media (hover: hover) and (pointer: fine) {
  :root[data-style="c"] .key:hover { background: linear-gradient(var(--hover), var(--hover)), var(--row); }
  :root[data-style="c"] .key.key--eq:hover { background: var(--eq-bg); }
}
/* Archivo's × is drawn far heavier than its + − ÷ =; borrow Geist's */
:root[data-style="c"] [data-key="*"] .key__l,
:root[data-style="c"] .op[data-op="*"] { font-family: "Geist", system-ui, sans-serif; font-stretch: 100%; }

/* ------------------------------ look transition -------------------------- */

/* the pixel front: one canvas pixel per cell, scaled up crisp, drawn above
   both the old and the new look (its own view-transition group) */
.fx {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
  display: none;
  pointer-events: none;
  image-rendering: pixelated;
  view-transition-name: fx;
}
.fx-run .fx { display: block; }
::view-transition-group(fx),
::view-transition-old(fx),
::view-transition-new(fx) { animation: none; }
::view-transition-old(fx) { display: none; }

/* T: the pixel swipe — the new look shows through a full-screen mask of square
   cells that steps open from the bottom-right corner (set from app.js) */
.pw-run::view-transition-new(root) {
  mask-repeat: no-repeat;
  mask-position: 0 0;
  mask-size: auto;
}

/* ------------------------------ theme transition ------------------------ */

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-new(root) { z-index: 2; }
::view-transition-old(root) { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .key, .key__c, .key.is-pending, .key.is-pending .key__c, .pfill, .hist-ico, .copy-cap { transition: none; }
}

/* ---- the calculator list in each look ---- */
:root[data-style="b"] .menu {
  gap: var(--b-gap);
  padding: calc(var(--b-gap) + var(--safe-t)) calc(var(--b-gap) + var(--safe-r)) calc(var(--b-gap) + var(--safe-b)) calc(var(--b-gap) + var(--safe-l));
}
:root[data-style="b"] .mitem:last-child { padding-bottom: var(--kp-y); }
:root[data-style="b"] .menu__bar { height: 40px; padding-top: 0; border-bottom: 0; padding-left: var(--kp-x); padding-right: var(--kp-x); }
:root[data-style="b"] .mitem { padding-left: var(--mi-x); padding-right: var(--kp-x); }
:root[data-style="b"] .mitem { border: 1px solid var(--tile-line); border-radius: var(--b-r-tile); background-color: var(--tile); }

:root[data-style="c"] .menu { border-top: 0; }
:root[data-style="c"] .mitem { border-top: 0; background-color: var(--band-1); }
:root[data-style="c"] .mitem:nth-of-type(1) { background-color: var(--band-1); }
:root[data-style="c"] .mitem:nth-of-type(2) { background-color: var(--band-2); }
:root[data-style="c"] .mitem:nth-of-type(3) { background-color: var(--band-3); }
:root[data-style="c"] .mitem:nth-of-type(4) { background-color: var(--band-4); }