/* Paper Tape Calculator Suite — labs.llc estate edition. Built by build.py --estate; do not edit: change src/ and rebuild. Every rule is scoped under #ptc-app. */
/* ===== css/00-tokens.css (scoped under #ptc-app) ===== */
/* css/00-tokens.css — design tokens (CONTRACT 7.2, 7.3).
   Colour names are exact: PTC.theme.palette() reads them to draw Canvas and PDF exports with
   the colours on screen. Paper is the default theme; dark is opt-in via html[data-theme]. */

#ptc-app,
#ptc-app[data-theme="paper"] {
  --page: #EDE7DB; --page-grain: .06;
  --surface: #F7F3EA; --surface-2: #EFE8DA; --surface-3: #E4DBC9;
  --ink: #24221E; --ink-soft: #5A554B; --ink-faint: #655F52;
  --rule: #D6CCB9; --rule-strong: #BFB29B;
  --key: #FBF8F1; --key-edge: #D9CFBD; --key-op: #E6DDCB; --key-fn: #EFE8DA;
  --key-eq: #A8231C; --key-eq-ink: #FFF8EE;
  --accent: #A8231C;                /* ribbon red: totals, negatives, active edge */
  --focus: #2A5DB0;
  --tape: #FCFAF4; --tape-edge: #E9E2D2; --tape-ink: #2B2924; --tape-ink-soft: #6B6558;
  --tape-rule: #CFC5B2; --tape-red: #A8231C; --tape-glow: transparent;
  --shadow-1: 0 1px 0 rgba(60,45,20,.06), 0 1px 2px rgba(60,45,20,.10);
  --shadow-2: 0 2px 4px rgba(60,45,20,.08), 0 10px 24px -6px rgba(60,45,20,.18);
  --shadow-tape: 0 1px 1px rgba(60,45,20,.08), 0 18px 40px -12px rgba(60,45,20,.30);

  /* Derived, theme-aware helpers (not read by palette()). */
  --scrim: rgba(36, 30, 20, .28);
  --shadow-3: 0 2px 6px rgba(60,45,20,.10), 0 24px 48px -12px rgba(60,45,20,.32);
  --accent-soft: rgba(168, 35, 28, .09);
  --focus-ring: rgba(42, 93, 176, .28);
  --hover: rgba(60, 45, 20, .06);
  --active: rgba(60, 45, 20, .10);
  --grain-blend: multiply;
  color-scheme: light;
}

#ptc-app[data-theme="dark"] {
  --page: #121315; --page-grain: .035;
  --surface: #1A1B1E; --surface-2: #212226; --surface-3: #2A2B30;
  --ink: #ECE7DC; --ink-soft: #B2ACA0; --ink-faint: #9D978C;
  --rule: #303238; --rule-strong: #44474E;
  --key: #25272B; --key-edge: #34363C; --key-op: #2E3036; --key-fn: #292B30;
  --key-eq: #E9A54B; --key-eq-ink: #1A1206;
  --accent: #F0B25A;                /* amber glow */
  --focus: #86B4FF;
  --tape: #1D1E22; --tape-edge: #26272C; --tape-ink: #E8E3D7; --tape-ink-soft: #A39D91;
  --tape-rule: #3A3C42; --tape-red: #FF8A74; --tape-glow: rgba(240,178,90,.35);
  --shadow-1: 0 1px 0 rgba(0,0,0,.4);
  --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 12px 28px -8px rgba(0,0,0,.6);
  --shadow-tape: 0 0 0 1px rgba(255,255,255,.03), 0 20px 44px -14px rgba(0,0,0,.8);

  --scrim: rgba(0, 0, 0, .55);
  --shadow-3: 0 0 0 1px rgba(255,255,255,.04), 0 24px 56px -12px rgba(0,0,0,.85);
  --accent-soft: rgba(240, 178, 90, .12);
  --focus-ring: rgba(134, 180, 255, .30);
  --hover: rgba(255, 255, 255, .05);
  --active: rgba(255, 255, 255, .09);
  --grain-blend: screen;
  color-scheme: dark;
}

#ptc-app {
  /* Type (7.3). Every stack has real fallbacks: the page works with no network. */
  --font-tape: "Courier Prime", "Courier New", Courier, monospace;
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-1: .75rem; --fs-2: .8125rem; --fs-3: .875rem; --fs-4: 1rem;
  --fs-5: 1.125rem; --fs-6: 1.375rem; --fs-7: 1.75rem; --fs-8: 2.5rem;
  --lh-tight: 1.2; --lh: 1.5;
  --caps-track: .08em;

  /* Shape and space. */
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --hit: 44px;                      /* minimum touch target */

  /* Motion. */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 120ms; --t: 220ms; --t-slow: 450ms;

  /* Layers. */
  --z-sticky: 10; --z-overlay: 100; --z-toast: 200;

  /* Paper grain: a tileable feTurbulence noise, greyscale with alpha, no image files.
     Used on body (opacity from --page-grain) and by the tape (css/40-tape.css). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .38 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Fine horizontal fibres, a second faint layer so the paper doesn't read as TV static. */
  --grain-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .3' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .32 0 0 0 .9 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
/* ===== css/10-base.css (scoped under #ptc-app) ===== */
/* css/10-base.css — reset, the paper ground, typography, focus, utility classes, the shared
   button primitives (.btn, .icon-btn), scrollbars, reduced motion and theme transitions. */

/* ---------------------------------------------------------------- reset */
#ptc-app,
#ptc-app *,
#ptc-app::before,
#ptc-app *::before,
#ptc-app::after,
#ptc-app *::after { box-sizing: border-box; }
#ptc-app,
#ptc-app * { margin: 0; }
#ptc-app { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; hanging-punctuation: first last; }

#ptc-app img,
#ptc-app picture,
#ptc-app svg,
#ptc-app canvas,
#ptc-app video { display: block; max-width: 100%; }
#ptc-app button { font: inherit; color: inherit; letter-spacing: inherit; }
#ptc-app button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
#ptc-app button:disabled,
#ptc-app [aria-disabled="true"] { cursor: default; }
#ptc-app a { color: inherit; }
#ptc-app p,
#ptc-app h1,
#ptc-app h2,
#ptc-app h3,
#ptc-app h4,
#ptc-app h5,
#ptc-app h6 { overflow-wrap: break-word; }
#ptc-app h1,
#ptc-app h2,
#ptc-app h3,
#ptc-app h4,
#ptc-app h5,
#ptc-app h6 { text-wrap: balance; font-weight: 600; line-height: var(--lh-tight); }
#ptc-app p { text-wrap: pretty; }
#ptc-app ul[role],
#ptc-app ol[role] { list-style: none; padding: 0; }
#ptc-app table { border-collapse: collapse; }
#ptc-app [hidden] { display: none !important; }

/* ---------------------------------------------------------------- ground */
#ptc-app {
  background-color: var(--page);
  color: var(--ink);
}
#ptc-app {
  position: relative;
  font-family: var(--font-ui);
  font-size: var(--fs-4);
  line-height: var(--lh);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  /* No iOS grey flash on tap; our own :active states do the work. */
  -webkit-tap-highlight-color: transparent;
}
/* Paper grain: two noise layers fixed behind everything, so it never scrolls or repaints. */
#ptc-app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--grain), var(--grain-fibre);
  background-size: 220px 220px, 360px 360px;
  opacity: calc(var(--page-grain) * 3);
  mix-blend-mode: var(--grain-blend);
}
/* A soft desk-lamp falloff so the ground isn't a flat fill. */
#ptc-app::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 30% 0%, transparent 55%, rgba(60, 45, 20, .07));
}
#ptc-app[data-theme="dark"]::after {
  background: radial-gradient(120% 90% at 30% 0%, rgba(240, 178, 90, .025), transparent 50%, rgba(0, 0, 0, .35));
}

/* ---------------------------------------------------------------- type */
#ptc-app .caps {
  text-transform: uppercase;
  letter-spacing: var(--caps-track);
  font-size: var(--fs-1);
  font-weight: 500;
}
#ptc-app .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#ptc-app .tape-type { font-family: var(--font-tape); font-variant-numeric: tabular-nums; }
#ptc-app .num,
#ptc-app .tnum { font-variant-numeric: tabular-nums; }
#ptc-app .muted { color: var(--ink-soft); }
#ptc-app .faint { color: var(--ink-faint); }
#ptc-app kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: .8em;
  line-height: 1.5;
  text-align: center;
  color: var(--ink);
  background: var(--key);
  border: 1px solid var(--key-edge);
  border-radius: var(--r-1);
  box-shadow: 0 1px 0 var(--key-edge);
}
#ptc-app ::selection { background: var(--accent-soft); color: inherit; }

/* ---------------------------------------------------------------- icons */
#ptc-app svg.i {
  width: 20px;
  height: 20px;
  flex: none;
  overflow: visible;
}
#ptc-app .i-sm svg.i,
#ptc-app svg.i.i-sm { width: 16px; height: 16px; }
#ptc-app .i-lg svg.i,
#ptc-app svg.i.i-lg { width: 24px; height: 24px; }

/* ---------------------------------------------------------------- focus */
#ptc-app :focus { outline: none; }
#ptc-app :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* ---------------------------------------------------------------- utilities */
#ptc-app .visually-hidden,
#ptc-app .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
#ptc-app .skip-link {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--s-2));
  left: var(--s-2);
  z-index: calc(var(--z-toast) + 1);
  padding: var(--s-2) var(--s-4);
  font-weight: 600;
  font-size: var(--fs-3);
  color: var(--surface);
  background: var(--ink);
  border-radius: var(--r-2);
  text-decoration: none;
  box-shadow: var(--shadow-2);
  transform: translateY(calc(-100% - 24px));
  transition: transform var(--t) var(--ease);
}
#ptc-app .skip-link:focus,
#ptc-app .skip-link:focus-visible { transform: none; }

/* ---------------------------------------------------------------- buttons
   Shared primitives for dialogs, menus' openers and toolbars. Modes and the tape may extend
   them; calculator keys are .key (css/30-keys.css), not .btn. */
#ptc-app .ptc-btn {
  --btn-bg: var(--surface);
  --btn-ink: var(--ink);
  --btn-edge: var(--rule-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-4);
  font-size: var(--fs-3);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 1px solid var(--btn-edge);
  border-radius: var(--r-2);
  box-shadow: 0 1px 0 var(--btn-edge);
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  user-select: none;
  -webkit-user-select: none;
}
#ptc-app .ptc-btn:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
#ptc-app .ptc-btn:active { transform: translateY(1px); box-shadow: 0 0 0 var(--btn-edge); }
#ptc-app .ptc-btn:disabled,
#ptc-app .ptc-btn[aria-disabled="true"] { opacity: .5; box-shadow: none; transform: none; background-image: none; }
#ptc-app .ptc-btn--primary {
  --btn-bg: var(--ink);
  --btn-ink: var(--surface);
  --btn-edge: var(--ink);
}
#ptc-app[data-theme="dark"] .ptc-btn--primary { --btn-bg: var(--accent); --btn-ink: #1A1206; --btn-edge: #B9803A; }
#ptc-app .ptc-btn--danger {
  --btn-bg: var(--accent);
  --btn-ink: #FFF8EE;
  --btn-edge: #7E1812;
}
#ptc-app[data-theme="dark"] .ptc-btn--danger { --btn-bg: #E0705D; --btn-ink: #1C0B07; --btn-edge: #A94E3F; }
#ptc-app .ptc-btn--ghost { --btn-bg: transparent; --btn-edge: transparent; box-shadow: none; }
#ptc-app .ptc-btn .i { width: 18px; height: 18px; }
@media (pointer: coarse) { #ptc-app .ptc-btn { min-height: var(--hit); } }

#ptc-app .icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  color: var(--ink-soft);
  border-radius: var(--r-2);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#ptc-app .icon-btn:hover { color: var(--ink); background: var(--hover); }
#ptc-app .icon-btn:active { background: var(--active); }
#ptc-app .icon-btn[aria-pressed="true"],
#ptc-app .icon-btn[aria-expanded="true"] { color: var(--ink); background: var(--active); }
#ptc-app .icon-btn:disabled { opacity: .45; background: none; }
@media (pointer: coarse) { #ptc-app .icon-btn { width: var(--hit); height: var(--hit); } }

/* ---------------------------------------------------------------- scrollbars */
#ptc-app,
#ptc-app * { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
#ptc-app ::-webkit-scrollbar { width: 10px; height: 10px; }
#ptc-app ::-webkit-scrollbar-track { background: transparent; }
#ptc-app ::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border: 3px solid transparent;
  border-radius: 10px;
  background-clip: padding-box;
}
#ptc-app ::-webkit-scrollbar-thumb:hover { background-color: var(--ink-faint); }

/* ---------------------------------------------------------------- theme transition (7.4)
   PTC.theme.set adds .theme-anim to <html> for --t-slow so every surface crossfades together
   when the View Transitions API isn't available. */

/* With view transitions the new theme is revealed as a growing circle from the toggle; the
   default crossfade is switched off so only the clip-path animation (set from JS) runs. */




/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  #ptc-app,
#ptc-app *,
#ptc-app::before,
#ptc-app *::before,
#ptc-app::after,
#ptc-app *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}
/* ===== css/20-shell.css (scoped under #ptc-app) ===== */
/* css/20-shell.css — the app frame (CONTRACT 6, 7): grid layout at three widths, the topbar,
   the calculator navigation (sidebar ≥ 1180px, icon rail 760–1179px, scrolling strip < 760px)
   with its stamped active tab, the stage header, the machine-body panel every mode sits in,
   the mobile "Tape (n)" button and the keyboard shortcuts sheet. */

/* ---------------------------------------------------------------- frame */
#ptc-app .app {
  --nav-w: 248px;
  --panel-max: 560px;               /* a mode may widen its own: .app[data-mode="loan"] { --panel-max: 860px } */
  --gutter: 28px;
  display: grid;
  grid-template-columns: var(--nav-w) minmax(420px, 1fr) minmax(340px, 440px);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "top top top"
    "nav stage tape";
  height: 100vh;
  height: 100dvh;
  min-width: 0;
}

#ptc-app #topbar { grid-area: top; }
#ptc-app #mode-nav { grid-area: nav; }
#ptc-app #mode-stage { grid-area: stage; }
#ptc-app #tape-panel { grid-area: tape; min-width: 0; min-height: 0; }

/* ---------------------------------------------------------------- topbar */
#ptc-app .topbar {
  position: relative;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 60px;
  padding: 0 var(--s-4) 0 var(--s-5);
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--rule);
}
#ptc-app .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
#ptc-app .brand__mark { display: grid; place-items: center; flex: none; }
#ptc-app .brand__mark svg { width: 28px; height: 28px; }
#ptc-app .brand__slot { fill: var(--ink); }
#ptc-app .brand__paper { fill: var(--tape); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
#ptc-app .brand__ink { stroke: var(--ink-faint); stroke-width: 1.8; stroke-linecap: round; fill: none; }
#ptc-app .brand__total { stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; fill: none; }
#ptc-app .brand__name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  font-size: var(--fs-5);
  font-weight: 600;
  letter-spacing: -.012em;
  white-space: nowrap;
}
#ptc-app .brand__sub {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
#ptc-app .topbar__actions { display: flex; align-items: center; gap: 4px; flex: none; }
#ptc-app .topbar__btn { color: var(--ink-soft); }

/* Theme toggle: moon on paper (go dark), sun on dark (go paper). */
#ptc-app .theme-toggle .i { transition: transform var(--t-slow) var(--ease-out), opacity var(--t) var(--ease); }
#ptc-app .theme-toggle__sun { display: none; }
#ptc-app[data-theme="dark"] .theme-toggle__moon { display: none; }
#ptc-app[data-theme="dark"] .theme-toggle__sun { display: block; }
#ptc-app .theme-toggle:hover .i { transform: rotate(-18deg); }

/* The mobile jump to the tape (hidden when the tape is a column). */
#ptc-app .tape-jump {
  display: none;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 6px 0 10px;
  font-size: var(--fs-2);
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  box-shadow: 0 1px 0 var(--rule-strong);
}
#ptc-app .tape-jump__icon { display: grid; place-items: center; color: var(--ink-soft); }
#ptc-app .tape-jump__icon .i { width: 18px; height: 18px; }
#ptc-app .tape-jump__count {
  min-width: 22px;
  padding: 1px 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--surface);
  background: var(--ink);
  border-radius: var(--r-pill);
}
#ptc-app .tape-jump:active { transform: translateY(1px); box-shadow: none; }

/* ---------------------------------------------------------------- navigation (sidebar) */
#ptc-app .mode-nav {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-4) var(--s-3) var(--s-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--rule);
}

#ptc-app .mode-tab {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: 52px;
  padding: 7px 10px 7px 8px;
  color: var(--ink-soft);
  border-radius: 10px;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
#ptc-app .mode-tab__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--ink-soft);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#ptc-app .mode-tab__text { display: grid; min-width: 0; line-height: 1.25; }
#ptc-app .mode-tab__label { font-size: var(--fs-3); font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ptc-app .mode-tab__short { display: none; }
#ptc-app .mode-tab__blurb { font-size: var(--fs-1); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ptc-app .mode-tab__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  border: 1px solid var(--rule);
  border-radius: 5px;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

#ptc-app .mode-tab:hover { background: var(--hover); color: var(--ink); }
#ptc-app .mode-tab:hover .mode-tab__icon { color: var(--ink); }
#ptc-app .mode-tab:active { background: var(--active); }

/* The stamp: inverted ink, a 3px ribbon edge and a filled number badge. */
#ptc-app .mode-tab[aria-selected="true"] {
  color: var(--surface);
  background: var(--ink);
  box-shadow: inset 3px 0 0 var(--accent), var(--shadow-2);
}
#ptc-app .mode-tab[aria-selected="true"] .mode-tab__icon { color: var(--surface); background: rgba(255, 255, 255, .08); }
#ptc-app .mode-tab[aria-selected="true"] .mode-tab__label { color: var(--surface); font-weight: 600; }
#ptc-app .mode-tab[aria-selected="true"] .mode-tab__blurb { color: var(--surface); opacity: .62; }
#ptc-app .mode-tab[aria-selected="true"] .mode-tab__key {
  color: #FFF8EE;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
#ptc-app[data-theme="dark"] .mode-tab[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px rgba(255, 255, 255, .06), 0 8px 22px -10px rgba(240, 178, 90, .35); }
#ptc-app[data-theme="dark"] .mode-tab[aria-selected="true"] .mode-tab__icon { background: rgba(0, 0, 0, .07); }
#ptc-app[data-theme="dark"] .mode-tab[aria-selected="true"] .mode-tab__key { color: #1A1206; }
#ptc-app .mode-tab:focus-visible { outline-offset: 1px; }

/* ---------------------------------------------------------------- stage */
#ptc-app .stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: var(--s-5) var(--gutter) var(--s-7);
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
}
#ptc-app .stage > * { width: 100%; max-width: var(--panel-max); }

#ptc-app .stage-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  padding: 0 2px;
}
#ptc-app .stage-head__id { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
#ptc-app .stage-head__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow-1);
}
#ptc-app .stage-head__text { min-width: 0; }
#ptc-app .stage-head__title { font-size: var(--fs-6); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
#ptc-app .stage-head__blurb { font-size: var(--fs-2); color: var(--ink-soft); }
#ptc-app .stage-head__keys { display: flex; gap: 4px; flex: none; color: var(--ink-faint); padding-bottom: 3px; }
#ptc-app .stage-head__keys kbd { font-size: .75rem; }

/* The machine body every calculator sits in. */
#ptc-app .mode-panel {
  position: relative;
  padding: var(--s-5);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 70%, var(--surface-2)));
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--shadow-2);
  outline: none;
}
#ptc-app[data-theme="dark"] .mode-panel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), var(--shadow-2); }
#ptc-app .mode-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

#ptc-app .mode-error { padding: var(--s-4); border: 1px dashed var(--accent); border-radius: var(--r-2); }
#ptc-app .mode-error__title { font-weight: 600; color: var(--accent); }
#ptc-app .mode-error__body { margin-top: 4px; font-family: var(--font-mono); font-size: var(--fs-2); color: var(--ink-soft); }

/* Laptop-height windows (1440×900, 1280×800): the frame gives back its generous air so the
   calculator's entry, keypad and primary key sit in the first view. Keys keep their size. */
@media (min-width: 760px) and (max-height: 920px) {
  #ptc-app .stage { padding-top: var(--s-3); padding-bottom: var(--s-5); }
  #ptc-app .stage-head { margin-bottom: 10px; }
  #ptc-app .stage-head__icon { width: 34px; height: 34px; border-radius: 9px; }
  #ptc-app .stage-head__title { font-size: var(--fs-5); }
  #ptc-app .mode-panel { padding: 18px; }
}

