/* The live app screens on tabletales.gg (live/scorepad.js, live/when.js).
   Every size is the app's own value in points, measured from the app itself (react-native-web in
   demo mode, 390 x 844): the screen is drawn at 390px wide and scaled to fit its frame (--k, set by
   the script), so 1px here is 1pt in the app. Colors are the app's defaults (Liquid Glass chips and
   buttons, the Scorepad's solid surfaces), copied from the measured screen, not guessed. */

.tt-fit { position: relative; width: 100%; aspect-ratio: 390 / 844; overflow: hidden; }
.tt-fit.when { aspect-ratio: 426 / 512.3; }
.tt-screen.when { width: 426px; height: 512.3px; }
.tt-when { padding: 33.4px 36px 0; }
.tt-screen {
  --surface: #241c14; --surface2: #2e251a; --surface3: #3a2f21;
  /* Liquid Glass after D2 (theme.ts emberGlass = ember + EMBER_READABLE): brighter quiet text, dark ink on orange */
  --text: #f4ead6; --text2: #c9b9a0; --text3: #a2917f; --on-accent: #211408;
  --accent: #eba14e; --accent-soft: rgba(235, 161, 78, .16); --winner: #f0b35a; --winner-soft: rgba(240, 179, 90, .16); --bad: #d98b8b;
  --hair: rgba(244, 234, 214, .10); --hair2: rgba(244, 234, 214, .16);
  --chip: rgba(60, 48, 35, .6); --chip-edge: rgba(255, 240, 220, .14);
  position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform: scale(var(--k, 1)); transform-origin: 0 0;
  background: var(--surface); color: var(--text); overflow: hidden; text-align: left;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 21px;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* the screen takes focus after a click in Safari and Firefox (they never focus a clicked button), so the keyboard still reaches the pad */
.tt-screen:focus { outline: none; }
.tt-screen *, .tt-screen *::before, .tt-screen *::after { box-sizing: border-box; }
/* the reset has no weight (:where), so every component rule below wins over it */
:where(.tt-screen) :where(button) { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: inherit; text-align: inherit; cursor: pointer; }
.tt-screen button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tt-screen .i { display: block; flex: none; fill: currentColor; }
.tt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* avatars (ui Avatar): a lit bead, or a dashed ring for a guest */
.tt-av {
  --d: 28px; width: var(--d); height: var(--d); flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: calc(var(--d) * .4); font-weight: 700; line-height: 1;
  text-shadow: 0 1px 1.5px rgba(0, 0, 0, .25);
  background: linear-gradient(164deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 60%),
    linear-gradient(145deg, color-mix(in srgb, var(--c), #fff 34%), var(--c) 55%, color-mix(in srgb, var(--c), #000 14%));
}
.tt-av.s24 { --d: 24px; }
.tt-av.ghost { background: none; border: 1.6px dashed var(--hair2); color: var(--text3); }

/* ── the capture page behind the Scorepad: its own layer, so nothing in it can rise over the sheet ── */
.tt-page { position: absolute; inset: 0; z-index: 0; }
.tt-nav { position: absolute; left: 14px; right: 14px; top: 68px; height: 21px; }
.tt-nav .cancel { position: absolute; left: 0; color: var(--accent); }
.tt-nav .title { position: absolute; left: 0; right: 0; text-align: center; font-size: 16px; font-weight: 700; }
.tt-card { position: absolute; left: 18px; right: 18px; top: 117px; }
.tt-glyph { height: 29px; padding-top: 1.5px; color: var(--accent); }
.tt-glyph .i { width: 26px; height: 26px; }
.tt-h { margin: 8px 0 0; font-size: 22px; font-weight: 800; line-height: 27px; }
.tt-scoring { position: relative; z-index: 20; display: flex; align-items: center; height: 33px; margin: 18px 0 6px; }
.tt-label { flex: 1; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text3); }
.tt-dir { display: flex; align-items: center; gap: 3px; height: 33px; padding: 5px 10px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; }
.tt-dir .i { width: 12px; height: 12px; }
.tt-dirmenu { position: absolute; top: 32px; right: 0; z-index: 30; width: 232px; padding: 5px; background: var(--surface2); border: 1px solid var(--hair); border-radius: 14px; box-shadow: 0 8px 16px rgba(0, 0, 0, .3); }
.tt-mi { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 10px; }
.tt-mi.on { background: var(--accent-soft); }
.tt-mi > .i { width: 16px; height: 16px; color: var(--text3); }
.tt-mi.on > .i, .tt-mi.on b { color: var(--accent); }
.tt-mi .ck { width: 16px; height: 16px; color: var(--accent); }
.tt-mi span { flex: 1; min-width: 0; }
.tt-mi b { display: block; font-size: 13px; font-weight: 700; line-height: 21px; color: var(--text); }
.tt-mi small { display: block; font-size: 11.5px; line-height: 13px; color: var(--text3); }
.tt-link { display: flex; align-items: center; gap: 5px; padding: 6px 0; color: var(--accent); font-size: 13px; font-weight: 700; line-height: 16px; }
.tt-link .i { width: 15px; height: 15px; }
.tt-link .i.sm { width: 13px; height: 13px; }
.tt-prow { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.tt-prow .nm { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-av.ghost + .nm { font-size: 14px; font-weight: 400; }
.tt-prow .watching { margin-right: 8px; font-size: 11.5px; line-height: 13px; color: var(--text3); }
.tt-box { width: 60px; min-height: 32px; display: flex; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; border: 1px solid var(--hair); border-radius: 11px; background: var(--surface2); font-size: 14px; font-weight: 700; line-height: 17px; }
.tt-box.blank { color: var(--text3); font-weight: 600; }
.tt-box.neg, .tt-tbox.neg { color: var(--bad); }
.tt-lead { display: flex; }
.tt-lead .i { width: 13px; height: 13px; color: var(--winner); }
.tt-eye, .tt-won { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--hair); border-radius: 15px; background: var(--surface3); color: var(--text3); }
.tt-eye.on, .tt-won.on { border-color: var(--accent); background: var(--accent-soft); }
.tt-eye.on { color: var(--accent); }
.tt-won.on { color: var(--winner); }
.tt-eye .i, .tt-won .i { width: 15px; height: 15px; }
.tt-x { width: 22px; height: 30px; display: grid; place-items: center; color: var(--text3); }
.tt-x .i { width: 15px; height: 15px; }
.tt-gap22 { width: 22px; flex: none; }
.tt-badge { width: 28px; height: 28px; display: grid; place-items: center; border: 1px dashed var(--hair2); border-radius: 9px; background: var(--surface3); color: var(--text3); font-size: 12px; font-weight: 800; }
.tt-badge.on { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tt-place { position: relative; }
.tt-pill { min-width: 64px; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 7px 10px; border: 1px solid var(--hair); border-radius: 11px; background: var(--surface2); color: var(--text3); font-size: 13px; font-weight: 700; }
.tt-pill.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tt-pill .i { width: 12px; height: 12px; }
.tt-pmenu { position: absolute; top: 38px; right: 0; z-index: 30; min-width: 120px; padding: 5px; background: var(--surface2); border: 1px solid var(--hair); border-radius: 12px; box-shadow: 0 8px 14px rgba(0, 0, 0, .3); }
.tt-pmenu button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; line-height: 16px; }
.tt-pmenu button.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.tt-pmenu button.clear { border-top: 1px solid var(--hair); border-radius: 0; color: var(--text3); }
.tt-pmenu .i { width: 14px; height: 14px; color: var(--accent); }
.tt-teambar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 10px; padding: 10px; background: var(--surface2); border: 1px solid var(--hair); border-radius: 13px; }
.tt-team { display: flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid var(--hair); border-radius: 999px; background: var(--surface3); font-size: 12.5px; line-height: 21px; }
.tt-team b { font-weight: 800; }
.tt-team span { font-weight: 700; color: var(--text2); }
.tt-team.won { border-color: var(--winner); background: var(--winner-soft); color: var(--winner); }
.tt-team.won span { color: var(--winner); }
.tt-team .i { width: 12px; height: 12px; }
.tt-addtile { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; height: 48px; border: 1.5px dashed var(--accent); border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 700; line-height: 17px; }
.tt-addtile .i { width: 18px; height: 18px; }
.tt-hint { margin: 2px 0 0; font-size: 11.5px; line-height: 13.05px; color: var(--text3); }
.tt-coop { margin-top: 16px; }
.tt-mini { margin-bottom: 9px; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text3); }
.tt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-chip { display: flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid var(--chip-edge); border-radius: 999px; background: var(--chip); color: var(--text2); font-size: 13px; font-weight: 600; line-height: 16px; }
.tt-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tt-chip .i { width: 13px; height: 13px; }
.tt-field { display: flex; align-items: center; gap: 9px; height: 45px; padding: 0 13px; margin-top: 16px; background: var(--surface2); border: 1px solid var(--hair); border-radius: 13px; color: var(--text3); }
.tt-field .i { width: 17px; height: 17px; }
.tt-field span { font-size: 14px; }
.tt-foot { position: absolute; left: 0; right: 0; top: 738px; bottom: 0; border-top: 1px solid var(--hair); }
.tt-dots { position: absolute; top: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.tt-dots i { width: 7px; height: 7px; border-radius: 4px; background: var(--hair2); }
.tt-dots i.on { width: 20px; background: var(--accent); }
.tt-btns { position: absolute; top: 33px; left: 14px; right: 14px; display: flex; gap: 10px; }
.tt-back, .tt-next { height: 50px; display: grid; place-items: center; border-radius: 15px; font-size: 15.5px; font-weight: 700; line-height: 18px; }
.tt-back { width: 83.2px; background: var(--chip); border: 1px solid var(--chip-edge); color: var(--text2); }
.tt-next { flex: 1; background: var(--accent); color: var(--on-accent); }

/* ── the Scorepad sheet: fades in over a dimmed page, like the app's fade Modal ── */
.tt-modal { position: absolute; inset: 0; z-index: 1; transition: opacity .25s cubic-bezier(.215, .61, .355, 1); }
.tt-screen.closed .tt-modal { opacity: 0; pointer-events: none; transition-timing-function: cubic-bezier(.47, 0, .745, .715); }
.tt-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.tt-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; max-height: 776px; display: flex; flex-direction: column; gap: 10px; padding: 0 16px 24px; background: var(--surface); border-radius: 22px 22px 0 0; }
/* the grab bar closes the sheet when tapped (ui.tsx): a 60x17 target around the same 38x5 bar, in the same place */
.tt-grab { position: relative; display: block; width: 60px; height: 17px; margin: -6px auto -2px; }
.tt-grab::before { content: ""; position: absolute; left: 11px; top: 6px; width: 38px; height: 5px; border-radius: 999px; background: var(--hair2); }
.tt-headrow { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.tt-tabs { display: flex; padding: 3px; background: var(--surface2); border: 1px solid var(--hair); border-radius: 999px; }
.tt-tab { padding: 6px 8px; border: 1px solid transparent; border-radius: 999px; color: var(--text2); font-size: 12.5px; font-weight: 700; }
.tt-tab.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tt-scores { display: flex; align-items: baseline; gap: 6px; }
.tt-scores b { font-size: 16px; font-weight: 800; }
.tt-scores small { font-size: 11.5px; color: var(--text3); }
.tt-end { display: flex; align-items: center; gap: 4px; }
.tt-hchip { height: 30px; display: flex; align-items: center; gap: 4px; padding: 0 7px; border: 1px solid var(--hair2); border-radius: 999px; color: var(--text2); font-size: 11.5px; font-weight: 700; }
.tt-hchip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tt-hchip .i { width: 12px; height: 12px; }
/* the target chip ("To 500") only says what the game plays to on the web: no press, no hover */
.tt-hchip.tt-to { pointer-events: none; }
.tt-more { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--hair2); border-radius: 15px; color: var(--text2); }
.tt-more.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tt-more .i { width: 15px; height: 15px; }
.tt-done { padding: 4px 0 4px 2px; color: var(--accent); font-size: 15px; font-weight: 800; }
.tt-target { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.tt-target p { flex: 1; min-width: 140px; margin: 0; font-size: 11.5px; line-height: 13px; color: var(--text3); }
.tt-topt { padding: 5px 10px; border: 1px solid var(--hair); border-radius: 999px; background: var(--surface2); color: var(--text2); font-size: 12px; font-weight: 700; }
.tt-topt.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tt-padmenu { position: absolute; right: 14px; z-index: 50; width: 270px; padding: 5px; background: var(--surface2); border: 1px solid var(--hair2); border-radius: 14px; box-shadow: 0 8px 16px rgba(0, 0, 0, .3); }
.tt-padmenu .tt-mi > .i { color: var(--text2); }
.tt-padmenu .tt-mi b { font-size: 13.5px; }
.tt-padmenu .tt-mi:active { background: var(--accent-soft); }

/* By hand (HandsGrid): label column 38, a 64pt column per player, cells 56 x 40 on a 44pt pitch */
.tt-grid { width: max-content; }
.tt-rowsbox, .tt-listbox { position: relative; }
.tt-rows, .tt-list { position: relative; overflow-y: auto; scrollbar-width: none; }
.tt-rows::-webkit-scrollbar, .tt-list::-webkit-scrollbar { display: none; }
/* the "more this way" cues (HandsGrid PadFade): a 20pt fade to the sheet with a 14pt chevron, in the
   hand-number column for the grid and centred for the Totals list, only while more sits past the edge */
.tt-fade { position: absolute; left: 0; right: 0; height: 20px; display: none; pointer-events: none; color: var(--text3); }
.tt-fade.top { top: 0; align-items: flex-start; padding: 1px 0 0 1px; background: linear-gradient(to top, rgba(36, 28, 20, 0), var(--surface)); }
.tt-fade.bottom { bottom: 0; align-items: flex-end; padding: 0 0 1px 1px; background: linear-gradient(to bottom, rgba(36, 28, 20, 0), var(--surface)); }
.tt-fade.list { justify-content: center; padding-left: 0; }
.tt-fade .i { position: relative; width: 14px; height: 14px; }
.tt-fade .tint { position: absolute; top: 0; bottom: 0; width: 64px; background: linear-gradient(to top, rgba(235, 161, 78, 0), var(--accent-soft)); }
.more-up > .tt-fade.top, .more-down > .tt-fade.bottom { display: flex; }
.tt-gr { display: flex; }
.tt-gl { width: 38px; flex: none; display: flex; align-items: center; height: 48px; padding: 2px 0 6px 4px; font-size: 11.5px; font-weight: 700; line-height: 13px; color: var(--text3); }
.tt-gl.on { color: var(--accent); }
.tt-glh { width: 38px; flex: none; }
.tt-gh { width: 64px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0 6px; font-size: 10.5px; font-weight: 600; color: var(--text2); }
.tt-gh.on { color: var(--accent); }
.tt-gh.add { color: var(--accent); }
.tt-addc { width: 24px; height: 24px; display: grid; place-items: center; border: 1px dashed var(--accent); border-radius: 12px; }
.tt-addc .i { width: 13px; height: 13px; }
.tt-col { width: 64px; height: 48px; flex: none; display: flex; justify-content: center; align-items: flex-start; padding-top: 2px; }
.tt-col.foot { border-radius: 0 0 14px 14px; }
.tt-col:active .tt-cell { opacity: .6; }
.tt-col.on, .tt-gh.on, .tt-tc.on { background: var(--accent-soft); }
.tt-gh.on { border-radius: 14px 14px 0 0; }
.tt-tc.on { border-radius: 14px; }
.tt-cell { width: 52px; height: 40px; display: grid; place-items: center; border: 1px solid var(--hair); border-radius: 9px; background: var(--surface2); font-size: 15px; font-weight: 700; }
.tt-cell.on { border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent); }
.tt-cell.blank { color: var(--text3); }
.tt-cell.neg { color: var(--bad); }
.tt-rule { height: 1px; margin: 8px 0; background: var(--hair2); }
.tt-totrow { display: flex; align-items: center; height: 40px; }
.tt-totrow .tt-gl { height: 40px; padding: 0 0 0 4px; font-size: 8px; letter-spacing: .4px; line-height: 10px; }
.tt-tc { width: 64px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 15px; font-weight: 800; }
.tt-tc .i { width: 11px; height: 11px; }
.tt-tc .crown { color: var(--winner); }
.tt-tc .flag { color: var(--text2); }   /* neutral, as in HandsGrid: gold is the trophy's alone */
.tt-tc.gold { color: var(--winner); }
.tt-tc.blank { color: var(--text3); }
.tt-addhand { display: flex; align-items: center; gap: 6px; align-self: flex-start; padding: 7px 0; color: var(--accent); font-size: 12.5px; font-weight: 700; }
.tt-addhand span { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 9px; }
.tt-addhand .i { width: 12px; height: 12px; }

/* Totals */
.tt-trow { width: 100%; min-height: 50px; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; }
.tt-trow.on { background: var(--accent-soft); }
.tt-trow .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tt-trow .who b { font-size: 14.5px; font-weight: 700; }
.tt-trow.on .who b { color: var(--accent); }
.tt-trow .who small { margin-top: 1px; font-size: 11.5px; color: var(--text2); }
.tt-trow .who small.link { color: var(--accent); }
.tt-trow > .i { width: 13px; height: 13px; color: var(--winner); }
.tt-tbox { min-width: 66px; height: 36px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; border: 1px solid var(--hair); border-radius: 10px; background: var(--surface2); font-size: 16px; font-weight: 800; }
.tt-tbox.on { border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent); }
.tt-tbox.hands { border-style: dashed; border-color: var(--hair2); }
.tt-tbox.on.bad { border-style: dashed; border-color: var(--bad); }
.tt-tbox.blank { color: var(--text3); }
.tt-addrow { width: 100%; min-height: 50px; display: flex; align-items: center; gap: 10px; padding: 7px 8px; color: var(--accent); font-size: 13.5px; font-weight: 700; }
.tt-addrow span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px dashed var(--accent); border-radius: 14px; }
.tt-addrow .i { width: 13px; height: 13px; }
.tt-note { margin: 6px 0 0; padding: 12px; background: var(--surface2); border: 1px solid var(--hair); border-radius: 13px; font-size: 13px; font-weight: 600; }
.tt-shortcuts { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--surface2); border: 1px solid var(--hair); border-radius: 13px; }
.tt-shortcuts b { display: block; margin-bottom: 4px; font-size: 14.5px; font-weight: 800; }
.tt-short { display: flex; align-items: center; padding: 6px 0; border-top: 1px solid var(--hair); font-size: 13px; }
.tt-short span:first-child { width: 128px; flex: none; font-weight: 700; }
.tt-short span:last-child { flex: 1; color: var(--text2); }
.tt-gotit { align-self: flex-end; margin: 6px 0 0; color: var(--accent); font-weight: 800; }

