/* =========================================================================
   Crypto — Calc's Bitcoin screen for every coin: Calc's "Tag" look (paper,
   ink, hairlines, Geist Mono), with each coin's colour washed into the paper
   and in its accent (coins.css, made by tools/build.py from coins.js).
   ========================================================================= */

/* registered as colours so a coin's paper, accent and greys can fade over (app.js tintFade) */
@property --paper { syntax: "<color>"; inherits: true; initial-value: #F2F1ED; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #FF5A00; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #121211; }
@property --ink-2 { syntax: "<color>"; inherits: true; initial-value: #5E5D58; }
@property --ink-3 { syntax: "<color>"; inherits: true; initial-value: rgba(18, 18, 17, .26); }
@property --rule { syntax: "<color>"; inherits: true; initial-value: rgba(18, 18, 17, .13); }
@property --hover { syntax: "<color>"; inherits: true; initial-value: rgba(18, 18, 17, .035); }
@property --flood { syntax: "<color>"; inherits: true; initial-value: rgba(18, 18, 17, .12); }

: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;         /* each coin's own (coins.css) */

  /* 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 */

  --f-key: var(--f-num);    /* key labels */
  --stretch: 100%;
  --num-vars: normal;       /* hero font-variation-settings */
  --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);  /* the display */
  --eq-bg: var(--accent);   /* the active input's line */

  /* 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 */
  --kp-y: clamp(10px, 1.4vmin, 18px);
  --fn-size: clamp(17px, min(2.8vw, 3.6vh), 30px); /* the ⌫ key */
  --key-size: clamp(20px, min(3.6vw, 4.6vh), 40px); /* the keys' numbers, and the input cell's value */
  --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;
  --w-adj: -20;
  color-scheme: dark;
}
/* switching coins, the paper and the accent fade over (never on light / dark: D swipes) */
:root.is-tinting {
  --tint-t: .7s cubic-bezier(.3, 0, .2, 1);
  transition: --paper var(--tint-t), --accent var(--tint-t), --ink var(--tint-t), --ink-2 var(--tint-t),
              --ink-3 var(--tint-t), --rule var(--tint-t), --hover var(--tint-t), --flood var(--tint-t);
}

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

*, *::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 and coins: a tint; the active input cell is the focused one; footer
   words: an underline). */
button:focus, button:focus-visible, a:focus, a:focus-visible { outline: none; }
.key:focus-visible { background: var(--hover); }

.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;
}

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

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

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

/* the number on top, the number pad along the bottom (Calc's mode proportions:
   its keys at Basic's height, the display taking the fifth row) */
.calc {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 53.6fr) minmax(0, 46.4fr);
  grid-template-columns: minmax(0, 1fr);
}
.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));
  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: the coin on the left, its price on the right, in their own room above the answer */
.display__bar { position: relative; z-index: 3; height: 12px; flex: none; }
/* the coin, top left: its logo (two faces, for the flip to the next coin). Tap it: to the moon */
.coin-mark { position: absolute; left: 0; top: 0; width: 32px; height: 32px; }
.coin-mark__in { display: block; width: 100%; height: 100%; perspective: 160px; transition: transform .45s cubic-bezier(.3, 1.7, .5, 1); }
.coin-mark__flip { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
.coin-mark__face {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  border-radius: 50%;              /* the logos are square tiles: each one a round coin */
  box-shadow: 0 0 0 1px var(--rule);   /* a light one (ETH, SHIB) keeps its edge */
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  -webkit-user-drag: none; pointer-events: none;
}
.coin-mark__face:not([src]) { visibility: hidden; }   /* the back face, before its first coin */
.coin-mark__face--back { transform: rotateY(180deg); }
/* a black-and-white logo (XRP, Stellar, NEAR, Hedera, Bittensor) turns over to white on a dark page */
:root[data-theme="dark"] .is-mono { filter: invert(1); }
.coin-mark:focus-visible .coin-mark__in { transform: scale(1.16); }   /* no focus box: it grows, as on hover */
@media (hover: hover) and (pointer: fine) { .coin-mark:hover .coin-mark__in { transform: scale(1.16); } }
.coin-mark:active .coin-mark__in { transform: scale(.92); transition-duration: .12s; }   /* after :hover, so a press wins */
@media (prefers-reduced-motion: reduce) { .coin-mark__in { transition: none; } }
/* the price, top right, on the coin's line: "1 BTC = $83,346.25 as of 1:35 PM" */
.price { position: absolute; right: 0; top: 0; height: 32px; line-height: 32px; white-space: nowrap;
  font-size: clamp(12px, .35vw + 10.5px, 15px); color: var(--ink-2); }
.price b { font-weight: 400; color: var(--ink); }
@media (max-height: 520px) {
  .display__bar { height: 14px; }   /* no coin: the price alone, in a slim line */
  .coin-mark { display: none; }
  .price { height: 14px; line-height: 14px; font-size: 11px; }
}
.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;
}