/* ---------------------------------------------------------------- shortcuts sheet */
#ptc-app .sheet__lead { margin-bottom: var(--s-4); color: var(--ink-soft); }
#ptc-app .sheet__grid { columns: 2 260px; column-gap: 32px; }
#ptc-app .sheet__section { break-inside: avoid; margin-bottom: var(--s-5); }
#ptc-app .sheet__title {
  margin-bottom: 4px;
  padding-bottom: 6px;
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px dashed var(--rule-strong);
}
#ptc-app .sheet__section--current .sheet__title { color: var(--accent); }
#ptc-app .sheet__list { margin: 0; }
#ptc-app .sheet__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
}
#ptc-app .sheet__row:last-child { border-bottom: 0; }
#ptc-app .sheet__row dt { flex: none; }
#ptc-app .sheet__row dd { margin: 0; font-size: var(--fs-2); text-align: right; color: var(--ink-soft); }
#ptc-app .sheet__keys { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px; }
#ptc-app .sheet__dots { color: var(--ink-faint); font-size: var(--fs-2); }
#ptc-app .sheet__note { margin-top: 6px; font-size: var(--fs-1); color: var(--ink-faint); }

/* ---------------------------------------------------------------- 760–1179px: icon rail */
@media (max-width: 1179px) {
  #ptc-app .app {
    --nav-w: 76px;
    --gutter: 20px;
    grid-template-columns: var(--nav-w) minmax(0, 1fr) minmax(300px, 380px);
  }
  #ptc-app .brand__sub { display: none; }
  #ptc-app .mode-nav {
    align-items: center;
    gap: 4px;
    padding: var(--s-3) 0;
    overflow: visible;             /* tooltips escape the rail */
  }
  #ptc-app .mode-tab {
    grid-template-columns: 1fr;
    justify-items: center;
    width: 56px;
    min-height: 48px;
    padding: 0;
  }
  #ptc-app .mode-tab__icon { width: 40px; height: 40px; }
  #ptc-app .mode-tab__blurb { display: none; }
  /* Numbers sit as a small badge on the icon's corner. */
  /* Only the selected tab carries its number, as a badge on the icon's corner. */
  #ptc-app .mode-tab__key {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 17px;
    height: 16px;
    padding: 0 4px;
    font-size: .625rem;
    visibility: hidden;
  }
  #ptc-app .mode-tab[aria-selected="true"] .mode-tab__key { visibility: visible; }
  /* The label becomes a tooltip. */
  #ptc-app .mode-tab__text {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    z-index: 5;
    padding: 6px 10px;
    white-space: nowrap;
    background: var(--ink);
    border-radius: 6px;
    box-shadow: var(--shadow-2);
    opacity: 0;
    pointer-events: none;
    transform: translate(-4px, -50%);
    transition: opacity var(--t-fast) var(--ease), transform var(--t) var(--ease-out);
  }
  #ptc-app .mode-tab__text .mode-tab__label { color: var(--surface); font-weight: 500; }
  #ptc-app .mode-tab:hover .mode-tab__text,
#ptc-app .mode-tab:focus-visible .mode-tab__text { opacity: 1; transform: translate(0, -50%); }
  #ptc-app .mode-tab[aria-selected="true"],
#ptc-app[data-theme="dark"] .mode-tab[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--accent), var(--shadow-1); }
  #ptc-app .mode-tab[aria-selected="true"] .mode-tab__icon,
#ptc-app[data-theme="dark"] .mode-tab[aria-selected="true"] .mode-tab__icon { background: transparent; }
  #ptc-app .mode-tab[aria-selected="true"] .mode-tab__key { border-color: var(--ink); }
  #ptc-app .mode-panel { padding: var(--s-4); }
}
/* A short rail can't show all eleven tabs: scroll it (tooltips then clip at the edge). */
@media (max-width: 1179px) and (min-width: 760px) and (max-height: 640px) {
  #ptc-app .mode-nav { overflow-y: auto; }
}

/* ---------------------------------------------------------------- < 760px: stacked */
@media (max-width: 759px) {
  #ptc-app .app {
    --gutter: 16px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "top" "nav" "stage" "tape";
    height: auto;
    min-height: 100dvh;
  }
  #ptc-app .topbar {
    position: sticky;
    top: 0;
    min-height: 56px;
    padding: env(safe-area-inset-top, 0px) 10px 0 var(--gutter);
    background: color-mix(in srgb, var(--page) 88%, transparent);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
  }
  #ptc-app .brand__name { font-size: var(--fs-4); }
  #ptc-app .tape-jump { display: inline-flex; }

  #ptc-app .mode-nav {
    flex-direction: row;
    align-items: stretch;
    gap: 6px;
    padding: 10px var(--gutter);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    /* Fade the strip's edges so it reads as scrollable. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 20px), transparent);
  }
  #ptc-app .mode-nav::-webkit-scrollbar { display: none; }
  #ptc-app .mode-tab {
    flex: none;
    grid-template-columns: auto auto;
    column-gap: 6px;
    width: auto;
    min-height: 40px;
    padding: 0 12px 0 8px;
    scroll-snap-align: start;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
  }
  #ptc-app .mode-tab__icon { width: 24px; height: 24px; }
  #ptc-app .mode-tab__icon .i { width: 18px; height: 18px; }
  #ptc-app .mode-tab__text {
    position: static;
    padding: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
  }
  #ptc-app .mode-tab__label { display: none; }
  #ptc-app .mode-tab__short { display: block; font-size: var(--fs-2); font-weight: 600; color: var(--ink); }
  #ptc-app .mode-tab__key { display: none; }
  #ptc-app .mode-tab[aria-selected="true"],
#ptc-app[data-theme="dark"] .mode-tab[aria-selected="true"] {
    border-color: var(--ink);
    box-shadow: inset 0 -3px 0 var(--accent), var(--shadow-1);
  }
  #ptc-app .mode-tab[aria-selected="true"] .mode-tab__short { color: var(--surface); }

  #ptc-app .stage { padding: var(--s-4) var(--gutter) var(--s-5); overflow: visible; }
  #ptc-app .stage-head { margin-bottom: var(--s-3); }
  #ptc-app .stage-head__icon { width: 34px; height: 34px; }
  #ptc-app .stage-head__title { font-size: var(--fs-5); }
  #ptc-app .stage-head__keys { display: none; }
  #ptc-app .mode-panel { padding: 14px; border-radius: 16px; }
  #ptc-app #tape-panel { scroll-margin-top: 64px; }
}
@media (max-width: 400px) {
  #ptc-app .brand__mark svg { width: 24px; height: 24px; }
  #ptc-app .brand__name { font-size: .9375rem; }
}
@media (pointer: coarse) {
  #ptc-app .mode-tab { min-height: var(--hit); }
}
/* ===== css/30-keys.css (scoped under #ptc-app) ===== */
/* css/30-keys.css — the shared controls of js/20-ui.js (CONTRACT 5.3, 7.5): calculator keys with
   travel and keyboard flash, the display window, fields (number, money, percent, date mask),
   pickers, segmented controls, switches and steppers. Every mode uses these. */

/* ---------------------------------------------------------------- keypad */
#ptc-app .keypad {
  --key-h: 54px;
  --key-gap: 8px;
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: var(--key-gap);
}

#ptc-app .key {
  --key-bg: var(--key);
  --key-ink: var(--ink);
  --key-lip: var(--key-edge);
  --key-shine: rgba(255, 255, 255, .75);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: var(--key-h);
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--key-ink);
  background-color: var(--key-bg);
  border: 1px solid var(--key-lip);
  border-radius: 10px;
  /* The lip: a 2px ledge below the keycap plus a faint top highlight. */
  box-shadow: 0 2px 0 var(--key-lip), inset 0 1px 0 var(--key-shine);
  transition: transform 70ms var(--ease), box-shadow 70ms var(--ease), background-color var(--t-fast) var(--ease);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
#ptc-app[data-theme="dark"] .key { --key-shine: rgba(255, 255, 255, .05); }
#ptc-app .key:hover { background-image: linear-gradient(var(--hover), var(--hover)); }

/* Travel: down 1px, the lip shrinks, a faint inner shade. */
#ptc-app .key:active,
#ptc-app .key.is-pressed {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--key-lip), inset 0 2px 4px rgba(40, 30, 10, .12);
  background-image: linear-gradient(var(--active), var(--active));
}
#ptc-app[data-theme="dark"] .key:active,
#ptc-app[data-theme="dark"] .key.is-pressed { box-shadow: 0 1px 0 var(--key-lip), inset 0 2px 5px rgba(0, 0, 0, .45); }
/* Keyboard presses also ring in the focus colour, so a key typed on the keyboard is unmistakable. */
#ptc-app .key.is-pressed { outline: 2px solid var(--focus); outline-offset: 2px; }
#ptc-app .key:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#ptc-app .key:disabled { opacity: .42; box-shadow: none; transform: none; background-image: none; cursor: default; }

#ptc-app .key__label { pointer-events: none; }
/* Symbols the mono face draws small (⌫) use the UI face at a larger size. */
#ptc-app .key--glyph { font-family: var(--font-ui); font-size: 1.25rem; }
#ptc-app .key__icon { display: grid; place-items: center; }
#ptc-app .key__sub {
  position: absolute;
  right: 12px;
  font-family: var(--font-ui);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#ptc-app .key--op { --key-bg: var(--key-op); font-size: 1.375rem; }
#ptc-app .key--fn { --key-bg: var(--key-fn); font-size: 1.0625rem; color: var(--ink-soft); }
#ptc-app .key--fn:hover,
#ptc-app .key--op:hover { color: var(--ink); }
#ptc-app .key--danger { --key-bg: var(--key-fn); color: var(--accent); font-family: var(--font-ui); font-size: 1rem; font-weight: 600; }
#ptc-app[data-theme="dark"] .key--danger { color: var(--tape-red); }
#ptc-app .key--mem {
  --key-bg: transparent;
  --key-h: 32px;
  font-family: var(--font-ui);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-soft);
  box-shadow: 0 1px 0 var(--key-lip);
}
#ptc-app .key--mem:active,
#ptc-app .key--mem.is-pressed { box-shadow: none; }
#ptc-app .key--eq {
  --key-bg: var(--key-eq);
  --key-ink: var(--key-eq-ink);
  --key-lip: #6F140F;
  --key-shine: rgba(255, 255, 255, .22);
  font-size: 1.625rem;
}
/* The print bar: one height in every calculator. Keypad calculators keep "=" in the mono face;
   form calculators say what they print ("Print payment") in the UI face. Both carry ENTER. */
#ptc-app { --key-eq-h: 50px; }
#ptc-app .keypad > .key--eq { --key-h: var(--key-eq-h); }
#ptc-app .key--eq.key--verb { font-family: var(--font-ui); font-size: var(--fs-4); font-weight: 600; letter-spacing: .005em; }
#ptc-app .key--eq .key__sub { top: 50%; transform: translateY(-50%); }
#ptc-app[data-theme="dark"] .key--eq { --key-lip: #9A6524; --key-shine: rgba(255, 255, 255, .35); box-shadow: 0 2px 0 var(--key-lip), inset 0 1px 0 var(--key-shine), 0 6px 24px -10px rgba(240, 178, 90, .55); }
#ptc-app .key--eq:hover { background-image: linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)); }

@media (pointer: coarse) {
  #ptc-app .key { min-height: max(var(--key-h), var(--hit)); }
}

/* ---------------------------------------------------------------- display window */
#ptc-app .display {
  position: relative;
  display: grid;
  align-content: end;
  min-width: 0;
  padding: 12px 16px 8px;
  color: var(--tape-ink);
  background-color: var(--tape);
  background-image: var(--grain);
  background-size: 220px 220px;
  background-blend-mode: soft-light;
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  box-shadow: inset 0 2px 5px rgba(60, 45, 20, .13), inset 0 -1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(255, 255, 255, .7);
}
#ptc-app[data-theme="dark"] .display {
  background-color: #0F1012;
  background-image: none;
  border-color: #2C2D32;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 255, 255, .04);
}
#ptc-app .display__flags { position: absolute; top: 10px; left: 12px; display: flex; gap: 5px; align-items: center; }
#ptc-app .display__flag {
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--tape);
  background: var(--tape-ink);
  border-radius: 3px;
}
#ptc-app[data-theme="dark"] .display__flag { color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(240, 178, 90, .25); }
#ptc-app .display__expr {
  display: flex;
  justify-content: flex-end;     /* long expressions keep their end in view */
  min-height: 1.6em;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--fs-4);
  font-variant-numeric: tabular-nums;
  white-space: pre;
  color: var(--tape-ink-soft);
}
#ptc-app .display__main-wrap { display: flex; justify-content: flex-end; min-width: 0; overflow: hidden; }
#ptc-app .display__main {
  --fit: 1;
  font-family: var(--font-mono);
  font-size: calc(2.75rem * var(--fit));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--tape-ink);
  transition: color var(--t-fast) var(--ease);
}
#ptc-app .display[data-tone~="preview"] .display__main { color: var(--tape-ink-soft); }
/* A worked example shown before anything is typed: faint, light, clearly not a result. */
#ptc-app .display[data-tone~="example"] .display__main { color: var(--ink-faint); font-weight: 400; }
#ptc-app .display[data-tone~="example"] .display__expr { color: var(--ink-faint); font-style: italic; }
#ptc-app .display[data-tone~="negative"] .display__main { color: var(--tape-red); }
#ptc-app .display[data-tone~="total"] .display__main { font-weight: 500; }
#ptc-app[data-theme="dark"] .display[data-tone~="total"] .display__main { color: #F6DDB2; text-shadow: 0 0 22px var(--tape-glow), 0 0 2px rgba(240, 178, 90, .4); }
#ptc-app[data-theme="dark"] .display[data-tone~="total"][data-tone~="negative"] .display__main { color: var(--tape-red); text-shadow: 0 0 20px rgba(255, 138, 116, .3); }
#ptc-app .display[data-tone="error"] .display__main { color: var(--tape-red); font-size: calc(2.25rem * var(--fit)); }
#ptc-app .display__hint {
  min-height: 1.35em;
  font-size: var(--fs-1);
  text-align: right;
  color: var(--tape-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#ptc-app .display[data-tone="error"] .display__hint { color: var(--tape-red); font-weight: 500; }
#ptc-app .display.is-nudge { animation: ptc-nudge 220ms var(--ease); }

@keyframes ptc-nudge {
  0%, 100% { transform: none; }
  25% { transform: translateX(-3px); }
  60% { transform: translateX(2px); }
}

/* ---------------------------------------------------------------- fields */
#ptc-app .ptc-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
#ptc-app .field__label,
#ptc-app .picker__label {
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--ink-soft);
}
#ptc-app .field__box {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  cursor: text;
  background: var(--tape);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(60, 45, 20, .08);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
#ptc-app[data-theme="dark"] .field__box { background: #111214; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); }
#ptc-app .field__box:hover { border-color: var(--ink-faint); }
#ptc-app .field__value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--fs-5);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: pre;
  color: var(--tape-ink);
  outline: none;
}
#ptc-app .field__box:has(.field__value:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
#ptc-app .field__text { padding: 1px 1px; border-radius: 3px; }
#ptc-app .field__affix { flex: none; font-family: var(--font-mono); font-size: var(--fs-4); color: var(--ink-faint); }
#ptc-app .field__placeholder,
#ptc-app .field__ghost { color: var(--ink-faint); }
/* The YYYY-MM-DD mask is readable text (≥ 4.5:1): it tells you what to type. Typed digits use
   the full tape ink, so the two still read apart. */
#ptc-app .field__digit.is-mask,
#ptc-app .field__sep.is-mask { color: var(--ink-faint); font-weight: 400; }
#ptc-app .field__caret {
  display: none;
  flex: none;
  width: 2px;
  height: 1.25em;
  margin-left: 2px;
  background: var(--focus);
  border-radius: 1px;
  animation: ptc-caret 1.1s steps(1) infinite;
}
#ptc-app .ptc-field.is-active .field__box { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring), inset 0 1px 2px rgba(60, 45, 20, .06); }
#ptc-app .ptc-field.is-active .field__caret { display: block; }
/* Freshly activated: the value reads as selected; the next digit replaces it. */
#ptc-app .ptc-field.is-active.is-fresh .field__text { background: var(--focus-ring); }
#ptc-app .ptc-field.is-active.is-fresh .field__caret { display: none; }
#ptc-app .field__hint { min-height: 1.3em; font-size: var(--fs-1); line-height: 1.3; color: var(--ink-faint); }
#ptc-app .ptc-field.is-invalid .field__box { border-color: var(--accent); }
#ptc-app .ptc-field.is-invalid.is-active .field__box { box-shadow: 0 0 0 3px var(--accent-soft); }
#ptc-app .ptc-field.is-invalid .field__hint { color: var(--accent); font-weight: 500; }
#ptc-app[data-theme="dark"] .ptc-field.is-invalid .field__hint { color: var(--tape-red); }
#ptc-app .ptc-field.is-reject .field__box { animation: ptc-nudge 220ms var(--ease); }
#ptc-app .field__steps { display: flex; gap: 4px; }
#ptc-app .field__step {
  flex: 1 1 0;
  min-width: 0;
  min-height: 28px;
  padding: 0 4px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#ptc-app .field__step:hover { color: var(--ink); background: var(--surface-3); }
#ptc-app .field__step:active { transform: translateY(1px); }
@media (pointer: coarse) { #ptc-app .field__step { min-height: 36px; } }

@keyframes ptc-caret { 50% { opacity: 0; } }

/* ---------------------------------------------------------------- picker */
#ptc-app .picker { display: grid; gap: 6px; min-width: 0; align-content: start; }
#ptc-app .picker__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 10px 0 12px;
  font-size: var(--fs-3);
  font-weight: 500;
  text-align: left;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  box-shadow: 0 1px 0 var(--rule-strong);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
#ptc-app[data-theme="dark"] .picker__button { background: var(--key); }
#ptc-app .picker__button:hover { border-color: var(--ink-faint); }
#ptc-app .picker__button:active { transform: translateY(1px); box-shadow: none; }
#ptc-app .picker__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ptc-app .picker__chev { display: grid; place-items: center; flex: none; color: var(--ink-faint); transition: transform var(--t) var(--ease); }
#ptc-app .picker__chev .i { width: 16px; height: 16px; }
#ptc-app .picker__button[aria-expanded="true"] .picker__chev { transform: rotate(180deg); }
/* The listbox keeps DOM focus while its active option shows the ring (aria-activedescendant). */
#ptc-app .listbox.ov-panel:focus,
#ptc-app .listbox.ov-panel:focus-visible { outline: none; }

/* ---------------------------------------------------------------- segmented */
#ptc-app .segmented {
  display: inline-flex;
  max-width: 100%;
  padding: 3px;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--surface-3);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
#ptc-app .segmented::-webkit-scrollbar { display: none; }
#ptc-app .segmented__option {
  flex: 1 0 auto;
  min-height: 32px;
  padding: 0 12px;
  font-size: var(--fs-2);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  color: var(--ink-soft);
  border-radius: 7px;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
#ptc-app .segmented__option:hover { color: var(--ink); }
#ptc-app .segmented__option[aria-checked="true"] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-1); }
#ptc-app[data-theme="dark"] .segmented__option[aria-checked="true"] { background: var(--key); box-shadow: 0 0 0 1px var(--rule-strong); }
@media (pointer: coarse) { #ptc-app .segmented__option { min-height: 40px; } }

/* ---------------------------------------------------------------- toggle (switch) */
#ptc-app .toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  font-size: var(--fs-3);
  color: var(--ink);
  border-radius: var(--r-1);
}
#ptc-app .toggle__track {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  background: var(--rule-strong);
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15);
  transition: background-color var(--t) var(--ease);
}
#ptc-app .toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  transition: transform var(--t) var(--ease-out);
}
#ptc-app .toggle[aria-checked="true"] .toggle__track { background: var(--ink); }
#ptc-app[data-theme="dark"] .toggle[aria-checked="true"] .toggle__track { background: var(--accent); }
#ptc-app[data-theme="dark"] .toggle__thumb { background: #F1ECE1; }
#ptc-app .toggle[aria-checked="true"] .toggle__thumb { transform: translateX(16px); }