/* the foot: a notice, the lens (who is being typed for, the sum, the answer), the keypad */
.tt-foot2 { display: flex; flex-direction: column; gap: 9px; }
.tt-notice { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface2); border: 1px solid var(--hair); border-radius: 11px; }
.tt-notice.bad { border-color: var(--bad); }
.tt-notice p { flex: 1; margin: 0; font-size: 12.5px; font-weight: 600; }
.tt-notice button { padding: 4px 10px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: 13px; font-weight: 800; }
.tt-lens { min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--accent-soft); border: 1.5px solid var(--accent); border-radius: 14px; }
.tt-lens.bad { border-color: var(--bad); }
.tt-lens .mid { flex: 1; min-width: 0; }
.tt-lens .name { font-size: 12.5px; font-weight: 700; }
.tt-lens .hint { font-size: 13px; color: var(--text2); }
.tt-lens .tiny { font-size: 11.5px; line-height: 13px; color: var(--text3); }
.tt-lens .flag { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 14px; background: var(--surface); color: var(--accent); }
.tt-lens .flag .i { width: 14px; height: 14px; }
.tt-sum { font-size: 19px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.tt-sum .op { color: var(--accent); }
.tt-sum .op.bad { color: var(--bad); }
.tt-sum .carried { padding: 0; border-radius: 6px; background: var(--surface3); }
.tt-answer { min-width: 48px; text-align: right; font-size: 28px; font-weight: 800; line-height: 34px; }
.tt-answer.dim { color: var(--text3); }
.tt-answer.acc { color: var(--accent); }
.tt-answer.neg { color: var(--bad); }
.tt-toobig { display: flex; flex-direction: column; align-items: flex-end; }
.tt-toobig b { color: var(--bad); font-size: 19px; font-weight: 800; line-height: 23px; }
.tt-toobig small { font-size: 11.5px; line-height: 13px; color: var(--text2); }
.tt-pad { display: flex; gap: 7px; }
.tt-keys { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.tt-keys > div { display: flex; gap: 7px; }
.tt-key { flex: 1; height: 44px; display: grid; place-items: center; border: 1px solid var(--hair); border-radius: 11px; background: var(--surface2); font-size: 18px; font-weight: 700; line-height: 22px; touch-action: manipulation; user-select: none; }
.tt-key:active { background: var(--surface3); transform: scale(.97); }
.tt-key.armed { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tt-key .i { width: 19px; height: 19px; }
.tt-ops { width: 56px; display: flex; flex-direction: column; gap: 7px; }
.tt-op { flex: 1; display: grid; place-items: center; border: 1px solid var(--hair2); border-radius: 11px; background: var(--surface); color: var(--accent); font-size: 24px; font-weight: 600; line-height: 29px; touch-action: manipulation; user-select: none; }
.tt-op:active { background: var(--accent-soft); border-color: var(--accent); }
.tt-op:disabled { opacity: .4; }
.tt-nextkey { width: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 4px; border-radius: 11px; background: var(--accent); color: var(--on-accent); text-align: center; touch-action: manipulation; user-select: none; }
.tt-nextkey:active { opacity: .75; transform: scale(.98); }
.tt-nextkey.off { opacity: .45; }
.tt-nextkey .i { width: 18px; height: 20px; }   /* the icon font's 18pt glyph sits in a 20pt line */
.tt-nextkey .glyph { font-size: 22px; font-weight: 800; line-height: 24px; }
.tt-nextkey b { font-size: 13px; font-weight: 800; }
.tt-nextkey small { max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 600; opacity: .85; }

/* an iPhone alert, for the two confirms the pad asks (Clear hand, Keep totals only) */
.tt-alert { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(0, 0, 0, .4); }
.tt-alert > div { width: 270px; overflow: hidden; border-radius: 14px; background: rgba(44, 44, 46, .97); text-align: center; color: #fff; }
.tt-alert .t { margin: 19px 16px 0; font-size: 17px; font-weight: 600; line-height: 22px; }
.tt-alert p { margin: 2px 16px 19px; font-size: 13px; line-height: 16px; }
.tt-alert .tt-arow { display: flex; border-top: .5px solid rgba(84, 84, 88, .65); }
.tt-alert .tt-arow button { flex: 1; height: 44px; font-size: 17px; font-weight: 600; line-height: 22px; text-align: center; color: #0a84ff; }
.tt-alert .tt-arow button:focus-visible { outline-offset: -3px; }
.tt-alert .tt-arow button + button { border-left: .5px solid rgba(84, 84, 88, .65); font-weight: 400; color: #ff453a; }

/* ── When & where, the first card of Add a night ── */
.tt-when { position: relative; color: var(--text); }
.tt-when .tt-field { margin-top: 0; color: var(--text3); }
.tt-when .tt-field span { color: var(--text); }
.tt-when .tt-field .here { margin-left: auto; display: flex; align-items: center; gap: 4px; padding-left: 10px; border-left: 1px solid var(--hair2); color: var(--accent); font-size: 13px; font-weight: 600; line-height: 17px; }
.tt-when .tt-field .here .i { width: 14px; height: 14px; margin: 1px; }
.tt-when .tt-field .here .spin { width: 16px; height: 16px; display: grid; place-items: center; }
.tt-when .tt-field .here .spin::before { content: ""; width: 15px; height: 15px; border: 1.9px solid color-mix(in srgb, currentColor 20%, transparent); border-top-color: currentColor; border-radius: 50%; animation: tt-spin .75s linear infinite; }
.tt-when .tt-field span.ph { color: var(--text3); }
@keyframes tt-spin { to { transform: rotate(360deg); } }
.tt-when .tt-chips { gap: 7px; }
.tt-when .tt-chip { line-height: 21px; padding: 8px 13px; }
.tt-when .tt-chip.date { background: var(--surface2); border-color: var(--hair); }
.tt-when .tt-chip.date.on { background: var(--accent-soft); border-color: var(--accent); }
.tt-when .tt-chip.date .i { width: 15px; height: 15px; color: var(--text3); }
.tt-when .tt-chip.date.on .i { color: var(--accent); }
.tt-when .hosts .tt-chip { line-height: 16px; }
.tt-when .tt-mini { margin-bottom: 9px; }
.tt-when input[type="date"] { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; border: 0; padding: 0; margin: 0; pointer-events: none; color-scheme: dark; }
@media (pointer: coarse) { .tt-when input[type="date"] { top: 0; height: 100%; pointer-events: auto; } }

/* tabular figures only where the app sets them; elsewhere SF's proportional figures */
.tt-box, .tt-cell, .tt-tc, .tt-tbox, .tt-sum, .tt-answer, .tt-trow .who small { font-variant-numeric: tabular-nums; }
/* one line, cut with "..." where the app sets numberOfLines={1} (Scorepad.tsx: the row's name and its
   sum, the lens's name, hint and sum): a long typed sum never wraps to a second line */
.tt-trow .who b, .tt-trow .who small, .tt-lens .name, .tt-lens .hint, .tt-lens .tiny, .tt-sum { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the app dims a pressed control to 60% (st.pressed, ScoreInput, CitySearchField's Here) */
.tt-trow:active, .tt-box:active, .tt-hchip:active, .tt-more:active, .tt-done:active, .tt-topt:active, .tt-link:active, .tt-addhand:active, .tt-when .here:active { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .tt-modal { transition: none; }
  .tt-when .tt-field .here .spin::before { animation: none; border-right-color: currentColor; opacity: .6; }
}