/* The calculator badge, the on-screen calculator (MaffsCalc, schools/assets/calculator.js) and the phone
   keypad (MaffsKeypad, schools/assets/keypad.js), canon §4.4. Moved out of theme.css on 9 Oct 2026 (contract
   SCI-CALC), which imports it, so every themed game gets it unchanged and a game that has not moved to the
   theme (Growth and Decay) can link it alone. Tokens only: --text --muted --border --surface --surface-alt
   --hint --wrong, and a game's --accent / --on-accent; the fonts come from --font-text / --font-num where set. */

/* The calculator tag (canon §4.4): one badge, on the start screen of a game whose roster
   Calculator field is "required", "not allowed" or "optional" ("untagged" shows nothing).
   Markup: <span class="calc-badge" data-calc="required">Calculator required</span>.
   Tokens only, so it takes either palette; --hint, --wrong and --muted all pass AA on
   --surface-alt (canon §7.5). */
.calc-badge {
  display: inline-flex;
  align-items: center;
  padding: .25em .7em;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--font-text);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.3;
}
.calc-badge[data-calc="required"] { border-color: var(--hint); color: var(--hint); }
.calc-badge[data-calc="not-allowed"] { border-color: var(--wrong); color: var(--wrong); }

/* The on-screen calculator, MaffsCalc (schools/assets/calculator.js, canon §4.4), on games whose
   Calculator field is "required". A toggle and a panel in the page flow: it never covers the
   question or the answer box (the page scrolls instead); on a wide screen it docks beside the card
   (below). Five columns of keys at least 44px square fit a 278px card (a 320px phone). Tokens only; a game's --accent and --on-accent colour the
   toggle and = when it sets them. */
.maffs-calc { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 100%; }
.maffs-calc-toggle {
  min-height: 44px;
  padding: .45rem 1.1rem;
  border-radius: 10px;
  border: 2px solid var(--accent, var(--text));
  background: var(--surface);
  color: var(--accent, var(--text));
  font-family: var(--font-text);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}
.maffs-calc-toggle::after { content: " \25be"; }
.maffs-calc-toggle.open::after { content: " \25b4"; }
.maffs-calc-panel {
  width: 100%;
  max-width: 340px;
  padding: .5rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
}
.maffs-calc-panel[hidden], .maffs-calc-rail[hidden] { display: none !important; }
.maffs-calc-rail { width: 100%; display: flex; justify-content: center; }
/* Docked (wide screens; MaffsCalc measures the room beside the card and adds .docked): the rail spans
   the card's height just to its right, out of the page flow, and the panel sticks inside it, so it
   stays in view while the page scrolls and the game column never moves. MaffsCalc sets the rail's
   width and left; .maffs-calc-host makes the card the rail's containing block. */
.maffs-calc-host { position: relative; }
.maffs-calc.docked .maffs-calc-rail { position: absolute; top: 0; bottom: 0; display: block; }
.maffs-calc.docked .maffs-calc-panel { position: sticky; top: 16px; max-width: none; }
.maffs-calc-panel:focus { outline: none; }
.maffs-calc-panel:focus-visible { outline: 2px solid var(--accent, var(--text)); outline-offset: 2px; }
.maffs-calc-screen {
  padding: .35rem .6rem;
  margin-bottom: .45rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-num);
  text-align: right;
}
.maffs-calc-expr, .maffs-calc-result { white-space: nowrap; overflow-x: auto; overflow-y: hidden; }
.maffs-calc-expr { min-height: 1.3em; font-size: .85rem; color: var(--muted); }
.maffs-calc-result { min-height: 1.4em; font-size: 1.35rem; font-weight: 700; color: var(--text); }
.maffs-calc-keys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.maffs-calc-key {
  min-height: 44px;
  min-width: 0;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-num);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.maffs-calc-key.op { color: var(--muted); }