/* ---------------------------------------------------------------- stepper */
#ptc-app .stepper {
  display: inline-flex;
  flex: none;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  box-shadow: 0 1px 0 var(--rule-strong);
}
#ptc-app[data-theme="dark"] .stepper { background: var(--key); }
#ptc-app .stepper__btn { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink-soft); }
#ptc-app .stepper__btn + .stepper__btn { border-left: 1px solid var(--rule); }
#ptc-app .stepper__btn:hover { color: var(--ink); background: var(--hover); }
#ptc-app .stepper__btn:active { background: var(--active); }
#ptc-app .stepper__btn .i { width: 16px; height: 16px; }
@media (pointer: coarse) { #ptc-app .stepper__btn { width: var(--hit); height: var(--hit); } }
/* ===== css/40-tape.css (scoped under #ptc-app) ===== */
/* css/40-tape.css — the paper tape panel (CONTRACT 9.1): header and toolbar, the printer head,
   the roll (paper grain, torn zigzag end, soft shadow that follows the tear), day separators,
   lines with dot-leader details, negative and total styling, hover tools, the feed animation,
   the empty stub and the history-off banner.
   Paper mode is a receipt from an office adding machine: warm paper, typewriter ink, ribbon-red
   totals and negatives. Dark mode is thermal paper at night: charcoal stock, pale print and a
   soft amber glow on results. */

#ptc-app #tape-panel { min-width: 0; min-height: 0; }

#ptc-app .ptc-tape {
  /* Tape-local tokens (theme-aware; the contract tokens stay the source of colour). */
  --tape-hl: rgba(168, 35, 28, .075);
  --tape-hl-strong: rgba(214, 160, 60, .30);
  --tape-bleed: 0 0 .6px rgba(43, 41, 36, .55);           /* ink soaking into the fibres */
  --tape-result-shadow: var(--tape-bleed);
  --tape-grain-opacity: .2;
  --tape-grain-blend: multiply;
  --tape-paper-shadow: drop-shadow(0 1px 1px rgba(60, 45, 20, .10)) drop-shadow(0 12px 14px rgba(60, 45, 20, .16));
  --head-top: #3B3731;
  --head-bottom: #24211D;
  --head-ink: #CFC6B4;
  --head-faint: #8C8475;
  --led-ready: #8DC06B;
  --led-paused: #E4533D;
  --led-busy: #F0B25A;

  container-type: inline-size;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  color: var(--ink);
}
#ptc-app[data-theme="dark"] .ptc-tape {
  --tape-hl: rgba(240, 178, 90, .10);
  --tape-hl-strong: rgba(240, 178, 90, .22);
  --tape-bleed: 0 0 1px rgba(232, 227, 215, .22);
  --tape-result-shadow: 0 0 12px var(--tape-glow), 0 0 2px rgba(240, 178, 90, .45);
  --tape-grain-opacity: .12;
  --tape-grain-blend: screen;
  --tape-paper-shadow: drop-shadow(0 0 1px rgba(255, 255, 255, .05)) drop-shadow(0 14px 18px rgba(0, 0, 0, .65));
  --head-top: #2C2D32;
  --head-bottom: #17181B;
  --head-ink: #B9B3A7;
  --head-faint: #6F6B63;
}

/* ---------------------------------------------------------------- header */
#ptc-app .tape__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-2);
}
#ptc-app .tape__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-4);
  font-weight: 600;
  letter-spacing: -.005em;
}
#ptc-app .tape__title .tape-ico { color: var(--ink-soft); }
#ptc-app .tape__count {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: var(--caps-track);
  font-variant-numeric: tabular-nums;
}
#ptc-app .tape-ico { display: inline-grid; place-items: center; flex: none; }
#ptc-app .tape-ico .i { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- toolbar */
#ptc-app .tape__tools {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--s-4) var(--s-3);
}
#ptc-app .tape__tools-group { display: flex; gap: 6px; }
#ptc-app .tape__tools-sep { width: 1px; height: 20px; margin: 0 2px; background: var(--rule); }
#ptc-app .tape__tools-spacer { flex: 1; }

#ptc-app .tape-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  font-size: var(--fs-2);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
#ptc-app .tape-tool:hover:not(:disabled) { color: var(--ink); border-color: var(--rule-strong); background-image: linear-gradient(var(--hover), var(--hover)); }
#ptc-app .tape-tool:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
#ptc-app .tape-tool:disabled { opacity: .45; box-shadow: none; }
#ptc-app .tape-tool[aria-expanded="true"] { color: var(--ink); background: var(--surface-3); border-color: var(--rule-strong); }
#ptc-app .tape-tool .i-chevron { width: 14px; height: 14px; margin-right: -3px; color: var(--ink-faint); }
#ptc-app .tape-tool--icon { width: 34px; padding: 0; }
#ptc-app .tape-tool--danger:hover:not(:disabled) { color: var(--accent); }
#ptc-app[data-theme="dark"] .tape-tool--danger:hover:not(:disabled) { color: var(--tape-red); }

#ptc-app .tape-split { display: inline-flex; }
#ptc-app .tape-split__main { border-radius: var(--r-2) 0 0 var(--r-2); }
#ptc-app .tape-split__more { width: 26px; padding: 0; margin-left: -1px; border-radius: 0 var(--r-2) var(--r-2) 0; }
#ptc-app .tape-split__more .i-chevron { margin: 0; }
#ptc-app .tape-split > :focus-visible { position: relative; z-index: 1; }

/* History / sound switches: an icon and a tiny track, so state reads without colour alone. */
#ptc-app .tape-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 8px 0 7px;
  color: var(--ink-faint);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 17px;
  box-shadow: var(--shadow-1);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
#ptc-app .tape-switch:hover { color: var(--ink); border-color: var(--rule-strong); }
#ptc-app .tape-switch:focus-visible { border-radius: 17px; }
#ptc-app .tape-switch .i { width: 18px; height: 18px; }
#ptc-app .tape-switch__icon { display: grid; place-items: center; }
#ptc-app .tape-switch__icon--on { display: none; }
#ptc-app .tape-switch[aria-checked="true"] { color: var(--ink); }
#ptc-app .tape-switch[aria-checked="true"] .tape-switch__icon--on { display: grid; }
#ptc-app .tape-switch[aria-checked="true"] .tape-switch__icon--off { display: none; }
#ptc-app .tape-switch__track {
  position: relative;
  width: 22px;
  height: 12px;
  border-radius: 6px;
  background: var(--rule-strong);
  transition: background-color var(--t) var(--ease);
}
#ptc-app .tape-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  transition: transform var(--t) var(--ease-out);
}
#ptc-app .tape-switch[aria-checked="true"] .tape-switch__track { background: var(--ink); }
#ptc-app .tape-switch[aria-checked="true"] .tape-switch__knob { transform: translateX(10px); }
#ptc-app[data-theme="dark"] .tape-switch[aria-checked="true"] .tape-switch__track { background: var(--accent); }
#ptc-app[data-theme="dark"] .tape-switch[aria-checked="true"] .tape-switch__knob { background: #1A1206; }

@media (pointer: coarse) {
  #ptc-app .tape-tool,
#ptc-app .tape-switch { height: 40px; }
  #ptc-app .tape-tool--icon { width: 40px; }
  #ptc-app .tape-switch { border-radius: 20px; }
}
/* Narrow panels: labels go (icons carry names), switches drop their track. */
@container (max-width: 420px) {
  #ptc-app .tape__tools { gap: 5px; }
  #ptc-app .tape__tools-group { gap: 5px; }
  #ptc-app .tape-tool__text { display: none; }
  #ptc-app .tape__tools-sep { display: none; }
  #ptc-app .tape-split__main { width: 34px; padding: 0; }
}
@container (max-width: 380px) {
  #ptc-app .tape-switch { padding: 0 8px; }
  #ptc-app .tape-switch__track { display: none; }
  #ptc-app .tape-switch[aria-checked="true"] { background: var(--surface-3); border-color: var(--rule-strong); }
}
@media (pointer: coarse) {
  @container (max-width: 420px) { #ptc-app .tape-split__main { width: 40px; } }
}

/* ---------------------------------------------------------------- history-off banner */
#ptc-app .tape__banner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 var(--s-4) var(--s-3);
  padding: 6px 6px 6px 10px;
  font-size: var(--fs-2);
  line-height: 1.35;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-2);
}
#ptc-app .tape__banner .tape-ico { color: var(--accent); }
#ptc-app[data-theme="dark"] .tape__banner .tape-ico { color: var(--tape-red); }
#ptc-app .tape__banner-text { flex: 1; }
#ptc-app .tape__banner-btn {
  flex: none;
  min-height: 30px;
  padding: 0 10px;
  font-weight: 600;
  color: var(--ink);
  border-radius: 6px;
}
#ptc-app .tape__banner-btn:hover { background: var(--hover); }

/* ---------------------------------------------------------------- the machine */
#ptc-app .tape__machine {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0 var(--s-3);
}

/* Printer head: a dark housing with the paper slot along its lower edge. */
#ptc-app .tape-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px 12px;
  color: var(--head-ink);
  background: linear-gradient(var(--head-top), var(--head-bottom));
  border-radius: 12px 12px 9px 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(0, 0, 0, .35),
              0 2px 3px rgba(40, 30, 15, .22), 0 10px 18px -8px rgba(40, 30, 15, .45);
  flex: none;
}
#ptc-app[data-theme="dark"] .tape-head {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(255, 255, 255, .04),
              0 10px 22px -8px rgba(0, 0, 0, .8);
}
#ptc-app .tape-head__brand {
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--head-faint);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
}
#ptc-app .tape-head__led {
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--led-ready);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 8px var(--led-ready);
}
#ptc-app .tape-head__status {
  min-width: 5.5em;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--head-ink);
}
/* The slot the paper feeds out of. */
#ptc-app .tape-head__slot {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 7px;
  height: 6px;
  border-radius: 3px;
  background: #0D0C0A;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .09);
  overflow: hidden;
}
/* The paper's edge, just visible inside the slot; it shivers while a line prints. */
#ptc-app .tape-head__slot::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 1px;
  border-radius: 1px 1px 0 0;
  background: var(--tape);
  opacity: .45;
}
#ptc-app .ptc-tape.is-paused .tape-head__led {
  background: var(--led-paused);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 8px var(--led-paused);
  animation: tape-led-blink 1.6s steps(1, end) infinite;
}
#ptc-app .ptc-tape.is-paused .tape-head__status { color: #F2A596; }
#ptc-app .tape-head.is-printing { animation: tape-head-jiggle 180ms linear 2; }
#ptc-app .tape-head.is-printing .tape-head__led {
  background: var(--led-busy);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 10px var(--led-busy);
}
#ptc-app .tape-head.is-printing .tape-head__slot::after { animation: tape-edge-shiver 120ms linear 3; }

/* ---------------------------------------------------------------- the roll */
#ptc-app .tape__viewport {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  margin: -9px 10px 0;              /* the paper starts inside the slot */
}
/* Shade where the paper leaves the slot. */
#ptc-app .tape__lip {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: 22px;
  pointer-events: none;
  background: linear-gradient(rgba(40, 28, 10, .20), rgba(40, 28, 10, .06) 45%, transparent);
}
#ptc-app[data-theme="dark"] .tape__lip { background: linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, .2) 45%, transparent); }
#ptc-app .tape__scroll {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 26px;             /* room for the shadow under the torn end */
  scrollbar-width: none;            /* the roll is the scroll indicator; wheel, touch and keys still scroll */
}
#ptc-app .tape__scroll::-webkit-scrollbar { display: none; }
#ptc-app .tape__scroll:focus-visible { outline-offset: -2px; }

/* The drop-shadow lives on a wrapper so it follows the zigzag mask of the roll. */
#ptc-app .tape__paper { filter: var(--tape-paper-shadow); }

#ptc-app .tape__roll {
  --tooth-w: 14px;
  --tooth-h: 8px;
  position: relative;
  padding: 22px 26px calc(22px + var(--tooth-h)) 20px;
  font-family: var(--font-tape);
  font-variant-numeric: tabular-nums;
  color: var(--tape-ink);
  text-shadow: var(--tape-bleed);
  background-color: var(--tape);
  /* A faint curl: the long edges of a roll catch a little less light. */
  background-image: linear-gradient(90deg, rgba(110, 85, 40, .07), transparent 6%, transparent 94%, rgba(110, 85, 40, .07));
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth-h) + 1px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / var(--tooth-w) var(--tooth-h) repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth-h) + 1px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / var(--tooth-w) var(--tooth-h) repeat-x;
}
#ptc-app[data-theme="dark"] .tape__roll {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .22), transparent 7%, transparent 93%, rgba(0, 0, 0, .22)),
                    linear-gradient(rgba(255, 255, 255, .018), rgba(255, 255, 255, 0) 40%);
}
/* Paper grain: the shared noise tiles, blended into the stock. */
#ptc-app .tape__roll::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain), var(--grain-fibre);
  background-size: 220px 220px, 360px 360px;
  opacity: var(--tape-grain-opacity);
  mix-blend-mode: var(--tape-grain-blend);
}
#ptc-app .tape__roll > * { position: relative; }

#ptc-app .tape__feed { list-style: none; margin: 0; padding: 0; }
#ptc-app .tape__print-head { display: none; }

/* ---------------------------------------------------------------- day separators */
#ptc-app .tape-day {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 6px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--tape-ink-soft);
  white-space: nowrap;
}
#ptc-app .tape-day:first-child { margin-top: 2px; }
#ptc-app .tape-day::before,
#ptc-app .tape-day::after {
  content: "";
  flex: 1;
  height: 0;
  border-top: 1px dashed var(--tape-rule);
}

/* ---------------------------------------------------------------- a line */
#ptc-app .tape-line {
  display: grid;
  grid-template-rows: 1fr;
  padding: 9px 0 11px;
}
#ptc-app .tape-line + .tape-line {
  /* A dotted perforation between lines, drawn as dots so it prints evenly. */
  background: radial-gradient(circle, var(--tape-rule) .9px, transparent 1.2px) 0 0 / 7px 2px repeat-x;
}
#ptc-app .tape-line__body {
  position: relative;
  min-width: 0;
  min-height: 0;
  /* The total mark hangs in the roll's right margin; keep it inside this box so the feed
     animation's overflow clip doesn't hide it. */
  margin-right: -24px;
  padding-right: 24px;
}

#ptc-app .tape-line__meta {
  display: flex;
  flex-wrap: wrap;                 /* a narrow roll wraps the tools rather than cutting the mode name */
  align-items: center;
  gap: 0 8px;
  min-height: 24px;
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--tape-ink-soft);
}
#ptc-app .tape-line__time { font-variant-numeric: tabular-nums; }
#ptc-app .tape-line__mode {
  white-space: nowrap;             /* mode names are short: shown whole, never "STANDAR…" */
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .6875rem;
}
#ptc-app .tape-line__mode::before { content: "·"; margin-right: 8px; letter-spacing: 0; }

/* Hover tools: quiet until the line is hovered or holds focus; always there on touch. */
#ptc-app .tape-line__tools {
  display: flex;
  gap: 1px;
  margin-left: auto;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t) var(--ease-out);
  text-shadow: none;
}
#ptc-app .tape-line:hover .tape-line__tools,
#ptc-app .tape-line:focus-within .tape-line__tools { opacity: 1; transform: none; }
/* With a mouse the tools float over the end of the meta row instead of reserving its width. */
@media (hover: hover) {
  #ptc-app .tape-line__tools {
    position: absolute;
    top: 0;
    right: 24px;
    padding-left: 10px;
    background: linear-gradient(90deg, transparent, var(--tape) 10px);
  }
}
#ptc-app .tape-tool-mini {
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  color: var(--tape-ink-soft);
  border-radius: 6px;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#ptc-app .tape-tool-mini .i { width: 16px; height: 16px; }
#ptc-app .tape-tool-mini:hover { color: var(--tape-ink); background: var(--tape-hl); }
#ptc-app .tape-tool-mini:focus-visible { outline-offset: 0; }
@media (hover: none) {
  #ptc-app .tape-line__tools { opacity: 1; transform: none; }
  #ptc-app .tape-tool-mini { width: 34px; height: 30px; color: var(--tape-ink-soft); }
}

#ptc-app .tape-line__expr {
  margin: 2px 0 0;
  font-size: .9375rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#ptc-app .tape-line__result {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  column-gap: 8px;
  margin: 1px 0 0;
  font-size: 1.25rem;
  line-height: 1.35;
}
#ptc-app .tape-line__eq { color: var(--tape-ink-soft); font-weight: 400; }
/* The adding machine's total mark (✱) or credit mark (CR), in the red half of the ribbon. */
#ptc-app .tape-line__mark {
  position: absolute;
  top: 50%;
  left: calc(100% + 5px);
  transform: translateY(-45%);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--tape-red);
  text-shadow: none;
}
#ptc-app[data-theme="dark"] .tape-line__mark { color: var(--accent); opacity: .8; }
#ptc-app[data-theme="dark"] .tape-line--neg .tape-line__mark { color: var(--tape-red); }

#ptc-app .tape-line__details {
  list-style: none;
  margin: 4px 0 0;
  padding: 0 0 0 14px;
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--tape-ink-soft);
}
#ptc-app .tape-detail { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
#ptc-app .tape-detail__label { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ptc-app .tape-detail__leader {
  flex: 1;
  min-width: 12px;
  height: 1em;
  opacity: .7;
  background: radial-gradient(circle, currentColor .8px, transparent 1.1px) 0 calc(100% - 2px) / 6px 4px repeat-x;
}
#ptc-app .tape-detail .tape-num { flex: none; max-width: 60%; color: var(--tape-ink); text-align: right; }

#ptc-app .tape-line__note {
  margin: 3px 0 0;
  font-size: .75rem;
  color: var(--tape-ink-soft);
}
#ptc-app .tape-line__note::before { content: "» "; }

/* ---------------------------------------------------------------- numbers */
#ptc-app .tape-num {
  display: inline;
  margin: 0 -2px;
  padding: 0 2px;
  font: inherit;
  color: inherit;
  text-shadow: inherit;
  border-radius: 3px;
  cursor: pointer;
  /* Long-press opens our popover: no iOS callout, no text selection, no double-tap zoom. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
#ptc-app .tape-num:hover { background: var(--tape-hl); box-shadow: inset 0 -1px 0 var(--tape-rule); }
#ptc-app .tape-num:focus-visible { outline-offset: 1px; }
#ptc-app .tape-num:active { background: var(--tape-hl-strong); }
#ptc-app .tape-num.is-explained { background: var(--tape-hl-strong); box-shadow: inset 0 -2px 0 var(--tape-red); }
#ptc-app[data-theme="dark"] .tape-num.is-explained { box-shadow: inset 0 -2px 0 var(--accent); }
#ptc-app .tape-num.is-neg { color: var(--tape-red); }
#ptc-app .tape-num--result {
  font-weight: 700;
  letter-spacing: -.01em;
  text-shadow: var(--tape-result-shadow);
}
#ptc-app[data-theme="dark"] .tape-num--result:not(.is-neg) { color: #FFF1D6; }
#ptc-app[data-theme="dark"] .tape-num--result.is-neg { text-shadow: 0 0 12px rgba(255, 138, 116, .35); }
#ptc-app .tape-num--detail { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- feed animation */
#ptc-app .tape-line.is-feeding { animation: tape-feed 360ms var(--ease-out) both; }
#ptc-app .tape-line.is-feeding > .tape-line__body {
  overflow: hidden;
  animation: tape-feed-body 360ms var(--ease-out) both;
}
/* A brief shade band rolls down the new line as it clears the slot. */
#ptc-app .tape-line.is-feeding > .tape-line__body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(60, 45, 20, .10) 45%, rgba(60, 45, 20, .10) 55%, transparent);
  animation: tape-shade 360ms ease-out both;
}
#ptc-app[data-theme="dark"] .tape-line.is-feeding > .tape-line__body::after {
  background: linear-gradient(transparent, rgba(240, 178, 90, .08) 45%, rgba(240, 178, 90, .08) 55%, transparent);
}
@keyframes tape-feed {
  from { grid-template-rows: 0fr; padding-top: 0; padding-bottom: 0; }
  to { grid-template-rows: 1fr; }
}
@keyframes tape-feed-body {
  from { transform: translateY(-14px); opacity: .15; }
  to { transform: none; opacity: 1; }
}
@keyframes tape-shade {
  from { transform: translateY(-100%); opacity: 1; }
  to { transform: translateY(100%); opacity: 0; }
}
@keyframes tape-head-jiggle {
  0%, 100% { transform: none; }
  30% { transform: translateY(1px); }
  65% { transform: translateY(-.5px); }
}
@keyframes tape-edge-shiver {
  50% { transform: translateY(1px); }
}
@keyframes tape-led-blink {
  0%, 70% { opacity: 1; }
  71%, 100% { opacity: .35; }
}