/* ------------------------------ 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 ---------------------------------- */

/* the number pad: 7 8 9 / 4 5 6 / 1 2 3 / . 0 ⌫ across the whole width, phone
   style, every number centered in its key. No AC (the footer's Clear, R or Esc
   start over), no operators, no =: the answer works itself out as you type. */
.keys {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}

.key {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  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;
}
/* the edges: no outer lines, safe areas inside the edge cells, so the grid still bleeds */
.key:nth-child(3n + 1) { border-left: 0; padding-left: calc(var(--kp-x) + var(--safe-l)); }
.key:nth-child(3n) { padding-right: calc(var(--kp-x) + var(--safe-r)); }
.key:nth-child(-n + 3) { border-top: 0; }

.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;
}
.key--back .key__l { font-size: var(--fn-size); }
/* optical centering: the ⌫ outline's point pulls its mass left */
.key__l--icon { display: block; height: 1em; left: 0.045em; top: -0.05em; }
.key__l--icon svg { display: block; width: 1.3em; height: .87em; margin-top: .1em; overflow: visible; }

/* a press: ink floods out from the finger and fades */
.ink {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--flood);
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .key:hover { background: var(--hover); }
}

/* ------------------------------ 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: "Crypto 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: "Clear R", "Bitcoin M", "Light D" — 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. */
.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); }
/* 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;
}


/* ------------------------------ the input ------------------------------ */

/* the input: a strip like a row of keys (label top-left, value bottom-right),
   under the answer, right on top of the keypad. It bleeds out of the display's
   padding like the keypad does: its lines run edge to edge. */
.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; }
/* one input over the keypad's first two columns, the ⇅ swap over the third */
.cells { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.fswap {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  padding-right: var(--safe-r);
  color: var(--ink);
}
.fswap svg { width: calc(var(--key-size) * 1.05); height: calc(var(--key-size) * 1.05); fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.fswap:focus-visible { background: var(--hover); }
@media (hover: hover) and (pointer: fine) { .fswap:hover { background: var(--hover); } }
/* the answer ends with its unit, "0.0029 BTC", and the unit is a button: the
   word, then a select chevron. Tap it for sats (ETH: gwei). It sits on the digits' baseline (which
   never moves sideways: the number grows leftward) and glides as the number resizes. */
.unitsw[hidden] { display: none; }
.unitsw {
  flex: none;
  align-self: flex-end;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .42em;
  margin-left: clamp(8px, 1.4vw, 18px);
  margin-bottom: calc(var(--fs) * .175 - .02em);   /* the letters on the digits' baseline */
  transition: margin-bottom .3s cubic-bezier(.2, .8, .2, 1);
  font-size: clamp(13px, .8vw + 10px, 22px);
  line-height: 1;
  letter-spacing: var(--cap-track);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.unitsw::after { content: ""; position: absolute; inset: -14px -10px; }   /* finger-sized */
.unitsw__w { position: relative; display: inline-grid; clip-path: inset(0 -1em); padding: .2em 0; margin: -.2em 0; }   /* the word rolls inside this */
.unitsw__w > * { grid-area: 1 / 1; }
.unitsw__t.is-out { position: absolute; right: 0; top: 0; }   /* the outgoing word takes no room (the answer settles at once), and stays where it was */
.unitsw__probe { position: absolute; visibility: hidden; pointer-events: none; }   /* measures the widest unit (app.js unitPx) */
/* a coin with one unit: just its ticker, part of the answer (no chevron; a click copies, like the digits) */
.unitsw.is-static { cursor: inherit; }
.unitsw.is-static .unitsw__chev { display: none; }
.unitsw.is-static::after { display: none; }
.unitsw__chev { width: .56em; height: .82em; flex: none; fill: none; stroke: var(--ink-2); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s ease; }
.unitsw:focus-visible .unitsw__w { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.unitsw:focus-visible .unitsw__chev { stroke: var(--ink); }
@media (hover: hover) and (pointer: fine) { .unitsw:hover .unitsw__chev { stroke: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .unitsw { transition: none; } }
@media (forced-colors: active) { .unitsw__chev { stroke: ButtonText; } }
/* switching type: the old strip, laid over the new one while it goes (app.js swapCells) */
.cells--old { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.cells--old .field, .cells--old .field.is-on { background: none; border-color: transparent; }   /* only its words move */
.cells--old .field::after { display: none; }
.cells--old .field, .cells.is-rolling .field { overflow: hidden; }
.cells--old .fswap, .cells--old .funits { visibility: hidden; }   /* the swap key stays put (its arrows do the moving) */
/* BTC / SATS (ETH / GWEI): the coin cell's label is its unit switch, laid over the
   (hidden) label from app.js, since a cell is a button already. The unit in use is
   underlined, at the label's strength; the other is quieter. */
.field__l.is-under { visibility: hidden; }
.funits {
  position: absolute;   /* left/top from app.js (placeUnits) */
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.4em;
  font-size: 10px;
  line-height: 1;
  letter-spacing: var(--cap-track);
  text-transform: uppercase;
  white-space: nowrap;
}
.funit { position: relative; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-2); transition: color .2s ease; }
.funit::after { content: ""; position: absolute; inset: -17px -7px; }   /* finger-sized; the two targets meet mid-gap */
.funit[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.funit:focus-visible { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .funit:hover { color: var(--ink); }
}

/* the input cell: hairlines like the keys'; it starts on the gutter */
.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)); }

.field__in {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 20px);
  min-width: 0;
}
/* the active cell's line, in the coin's accent. Moving to another cell, the old
   line runs off to the right as the new one draws in from the left. */
.field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--eq-bg); pointer-events: none;
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .32s cubic-bezier(.6, 0, .3, 1);
}
.field.is-on::after { transform: none; transform-origin: 0 50%; transition: transform .38s .07s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .field::after, .field.is-on::after { transition: none; } }
@media (forced-colors: active) { .field::after { background: Highlight; forced-color-adjust: 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); }