.maffs-calc-key.wide { grid-column: span 2; }
/* The scientific block (canon §4.4 "scientific"): above the basic keys, smaller labels so sin⁻¹ fits a 44px key. */
.maffs-calc-sci { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.maffs-calc-sci .maffs-calc-key { font-size: .85rem; padding-left: 0; padding-right: 0; white-space: nowrap; }
.maffs-calc-mode { font-size: .7rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; align-self: flex-start; }
.maffs-calc-key.eq {
  grid-column: span 3;
  background: var(--accent, var(--text));
  border-color: var(--accent, var(--text));
  color: var(--on-accent, var(--surface));
}
.maffs-calc-key:active { background: var(--border); }
.maffs-calc-key.eq:active { opacity: .85; }
.maffs-calc-key:disabled { opacity: .28; cursor: not-allowed; }
.maffs-calc-screen { position: relative; display: flex; align-items: center; gap: .4rem; }
.maffs-calc-lines { flex: 1; min-width: 0; }
.maffs-calc-close { display: none; }

/* Phones (MaffsCalc adds .compact on a touch screen below the dock breakpoint; Jon, 4 Oct 2026): the
   Calculator button moves into the panel as a close key in the display, the display slims, keys are
   48px. With .answer-mode the keypad types into the calculator or the game's answer box, whichever is
   selected: a heavier border plus a "typing here" tag, never colour alone. */
.maffs-calc.compact.open .maffs-calc-toggle { display: none; }
.maffs-calc.compact .maffs-calc-close {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; margin: -.15rem 0 -.15rem -.3rem; padding: 0;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt);
  color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.maffs-calc.compact .maffs-calc-screen { padding: .15rem .45rem; margin-bottom: .35rem; }
.maffs-calc.compact .maffs-calc-expr { min-height: 1.1em; font-size: .75rem; }
.maffs-calc.compact .maffs-calc-result { min-height: 1.2em; font-size: 1.15rem; }
.maffs-calc.compact .maffs-calc-key { min-height: 48px; -webkit-tap-highlight-color: transparent; }
.maffs-calc.compact .maffs-calc-keys { gap: 5px; }
.maffs-calc.compact .maffs-calc-panel { padding: .4rem; }
.maffs-calc-screen.maffs-calc-selected, input.maffs-calc-selected, input.maffs-keypad-selected {
  border-color: var(--accent, var(--text)); outline: 2px solid var(--accent, var(--text)); outline-offset: 0;
}
.maffs-calc-answer-host, .maffs-keypad-answer-host { position: relative; }
.maffs-calc-cue, .maffs-keypad-cue {
  display: none; position: absolute; z-index: 1; padding: 0 .3em; border-radius: 4px;
  background: var(--surface); color: var(--text); font-family: var(--font-text);
  font-size: .62rem; font-weight: 700; line-height: 1.25; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; pointer-events: none;
}
.maffs-calc-screen .maffs-calc-cue { top: -.6em; right: .6rem; }
.maffs-calc-screen.maffs-calc-selected .maffs-calc-cue { display: block; }
.maffs-calc-cue-answer:not([hidden]), .maffs-keypad-cue-answer:not([hidden]) { display: block; }

/* The phone keypad, MaffsKeypad (schools/assets/keypad.js, canon §4.4): digits, the point, DEL and C
   (a minus where a game asks for one), typing into whichever answer box is marked. Drawn on touch screens
   only, with the look and sizes of the calculator's phone keypad: the same panel, five columns, 48px keys.
   MaffsCalc's answer mode marks its answer box through the same component, under its own class names. */
.maffs-keypad { width: 100%; display: flex; justify-content: center; }
.maffs-keypad[hidden] { display: none !important; }
.maffs-keypad-panel {
  width: 100%;
  max-width: 340px;
  padding: .4rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
}
.maffs-keypad-keys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.maffs-keypad-key {
  min-height: 48px;
  min-width: 0;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-num);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.maffs-keypad-key.op { color: var(--muted); }
.maffs-keypad-key.wide { grid-column: span 2; }
.maffs-keypad-key:active { background: var(--border); }
.maffs-keypad-key:disabled { opacity: .28; cursor: not-allowed; }