/* ---------------------------------------------------------------- empty stub + older lines */
#ptc-app .ptc-tape.is-empty .tape__roll { padding-bottom: calc(16px + var(--tooth-h)); }
#ptc-app .tape__empty {
  padding: 18px 6px 8px;
  text-align: center;
}
#ptc-app .tape__empty-title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .02em;
}
#ptc-app .tape__empty-text {
  margin-top: 4px;
  font-size: .875rem;
  color: var(--tape-ink-soft);
  text-wrap: balance;
}
#ptc-app .tape__empty-rule {
  margin-top: 14px;
  letter-spacing: .2em;
  color: var(--tape-rule);
}
#ptc-app .tape__more {
  display: block;
  margin: 14px auto 0;
  padding: 8px 14px;
  font-family: var(--font-tape);
  font-size: .8125rem;
  color: var(--tape-ink-soft);
  border: 1px dashed var(--tape-rule);
  border-radius: 4px;
  text-shadow: none;
}
#ptc-app .tape__more:hover { color: var(--tape-ink); background: var(--tape-hl); }

/* ---------------------------------------------------------------- small screens
   Below 760px the tape sits under the calculator and the page scrolls, not the roll. */
@media (max-width: 759px) {
  #ptc-app .ptc-tape { height: auto; }
  #ptc-app .tape__machine { flex: none; }
  #ptc-app .tape__viewport { flex: none; }
  #ptc-app .tape__scroll { height: auto; overflow: visible; }
  #ptc-app .tape__bar { padding-inline: var(--s-3); }
  #ptc-app .tape__tools { padding-inline: var(--s-3); }
  #ptc-app .tape__banner { margin-inline: var(--s-3); }
  #ptc-app .tape__machine { padding: 0 var(--s-2); }
  #ptc-app .tape__roll { padding-inline: 16px 24px; }
}
/* ===== css/50-overlays.css (scoped under #ptc-app) ===== */
/* css/50-overlays.css — everything PTC.overlay layers: menus, listboxes, dialogs, bottom sheets
   and toasts. The number popover's own content styles live in css/55-popover.css; the panel
   chrome, positioning and motion here apply to it as well. */

/* ---------------------------------------------------------------- layers */
#ptc-app #overlay-root { position: relative; z-index: var(--z-overlay); }

#ptc-app .ov-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
}
#ptc-app .ov-scrim {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}
#ptc-app .ov-layer.is-open .ov-scrim { opacity: 1; }
#ptc-app .ov-layer.is-closing .ov-scrim { opacity: 0; transition-duration: var(--t-fast); }
/* A closing layer is only a fading picture: clicks must reach what's underneath at once
   (e.g. a right-click on a tape number just after the Export menu closed). */
#ptc-app .ov-layer.is-closing .ov-scrim,
#ptc-app .ov-layer.is-closing .ov-panel { pointer-events: none; }

#ptc-app .ov-panel {
  pointer-events: auto;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-3);
  overscroll-behavior: contain;
  outline: none;
}
/* The panel itself only takes focus as a fallback holder (no focusable child, or a listbox
   using aria-activedescendant); its children draw their own rings, so the panel draws none. */
#ptc-app .ov-panel:focus-visible { outline: none; }

/* Anchored (menus, pickers, popovers): grows out of its anchor. */
#ptc-app .ov-panel--anchored {
  position: fixed;
  max-width: calc(100vw - 16px);
  overflow: auto;
  border-radius: 10px;
  opacity: 0;
  transform: scale(.97) translateY(-2px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t) var(--ease-out);
}
#ptc-app .ov-layer.is-open .ov-panel--anchored { opacity: 1; transform: none; }
#ptc-app .ov-layer.is-closing .ov-panel--anchored { opacity: 0; transform: scale(.98); transition-duration: 100ms; }

/* Centred (dialogs on wide screens). */
#ptc-app .ov-panel--center {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  border-radius: var(--r-3);
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity var(--t) var(--ease), transform var(--t-slow) var(--ease-out);
}
#ptc-app .ov-layer.is-open .ov-panel--center { opacity: 1; transform: none; }
#ptc-app .ov-layer.is-closing .ov-panel--center { opacity: 0; transform: translateY(6px); transition-duration: var(--t-fast); }

/* Bottom sheet (≤ 640px): slides up from the bottom edge, clear of the home indicator. */
#ptc-app .ov-panel--sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88dvh;
  overflow: auto;
  border-radius: 16px 16px 0 0;
  border-width: 1px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  transition: transform var(--t-slow) var(--ease-out);
}
#ptc-app .ov-layer.is-open .ov-panel--sheet { transform: none; }
#ptc-app .ov-layer.is-closing .ov-panel--sheet { transform: translateY(100%); transition-duration: var(--t); transition-timing-function: ease-in; }
#ptc-app .ov-grabber {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 22px;
  margin-bottom: -6px;
  touch-action: none;
  cursor: grab;
  background: inherit;
}
#ptc-app .ov-grabber::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 2px;
  background: var(--rule-strong);
}

/* ---------------------------------------------------------------- menu */
#ptc-app .ptc-menu {
  min-width: 220px;
  padding: 6px;
  font-size: var(--fs-3);
}
#ptc-app .ptc-menu__title {
  padding: 4px 12px 10px;
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--ink-faint);
}
#ptc-app .menu__heading {
  padding: 10px 10px 4px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--ink-faint);
}
#ptc-app .menu__sep {
  height: 0;
  margin: 6px 8px;
  border-top: 1px dashed var(--rule-strong);   /* a receipt perforation */
}
#ptc-app .menu__item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "label hint chev";
  align-items: center;
  column-gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--ink);
  line-height: 1.25;
  white-space: nowrap;
  transition: background-color 80ms linear;
}
#ptc-app .menu--icons .menu__item { grid-template-columns: 18px 1fr auto auto; grid-template-areas: "icon label hint chev"; }
#ptc-app .menu--checks .menu__item { grid-template-columns: 16px 1fr auto auto; grid-template-areas: "check label hint chev"; }
#ptc-app .menu--checks.menu--icons .menu__item { grid-template-columns: 16px 18px 1fr auto auto; grid-template-areas: "check icon label hint chev"; }
#ptc-app .menu__check { grid-area: check; display: grid; place-items: center; color: var(--accent); visibility: hidden; }
#ptc-app .menu__check .i { width: 16px; height: 16px; stroke-width: 2; }
#ptc-app .menu__item[aria-checked="true"] .menu__check { visibility: visible; }
#ptc-app .menu__icon { grid-area: icon; display: grid; place-items: center; color: var(--ink-soft); }
#ptc-app .menu__icon .i { width: 18px; height: 18px; }
#ptc-app .menu__label { grid-area: label; overflow: hidden; text-overflow: ellipsis; }
#ptc-app .menu__hint {
  grid-area: hint;
  justify-self: end;
  padding-left: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
#ptc-app .menu__chev { grid-area: chev; display: grid; place-items: center; color: var(--ink-faint); }
#ptc-app .menu__chev .i { width: 14px; height: 14px; transform: rotate(-90deg); }
#ptc-app .menu__item:hover,
#ptc-app .menu__item:focus-visible,
#ptc-app .menu__item:focus,
#ptc-app .menu__item[aria-expanded="true"] {
  background: var(--surface-3);
  outline: none;
}
#ptc-app .menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
#ptc-app[data-theme="dark"] .menu__item:hover,
#ptc-app[data-theme="dark"] .menu__item:focus,
#ptc-app[data-theme="dark"] .menu__item[aria-expanded="true"] { background: var(--surface-3); }
#ptc-app .menu__item:hover .menu__icon,
#ptc-app .menu__item:focus .menu__icon { color: var(--ink); }
#ptc-app .menu__item--danger,
#ptc-app .menu__item--danger .menu__icon { color: var(--accent); }
#ptc-app[data-theme="dark"] .menu__item--danger,
#ptc-app[data-theme="dark"] .menu__item--danger .menu__icon { color: var(--tape-red); }
#ptc-app .menu__item[aria-disabled="true"] { color: var(--ink-faint); cursor: default; }
#ptc-app .menu__item[aria-disabled="true"] .menu__icon { color: var(--ink-faint); opacity: .7; }
#ptc-app .menu__item[aria-disabled="true"]:hover { background: transparent; }

#ptc-app .ov-panel--sheet.ptc-menu { padding: 0 8px 10px; font-size: var(--fs-4); }
#ptc-app .ov-panel--sheet .ptc-menu__title,
#ptc-app .ov-panel--sheet .menu__heading { padding-left: 12px; padding-right: 12px; }
#ptc-app .ov-panel--sheet .menu__item { min-height: 48px; padding: 10px 12px; border-radius: 8px; }
@media (pointer: coarse) { #ptc-app .menu__item { min-height: 44px; } }

/* ---------------------------------------------------------------- listbox (ui.picker) */
#ptc-app .listbox {
  min-width: 200px;
  max-height: min(360px, 70dvh);
  padding: 6px;
  font-size: var(--fs-3);
}
#ptc-app .listbox__group {
  padding: 10px 10px 4px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--ink-faint);
}
#ptc-app .listbox__option {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px 7px 30px;
  position: relative;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
}
#ptc-app .listbox__option[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--accent);
}
#ptc-app .listbox__option[aria-selected="true"] { font-weight: 600; }
#ptc-app .listbox__option:hover,
#ptc-app .listbox__option.is-active { background: var(--surface-3); }
#ptc-app .listbox__option.is-active { box-shadow: inset 0 0 0 2px var(--focus); }
#ptc-app .listbox__hint { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-1); color: var(--ink-faint); }
#ptc-app .ov-panel--sheet.listbox { max-height: 80dvh; padding: 0 8px 10px; }
#ptc-app .ov-panel--sheet .listbox__option { min-height: 46px; align-items: center; }

/* ---------------------------------------------------------------- dialog */
#ptc-app .dialog { display: flex; flex-direction: column; }
#ptc-app .dialog--sm.ov-panel--center { width: min(380px, calc(100vw - 32px)); }
#ptc-app .dialog--lg.ov-panel--center { width: min(680px, calc(100vw - 32px)); }
#ptc-app .dialog__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 18px 14px 14px 22px;
  background: var(--surface);
  border-bottom: 1px dashed var(--rule-strong);
}
#ptc-app .ov-panel--sheet .dialog__head { top: 16px; padding-top: 6px; }
#ptc-app .dialog__title {
  flex: 1;
  font-size: var(--fs-5);
  font-weight: 600;
  letter-spacing: -.005em;
}
#ptc-app .dialog__close { margin: -6px 0; }
#ptc-app .dialog__desc { padding: 14px 22px 0; color: var(--ink-soft); font-size: var(--fs-3); }
#ptc-app .dialog__body { padding: 16px 22px 20px; font-size: var(--fs-3); line-height: 1.55; }
#ptc-app .dialog__text { color: var(--ink-soft); font-size: var(--fs-4); }
#ptc-app .dialog__actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: 14px 22px 18px;
  background: var(--surface);
  border-top: 1px solid var(--rule);
}
#ptc-app .dialog__actions .ptc-btn { min-width: 96px; }
#ptc-app .ov-panel--sheet .dialog__actions { padding-bottom: 14px; }
#ptc-app .ov-panel--sheet .dialog__actions .ptc-btn { flex: 1; min-height: var(--hit); }

/* ---------------------------------------------------------------- toasts */
#ptc-app .toast-stack,
#ptc-app #toast-root {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 24px);
  transform: translateX(-50%);
  pointer-events: none;
}
/* While a menu or the number popover is open next to its anchor, it sits above the toasts:
   on desktop both live near the bottom-right, and a confirmation toast from the previous
   export must not swallow the click meant for the popover's Export button (integration fix). */
#ptc-app:has(.ov-layer:not(.is-closing) .ov-panel--anchored) .toast-stack,
#ptc-app:has(.ov-layer:not(.is-closing) .ov-panel--anchored) #toast-root { z-index: calc(var(--z-overlay) - 1); }
/* While a bottom sheet is up, toasts move to the top edge so they never cover its buttons. */
#ptc-app.ov-sheet-open .toast-stack,
#ptc-app.ov-sheet-open #toast-root {
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  bottom: auto;
}
@media (min-width: 900px) {
  #ptc-app .toast-stack,
#ptc-app #toast-root {
    left: auto;
    right: 20px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    align-items: flex-end;
    transform: none;
  }
}
#ptc-app .ptc-toast {
  --toast-bg: #2B2924;
  --toast-ink: #F7F3EA;
  --toast-soft: #BDB5A6;
  --toast-ok: #A9D39B;
  --toast-err: #FF9C86;
  --toast-info: #D9CDB6;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  max-width: min(460px, calc(100vw - 24px));
  padding: 6px 6px 6px 14px;
  font-size: var(--fs-3);
  line-height: 1.35;
  color: var(--toast-ink);
  background: var(--toast-bg);
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 28px -8px rgba(30, 22, 10, .45), 0 2px 6px rgba(30, 22, 10, .2);
  animation: toast-in var(--t-slow) var(--ease-out) both;
}
#ptc-app[data-theme="dark"] .ptc-toast {
  --toast-bg: #2E2F35;
  --toast-ink: #F1ECE1;
  --toast-soft: #A39D91;
  --toast-ok: #F0B25A;
  --toast-err: #FF8A74;
  --toast-info: #B2ACA0;
  border: 1px solid #44474E;
  box-shadow: 0 16px 36px -10px rgba(0,0,0,.8), 0 0 24px -12px rgba(240,178,90,.25);
}
#ptc-app .ptc-toast.is-leaving { animation: toast-out 180ms ease-in both; }
#ptc-app .toast__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  color: var(--toast-bg);
  background: var(--toast-info);
}
#ptc-app .toast__icon .i { width: 14px; height: 14px; stroke-width: 2.4; }
#ptc-app .toast--ok .toast__icon { background: var(--toast-ok); }
#ptc-app .toast--err .toast__icon { background: var(--toast-err); }
#ptc-app .toast__msg { flex: 1; padding: 4px 0; }
#ptc-app .toast__action {
  flex: none;
  padding: 0 10px;
  min-height: 32px;
  font-weight: 600;
  font-size: var(--fs-2);
  letter-spacing: .02em;
  color: var(--toast-ok);
  border-radius: 6px;
}
#ptc-app .toast--err .toast__action { color: var(--toast-err); }
#ptc-app .toast__action:hover { background: rgba(255,255,255,.08); }
#ptc-app .toast__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--toast-soft);
  border-radius: 6px;
}
#ptc-app .toast__close .i { width: 16px; height: 16px; }
#ptc-app .toast__close:hover { color: var(--toast-ink); background: rgba(255,255,255,.08); }
#ptc-app .ptc-toast :focus-visible { outline-color: var(--toast-ok); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(6px) scale(.98); }
}
/* ===== css/55-popover.css (scoped under #ptc-app) ===== */
/* css/55-popover.css — the number popover's content (CONTRACT 9.2). The panel chrome, placement,
   motion and bottom sheet come from css/50-overlays.css (.ov-panel*). Layout top to bottom: what
   kind of number it is and its name, the number in tape type, the whole line as a strip of paper
   with this number marked, how it was derived as a ruled receipt block, mode + time, actions. */

#ptc-app .pop {
  --pop-hl: rgba(232, 170, 60, .34);
  --pop-hl-edge: var(--accent);
  --pop-line: 1.55em;
  width: min(384px, calc(100vw - 16px));
  padding: 0;
  font-size: var(--fs-3);
}
#ptc-app[data-theme="dark"] .pop {
  --pop-hl: rgba(240, 178, 90, .20);
}
#ptc-app .pop.ov-panel--sheet { width: auto; padding-bottom: env(safe-area-inset-bottom, 0px); }
#ptc-app .pop.ov-panel--anchored { border-radius: var(--r-3); }

/* ---------------------------------------------------------------- head */
#ptc-app .pop__head { padding: 12px 10px 4px 18px; }
#ptc-app .ov-panel--sheet .pop__head { padding-top: 2px; }
#ptc-app .pop__kicker-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#ptc-app .pop__kind {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--ink-faint);
}
#ptc-app .pop--result .pop__kind { color: var(--accent); }
#ptc-app[data-theme="dark"] .pop--result .pop__kind { color: var(--accent); }
#ptc-app .pop__close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -2px 0;
  color: var(--ink-faint);
  border-radius: var(--r-2);
}
#ptc-app .pop__close .i { width: 16px; height: 16px; }
#ptc-app .pop__close:hover { color: var(--ink); background: var(--hover); }
@media (pointer: coarse) { #ptc-app .pop__close { width: var(--hit); height: var(--hit); margin: -8px -4px -8px 0; } }

#ptc-app .pop__kicker {
  margin-top: 1px;
  padding-right: 8px;
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
#ptc-app .pop__figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 2px;
  padding-right: 8px;
}
#ptc-app .pop__num {
  font-family: var(--font-tape);
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  color: var(--ink);
}
#ptc-app .pop--neg .pop__num { color: var(--accent); }
#ptc-app[data-theme="dark"] .pop--neg .pop__num { color: var(--tape-red); }
#ptc-app[data-theme="dark"] .pop--result:not(.pop--neg) .pop__num {
  color: #FFF1D6;
  text-shadow: 0 0 16px var(--tape-glow), 0 0 2px rgba(240, 178, 90, .5);
}
#ptc-app .pop__unit {
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
}

/* ---------------------------------------------------------------- the line, as a strip of tape */
#ptc-app .pop__line {
  --tooth-w: 10px;
  --tooth-h: 5px;
  position: relative;
  margin: 10px 14px 0;
  padding: 9px 14px calc(10px + var(--tooth-h));
  font-family: var(--font-tape);
  font-size: var(--fs-3);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--tape-ink);
  background: var(--tape);
  box-shadow: inset 0 0 0 1px var(--tape-edge), inset 0 8px 10px -8px rgba(60, 45, 20, .12);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth-h) + 1px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / var(--tooth-w) var(--tooth-h) repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth-h) + 1px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / var(--tooth-w) var(--tooth-h) repeat-x;
}
#ptc-app[data-theme="dark"] .pop__line {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
#ptc-app .pop__line-expr { overflow-wrap: anywhere; }
#ptc-app .pop__line-result { text-align: right; font-size: var(--fs-4); font-weight: 700; }
#ptc-app .pop__line-eq { font-weight: 400; color: var(--tape-ink-soft); }
#ptc-app .pop__line-detail {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  font-size: var(--fs-2);
  color: var(--tape-ink-soft);
}
#ptc-app .pop__leader {
  flex: 1;
  min-width: 10px;
  height: 1em;
  opacity: .7;
  background: radial-gradient(circle, currentColor .8px, transparent 1.1px) 0 calc(100% - 2px) / 6px 4px repeat-x;
}
#ptc-app .pop__seg.is-neg { color: var(--tape-red); }
#ptc-app .pop__seg--hl {
  margin: 0 -1px;
  padding: 0 3px;
  color: inherit;
  background: var(--pop-hl);
  border-radius: 2px;
  box-shadow: inset 0 -2px 0 var(--pop-hl-edge);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
#ptc-app .pop__line-detail .pop__seg { color: var(--tape-ink); }
#ptc-app[data-theme="dark"] .pop__seg--hl:not(.is-neg) { color: #FFE9C4; }

/* ---------------------------------------------------------------- how: a ruled receipt block */
#ptc-app .pop__how {
  margin: 12px 14px 0;
  padding: 6px 12px 8px;
  font-family: var(--font-tape);
  font-size: var(--fs-2);
  line-height: var(--pop-line);
  color: var(--ink);
  border-top: 1px dashed var(--rule-strong);
  border-bottom: 1px dashed var(--rule-strong);
  /* Ruled like a ledger: one hairline per line of text. */
  background-image: repeating-linear-gradient(transparent 0 calc(var(--pop-line) - 1px), var(--rule) calc(var(--pop-line) - 1px) var(--pop-line));
  background-origin: content-box;
  background-clip: content-box;
  overflow-wrap: anywhere;
}
#ptc-app[data-theme="dark"] .pop__how {
  background-image: repeating-linear-gradient(transparent 0 calc(var(--pop-line) - 1px), rgba(255, 255, 255, .06) calc(var(--pop-line) - 1px) var(--pop-line));
}
#ptc-app .pop__how-title {
  font-family: var(--font-ui);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--ink-faint);
}
#ptc-app .pop__how-text { color: var(--ink); }
#ptc-app .pop__steps {
  margin: 0;
  padding: 0 0 0 2.2em;
  color: var(--ink-soft);
  list-style: decimal-leading-zero;
}
#ptc-app .pop__step::marker { color: var(--ink-faint); font-size: .9em; }