@media (hover: hover) and (pointer: fine) {
  .field:not(.is-on):hover .field__l { color: var(--ink); }
}
/* the answer's "$": 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; }
.cur.is-leaving { position: absolute; left: 0; top: 0; pointer-events: none; }   /* dropping out: takes no room (app.js curSwap) */
.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); }
.num-out .slot.was-blank { color: var(--ink-3); }   /* and a waiting 0 stays grey as it goes */


/* ------------------------------ the coin pad ----------------------------- */

/* M: the whole screen turns into a pad of coins, three across like the number
   pad's keys, with a slim bar on top and the search along the bottom */
.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--paper);
}
/* The pad is neutral, whatever coin you're on: Calc's own paper and greys, light or
   dark. The colour is left to the coins' logos (a coin's tint on the whole pad looked bad). */
.menu {
  --paper: #F2F1ED; --ink: #121211; --ink-2: #5E5D58; --ink-3: rgba(18, 18, 17, .26);
  --rule: rgba(18, 18, 17, .13); --hover: rgba(18, 18, 17, .035); --flood: rgba(18, 18, 17, .12);
  --accent: var(--ink);
}
:root[data-theme="dark"] .menu {
  --paper: #0E0E0D; --ink: #EDEBE6; --ink-2: #9C9A94; --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);
}
.menu[hidden] { display: none; }
/* the slim bar on top: what this is, where the prices come from, and the way out */
.menu__bar {
  display: flex;
  align-items: center;
  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);
  white-space: nowrap;
}
.menu__title {
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: var(--cap-track);
  text-transform: uppercase;
  color: var(--ink-2);
}
.menu__src { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; line-height: 1; color: var(--ink-2); }
.menu__src a { color: inherit; text-decoration: none; }
.menu__src a:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 359px) { .menu__src-l { display: none; } }   /* the narrowest phones: just the names */
.menu__x {
  flex: none;
  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, .search__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__src a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
}

/* the pad: rows of one height (--rows from app.js: 7 for 21 coins), so a search's
   few finds keep the same keys, at the top. Too short a screen: it scrolls. */
.pad {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 7), minmax(56px, 1fr));
  grid-auto-rows: minmax(56px, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.pad::-webkit-scrollbar { display: none; }
/* a coin: hairlines like the keys' (app.js marks the first column and the top row,
   which change with a search); its logo, name and ticker centered in the key */
.coin {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: var(--kp-y) 8px;
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  overflow: hidden;
}
.coin[hidden] { display: none; }
.coin.is-c1 { border-left: 0; padding-left: calc(8px + var(--safe-l)); }
.coin.is-c3 { padding-right: calc(8px + var(--safe-r)); }
.coin.is-r1 { border-top: 0; }
.coin__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
.coin__logo {
  display: block;
  width: clamp(26px, min(6vw, 4.6vh), 42px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;              /* round coins, like the one in the corner */
  box-shadow: 0 0 0 1px var(--rule);
  margin-bottom: clamp(7px, 1.2vh, 12px);
  -webkit-user-drag: none;
}
.coin__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--f-key);
  font-weight: calc(var(--w-key) + var(--w-adj));
  font-size: clamp(12px, min(3.4vw, 2.3vh), 18px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.coin__tk {
  margin-top: 5px;
  margin-right: calc(var(--cap-track) * -1);   /* trailing tracking: the letters themselves centered */
  font-size: 10px;
  line-height: 1;
  letter-spacing: var(--cap-track);
  color: var(--ink-2);
}
/* the coin you're on: an ink line along its foot */
.coin::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--ink); pointer-events: none;
  transform: scaleX(0); transform-origin: 0 50%;
}
.coin[aria-current="true"]::after { transform: none; }
/* under the pointer, or the keyboard: a faint ink wash (as Calc's list had) */
.coin:focus-visible { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.coin:focus-visible .coin__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .coin:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
}
.pad__none { grid-column: 1 / -1; grid-row: 1 / span 2; align-self: center; margin: 0; padding: 0 var(--g); text-align: center; font-size: 13px; color: var(--ink-2); }
.pad__none[hidden] { display: none; }

