/*
 * The ZBA stage, carried over: device-native flat black with pure white ink
 * (paper white with black ink in light mode), SF Pro Ultralight, no motion.
 * The prompt sits where ZBA's currency readout sits, at the very top; what
 * you type is the numeral, dead-center in the visible viewport.
 */
:root {
  --bg: #000000;
  --ink: #ffffff;
  --caret: rgb(255 255 255 / 0.66);
  --soft: #1c1c1c;
  --faint: #999;
  --stack: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --ink: #000000;
    --caret: rgb(0 0 0 / 0.66);
    --soft: #f7f7f7;
    --faint: #777;
  }
}
@media (forced-colors: active) {
  :root { --bg: Canvas; --ink: CanvasText; --caret: CanvasText; --soft: Canvas; --faint: GrayText; }
  .peek { outline: 1px solid CanvasText; }
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

.stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  width: 100lvw;
  height: 100lvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--stack);
  cursor: default;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* The invisible real input is the whole tap target, so tapping anywhere
   summons the keyboard natively. Never opacity < 1 or pointer-events none:
   iOS can demote such an input to non-interactive. */
.input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  font-size: 16px;
  color: transparent;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  caret-color: transparent;
  cursor: default;
  -webkit-appearance: none;
  appearance: none;
  z-index: 3;
}
.input::selection { background: transparent; color: transparent; }
.input:focus, .input:focus-visible { outline: none; box-shadow: none; }

/* What you type: the numeral. Sized and placed by app.js. */
.word {
  position: absolute;
  left: 50%;
  top: var(--cy, 50%);
  transform: translate(-50%, -50%);
  width: var(--avail, 88vw);
  z-index: 1;
  text-align: center;
  font-weight: 100;
  font-size: var(--size, 96px);
  letter-spacing: -0.03em;
  line-height: 1.16;
  white-space: pre-wrap;
  text-wrap: balance;
  overflow-wrap: anywhere;
  font-optical-sizing: auto;
  font-synthesis: none;
  font-variant-numeric: slashed-zero;
  pointer-events: none;
  visibility: hidden;
}
.stage[data-ready="true"] .word { visibility: visible; }
.text {
  text-box: trim-both cap alphabetic;
}
/* Select all: the whole word as a solid inverted block, no tint. */
.stage[data-selected="true"] .text {
  background: var(--ink);
  color: var(--bg);
  /* The box is cap-trimmed; reach past it for ascenders and descenders. */
  padding: 0.1em 0.08em 0.26em;
  margin: -0.1em -0.08em -0.26em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.stage[data-selected="true"] .caret { visibility: hidden; }

/* The pill caret: 90% of cap height, width 3.5% of cap (3 to 7px). */
.caret {
  display: inline-block;
  width: var(--caret-w, 3px);
  height: var(--caret-h, 60px);
  margin-left: var(--caret-gap, 6px);
  vertical-align: var(--caret-drop, 0px);
  border-radius: 999px;
  background: var(--caret);
  opacity: 0.3;
}
.stage[data-empty="true"] .caret { margin-left: 0; }
.stage[data-focused="true"] .caret {
  opacity: 1;
  animation: blink 1060ms steps(1, end) infinite;
}
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* The prompt: ZBA's currency readout, at the very top, one quiet figure. */
.readout {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(env(safe-area-inset-top, 0px) + 0.375rem);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.6em;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  color: var(--ink);
  font-weight: 200;
  font-size: clamp(15px, var(--rest-cap, 96px) * 0.2, 26px);
  line-height: 1;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums slashed-zero;
  font-synthesis: none;
  white-space: nowrap;
  pointer-events: none;
}
.readout:empty { display: none; }
/* Hovering the prompt (or touching it) reveals the answer. The hit area
   reaches well past the glyphs; negative margins keep the layout unchanged. */
.readout { z-index: 4; }
.readout .prompt {
  pointer-events: auto;
  cursor: default;
  padding: 0.9em 1.4em;
  margin: -0.9em -1.4em;
  touch-action: manipulation;
}
.readout .answer {
  font-size: 0.78em;
  letter-spacing: 0.08em;
}

/* Peeking: ONE sheet, centered where the word sits, in the es.baronbegier.com
   language: a flat square, no radius, no border, no shadow, the stage's soft
   surface; a tiny spaced eyebrow, the word at regular weight with tight
   tracking, the notes in one column. The big word and the readout hide
   behind it so nothing is shown twice. */
.peek {
  position: absolute;
  left: 50%;
  top: var(--cy, 50%);
  transform: translate(-50%, -50%);
  z-index: 2;
  box-sizing: border-box;
  width: 550px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px - var(--kb, 0px));
  overflow: hidden;
  padding: 26px 32px 28px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--soft);
  color: var(--ink);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
  text-wrap: pretty;
}
.peek[hidden] { display: none; }
.stage[data-peek="true"] .word { visibility: hidden; }
/* The prompt goes clear, not hidden: its hover area must stay so leaving it closes the sheet. */
.stage[data-peek="true"] .readout { color: transparent; }
.peek-q {
  font-size: 10px;
  letter-spacing: 0.15em;
  font-weight: 550;
  line-height: 1.5;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.peek-a {
  margin: 25px 0 0;
  font-weight: 400;
  font-size: clamp(40px, 13vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.05em;
  overflow-wrap: anywhere;
}
.notes { margin-top: 26px; }

/* The family tree: the shared root on top, Latin and Old English under it,
   Spanish and English at the leaves. Spanish in ink, the Germanic side quiet.
   Type alone, no lines: alignment says it all. */
.tree {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 6px;
  max-width: 360px;
  margin: 0 auto 28px;
  padding: 0 0 26px;
  text-align: center;
  font-variant-ligatures: none;
}
.tree .root {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.tree .root::before { content: "*"; opacity: 0.6; margin-right: 0.1em; }
.tree .mid { font-size: 15px; color: var(--faint); }
.tree .leaf { font-size: 22px; letter-spacing: -0.025em; line-height: 1.2; }
.tree .leaf.es { color: var(--ink); }
.tree .leaf.en { color: var(--faint); }
.tree .en:empty, .tree .es:empty { visibility: hidden; }
.tree .mid.es::after, .tree .mid.en::after { content: ""; display: block; height: 10px; width: 1px; margin: 5px auto 0; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.tree .mid:empty::after { display: none; }

.notes .line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 16px;
  align-items: baseline;
  padding: 4px 0;
}
.notes .k {
  font-size: 10px;
  letter-spacing: 0.15em;
  font-weight: 550;
  line-height: 1.5;
  color: var(--faint);
  text-transform: uppercase;
}
.notes .v { grid-column: 2; }
.notes .v.quiet { color: var(--faint); }
.notes .v.say { font-size: 20px; letter-spacing: -0.02em; line-height: 1.4; color: var(--faint); }
.notes .say .syl.on { color: var(--ink); }
.notes .say .dot { margin: 0 0.12em; opacity: 0.5; }
.notes .say .remark { margin-left: 0.6em; font-size: 13px; letter-spacing: 0; }
.notes b { font-weight: 600; }

@media (max-width: 480px) {
  .peek { padding: 22px 22px 24px; }
  .tree { column-gap: 12px; }
  .tree .leaf { font-size: 19px; }
  .notes .line { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; }
}

/* Measures 100lvh: the stable height the keyboard never shrinks. */
.probe {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100vh;
  height: 100lvh;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .stage[data-focused="true"] .caret { animation: none; }
}