/* ---------------------------------------------------------------- meta */
#ptc-app .pop__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 9px 18px 0;
  font-size: var(--fs-1);
  color: var(--ink-faint);
}
#ptc-app .pop__meta-mode { display: inline-flex; align-items: center; gap: 6px; }
#ptc-app .pop__meta-icon { display: grid; place-items: center; }
#ptc-app .pop__meta-icon .i { width: 14px; height: 14px; }
#ptc-app .pop__meta-time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- actions */
#ptc-app .pop__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 12px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  border-radius: 0 0 var(--r-3) var(--r-3);
}
#ptc-app .ov-panel--sheet .pop__actions { border-radius: 0; }
#ptc-app .pop__act {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
  font-size: var(--fs-2);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  background: var(--key);
  border: 1px solid var(--key-edge);
  border-radius: var(--r-2);
  box-shadow: 0 1px 0 var(--key-edge);
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
#ptc-app .pop__act:hover:not(:disabled) { background-image: linear-gradient(var(--hover), var(--hover)); }
#ptc-app .pop__act:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
#ptc-app .pop__act:disabled { opacity: .5; box-shadow: none; }
#ptc-app .pop__act-icon { display: grid; place-items: center; flex: none; color: var(--ink-soft); }
#ptc-app .pop__act-icon .i { width: 17px; height: 17px; }
#ptc-app .pop__act-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ptc-app .pop__act-chev { margin-left: auto; display: grid; place-items: center; color: var(--ink-faint); }
#ptc-app .pop__act-chev .i { width: 14px; height: 14px; transform: rotate(-90deg); }
#ptc-app .pop__act--danger,
#ptc-app .pop__act--danger .pop__act-icon { color: var(--accent); }
#ptc-app[data-theme="dark"] .pop__act--danger,
#ptc-app[data-theme="dark"] .pop__act--danger .pop__act-icon { color: var(--tape-red); }

#ptc-app .pop__act--share {
  grid-column: 1 / -1;
  justify-content: center;
  font-weight: 600;
  color: var(--surface);
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 1px 0 #000;
}
#ptc-app .pop__act--share .pop__act-icon { color: inherit; }
/* Export ▸ and the primary Share button each get a full row, so "Share this calculation"
   is never cut off, even in a 390px bottom sheet. */
#ptc-app .pop__act--export { grid-column: 1 / -1; }
#ptc-app[data-theme="dark"] .pop__act--share { color: #1A1206; background: var(--accent); border-color: #B9803A; box-shadow: 0 1px 0 #7A5320, 0 0 18px -6px rgba(240, 178, 90, .6); }

#ptc-app .ov-panel--sheet .pop__act { min-height: var(--hit); font-size: var(--fs-3); }
@media (pointer: coarse) { #ptc-app .pop__act { min-height: var(--hit); } }
/* ===== css/60-export.css (scoped under #ptc-app) ===== */
/* css/60-export.css — the exporters' own UI: the "Restore this backup?" dialog's receipt of what
   a backup holds (js/60-export-text.js). Everything else they show goes through the shared
   menus, dialogs and toasts in css/50-overlays.css. */

#ptc-app .imp {
  margin: 14px 0 0;
  padding: 12px 14px 10px;
  font-family: var(--font-tape);
  font-size: var(--fs-3);
  font-variant-numeric: tabular-nums;
  color: var(--tape-ink);
  background: var(--tape);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  /* A strip of receipt: a faint perforation along the top edge. */
  background-image: radial-gradient(circle, var(--tape-rule) .9px, transparent 1.2px);
  background-size: 7px 3px;
  background-repeat: repeat-x;
  background-position: 0 4px;
}
#ptc-app .imp__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 3px 0;
}
#ptc-app .imp__row + .imp__row { border-top: 1px dashed var(--tape-rule); }
#ptc-app .imp__label {
  flex: none;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--tape-ink-soft);
}
#ptc-app .imp__value {
  flex: 1;
  min-width: 0;
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}
#ptc-app .imp__note {
  margin: 12px 0 0;
  font-size: var(--fs-2);
  color: var(--ink-soft);
}
/* ===== css/70-mode-standard.css (scoped under #ptc-app) ===== */
/* css/70-mode-standard.css — the Standard calculator's layout: display window, memory row with
   its readout, and the 5-column keypad ending in a full-width total bar. */

#ptc-app .std { display: grid; gap: 14px; }

#ptc-app .std__display { min-height: 120px; }

#ptc-app .std__mem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0 2px;
}
#ptc-app .std__mem-readout {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
#ptc-app .std__mem-label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--ink-faint);
}
#ptc-app .std__mem-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
#ptc-app .std__mem.has-memory .std__mem-value { color: var(--ink); }
#ptc-app .std__mem.has-memory .std__mem-label { color: var(--accent); }

#ptc-app .std__mem-keys {
  --key-gap: 6px;
  flex: none;
  grid-template-columns: repeat(5, 50px);
}

#ptc-app .std__keys { --key-h: clamp(46px, 6.3vh, 58px); --key-gap: 9px; }
#ptc-app .std__keys .key--eq { margin-top: 2px; }

/* Short windows (1024×768 with the rail): tighten the machine. */
@media (max-height: 820px) and (min-width: 760px) {
  #ptc-app .std { gap: 12px; }
  #ptc-app .std__display { min-height: 108px; }
  #ptc-app .std__display .display__main { font-size: calc(2.375rem * var(--fit)); }
  #ptc-app .std__keys { --key-h: clamp(42px, 6.2vh, 52px); --key-gap: 8px; }
}

@media (max-width: 759px) {
  #ptc-app .std { gap: 12px; }
  #ptc-app .std__mem { flex-wrap: wrap; row-gap: 8px; }
  #ptc-app .std__mem-readout { flex: 1 1 100%; }
  #ptc-app .std__mem-keys { flex: 1 1 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #ptc-app .std__keys { --key-h: 52px; --key-gap: 8px; }
  #ptc-app .std__display .display__main { font-size: calc(2.5rem * var(--fit)); }
}
@media (max-width: 380px) {
  #ptc-app .std__keys { --key-gap: 6px; }
  #ptc-app .std__keys .key { font-size: 1.125rem; }
}
/* ===== css/71-mode-scientific.css (scoped under #ptc-app) ===== */
/* css/71-mode-scientific.css — the Scientific calculator: display window, memory row, and two
   pads side by side (functions | digits) that stack on narrow panels, where the function pad
   becomes a denser six-column block ordered by row of related keys. 2nd and hyp are latching
   keys; the faces they change are marked so the swap is visible, not only the flag. */

#ptc-app .app[data-mode="scientific"] { --panel-max: 760px; }

#ptc-app .sci { display: grid; gap: 14px; container-type: inline-size; }

#ptc-app .sci__display { min-height: 120px; }

/* ---------------------------------------------------------------- memory row (as Standard) */
#ptc-app .sci__mem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0 2px;
}
#ptc-app .sci__mem-readout {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
#ptc-app .sci__mem-label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--ink-faint);
}
#ptc-app .sci__mem-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
#ptc-app .sci__mem.has-memory .sci__mem-value { color: var(--ink); }
#ptc-app .sci__mem.has-memory .sci__mem-label { color: var(--accent); }
#ptc-app .sci__mem-keys { --key-gap: 6px; flex: none; grid-template-columns: repeat(5, 50px); }

/* ---------------------------------------------------------------- the two pads */
#ptc-app .sci__pads {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
#ptc-app .sci__fn-keys,
#ptc-app .sci__num-keys { --key-h: clamp(42px, 5.6vh, 52px); --key-gap: 7px; }

/* Function keys: smaller mono labels so sin⁻¹, log₂ and rand sit comfortably. */
#ptc-app .sci__fn-keys .key--fn { font-size: .9375rem; letter-spacing: -.01em; }
#ptc-app .sci__fn-keys .key--fn .key__label { white-space: nowrap; }
#ptc-app .sci__num-keys .key--eq { margin-top: 2px; }
#ptc-app .sci__num-keys .sci__ee { font-size: .9375rem; }

/* 2nd and hyp latch: inked like a pressed-in key when on. */
#ptc-app .sci__fn-keys .sci__toggle { font-family: var(--font-ui); font-weight: 600; font-size: .875rem; }
#ptc-app .sci__fn-keys .sci__toggle[aria-pressed="true"] {
  --key-bg: var(--ink);
  --key-lip: var(--ink);
  --key-shine: rgba(255, 255, 255, .12);
  color: var(--surface);
}
#ptc-app[data-theme="dark"] .sci__fn-keys .sci__toggle[aria-pressed="true"] {
  --key-bg: var(--accent);
  --key-lip: #9A6524;
  color: #1A1206;
}
#ptc-app .sci__fn-keys .sci__angle { font-family: var(--font-ui); font-weight: 600; font-size: .8125rem; letter-spacing: .06em; }

/* A face showing its 2nd or hyp function gets the ribbon colour, so the swap reads at a glance. */
#ptc-app .sci__fn-keys .sci__face.is-alt { color: var(--accent); }
#ptc-app .sci__fn-keys .sci__face.is-alt::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 14px;
  height: 2px;
  margin-left: -7px;
  background: currentColor;
  border-radius: 1px;
  opacity: .55;
}

/* ---------------------------------------------------------------- short windows */
@media (max-height: 820px) and (min-width: 760px) {
  #ptc-app .sci { gap: 12px; }
  #ptc-app .sci__display { min-height: 108px; }
  #ptc-app .sci__display .display__main { font-size: calc(2.375rem * var(--fit)); }
  #ptc-app .sci__fn-keys,
#ptc-app .sci__num-keys { --key-h: clamp(38px, 5.4vh, 46px); --key-gap: 6px; }
}

/* ---------------------------------------------------------------- narrow panels: stack */
@container (max-width: 540px) {
  #ptc-app .sci__pads { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  /* Six columns, rows of related keys:
     2nd hyp DEG sin cos tan · π e Ans ln log log₂ · x² xʸ √ 1/x n! |x| · mod rand ( ) */
  #ptc-app .sci__fn-keys { --key-h: 40px; --key-gap: 6px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #ptc-app .sci__fn-keys .key--fn { font-size: .875rem; border-radius: 8px; }
  #ptc-app .sci__fn-keys [data-key-id="second"] { order: 1; }
  #ptc-app .sci__fn-keys [data-key-id="hyp"] { order: 2; }
  #ptc-app .sci__fn-keys [data-key-id="angle"] { order: 3; }
  #ptc-app .sci__fn-keys [data-key-id="sin"] { order: 4; }
  #ptc-app .sci__fn-keys [data-key-id="cos"] { order: 5; }
  #ptc-app .sci__fn-keys [data-key-id="tan"] { order: 6; }
  #ptc-app .sci__fn-keys [data-key-id="pi"] { order: 7; }
  #ptc-app .sci__fn-keys [data-key-id="e"] { order: 8; }
  #ptc-app .sci__fn-keys [data-key-id="ans"] { order: 9; }
  #ptc-app .sci__fn-keys [data-key-id="ln"] { order: 10; }
  #ptc-app .sci__fn-keys [data-key-id="log"] { order: 11; }
  #ptc-app .sci__fn-keys [data-key-id="log2"] { order: 12; }
  #ptc-app .sci__fn-keys [data-key-id="sqr"] { order: 13; }
  #ptc-app .sci__fn-keys [data-key-id="pow"] { order: 14; }
  #ptc-app .sci__fn-keys [data-key-id="sqrt"] { order: 15; }
  #ptc-app .sci__fn-keys [data-key-id="inv"] { order: 16; }
  #ptc-app .sci__fn-keys [data-key-id="fact"] { order: 17; }
  #ptc-app .sci__fn-keys [data-key-id="abs"] { order: 18; }
  #ptc-app .sci__fn-keys [data-key-id="mod"] { order: 19; }
  #ptc-app .sci__fn-keys [data-key-id="rand"] { order: 20; }
  #ptc-app .sci__fn-keys [data-key-id="lp"] { order: 21; }
  #ptc-app .sci__fn-keys [data-key-id="rp"] { order: 22; }

  #ptc-app .sci__num-keys { --key-h: 50px; --key-gap: 8px; }
}

@media (max-width: 759px) {
  #ptc-app .sci { gap: 12px; }
  #ptc-app .sci__mem { flex-wrap: wrap; row-gap: 8px; }
  #ptc-app .sci__mem-readout { flex: 1 1 100%; }
  #ptc-app .sci__mem-keys { flex: 1 1 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #ptc-app .sci__display { min-height: 108px; }
  #ptc-app .sci__display .display__main { font-size: calc(2.375rem * var(--fit)); }
}
@media (max-width: 380px) {
  #ptc-app .sci__fn-keys .key--fn { font-size: .8125rem; padding: 0 2px; }
  #ptc-app .sci__fn-keys { --key-gap: 5px; }
  #ptc-app .sci__num-keys .key { font-size: 1.125rem; }
}
/* ===== css/72-mode-programmer.css (scoped under #ptc-app) ===== */
/* css/72-mode-programmer.css — the Programmer calculator: word-size switch, display, the
   HEX/DEC/OCT/BIN readout rows (a radiogroup that picks the input base), the bit grid in
   nibbles, the two bitwise key rows and the 6-column digit block with its total bar. */

#ptc-app .app[data-mode="programmer"] { --panel-max: 620px; }

#ptc-app .prog { display: grid; gap: 12px; min-width: 0; }

#ptc-app .prog__caps {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------- word size (bit grid header) */
#ptc-app .prog__word { display: flex; align-items: center; gap: 10px; }
#ptc-app .prog__words { padding: 2px; }
#ptc-app .prog__words .segmented__option { min-width: 44px; min-height: 28px; font-family: var(--font-mono); font-weight: 500; }

#ptc-app .prog__display { min-height: 104px; }
/* Keep a long expression clear of the flags in the top-left corner. */
#ptc-app .prog__display .display__expr { margin-left: 10.5rem; }
#ptc-app .prog__display .display__main { font-size: calc(2.25rem * var(--fit)); }
/* An idle flag is an outline only (hidden from screen readers, which hear the lit flags). Its
   letters keep readable contrast rather than a ghostly opacity. */
#ptc-app .prog__display .display__flag.is-off { background: transparent; box-shadow: inset 0 0 0 1px var(--rule-strong); color: var(--ink-faint); }
/* OVF lit: ribbon red, so an overflow can't be missed. */
#ptc-app .prog__display .display__flag:nth-of-type(3):not(.is-off) { color: #FFF8EE; background: var(--tape-red); }
#ptc-app[data-theme="dark"] .prog__display .display__flag:nth-of-type(3):not(.is-off) { color: #1A1206; background: var(--tape-red); box-shadow: 0 0 10px rgba(255, 138, 116, .45); }

/* ---------------------------------------------------------------- base rows */
#ptc-app .prog__bases {
  display: grid;
  overflow: hidden;
  background: var(--tape);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
#ptc-app[data-theme="dark"] .prog__bases { background: #141518; }
#ptc-app .prog__base {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  min-height: 28px;
  padding: 4px 12px 4px 14px;
  text-align: left;
  color: var(--tape-ink-soft);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#ptc-app .prog__base + .prog__base { border-top: 1px dashed var(--tape-rule); }
#ptc-app .prog__base:hover { color: var(--tape-ink); background: var(--hover); }
#ptc-app .prog__base:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 8px; }
#ptc-app .prog__base-name {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: var(--caps-track);
}
#ptc-app .prog__base-val {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}
#ptc-app .prog__base[aria-checked="true"] { color: var(--tape-ink); background: var(--accent-soft); }
#ptc-app .prog__base[aria-checked="true"]::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
#ptc-app .prog__base[aria-checked="true"] .prog__base-name { color: var(--accent); }
#ptc-app[data-theme="dark"] .prog__base[aria-checked="true"] .prog__base-val { text-shadow: 0 0 12px var(--tape-glow); }

/* ---------------------------------------------------------------- bit grid */
#ptc-app .prog__bitbox { display: grid; gap: 8px; min-width: 0; }
#ptc-app .prog__bits-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 0 2px; }
#ptc-app .prog__bits-note { font-size: var(--fs-1); color: var(--ink-faint); }
#ptc-app .prog__bits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
}
#ptc-app .prog__bits[data-bits="8"],
#ptc-app .prog__bits[data-bits="16"] { grid-template-columns: minmax(0, 1fr); }
#ptc-app .prog__bits[data-bits="8"] .prog__bit-row { max-width: 50%; }
#ptc-app .prog__bit-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-width: 0; }
#ptc-app .prog__bits[data-bits="8"] .prog__bit-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#ptc-app .prog__bits[data-bits="16"] .prog__bit-row { gap: 14px; }
#ptc-app .prog__nibble { display: grid; gap: 1px; min-width: 0; }
#ptc-app .prog__nibble-bits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#ptc-app .prog__nibble-index {
  font-family: var(--font-mono);
  font-size: .5625rem;
  line-height: 1;
  text-align: right;
  color: var(--ink-faint);
  padding-right: 2px;
}
#ptc-app .prog__bit {
  min-width: 0;
  height: 24px;
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  font-weight: 500;
  line-height: 1;
  color: var(--ink-faint);
  border-radius: 4px;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
#ptc-app .prog__bit:hover { background: var(--hover); color: var(--ink); }
#ptc-app .prog__bit:active { background: var(--active); }
#ptc-app .prog__bit.is-on { color: var(--ink); font-weight: 600; }
#ptc-app[data-theme="dark"] .prog__bit.is-on { color: var(--accent); text-shadow: 0 0 8px var(--tape-glow); }
#ptc-app .prog__bit:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
/* The sign bit carries a red tick underneath. */
#ptc-app .prog__bits .prog__bit-row:first-child .prog__nibble:first-child .prog__bit:first-child { box-shadow: inset 0 -2px 0 var(--accent-soft); }
#ptc-app .prog__bits .prog__bit-row:first-child .prog__nibble:first-child .prog__bit.is-on:first-child { box-shadow: inset 0 -2px 0 var(--accent); }

/* ---------------------------------------------------------------- keys */
#ptc-app .prog__bitkeys { --key-h: 36px; --key-gap: 6px; }
#ptc-app .prog__bitkeys .key { font-family: var(--font-ui); font-size: var(--fs-2); font-weight: 600; letter-spacing: .03em; }
#ptc-app .prog__keys { --key-h: clamp(42px, 5.4vh, 52px); --key-gap: 8px; }
#ptc-app .prog__keys .key--eq { margin-top: 2px; }
#ptc-app .prog__keys .prog__hex { --key-bg: var(--key-fn); }
#ptc-app .prog__keys .key:disabled { opacity: .3; }

/* Short windows: tighten the machine. */
@media (max-height: 960px) and (min-width: 760px) {
  #ptc-app .prog { gap: 10px; }
  #ptc-app .prog__display { min-height: 92px; }
  #ptc-app .prog__display .display__main { font-size: calc(2rem * var(--fit)); }
  #ptc-app .prog__base { min-height: 25px; padding-block: 2px; }
  #ptc-app .prog__bit { height: 22px; }
  #ptc-app .prog__bits { row-gap: 4px; }
  #ptc-app .prog__bitkeys { --key-h: 32px; }
  #ptc-app .prog__keys { --key-h: clamp(38px, 4.8vh, 44px); --key-gap: 7px; }
  #ptc-app .prog__keys .key--eq { margin-top: 0; }
}

@media (max-width: 759px) {
  #ptc-app .prog { gap: 10px; }
  #ptc-app .prog__bits { grid-template-columns: minmax(0, 1fr); }
  #ptc-app .prog__bits[data-bits="8"] .prog__bit-row { max-width: none; }
  #ptc-app .prog__bit-row { gap: 6px; }
  #ptc-app .prog__bit { height: 30px; }
  #ptc-app .prog__keys { --key-h: 48px; --key-gap: 7px; }
  #ptc-app .prog__bitkeys { --key-h: 38px; --key-gap: 5px; }
  #ptc-app .prog__display .display__main { font-size: calc(2rem * var(--fit)); }
  #ptc-app .prog__bits-note { flex: 1 1 100%; }
  #ptc-app .prog__display { padding-top: 32px; }
  #ptc-app .prog__display .display__expr { margin-left: 0; }
}
@media (max-width: 380px) {
  #ptc-app .prog__keys { --key-gap: 5px; }
  #ptc-app .prog__keys .key { font-size: 1.0625rem; }
  #ptc-app .prog__bitkeys .key { font-size: .6875rem; letter-spacing: 0; padding: 0 2px; }
  #ptc-app .prog__base { grid-template-columns: 2.75rem minmax(0, 1fr); padding-inline: 10px; }
}
/* ===== css/73-mode-units.css (scoped under #ptc-app) ===== */
/* css/73-mode-units.css — the Unit Converter: category strip, display window, the From ⇄ To
   pair (fields with their unit pickers), the keypad, and the every-unit table printed like a
   slip of receipt paper (click a row to print it). */