/* the search, along the bottom */
.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: calc(56px + var(--safe-b));
  padding: 0 calc(var(--kp-x) + var(--safe-r)) var(--safe-b) calc(var(--kp-x) + var(--safe-l));
  border-top: 1px solid var(--rule);
  cursor: text;
}
.search__ico { flex: none; fill: none; stroke: var(--ink-2); stroke-width: 1.4; stroke-linecap: round; transition: stroke .2s ease; }
.search:focus-within .search__ico { stroke: var(--ink); }
.search__in {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 16px;                 /* (iOS zooms in on anything smaller) */
  letter-spacing: .01em;
  caret-color: var(--accent);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: text;
  user-select: text;
}
.search__in::placeholder { color: var(--ink-2); opacity: 1; }
.search__in::-webkit-search-cancel-button, .search__in::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -17.5px;
  color: var(--ink-2);
}
.search__x[hidden] { display: none; }
.search__x:focus-visible { color: var(--ink); background: var(--hover); }
@media (hover: hover) and (pointer: fine) { .search__x:hover { color: var(--ink); } }
/* Windows high contrast: the pad's marks and focus stay visible */
@media (forced-colors: active) {
  .coin::after { background: Highlight; forced-color-adjust: none; }
  .coin:focus-visible { outline: 2px solid Highlight; outline-offset: -4px; }
}

/* ------------------------------ 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); }
  .key { --kp-y: 8px; }
  /* the input's label and value share one line */
  .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; }
  /* the pad: shorter keys, each coin's logo beside its name */
  .menu__bar { height: calc(36px + var(--safe-t)); }
  .pad { grid-template-rows: repeat(var(--rows, 7), minmax(44px, 1fr)); grid-auto-rows: minmax(44px, 1fr); }
  .coin__in { flex-direction: row; gap: 10px; }
  .coin__logo { width: 22px; margin: 0; }
  .coin__tk { display: none; }
  .search { min-height: calc(46px + var(--safe-b)); }
  .search__in { height: 46px; }
}
/* phone-height displays (iPhone SE and smaller): a tighter cell gives the answer room */
@media (max-height: 700px) and (min-height: 521px) {
  .field__in { gap: 6px; }
}
@media (max-height: 420px) {
  .field { padding-top: 5px; padding-bottom: 5px; }
}

/* ------------------------------ light / dark ---------------------------- */

/* D: the new theme swipes in from the right (View Transitions), with an accent
   line on its edge, drawn on its own layer above both (app.js swipe) */
.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; }
::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, .copy-cap, .search__ico { transition: none; }
}

/* The coin's Easter egg: tap it. The screen glitches and a rocket shakes its way
   up the middle, then fades: gone in a second and a half (app.js toTheMoon). Tap or Esc ends it. */
.moon { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; cursor: pointer; }
.moon[hidden] { display: none; }
.moon__scrim { position: absolute; inset: 0; background: rgba(8, 8, 7, .64); }
.moon__scrim::after {                              /* faint scanlines */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 3px);
}
.moon__stage { --sw: min(86vw, calc(72vh * .95), 620px); position: relative; width: var(--sw); aspect-ratio: 570 / 600; }
.moon__box { position: absolute; inset: 0; }
.moon__box img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.moon__words {                                     /* across the rocket, in pixel type (Silkscreen, loaded with the clip) */
  position: absolute; left: 0; right: 0; top: 41%; z-index: 1; margin: 0;
  font: 700 calc(var(--sw) * .074) / 1 Silkscreen, "Geist Mono", monospace;
  letter-spacing: .04em; text-align: center; white-space: nowrap; color: #fff;
  text-shadow: 0 .06em 0 rgba(0, 0, 0, .28);
  -webkit-font-smoothing: none;
}
.moon__slice { opacity: 0; }                        /* torn strips of the rocket, only in a glitch */