#ptc-app .units { display: grid; gap: 14px; }

/* Category strip: fills the machine's width; scrolls sideways when narrow (segmented does). */
#ptc-app .units__cats { display: flex; width: 100%; }
#ptc-app .units__cats .segmented__option { flex: 1 0 auto; padding: 0 10px; }

#ptc-app .units__display { min-height: 112px; }

/* ---------------------------------------------------------------- From ⇄ To */
#ptc-app .units__convert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}
#ptc-app .units__side { display: grid; gap: 8px; min-width: 0; }
#ptc-app .units__field .field__hint.is-empty { min-height: 0; display: none; }
/* The side being typed in drives the other; its label says so. */
#ptc-app .units__field .field__label::after {
  content: "";
  margin-left: 6px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-faint);
}
#ptc-app .units__field.is-source .field__label::after { content: "· typing"; }
#ptc-app .units__field .field__suffix { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-3); }
/* The picker's own label repeats the field's; keep it for screen readers only. */
#ptc-app .units__pick .picker__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#ptc-app .units__pick .picker__button { min-height: 40px; font-size: var(--fs-2); }

#ptc-app .units__swap {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: 28px;          /* level with the middle of the field boxes (label + gap above) */
  color: var(--ink-soft);
  background: var(--key-op);
  border: 1px solid var(--key-edge);
  border-radius: 50%;
  box-shadow: 0 2px 0 var(--key-edge);
  transition: transform var(--t) var(--ease), color var(--t-fast) var(--ease);
}
#ptc-app .units__swap:hover { color: var(--ink); }
#ptc-app .units__swap:active { transform: translateY(1px) rotate(180deg); box-shadow: 0 1px 0 var(--key-edge); }
#ptc-app .units__swap .i,
#ptc-app .units__swap svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- keypad */
#ptc-app .units__keys { --key-h: clamp(42px, 5.4vh, 50px); --key-gap: 8px; }
#ptc-app .units__keys .key--eq { margin-top: 2px; }
#ptc-app .units__swap-key { font-family: var(--font-ui); font-size: var(--fs-3); font-weight: 600; }
#ptc-app .units__swap-key .key__icon svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- every-unit table */
#ptc-app .units-table { display: grid; gap: 8px; margin-top: 4px; }
#ptc-app .units-table__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 2px; }
#ptc-app .units-table__title {
  min-width: 0;
  font-size: var(--fs-3);
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
#ptc-app .units-table__hint { flex: none; font-size: var(--fs-1); color: var(--ink-faint); }
#ptc-app .units-table__list {
  margin: 0;
  padding: 4px 0;
  list-style: none;
  font-family: var(--font-tape);
  color: var(--tape-ink);
  background-color: var(--tape);
  background-image: var(--grain);
  background-size: 220px 220px;
  background-blend-mode: soft-light;
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow-1);
}
#ptc-app[data-theme="dark"] .units-table__list { background-image: none; }
#ptc-app .units-table__group {
  padding: 10px 14px 3px;
  font-family: var(--font-ui);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--tape-ink-soft);
}
#ptc-app .units-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 6.5em;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 6px 14px;
  text-align: left;
  color: inherit;
  border-top: 1px dotted var(--tape-rule);
  transition: background-color var(--t-fast) var(--ease);
}
#ptc-app .units-table__group + .units-table__item .units-table__row { border-top-color: transparent; }
#ptc-app .units-table__row:hover:not(:disabled) { background: var(--hover); }
#ptc-app .units-table__row:active:not(:disabled) { background: var(--active); }
#ptc-app .units-table__row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 4px; }
#ptc-app .units-table__row:disabled { cursor: default; opacity: .55; }
#ptc-app .units-table__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-3); }
#ptc-app .units-table__tag {
  margin-left: 8px;
  padding: 0 5px;
  font-family: var(--font-ui);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: 1px;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 3px;
}
#ptc-app[data-theme="dark"] .units-table__tag { color: var(--accent); }
#ptc-app .units-table__value {
  font-size: var(--fs-4);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
#ptc-app .units-table__row.is-to .units-table__value { color: var(--tape-red); }
#ptc-app[data-theme="dark"] .units-table__row.is-to .units-table__value { color: #F6DDB2; text-shadow: 0 0 14px var(--tape-glow); }
#ptc-app .units-table__sym { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-2); color: var(--tape-ink-soft); }

/* Short windows: tighten the machine so the keypad stays on screen. */
@media (max-height: 820px) and (min-width: 760px) {
  #ptc-app .units { gap: 12px; }
  #ptc-app .units__display { min-height: 100px; }
  #ptc-app .units__display .display__main { font-size: calc(2.25rem * var(--fit)); }
}

@media (max-width: 759px) {
  #ptc-app .units { gap: 12px; }
  #ptc-app .units__display .display__main { font-size: calc(2.25rem * var(--fit)); }
  #ptc-app .units__keys { --key-h: 48px; }
}

/* Narrow: stack From, the swap button (turned to point down), then To. */
@media (max-width: 560px) {
  /* Integration: eight categories don't fit one row on a phone, and a sideways-scrolling strip
     hid Speed/Time/Data with no hint. Two rows of four keep every category in view. */
  #ptc-app .units__cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  #ptc-app .units__cats .segmented__option { padding: 0 4px; }
  #ptc-app .units__convert { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #ptc-app .units__swap { justify-self: center; margin: 0; width: 36px; height: 36px; }
  #ptc-app .units__swap svg { transform: rotate(90deg); }
  #ptc-app .units-table__hint { display: none; }
  #ptc-app .units-table__row { grid-template-columns: minmax(0, 1fr) auto 5em; gap: 8px; padding: 6px 10px; }
  #ptc-app .units-table__value { font-size: var(--fs-3); }
}
@media (max-width: 380px) {
  #ptc-app .units__keys { --key-gap: 6px; }
  #ptc-app .units__keys .key { font-size: 1.125rem; }
  #ptc-app .units__cats .segmented__option { padding: 0 8px; }
}
/* ===== css/74-mode-currency.css (scoped under #ptc-app) ===== */
/* css/74-mode-currency.css — the Currency converter: the always-visible "example rates" notice,
   display window, From ⇄ To amounts with currency pickers, keypad, and the rate board (an editor
   bar for the selected rate above a receipt-paper list of every currency, edited ones marked). */

#ptc-app .fx { display: grid; gap: 14px; }

/* ---------------------------------------------------------------- the notice (never hidden) */
#ptc-app .fx__notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: var(--fs-2);
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--accent-soft);
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 8px;
}
#ptc-app .fx__notice-icon { display: grid; place-items: center; flex: none; color: var(--accent); }
#ptc-app .fx__notice-icon svg { width: 16px; height: 16px; }

#ptc-app .fx__display { min-height: 112px; }

/* ---------------------------------------------------------------- From ⇄ To */
#ptc-app .fx__convert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}
#ptc-app .fx__side { display: grid; gap: 8px; min-width: 0; }
#ptc-app .fx__field .field__hint.is-empty,
#ptc-app .fx__rate-field .field__hint.is-empty { min-height: 0; display: none; }
#ptc-app .fx__field .field__label::after {
  content: "";
  margin-left: 6px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-faint);
}
#ptc-app .fx__field.is-source .field__label::after { content: "· typing"; }
#ptc-app .fx__field .field__suffix,
#ptc-app .fx__rate-field .field__suffix { font-size: var(--fs-3); letter-spacing: .04em; }
#ptc-app .fx__pick .picker__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#ptc-app .fx__pick .picker__button { min-height: 40px; font-size: var(--fs-2); }

#ptc-app .fx__swap {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: 28px;          /* level with the middle of the field boxes */
  color: var(--ink-soft);
  background: var(--key-op);
  border: 1px solid var(--key-edge);
  border-radius: 50%;
  box-shadow: 0 2px 0 var(--key-edge);
  transition: transform var(--t) var(--ease), color var(--t-fast) var(--ease);
}
#ptc-app .fx__swap:hover { color: var(--ink); }
#ptc-app .fx__swap:active { transform: translateY(1px) rotate(180deg); box-shadow: 0 1px 0 var(--key-edge); }
#ptc-app .fx__swap svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- keypad */
#ptc-app .fx__keys { --key-h: clamp(42px, 5.4vh, 50px); --key-gap: 8px; }
#ptc-app .fx__keys .key--eq { margin-top: 2px; }
#ptc-app .fx__word-key { font-family: var(--font-ui); font-size: var(--fs-3); font-weight: 600; }
#ptc-app .fx__word-key .key__icon svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- rate board */
#ptc-app .fx-rates { display: grid; gap: 10px; margin-top: 4px; }
#ptc-app .fx-rates__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 2px; }
#ptc-app .fx-rates__titles { min-width: 0; }
#ptc-app .fx-rates__title { font-size: var(--fs-3); font-weight: 600; color: var(--ink); }
#ptc-app .fx-rates__label { font-size: var(--fs-1); font-weight: 500; color: var(--accent); }
#ptc-app[data-theme="dark"] .fx-rates__label { color: var(--accent); }
#ptc-app .fx-rates__reset { flex: none; white-space: nowrap; }

/* The editor bar: which rate the keys are typing into. */
#ptc-app .fx-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-areas: "id field" "restore field";
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
#ptc-app .fx-edit__id { grid-area: id; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; min-width: 0; }
#ptc-app .fx-edit__code { font-family: var(--font-mono); font-size: var(--fs-5); font-weight: 500; color: var(--ink); }
#ptc-app .fx-edit__name { font-size: var(--fs-2); color: var(--ink-soft); }
#ptc-app .fx-edit__state { flex-basis: 100%; font-size: var(--fs-1); color: var(--ink-faint); }
#ptc-app .fx-edit__state.is-edited { color: var(--accent); font-weight: 500; }
#ptc-app .fx-edit .fx__rate-field { grid-area: field; }
#ptc-app .fx-edit__restore { grid-area: restore; justify-self: start; min-height: 28px; padding: 0 8px; margin-left: -8px; font-size: var(--fs-2); }

#ptc-app .fx-rates__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 4px;
  gap: 0 4px;
  list-style: none;
  font-family: var(--font-tape);
  color: var(--tape-ink);
  background-color: var(--tape);
  background-image: var(--grain);
  background-size: 220px 220px;
  background-blend-mode: soft-light;
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow-1);
}
#ptc-app[data-theme="dark"] .fx-rates__list { background-image: none; }
#ptc-app .fx-rates__item { min-width: 0; border-bottom: 1px dotted var(--tape-rule); }
#ptc-app .fx-rate {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 4px 8px;
  text-align: left;
  color: inherit;
  border-radius: 6px;
  transition: background-color var(--t-fast) var(--ease);
}
#ptc-app .fx-rate:hover:not(:disabled) { background: var(--hover); }
#ptc-app .fx-rate:active:not(:disabled) { background: var(--active); }
#ptc-app .fx-rate:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
#ptc-app .fx-rate:disabled { cursor: default; }
#ptc-app .fx-rate.is-selected { background: var(--focus-ring); box-shadow: inset 3px 0 0 var(--focus); }
#ptc-app .fx-rate__sym {
  display: grid;
  place-items: center;
  height: 2.1em;
  overflow: hidden;
  font-size: var(--fs-2);
  font-weight: 700;
  white-space: nowrap;
  color: var(--tape-ink-soft);
  border: 1px solid var(--tape-rule);
  border-radius: 5px;
}
#ptc-app .fx-rate.is-in-use .fx-rate__sym { color: var(--tape-ink); border-color: var(--tape-ink-soft); }
#ptc-app .fx-rate__id { display: grid; min-width: 0; line-height: 1.2; }
#ptc-app .fx-rate__code { font-size: var(--fs-4); font-weight: 700; }
#ptc-app .fx-rate__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-ui); font-size: .6875rem; color: var(--tape-ink-soft); }
/* On the tinted selected row the soft ink drops under 4.5:1, so the name takes full ink. */
#ptc-app .fx-rate.is-selected .fx-rate__name { color: var(--tape-ink); }
#ptc-app .fx-rate__val { display: grid; justify-items: end; line-height: 1.2; }
#ptc-app .fx-rate__num { font-size: var(--fs-3); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#ptc-app .fx-rate__mark {
  padding: 0 4px;
  font-family: var(--font-ui);
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tape-red);
  border: 1px solid currentColor;
  border-radius: 3px;
}
#ptc-app .fx-rate__mark--base { color: var(--tape-ink-soft); }
#ptc-app .fx-rate.is-edited .fx-rate__num { color: var(--tape-red); }
#ptc-app[data-theme="dark"] .fx-rate.is-edited .fx-rate__num { color: #F6DDB2; text-shadow: 0 0 14px var(--tape-glow); }
#ptc-app[data-theme="dark"] .fx-rate.is-edited .fx-rate__mark { color: var(--accent); }

@media (max-height: 820px) and (min-width: 760px) {
  #ptc-app .fx { gap: 12px; }
  #ptc-app .fx__display { min-height: 100px; }
  #ptc-app .fx__display .display__main { font-size: calc(2.25rem * var(--fit)); }
}

@media (max-width: 759px) {
  #ptc-app .fx { gap: 12px; }
  #ptc-app .fx__display .display__main { font-size: calc(2.25rem * var(--fit)); }
  #ptc-app .fx__keys { --key-h: 48px; }
}

@media (max-width: 560px) {
  #ptc-app .fx__convert { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #ptc-app .fx__swap { justify-self: center; margin: 0; width: 36px; height: 36px; }
  #ptc-app .fx__swap svg { transform: rotate(90deg); }
  #ptc-app .fx-rates__head { flex-wrap: wrap; align-items: center; }
  #ptc-app .fx-edit { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "field" "restore"; row-gap: 6px; }
  #ptc-app .fx-rates__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  #ptc-app .fx__keys { --key-gap: 6px; }
  #ptc-app .fx__keys .key { font-size: 1.125rem; }
}
/* ===== css/75-mode-loan.css (scoped under #ptc-app) ===== */
/* css/75-mode-loan.css — Loan & Mortgage: the Loan/Mortgage switch, display, field grid beside a
   compact keypad, the figures list and balance chart, and the amortization table with
   collapsible years. The machine body is wider than Standard's to fit the schedule. */

#ptc-app .app[data-mode="loan"] { --panel-max: 880px; }

#ptc-app .loan { display: grid; gap: 16px; container-type: inline-size; min-width: 0; }

/* ---------------------------------------------------------------- top row */
#ptc-app .loan__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
#ptc-app .loan__kind .segmented__option { min-width: 96px; }
#ptc-app .loan__tip { font-size: var(--fs-1); color: var(--ink-faint); }

#ptc-app .loan__display { min-height: 112px; }
/* Long "amount at rate for term" lines sit below the flag chips instead of under them. */
@container (max-width: 560px) { #ptc-app .loan__display .display__expr { margin-top: 18px; font-size: var(--fs-3); } }

/* ---------------------------------------------------------------- fields + keypad */
#ptc-app .loan__entry { display: grid; gap: 16px; align-items: start; }
#ptc-app .loan__fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 156px), 1fr));
  gap: 10px 12px;
  min-width: 0;
}
#ptc-app .loan__fields .ptc-field { gap: 5px; }
#ptc-app .loan__fields .field__hint { min-height: 1.3em; margin-top: -1px; }
/* Every label line is as tall as one holding a unit switch, so the boxes in a row line up. */
#ptc-app .loan__fields .ptc-field > .field__label,
#ptc-app .loan__label-row { display: flex; align-items: center; min-height: 26px; }
#ptc-app .loan__label-row { justify-content: space-between; gap: 6px; }
@media (pointer: coarse) { #ptc-app .loan__fields .ptc-field > .field__label,
#ptc-app .loan__label-row { min-height: 34px; } }
#ptc-app .loan__label-row .field__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ptc-app .loan__unit { padding: 2px; border-radius: 7px; flex: none; }
#ptc-app .loan__unit .segmented__option { min-height: 20px; padding: 0 7px; font-size: .6875rem; border-radius: 5px; }
@media (pointer: coarse) { #ptc-app .loan__unit .segmented__option { min-height: 28px; padding: 0 8px; } }

#ptc-app .field--month .field__steps .field__step { font-size: .6875rem; }

#ptc-app .loan__keys { --key-h: 44px; --key-gap: 7px; }
#ptc-app .loan__keys .key--eq { margin-top: 2px; }

@container (min-width: 640px) {
  #ptc-app .loan__entry { grid-template-columns: minmax(0, 1fr) 248px; }
  #ptc-app .loan__keys { position: sticky; top: 8px; }
}

/* ---------------------------------------------------------------- figures + chart */
#ptc-app .loan__results { display: grid; gap: 16px; }
@container (min-width: 640px) {
  #ptc-app .loan__results { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
}

#ptc-app .loan__figures {
  padding: 12px 14px;
  background: var(--tape);
  border: 1px solid var(--tape-rule);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
  font-family: var(--font-tape);
  color: var(--tape-ink);
}
#ptc-app .loan__figlist { display: grid; gap: 3px; }
#ptc-app .loan__fig { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: var(--fs-2); line-height: 1.5; }
#ptc-app .loan__fig dt { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tape-ink-soft); }
/* Dot leaders, receipt-style. */
#ptc-app .loan__fig::after { content: ""; order: 1; flex: 1 1 12px; min-width: 12px; border-bottom: 1px dotted var(--tape-rule); transform: translateY(-4px); }
#ptc-app .loan__fig dd { order: 2; flex: none; font-variant-numeric: tabular-nums; text-align: right; }
#ptc-app .loan__fig.is-strong dt { color: var(--tape-ink); font-weight: 700; }
#ptc-app .loan__fig.is-strong dd { font-weight: 700; color: var(--tape-red); }
#ptc-app[data-theme="dark"] .loan__fig.is-strong dd { color: #F6DDB2; text-shadow: 0 0 14px var(--tape-glow); }
#ptc-app .loan__fig.is-muted dd { color: var(--tape-ink-soft); font-style: italic; }
#ptc-app .loan__empty { font-size: var(--fs-3); color: var(--ink-soft); }
#ptc-app .loan__figures .loan__empty { font-family: var(--font-tape); color: var(--tape-ink-soft); }

#ptc-app .loan__chart {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px 8px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
}
#ptc-app[data-theme="dark"] .loan__chart { background: #151619; }
#ptc-app .loan__chart-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
#ptc-app .loan__cap-title { font-size: .6875rem; font-weight: 600; letter-spacing: var(--caps-track); text-transform: uppercase; color: var(--ink-faint); }
#ptc-app .loan__legend { display: flex; gap: 12px; font-size: var(--fs-1); color: var(--ink-soft); }
#ptc-app .loan__key { display: inline-flex; align-items: center; gap: 5px; }
#ptc-app .loan__key::before { content: ""; width: 14px; height: 0; border-top: 2px solid var(--accent); }
#ptc-app .loan__key--base::before { border-top: 1.5px dashed var(--ink-faint); }
#ptc-app .loan:not([data-extra]) .loan__key--base { display: none; }
#ptc-app .loan__canvas { width: 100%; height: 100%; min-height: 150px; }

/* ---------------------------------------------------------------- schedule */
#ptc-app .loan__schedule { display: grid; gap: 10px; min-width: 0; padding-top: 4px; border-top: 1px dashed var(--rule-strong); }
#ptc-app .loan__sched-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 10px; }
#ptc-app .loan__sched-titles { display: grid; gap: 2px; }
#ptc-app .loan__h { font-size: var(--fs-4); font-weight: 600; }
#ptc-app .loan__sched-count { font-size: var(--fs-1); color: var(--ink-faint); }
#ptc-app .loan__sched-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#ptc-app .loan__mini { min-height: 32px; padding: 0 10px; font-size: var(--fs-2); color: var(--ink-soft); }
#ptc-app .loan__mini:hover { color: var(--ink); }
#ptc-app .loan__export .i { width: 16px; height: 16px; }

#ptc-app .loan__table-wrap {
  max-height: 460px;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--tape);
  border: 1px solid var(--tape-rule);
  border-radius: var(--r-2);
  outline: none;
}
#ptc-app .loan__table { width: 100%; min-width: 480px; font-family: var(--font-tape); font-size: .78rem; color: var(--tape-ink); }
#ptc-app .loan__table th,
#ptc-app .loan__table td { padding: 5px 7px; white-space: nowrap; text-align: left; font-weight: 400; }
#ptc-app .loan__table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
#ptc-app .loan__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-block: 7px;
  font-family: var(--font-ui);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--tape);
  box-shadow: inset 0 -1px 0 var(--tape-rule);
}
#ptc-app .loan__yearhead tr { background: var(--tape-edge); }
#ptc-app .loan__yearhead td { font-weight: 700; }
#ptc-app .loan__yearhead + .loan__months tr:first-child th,
#ptc-app .loan__yearhead + .loan__months tr:first-child td { padding-top: 7px; }
#ptc-app .loan__yearhead th { padding: 0 4px; }
#ptc-app .loan__yearhead:not(:first-of-type) tr { box-shadow: inset 0 1px 0 var(--tape-rule); }
#ptc-app .loan__year-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 6px;
  font-family: var(--font-tape);
  font-weight: 700;
  color: var(--tape-ink);
  border-radius: var(--r-1);
}
#ptc-app .loan__year-btn:hover { background: var(--hover); }
#ptc-app .loan__chev { display: grid; place-items: center; color: var(--tape-ink-soft); transform: rotate(-90deg); transition: transform var(--t) var(--ease); }
#ptc-app .loan__chev .i { width: 14px; height: 14px; }
#ptc-app .loan__year-btn[aria-expanded="true"] .loan__chev { transform: none; }
#ptc-app .loan__year-count { font-weight: 400; font-size: var(--fs-1); color: var(--ink-soft); }
#ptc-app .loan__months tr:nth-child(even) { background: color-mix(in srgb, var(--tape-edge) 45%, transparent); }
#ptc-app .loan__months th { padding-left: 26px; }
#ptc-app .loan__mo { display: inline-block; min-width: 3ch; }
#ptc-app .loan__no { margin-left: 8px; font-size: var(--fs-1); color: var(--tape-ink-soft); }
#ptc-app .loan__months tr.is-final td:last-child { color: var(--tape-red); font-weight: 700; }
@media (pointer: coarse) { #ptc-app .loan__year-btn { min-height: var(--hit); } }

/* ---------------------------------------------------------------- narrow */
@media (max-width: 759px) {
  #ptc-app .loan { gap: 14px; }
  #ptc-app .loan__tip { display: none; }
  #ptc-app .loan__kind { flex: 1 1 auto; }
  #ptc-app .loan__kind .segmented__option { min-width: 0; }
  #ptc-app .loan__keys { --key-h: 48px; --key-gap: 7px; }
  #ptc-app .loan__display .display__main { font-size: calc(2.25rem * var(--fit)); }
  #ptc-app .loan__table-wrap { max-height: 380px; }
  /* Sideways scroll on a phone: the month column stays put, and the right edge fades while
     more columns (Interest, Balance) are off-screen (.has-more, set by the scroll handler). */
  #ptc-app .loan__table-wrap.has-more {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), rgba(0, 0, 0, .25));
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), rgba(0, 0, 0, .25));
  }
  #ptc-app .loan__table tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--tape); box-shadow: inset -1px 0 0 var(--tape-rule); }
  #ptc-app .loan__table thead tr > :first-child { z-index: 2; box-shadow: inset -1px 0 0 var(--tape-rule), inset 0 -1px 0 var(--tape-rule); }
  #ptc-app .loan__yearhead tr > :first-child { background: var(--tape-edge); }
  #ptc-app .loan__months tr:nth-child(even) > :first-child { background: color-mix(in srgb, var(--tape-edge) 45%, var(--tape)); }
  #ptc-app .loan__sched-tools { width: 100%; }
  #ptc-app .loan__export { margin-left: auto; }
}
@media (max-width: 400px) {
  #ptc-app .loan__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
  #ptc-app .loan__fields .field__step { padding: 0 2px; }
  #ptc-app .loan__fields .field--month { grid-column: 1 / -1; }
  #ptc-app .loan__sched-tools .loan__mini { padding: 0 6px; }
  #ptc-app .loan__export { padding: 0 10px; }
}
/* ===== css/76-mode-percent.css (scoped under #ptc-app) ===== */
/* css/76-mode-percent.css — Percentage & Tip: the calculation tabs, the display window, field
   grids (bill / people with stepper / tip with quick chips / tax), switches, the dot-leader
   working receipt and the compact keypad. Built only from the shared tokens and controls. */

#ptc-app .app[data-mode="percent"] { --panel-max: 880px; }
#ptc-app #panel-percent { container-type: inline-size; }

#ptc-app .pct { display: grid; gap: 14px; min-width: 0; }

/* ---------------------------------------------------------------- tabs */
#ptc-app .pct__tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
}
#ptc-app .pct__tabs .segmented__option { padding: 0 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

#ptc-app .pct__display { min-height: 108px; }
#ptc-app .pct__display .display__main { font-size: calc(2.5rem * var(--fit)); }

/* ---------------------------------------------------------------- panes and grids */
#ptc-app .pct__panes { min-width: 0; }
#ptc-app .pct__pane { display: grid; gap: 10px; min-width: 0; }

#ptc-app .pct__grid { display: grid; gap: 4px 12px; min-width: 0; }
#ptc-app .pct__grid--tip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#ptc-app .pct__grid--pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; }

/* "of", "→", "+" between a pair of fields, sitting on the value line. */
#ptc-app .pct__joiner {
  align-self: start;
  margin-top: 36px;
  min-width: 20px;
  font-family: var(--font-tape);
  font-size: var(--fs-5);
  font-weight: 700;
  text-align: center;
  color: var(--ink-faint);
}

#ptc-app .pct__people { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; min-width: 0; }
#ptc-app .pct__stepper { margin-top: 23px; }
#ptc-app .pct__stepper .stepper__btn { width: 38px; height: 46px; }

#ptc-app .pct__tipcol { display: grid; gap: 0; min-width: 0; }
#ptc-app .pct__tipcol .field__hint { display: none; }
#ptc-app .pct__chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
#ptc-app .pct__chip {
  min-height: 32px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--key);
  border: 1px solid var(--key-edge);
  border-radius: 8px;
  box-shadow: 0 1px 0 var(--key-edge);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform 70ms var(--ease);
}
#ptc-app .pct__chip:hover { color: var(--ink); background-image: linear-gradient(var(--hover), var(--hover)); }
#ptc-app .pct__chip:active { transform: translateY(1px); box-shadow: none; }
#ptc-app .pct__chip[aria-pressed="true"] {
  color: var(--key-eq-ink);
  background: var(--key-eq);
  border-color: var(--key-eq);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
#ptc-app .pct__chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

#ptc-app .pct__tax { min-width: 0; }

#ptc-app .pct__switches {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 8px 2px 0;
  border-top: 1px dashed var(--rule-strong);
}
#ptc-app .pct__switches .toggle { font-size: var(--fs-2); color: var(--ink-soft); }
#ptc-app .pct__switches .toggle[aria-checked="true"] { color: var(--ink); }

#ptc-app .pct__sign { justify-self: start; }

/* ---------------------------------------------------------------- the working (receipt rows) */
#ptc-app .pct__breakdown[role] {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 10px 14px;
  list-style: none;
  font-family: var(--font-tape);
  font-size: var(--fs-3);
  color: var(--tape-ink);
  background: var(--tape);
  border: 1px dashed var(--rule-strong);
  border-radius: 10px;
}
#ptc-app[data-theme="dark"] .pct__breakdown { background: #141518; }
#ptc-app .pct__row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
#ptc-app .pct__row-label { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tape-ink-soft); }
#ptc-app .pct__row-lead { flex: 1 1 auto; min-width: 12px; border-bottom: 2px dotted var(--tape-rule); transform: translateY(-4px); }
#ptc-app .pct__row-value { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#ptc-app .pct__row--total { padding-bottom: 4px; margin-bottom: 2px; border-bottom: 1px solid var(--tape-rule); }
#ptc-app .pct__row--total .pct__row-label { color: var(--tape-ink); font-weight: 700; }
#ptc-app .pct__row--total .pct__row-value { font-size: var(--fs-5); color: var(--tape-red); }
#ptc-app[data-theme="dark"] .pct__row--total .pct__row-value { color: #F6DDB2; text-shadow: 0 0 14px var(--tape-glow); }
#ptc-app .pct__row--note,
#ptc-app .pct__row--empty { display: block; font-size: var(--fs-2); color: var(--tape-ink-soft); }
#ptc-app .pct__row--note::before { content: "» "; }

/* ---------------------------------------------------------------- keypad */
#ptc-app .pct__keys { --key-h: 44px; --key-gap: 7px; }
#ptc-app .pct__keys .key { font-size: 1.125rem; }
#ptc-app .pct__keys .key--eq { margin-top: 2px; }

/* ---------------------------------------------------------------- wide stage: two columns
   Fields and the working on the left, keypad and Print on the right (the Loan layout), so the
   whole calculator fits a 900px-high window. */
@container (min-width: 620px) {
  #ptc-app .pct {
    grid-template-columns: minmax(0, 1fr) minmax(0, 17.5rem);
    grid-template-areas:
      "tabs      tabs"
      "display   display"
      "panes     keys"
      "breakdown keys";
    column-gap: 20px;
    align-items: start;
  }
  #ptc-app .pct__tabs { grid-area: tabs; }
  #ptc-app .pct__display { grid-area: display; }
  #ptc-app .pct__panes { grid-area: panes; }
  #ptc-app .pct__breakdown { grid-area: breakdown; }
  #ptc-app .pct__keys { grid-area: keys; }
}

/* ---------------------------------------------------------------- narrow */
@media (max-width: 759px) {
  #ptc-app .pct { gap: 12px; }
  #ptc-app .pct__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #ptc-app .pct__display .display__main { font-size: calc(2.125rem * var(--fit)); }
  #ptc-app .pct__keys { --key-h: 46px; --key-gap: 6px; }
}
@media (max-width: 520px) {
  #ptc-app .pct__grid--tip { grid-template-columns: minmax(0, 1fr); }
  #ptc-app .pct__grid--pair { grid-template-columns: minmax(0, 1fr); }
  #ptc-app .pct__joiner { display: none; }
  #ptc-app .pct__breakdown[role] { font-size: var(--fs-2); padding: 8px 10px; }
}
/* On narrow screens the flags would sit on top of a long expression: give them their own line. */
@media (max-width: 520px) {
  #ptc-app .pct__display:has(.display__flag) .display__expr { margin-top: 16px; }
}
/* ===== css/77-mode-date.css (scoped under #ptc-app) ===== */
/* css/77-mode-date.css — the Date Calculator: view switch, result window, date fields in two
   columns, the "label ····· value" breakdown sheet with dot leaders, and a compact 5-column
   keypad ending in Today and a print bar. The shared .dt / .dt-sheet / .dt__keys pieces are
   reused by the Age Calculator (css/78-mode-age.css adds only its own bits). */

#ptc-app .dt { display: grid; gap: 12px; min-width: 0; }
/* An empty hint line under a field takes no room; an error message still shows. */
#ptc-app .dt .field__hint.is-empty { display: none; }
#ptc-app .dt__pane { display: grid; gap: 12px; min-width: 0; }
#ptc-app .dt__pane[hidden] { display: none; }

#ptc-app .dt__views { justify-self: start; }
#ptc-app .dt__views .segmented__option { min-width: 7.5rem; }

#ptc-app .dt__display { min-height: 90px; }
#ptc-app .dt__display .display__main { font-size: calc(2.25rem * var(--fit)); }

/* Two date fields side by side; they stack when the panel is narrow. */
#ptc-app .dt__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px 14px;
  align-items: start;
}
#ptc-app .dt__fields .field--date .field__value { justify-content: flex-start; font-size: var(--fs-5); letter-spacing: .01em; }

#ptc-app .dt__opts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 0 2px;
}
#ptc-app .dt__swap { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
#ptc-app .dt__swap-icon { display: grid; place-items: center; }
#ptc-app .dt__swap-icon .i,
#ptc-app .dt__swap-icon svg { width: 16px; height: 16px; }

/* Amount + add/subtract share the second column in Add / Subtract. */
#ptc-app .dt__amount { display: grid; gap: 8px; min-width: 0; }
#ptc-app .dt__amount .field__hint { min-height: 0; }
#ptc-app .dt__sign { width: 100%; }
#ptc-app .dt__units { width: 100%; }
#ptc-app .dt__sign .segmented__option,
#ptc-app .dt__units .segmented__option { flex: 1 1 0; padding: 0 8px; }

/* ---------------------------------------------------------------- breakdown sheet */
#ptc-app .dt-sheet {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 6px 14px;
  font-family: var(--font-tape);
  color: var(--tape-ink);
  background-color: var(--tape);
  background-image: var(--grain);
  background-size: 220px 220px;
  background-blend-mode: soft-light;
  border: 1px solid var(--rule);
  border-radius: 10px;
}
#ptc-app[data-theme="dark"] .dt-sheet { background-color: #151619; background-image: none; border-color: #2C2D32; }
#ptc-app .dt-sheet__row {
  display: flex;
  flex-wrap: wrap;               /* on a narrow panel the value drops under its label */
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 5px 0;
}
#ptc-app .dt-sheet__row[hidden] { display: none; }
#ptc-app .dt-sheet__row + .dt-sheet__row { border-top: 1px dashed var(--tape-rule); }
#ptc-app .dt-sheet__label {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: var(--fs-2);
  color: var(--tape-ink-soft);
  white-space: nowrap;
}
/* Dot leaders run from the label to the value, like a receipt. */
#ptc-app .dt-sheet__label::after {
  content: "";
  flex: 1 1 auto;
  min-width: 12px;
  border-bottom: 1px dotted var(--tape-rule);
  transform: translateY(-3px);
}
#ptc-app .dt-sheet__dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  column-gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 0 0 auto;            /* auto: a wrapped value stays right-aligned */
  text-align: right;
}
#ptc-app .dt-sheet__value {
  font-size: var(--fs-3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#ptc-app .dt-sheet__sub { order: -1; font-family: var(--font-ui); font-size: var(--fs-1); color: var(--tape-ink-soft); }
#ptc-app .dt-sheet__sub[hidden] { display: none; }

/* ---------------------------------------------------------------- keypad */
#ptc-app .dt__keys { --key-h: clamp(40px, 5vh, 48px); --key-gap: 8px; }
#ptc-app .dt__keys .dt__today { font-family: var(--font-ui); font-size: var(--fs-3); font-weight: 600; }
/* The two-column print key drops its ENTER hint on phones rather than crowding "Print age". */
@media (max-width: 520px) { #ptc-app .dt__keys .key--eq .key__sub { display: none; } }

@media (max-height: 820px) and (min-width: 760px) {
  #ptc-app .dt { gap: 11px; }
  #ptc-app .dt__display { min-height: 92px; }
  #ptc-app .dt-sheet__row { padding: 3px 0; }
  #ptc-app .dt__keys { --key-h: 40px; --key-gap: 7px; }
}

@media (max-width: 759px) {
  #ptc-app .dt { gap: 12px; }
  #ptc-app .dt__views { justify-self: stretch; }
  #ptc-app .dt__views .segmented__option { flex: 1 1 0; min-width: 0; }
  #ptc-app .dt-sheet { padding: 4px 12px; }
  #ptc-app .dt__keys { --key-h: 48px; --key-gap: 7px; }
}
/* Phones keep the dotted-leader pattern: the label may take two lines, the value stays on the
   right of the first, and a note ("Mon–Fri, holidays not excluded") sits under its value. */
@media (max-width: 520px) {
  #ptc-app .dt-sheet__row { flex-wrap: nowrap; }
  #ptc-app .dt-sheet__label { flex: 1 1 0; min-width: 0; white-space: normal; }
  #ptc-app .dt-sheet__dd { flex: 0 0 auto; flex-direction: column; align-items: flex-end; row-gap: 1px; max-width: 64%; }
  #ptc-app .dt-sheet__sub { order: 1; }
}
@media (max-width: 380px) {
  #ptc-app .dt-sheet__label { font-size: var(--fs-1); }
  #ptc-app .dt__keys { --key-gap: 6px; }
  #ptc-app .dt__keys .key { font-size: 1.125rem; }
  #ptc-app .dt__fields .field__step { padding: 0 2px; font-size: .6875rem; }
}
/* ===== css/78-mode-age.css (scoped under #ptc-app) ===== */
/* css/78-mode-age.css — the Age Calculator. It shares the Date Calculator's layout pieces
   (.dt, .dt__fields, .dt-sheet, .dt__keys in css/77-mode-date.css); this adds the as-of column
   with its "Back to today" link and the result window's size. */

#ptc-app .age__display { min-height: 90px; }
#ptc-app .age__display .display__main { font-size: calc(2.5rem * var(--fit)); }

#ptc-app .age__asof { display: grid; gap: 4px; min-width: 0; }
#ptc-app .age__asof .field__hint { min-height: 0; }
#ptc-app .age__today {
  justify-self: end;
  min-height: 28px;
  padding: 0 8px;
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--accent);
}
#ptc-app .age__today[hidden] { display: none; }
#ptc-app[data-theme="dark"] .age__today { color: var(--accent); }

@media (max-width: 759px) {
  #ptc-app .age__display .display__main { font-size: calc(2.25rem * var(--fit)); }
}
/* ===== css/79-mode-health.css (scoped under #ptc-app) ===== */
/* css/79-mode-health.css — BMI & Health: unit and sex switches, the height/weight/age fields,
   the activity picker, the BMI display, the WHO band chart with its pin, the daily estimates
   readout with the "Estimates, not medical advice." line, and the compact keypad. */

#ptc-app .app[data-mode="health"] { --panel-max: 880px; }
#ptc-app #panel-health { container-type: inline-size; }

#ptc-app .health {
  /* Band colours: one cool tint for underweight, neutral for healthy, and a warm ramp toward
     ribbon red for the obesity classes. Names are printed on the bands, so colour is never the
     only signal. */
  --band-under: color-mix(in srgb, var(--focus) 26%, var(--tape));
  --band-healthy: color-mix(in srgb, #4E8A5B 30%, var(--tape));
  --band-over: color-mix(in srgb, #C98A2B 30%, var(--tape));
  --band-obese1: color-mix(in srgb, var(--accent) 24%, var(--tape));
  --band-obese2: color-mix(in srgb, var(--accent) 38%, var(--tape));
  --band-obese3: color-mix(in srgb, var(--accent) 52%, var(--tape));
  display: grid;
  gap: 14px;
  min-width: 0;
}
#ptc-app[data-theme="dark"] .health {
  --band-under: color-mix(in srgb, var(--focus) 30%, #15161A);
  --band-healthy: color-mix(in srgb, #7FBF8A 30%, #15161A);
  --band-over: color-mix(in srgb, var(--accent) 30%, #15161A);
  --band-obese1: color-mix(in srgb, var(--tape-red) 26%, #15161A);
  --band-obese2: color-mix(in srgb, var(--tape-red) 38%, #15161A);
  --band-obese3: color-mix(in srgb, var(--tape-red) 52%, #15161A);
}

/* ---------------------------------------------------------------- switches and fields */
#ptc-app .health__switches { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; }
#ptc-app .health__switch { display: grid; gap: 6px; min-width: 0; }

#ptc-app .health__inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 7.5rem);
  gap: 4px 12px;
  align-items: start;
  min-width: 0;
}
#ptc-app .health__grid { display: grid; gap: 4px 12px; min-width: 0; }
#ptc-app .health__grid--metric { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#ptc-app .health__grid--imperial { grid-template-columns: minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.2fr); }

#ptc-app .health__activity .listbox__hint { white-space: normal; }

#ptc-app .health__display { min-height: 108px; }
#ptc-app .health__display .display__main { font-size: calc(2.75rem * var(--fit)); }

/* ---------------------------------------------------------------- WHO band chart */
#ptc-app .health__chart { display: grid; gap: 4px; padding: 30px 0 0; min-width: 0; }
#ptc-app .health__track { position: relative; }
#ptc-app .health__bands {
  display: flex;
  height: 28px;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
}
#ptc-app .health__band {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 0;
  min-width: 0;
  overflow: hidden;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--ink-soft);
  transition: filter var(--t) var(--ease);
}
#ptc-app .health__band + .health__band { border-left: 1px solid color-mix(in srgb, var(--rule-strong) 70%, transparent); }
#ptc-app .health__band-name { overflow: hidden; text-overflow: ellipsis; padding: 0 3px; }
#ptc-app .health__band--under { background: var(--band-under); }
#ptc-app .health__band--healthy { background: var(--band-healthy); }
#ptc-app .health__band--over { background: var(--band-over); }
#ptc-app .health__band--obese1 { background: var(--band-obese1); }
#ptc-app .health__band--obese2 { background: var(--band-obese2); }
#ptc-app .health__band--obese3 { background: var(--band-obese3); }
#ptc-app .health__band.is-current { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--ink); }
#ptc-app[data-theme="dark"] .health__band.is-current { box-shadow: inset 0 -3px 0 var(--accent); }

#ptc-app .health__ticks { position: relative; height: 1.1em; font-family: var(--font-mono); font-size: .6875rem; color: var(--ink-faint); }
#ptc-app .health__tick { position: absolute; top: 0; transform: translateX(-50%); font-variant-numeric: tabular-nums; }

/* The pin: the BMI value in a small tag with a stem through the bar. */
#ptc-app .health__pin {
  position: absolute;
  bottom: -4px;
  z-index: 1;
  display: grid;
  justify-items: center;
  transform: translateX(-50%);
  pointer-events: none;
  transition: left var(--t-slow) var(--ease-out);
}
#ptc-app .health__pin-value {
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  font-weight: 500;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  color: var(--tape);
  background: var(--tape-ink);
  border-radius: 4px;
}
#ptc-app .health__pin-stem { width: 2px; height: 34px; background: var(--tape-ink); border-radius: 1px; }
#ptc-app[data-theme="dark"] .health__pin-value { color: #1A1206; background: var(--accent); box-shadow: 0 0 14px var(--tape-glow); }
#ptc-app[data-theme="dark"] .health__pin-stem { background: var(--accent); }
@media (prefers-reduced-motion: reduce) { #ptc-app .health__pin { transition: none; } }

/* ---------------------------------------------------------------- estimates readout */
#ptc-app .health__readout {
  padding: 10px 14px 8px;
  font-family: var(--font-tape);
  color: var(--tape-ink);
  background: var(--tape);
  border: 1px dashed var(--rule-strong);
  border-radius: 10px;
}
#ptc-app[data-theme="dark"] .health__readout { background: #141518; }
#ptc-app .health__readout-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--tape-rule);
}
#ptc-app .health__readout-title {
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--ink-soft);
}
#ptc-app .health__disclaimer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: var(--fs-2);
  font-weight: 600;
  color: var(--accent);
}
#ptc-app[data-theme="dark"] .health__disclaimer { color: var(--accent); }
#ptc-app .health__disclaimer-icon svg { width: 15px; height: 15px; }

#ptc-app .health__rows { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
#ptc-app .health__row { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 2px 0; font-size: var(--fs-3); }
#ptc-app .health__row-label { display: flex; align-items: baseline; gap: 8px; flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
#ptc-app .health__row-label > span:first-child { flex: none; font-weight: 700; }
#ptc-app .health__row-sub { overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-1); color: var(--tape-ink-soft); }
#ptc-app .health__row-lead { flex: 1 1 auto; min-width: 12px; border-bottom: 2px dotted var(--tape-rule); transform: translateY(-4px); }
#ptc-app .health__row-value { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#ptc-app .health__row--tdee .health__row-value { color: var(--tape-red); }
#ptc-app[data-theme="dark"] .health__row--tdee .health__row-value { color: #F6DDB2; text-shadow: 0 0 14px var(--tape-glow); }
#ptc-app .health__note { margin-top: 4px; font-size: var(--fs-1); color: var(--tape-ink-soft); }

/* ---------------------------------------------------------------- keypad */
#ptc-app .health__keys { --key-h: 44px; --key-gap: 7px; }
#ptc-app .health__keys .key { font-size: 1.125rem; }
#ptc-app .health__keys .key--eq { margin-top: 2px; }

/* ---------------------------------------------------------------- wide stage: two columns
   With room (the 1440 layout), the keypad and its Print key move up beside the activity,
   display and band chart, and the estimates run full width underneath — the whole calculator
   fits a 900px-high window instead of a long single column. */
@container (min-width: 620px) {
  #ptc-app .health {
    grid-template-columns: minmax(0, 1fr) minmax(0, 17.5rem);
    grid-template-areas:
      "switches switches"
      "inputs   inputs"
      "activity keys"
      "display  keys"
      "chart    keys"
      "readout  readout";
    column-gap: 20px;
    align-items: start;
  }
  #ptc-app .health__switches { grid-area: switches; }
  #ptc-app .health__inputs { grid-area: inputs; grid-template-columns: minmax(0, 1fr) minmax(0, 12rem); }
  #ptc-app .health__activity { grid-area: activity; }
  #ptc-app .health__display { grid-area: display; }
  #ptc-app .health__chart { grid-area: chart; }
  #ptc-app .health__readout { grid-area: readout; }
  #ptc-app .health__keys { grid-area: keys; }
}

/* ---------------------------------------------------------------- narrow */
@media (max-width: 759px) {
  #ptc-app .health { gap: 12px; }
  #ptc-app .health__display .display__main { font-size: calc(2.25rem * var(--fit)); }
  #ptc-app .health__keys { --key-h: 46px; --key-gap: 6px; }
}
@media (max-width: 520px) {
  /* Height and weight share two thirds, Age the last third: one row, no half-empty line. */
  #ptc-app .health__inputs { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 4px 8px; }
  #ptc-app .health__grid { gap: 4px 8px; }
  #ptc-app .health__grid--imperial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #ptc-app .health__grid--imperial > .ptc-field:last-child { grid-column: 1 / -1; }
  #ptc-app .health__band--obese2 .health__band-name,
#ptc-app .health__band--obese3 .health__band-name { font-size: .625rem; }
  /* The underweight band is the narrowest (BMI 15–18.5): a smaller face keeps "Under" whole. */
  #ptc-app .health__band--under .health__band-name { padding: 0 1px; font-size: .5625rem; letter-spacing: 0; }
  #ptc-app .health__row-sub { display: none; }
  #ptc-app .health__readout { padding: 8px 10px; }
}
/* On narrow screens the unit/sex flags get their own line above the expression. */
@media (max-width: 520px) {
  #ptc-app .health__display .display__expr { margin-top: 16px; font-size: var(--fs-3); }
}
/* ===== css/7a-mode-stats.css (scoped under #ptc-app) ===== */
/* css/7a-mode-stats.css — the Statistics calculator: display, sample/population bar with the
   summary / report / clear actions, the dataset "receipt well" of value chips, the 4-column
   keypad, the statistics list with dot leaders and print buttons, and the histogram well.
   The body switches to two columns with a container query, so it fits the 1440 stage, the
   1024 rail layout and a 360px phone without media-query guesswork. */

#ptc-app .app[data-mode="stats"] { --panel-max: 780px; }

#ptc-app .stats { display: grid; gap: 14px; container-type: inline-size; }
#ptc-app .stats__display { min-height: 100px; }

/* ---------------------------------------------------------------- section heads */
#ptc-app .stats__head-end { display: flex; align-items: center; gap: 6px; min-width: 0; }
#ptc-app .stats__clear { min-height: 26px; padding: 0 8px; font-size: var(--fs-1); color: var(--accent); }
#ptc-app .stats__clear .i { width: 14px; height: 14px; }
#ptc-app[data-theme="dark"] .stats__clear { color: var(--tape-red); }
#ptc-app .stats__kind { padding: 2px; }
#ptc-app .stats__kind .segmented__option { min-height: 24px; padding: 0 10px; font-size: var(--fs-1); }
#ptc-app .stats__export { width: 100%; min-height: 38px; }
#ptc-app .stats__export .i { width: 16px; height: 16px; }
@media (pointer: coarse) {
  #ptc-app .stats__clear { min-height: 36px; }
  #ptc-app .stats__kind .segmented__option { min-height: 36px; }
}

/* ---------------------------------------------------------------- body */
#ptc-app .stats__body { display: grid; gap: 16px; min-width: 0; }
#ptc-app .stats__entry,
#ptc-app .stats__results { display: grid; gap: 10px; align-content: start; min-width: 0; }

#ptc-app .stats__data { display: grid; gap: 6px; min-width: 0; }
#ptc-app .stats__data-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  padding: 0 2px;
}
#ptc-app .stats__caps {
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--ink-faint);
}
#ptc-app .stats__count {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* The receipt well shared by the chips, the statistics list and the chart. */
#ptc-app .stats__chips-wrap,
#ptc-app .stats__list,
#ptc-app .stats__chart-wrap {
  background-color: var(--tape);
  background-image: var(--grain);
  background-size: 220px 220px;
  background-blend-mode: soft-light;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  box-shadow: inset 0 1px 3px rgba(60, 45, 20, .09);
}
#ptc-app[data-theme="dark"] .stats__chips-wrap,
#ptc-app[data-theme="dark"] .stats__list,
#ptc-app[data-theme="dark"] .stats__chart-wrap {
  background-color: #0F1012;
  background-image: none;
  border-color: #2C2D32;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .55);
}

/* ---------------------------------------------------------------- chips */
#ptc-app .stats__chips-wrap {
  min-height: 58px;
  max-height: 112px;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#ptc-app .stats__chips { display: flex; flex-wrap: wrap; gap: 5px; }
#ptc-app .stats__chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 26px;
  padding: 0 3px 0 8px;
  font-family: var(--font-tape);
  font-size: var(--fs-3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  color: var(--tape-ink);
  background: var(--surface);
  border: 1px solid var(--tape-rule);
  border-radius: 6px;
  box-shadow: 0 1px 0 var(--tape-rule);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#ptc-app[data-theme="dark"] .stats__chip { background: var(--surface-2); box-shadow: none; }
#ptc-app .stats__chip.is-negative { color: var(--tape-red); }
#ptc-app .stats__chip-x { display: grid; place-items: center; width: 16px; height: 16px; color: var(--ink-faint); opacity: .7; }
#ptc-app .stats__chip-x .i { width: 12px; height: 12px; }
#ptc-app button.stats__chip:hover { border-color: var(--accent); }
#ptc-app button.stats__chip:hover .stats__chip-text { text-decoration: line-through; text-decoration-color: var(--accent); }
#ptc-app button.stats__chip:hover .stats__chip-x { color: var(--accent); opacity: 1; }
#ptc-app button.stats__chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
#ptc-app .stats__chip--pending {
  padding-right: 6px;
  background: transparent;
  border-style: dashed;
  border-color: var(--focus);
  box-shadow: none;
}
#ptc-app[data-theme="dark"] .stats__chip--pending { background: transparent; }
#ptc-app .stats__caret {
  width: 2px;
  height: 14px;
  margin-left: 2px;
  background: var(--focus);
  border-radius: 1px;
  animation: ptc-caret 1.1s steps(1) infinite;
}
#ptc-app .stats__chip-more {
  align-self: center;
  padding: 0 4px;
  font-size: var(--fs-1);
  color: var(--tape-ink-soft);
}
#ptc-app .stats__empty { padding: 8px 4px; font-size: var(--fs-2); line-height: 1.4; color: var(--tape-ink-soft); }
#ptc-app .stats__rule { padding: 0 2px; font-size: var(--fs-1); line-height: 1.4; color: var(--ink-faint); }

/* ---------------------------------------------------------------- keypad */
#ptc-app .stats__keys { --key-h: clamp(42px, 5.2vh, 52px); --key-gap: 8px; }
#ptc-app .stats__key-word { font-family: var(--font-ui); font-size: var(--fs-3); font-weight: 600; letter-spacing: .01em; }
#ptc-app .stats__keys .key--eq { margin-top: 2px; }

/* ---------------------------------------------------------------- statistics list */
#ptc-app .stats .stats__list {
  display: grid;
  margin: 0;
  padding: 4px 4px 4px 12px;
  list-style: none;
}
#ptc-app .stats__row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 26px;
}
#ptc-app .stats__label {
  flex: none;
  font-size: var(--fs-2);
  white-space: nowrap;
  color: var(--tape-ink-soft);
}
#ptc-app .stats__leader {
  flex: 1 1 8px;
  min-width: 8px;
  align-self: center;
  margin-top: 8px;
  border-bottom: 2px dotted var(--tape-rule);
}
#ptc-app .stats__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-tape);
  font-size: var(--fs-4);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--tape-ink);
}
#ptc-app .stats__value.is-negative { color: var(--tape-red); }
#ptc-app .stats__value.is-none { font-weight: 400; color: var(--tape-ink-soft); }
#ptc-app .stats__row[data-stat="mean"] .stats__value { color: var(--accent); }
#ptc-app[data-theme="dark"] .stats__row[data-stat="mean"] .stats__value { color: #F6DDB2; text-shadow: 0 0 14px var(--tape-glow); }
#ptc-app .stats__print { width: 30px; height: 30px; color: var(--tape-ink-soft); }
#ptc-app .stats__print .i { width: 16px; height: 16px; }
#ptc-app .stats__print:disabled { opacity: .3; }
@media (pointer: coarse) { #ptc-app .stats__print { width: 40px; height: 40px; } }

/* ---------------------------------------------------------------- histogram */
#ptc-app .stats__chart { display: grid; gap: 6px; margin: 0; min-width: 0; }
#ptc-app .stats__chart-title { padding: 0 2px; }
#ptc-app .stats__chart-wrap { position: relative; height: clamp(104px, 14vh, 150px); overflow: hidden; }
#ptc-app .stats__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------------------------------------------------------------- widths */
@container (min-width: 600px) {
  #ptc-app .stats__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: start; }
}
@container (min-width: 440px) and (max-width: 599px) {
  #ptc-app .stats .stats__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
}

/* Laptop-height windows (1440×900): a shorter histogram well keeps the whole machine in view. */
@media (max-height: 920px) and (min-width: 760px) {
  #ptc-app .stats__chart-wrap { height: 100px; }
}
/* Short windows (1024×768 with the rail): tighten the machine. */
@media (max-height: 820px) and (min-width: 760px) {
  #ptc-app .stats { gap: 12px; }
  #ptc-app .stats__display { min-height: 100px; }
  #ptc-app .stats__display .display__main { font-size: calc(2.25rem * var(--fit)); }
}
@media (max-width: 759px) {
  #ptc-app .stats { gap: 12px; }
  #ptc-app .stats__display .display__main { font-size: calc(2.375rem * var(--fit)); }
  #ptc-app .stats__keys { --key-h: 50px; }
}
@media (max-width: 380px) {
  #ptc-app .stats__keys { --key-gap: 6px; }
}
/* A 360px phone: the long spread figures keep all their digits. */
@container (max-width: 360px) {
  #ptc-app .stats__label { font-size: var(--fs-1); }
  #ptc-app .stats__value { font-size: var(--fs-3); }
  #ptc-app .stats .stats__list { padding-left: 10px; }
}
/* ===== css/90-print.css (scoped under #ptc-app) ===== */
/* css/90-print.css — printing prints the tape and nothing else (CONTRACT 9.1): every rendered
   line (PTC.tape renders the whole history on beforeprint), black ink on white with red kept for
   negatives, no toolbar or printer head, a receipt header, and page breaks between lines, never
   inside one. The theme on screen doesn't matter on paper. */

@media print {
  @page { margin: 14mm 12mm; }

  html,
body { background: #fff !important; color: #000 !important; }
  #ptc-app::before,
#ptc-app::after { display: none !important; }

  /* Hide everything that neither is the tape panel nor contains it... */
  body *:not(:has(#tape-panel)):not(#tape-panel):not(#tape-panel *) { display: none !important; }
  /* ...and flatten the layout around it. */
  body *:has(#tape-panel) {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #ptc-app #tape-panel {
    --tape: #fff;
    --tape-ink: #000;
    --tape-ink-soft: #3C3C3C;
    --tape-rule: #9A9A9A;
    --tape-red: #A8231C;
    --tape-glow: transparent;
    display: block !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #ptc-app .ptc-tape { height: auto; display: block; }
  #ptc-app .tape__bar,
#ptc-app .tape__tools,
#ptc-app .tape__banner,
#ptc-app .tape-head,
#ptc-app .tape__lip,
#ptc-app .tape__more,
#ptc-app .tape-line__tools,
#ptc-app .tape__empty { display: none !important; }
  #ptc-app .tape__machine,
#ptc-app .tape__viewport,
#ptc-app .tape__scroll { display: block; height: auto; margin: 0; padding: 0; overflow: visible; }
  #ptc-app .tape__paper { filter: none; }
  #ptc-app .tape__roll {
    max-width: 118mm;
    margin: 0 auto;
    padding: 0 7mm 0 0;             /* room for the total marks in the right margin */
    background: #fff !important;
    -webkit-mask: none;
    mask: none;
    text-shadow: none;
    color: #000;
  }
  #ptc-app .tape__roll::before { display: none; }

  #ptc-app .tape__print-head {
    display: block;
    margin-bottom: 4mm;
    padding-bottom: 3mm;
    text-align: center;
    border-bottom: 1px dashed #777;
  }
  #ptc-app .tape__print-title { font-weight: 700; font-size: 11pt; letter-spacing: .12em; text-transform: uppercase; }
  #ptc-app .tape__print-meta { font-size: 9pt; color: #333; }

  #ptc-app .tape-line,
#ptc-app .tape-day { break-inside: avoid; page-break-inside: avoid; }
  #ptc-app .tape-day { break-after: avoid; page-break-after: avoid; }
  #ptc-app .tape-line { animation: none !important; }
  #ptc-app .tape-line > .tape-line__body { overflow: visible !important; animation: none !important; transform: none !important; opacity: 1 !important; }
  #ptc-app .tape-line > .tape-line__body::after { display: none; }
  #ptc-app .tape-line + .tape-line { background: none; border-top: 1px dotted #9A9A9A; }

  #ptc-app .tape-num {
    background: none !important;
    box-shadow: none !important;
    color: inherit;
    text-shadow: none !important;
  }
  #ptc-app .tape-num.is-neg,
#ptc-app .tape-line__mark {
    color: #A8231C !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #ptc-app .tape-num--result:not(.is-neg) { color: #000 !important; }
  #ptc-app .tape-detail .tape-num:not(.is-neg) { color: #000; }
  #ptc-app .tape-line__mode,
#ptc-app .tape-line__time,
#ptc-app .tape-line__note,
#ptc-app .tape-day,
#ptc-app .tape-line__eq { color: #3C3C3C; }
}
/* ===== estate/css/99-estate.css ===== */
/* estate/css/99-estate.css — the labs.llc edition's frame (build.py --estate appends this after
   the scoped calculator CSS; it is written already scoped, so the scoper leaves it alone).

   #ptc-app is the one root: it carries the tokens (data-theme="paper"|"dark", fixed per edition
   file) and paints the paper ground that <html> painted in the standalone page. */

#ptc-app {
  position: relative;               /* the grain layers below are positioned against it */
  margin: 0;
  /* Estate layers: header .nav 60, drawer 200, search 210, assistant 940, LXToast 9999.
     Calculator overlays stay at 100 (above the sticky header, below every estate panel) and
     its toasts drop to 190 so an open drawer's scrim still covers them. */
  --z-toast: 190;
}

/* Grain and lamp: absolute inside the root instead of fixed on body. The app frame is lifted
   one layer above them (a stacking context on .app only — #overlay-root and #toast-root are
   siblings of .app, so their fixed layers still stack against the estate page). */
#ptc-app::before,
#ptc-app::after {
  position: absolute;
  z-index: 0;
}
#ptc-app > .app {
  position: relative;
  z-index: 1;
}

/* Fit below the estate header (sticky .nav, --nav-h 74px, 62px at ≤640px) instead of owning
   the viewport. */
#ptc-app .app {
  height: calc(100vh - var(--nav-h, 74px));
  height: calc(100dvh - var(--nav-h, 74px));
  min-height: 560px;
}
@media (max-width: 759px) {
  #ptc-app .app {
    height: auto;
    min-height: 0;
  }
  #ptc-app .topbar { top: var(--nav-h, 0px); }
  /* the Tape jump lands below both sticky bars (the calculator's 64px topbar and the estate header) */
  #ptc-app #tape-panel { scroll-margin-top: calc(64px + var(--nav-h, 0px)); }
}

/* Estate element rules the calculator never declares, put back to what the standalone page computes:
   site.css  kbd { font-weight: 600 }  and  [id] { scroll-margin-top: calc(var(--nav-h) + 14px) }. */
#ptc-app kbd { font-weight: inherit; }
#ptc-app [id] { scroll-margin-top: 0; }

/* The theme control is a link to the twin edition: no underline, same hit area as a button. */
#ptc-app a.theme-toggle { text-decoration: none; }
/* A link cannot carry aria-pressed, so draw the standalone's pressed look (.icon-btn[aria-pressed=true])
   on the dark edition's link directly: both editions look exactly like the standalone control. */
#ptc-app[data-theme="dark"] a.theme-toggle { color: var(--ink); background: var(--active); }

/* Toasts stay bottom-centre at every width: bottom-right is where the estate's LXToast host lives. */
@media (min-width: 900px) {
  #ptc-app .toast-stack,
  #ptc-app #toast-root {
    left: 50%;
    right: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    align-items: center;
    transform: translateX(-50%);
  }
}