/* TableSync Solo (RM841) - the app's own styles, after css/apps/shell.css. Graphite (DESIGN.md): tokens only, radius 0,
 * no shadow, blur, glow or gradient; Spectral reads (the scenes), IBM Plex Sans operates, IBM Plex Mono measures.
 *
 * THE ACCENT, ONCE PER VIEW: Library - the adventure in progress; Play - the marginal pilcrow at the scene title, or in a
 * fight the foe you aim at; Studio - the selected scene; Oracle - the newest answer; Journal - the scene headings' rule.
 * Primary buttons are filled ink (shell.css), never the accent. */

/* ---------------- shared pieces ---------------- */
.so-col { max-width: 760px; margin: 0 auto; }
.so-grow { flex: 1 1 auto; min-width: 0; }
.so-tight { margin: 0; }
.so-muted { color: var(--aa-ink-muted); }
.so-gap { margin-top: var(--s-5); }
.so-kicker { font-family: var(--aa-measure); font-size: var(--t-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--aa-ink-muted); }
.so-name { font-family: var(--aa-read); font-weight: 600; font-size: var(--t-body); color: var(--aa-ink); overflow-wrap: anywhere; }
.so-head { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-2) 0 var(--s-3); flex-wrap: wrap; }
.so-h2 { margin: 0; overflow-wrap: anywhere; }
.so-nowrap { flex-wrap: nowrap; align-items: flex-start; }
.so-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.so-hint { font-size: var(--t-ui); color: var(--aa-ink-muted); margin: var(--s-1) 0 0; line-height: 1.45; }
.so-field { margin-bottom: var(--s-2); }
.so-teach { max-width: 560px; margin: var(--s-6) auto 0; }
.so-teach .tf-btn { margin-top: var(--s-2); }
.so-foot { margin-top: var(--s-5); }
.so-pre, .tf-app-solo .tf-alert { white-space: pre-line; }
.so-mono, .so-code { font-family: var(--aa-measure); font-size: var(--t-ui); line-height: 1.5; }
.so-code { background: var(--aa-recess); border: 1px solid var(--aa-hairline); padding: var(--s-3); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--aa-ink-body); margin: 0 0 var(--s-3); }
.so-bullets { margin: 0 0 var(--s-3); padding-left: var(--s-5); }
.so-bullets li { margin: var(--s-1) 0; overflow-wrap: anywhere; }
.tf-list.so-compact > li { padding: var(--s-2) 0; }
.tf-list > li { flex-wrap: wrap; }
.so-ibtn { min-width: 44px; padding: 0 var(--s-2); }
.so-ibtn svg { width: 22px; height: 22px; }
.so-chip { gap: var(--s-1); max-width: 40vw; }
.so-chip svg { width: 18px; height: 18px; flex: 0 0 auto; }
.so-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-app .tf-actions .so-chip, .tf-app .tf-actions .so-ibtn { min-height: 44px; }

/* a switch: a real checkbox with its label */
.so-switch { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; cursor: pointer; border-bottom: 1px solid var(--aa-hairline); }
/* the box is drawn at 22px inside a 44px target (handbook: 44px touch targets) */
.tf-app .so-switch input { -webkit-appearance: none; appearance: none; width: 44px; height: 44px; min-height: 44px; margin: -10px 0 -10px -11px;
  padding: 0; border: none; background: none; position: relative; flex: 0 0 auto; cursor: pointer; font-size: var(--t-ui); }
.so-switch input::before { content: ''; position: absolute; left: 11px; top: 11px; width: 22px; height: 22px; box-sizing: border-box;
  border: 1px solid var(--aa-rule); background: var(--aa-recess); }
.so-switch input:checked::before { background: var(--aa-ink); border-color: var(--aa-ink); }
.so-switch input:checked::after { content: ''; position: absolute; left: 19px; top: 14px; width: 6px; height: 12px;
  border: solid var(--aa-ground); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.so-switch > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.so-switch-l { color: var(--aa-ink); font-weight: 500; overflow-wrap: anywhere; }
.so-switch-h { color: var(--aa-ink-muted); font-size: var(--t-ui); }

/* the HP meter: value, not colour alone - the numbers always sit beside it */
.so-meter { height: 6px; background: var(--aa-recess); border: 1px solid var(--aa-hairline); position: relative; min-width: 48px; }
.so-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--aa-ink-body); }
.so-meter.low .so-meter-fill { background: var(--aa-warn); }

/* ---------------- Library ---------------- */
.so-strip { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; border: 1px solid var(--aa-hairline); background: var(--aa-sheet); padding: var(--s-3) var(--s-4); }
.so-advlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--aa-rule); }
.so-adv { border-bottom: 1px solid var(--aa-hairline); padding: var(--s-4) 0; }
.so-adv-title { font-family: var(--aa-read); font-weight: 400; font-size: var(--t-4); color: var(--aa-ink); margin: 0 0 var(--s-1); }
.so-adv-meta { font-family: var(--aa-measure); font-size: var(--t-meta); letter-spacing: .06em; color: var(--aa-ink-muted); text-transform: uppercase; }
.so-adv-hook { font-family: var(--aa-read); font-size: var(--t-body); color: var(--aa-ink-body); line-height: 1.5; margin: var(--s-2) 0; max-width: var(--aa-prose); }
.so-adv-progress { font-size: var(--t-ui); color: var(--aa-ink-muted); padding-left: var(--s-2); border-left: 2px solid var(--aa-hairline); margin: var(--s-2) 0; }
.so-adv-progress.going { border-left-color: var(--aa-accent); color: var(--aa-ink); }
.so-adv-progress.done { border-left-color: var(--aa-rule); }
.so-adv-acts { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ---------------- Play ---------------- */
.so-play { max-width: 760px; margin: 0 auto; }
.so-play-side { display: none; }
@media (min-width: 800px) {
  .so-play { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: var(--s-6); align-items: start; }
  .so-play-side { display: block; border-left: 1px solid var(--aa-hairline); padding-left: var(--s-5); }
  .so-play-side .so-stats { grid-template-columns: 1fr 1fr; }
  .tf-app .so-play-main .so-herobar { display: none; }
}
.tf-app .so-herobar {
  width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: var(--s-3); flex-wrap: wrap;
  background: var(--aa-sheet); border: 1px solid var(--aa-hairline); padding: var(--s-2) var(--s-3);
  text-align: left; margin-bottom: var(--s-3); font-weight: 400;
}
.so-herobar-name { font-family: var(--aa-read); font-weight: 600; color: var(--aa-ink); flex: 1 1 100%; font-size: var(--t-body); }
.so-herobar-hp { display: flex; align-items: center; gap: var(--s-2); flex: 1 1 140px; }
.so-herobar-hp .so-meter { flex: 1 1 auto; }
.so-herobar-ac { display: flex; align-items: center; gap: var(--s-2); }
.so-herobar-k { font-family: var(--aa-measure); font-size: var(--t-meta); letter-spacing: .08em; color: var(--aa-ink-muted); }
.so-herobar-extra { font-size: var(--t-ui); color: var(--aa-ink-muted); flex: 1 1 100%; }
.so-hpnum { color: var(--aa-ink); }

.so-scene { margin-bottom: var(--s-4); }
.so-scene-title { font-family: var(--aa-read); font-weight: 400; font-size: var(--t-3); color: var(--aa-ink); margin: var(--s-1) 0 var(--s-3); line-height: 1.2; position: relative; outline-offset: 4px; }
.so-scene .so-scene-title::before { content: '\00B6'; color: var(--aa-accent); font-size: var(--t-body); margin-right: var(--s-2); vertical-align: 0.3em; }
.so-fight .so-scene-title::before { content: none; }
.so-prose p { font-family: var(--aa-read); font-size: var(--t-body); color: var(--aa-ink-body); line-height: 1.65; margin: 0 0 var(--s-3); max-width: 62ch; }
.so-prose em { font-style: italic; }
.so-prose strong { font-weight: 600; color: var(--aa-ink); }
.so-dropcap p:first-child::first-letter { font-family: var(--aa-read); float: left; font-size: var(--t-2); line-height: .9; padding: 4px var(--s-2) 0 0; color: var(--aa-ink); }
.so-happened { border-top: 1px solid var(--aa-hairline); border-bottom: 1px solid var(--aa-hairline); padding: var(--s-2) 0; margin: 0 0 var(--s-4); }
.so-ev { margin: var(--s-1) 0; font-size: var(--t-ui); color: var(--aa-ink-body); padding-left: var(--s-3); position: relative; }
.so-ev::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 1px; background: var(--aa-ink-muted); }
.so-ev.gain { color: var(--aa-ink); }
.so-ev.gain::before { background: var(--aa-ok); }
.so-ev.loss { color: var(--aa-warn); }
.so-ev.loss::before { background: var(--aa-warn); }

.so-choices { display: flex; flex-direction: column; border-top: 1px solid var(--aa-rule); }
.tf-app .so-choice {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: left;
  width: 100%; min-height: 52px; padding: var(--s-3) var(--s-2); border: none; border-bottom: 1px solid var(--aa-hairline);
  font-family: var(--aa-read); font-size: var(--t-body); font-weight: 400; color: var(--aa-ink); background: none;
}
.tf-app .so-choice:hover { background: var(--aa-sheet); border-color: var(--aa-hairline); }
.tf-app .so-choice:active { background: var(--aa-recess); }
.so-choice-label::before { content: '\2192'; font-family: var(--aa-operate); color: var(--aa-ink-muted); margin-right: var(--s-2); }
.so-choice-sub { font-family: var(--aa-operate); font-size: var(--t-ui); color: var(--aa-ink-muted); padding-left: var(--s-5); }
.tf-app .so-choice.locked:disabled { opacity: 1; cursor: not-allowed; }
.so-choice.locked .so-choice-label { color: var(--aa-ink-muted); text-decoration: line-through; text-decoration-color: var(--aa-hairline); }
.so-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0; }

/* the roll card */
.so-roll { border: 1px solid var(--aa-rule); background: var(--aa-sheet); padding: var(--s-3) var(--s-4); margin: 0 0 var(--s-3); }
.so-roll-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.so-roll-name { font-weight: 500; color: var(--aa-ink); }
.so-roll-total { font-size: var(--t-2); color: var(--aa-ink); line-height: 1; }
.so-roll-math { font-size: var(--t-ui); color: var(--aa-ink-body); margin-top: var(--s-1); overflow-wrap: anywhere; }
.so-roll-parts { font-size: var(--t-ui); color: var(--aa-ink-muted); }
.so-roll-verdict { margin-top: var(--s-2); font-weight: 600; font-size: var(--t-ui); letter-spacing: .04em; }
.so-roll.ok .so-roll-verdict { color: var(--aa-ok); }
.so-roll.bad .so-roll-verdict { color: var(--aa-warn); }

/* endings, dying */
.so-endcard { border-top: 1px solid var(--aa-rule); border-bottom: 1px solid var(--aa-rule); padding: var(--s-4) 0; margin: var(--s-4) 0; }
.so-endcard.victory { border-top: 3px double var(--aa-rule); }
.so-endcard.warn { border-top-color: var(--aa-warn); }
.so-end-title { font-family: var(--aa-read); font-weight: 400; font-size: var(--t-3); color: var(--aa-ink); margin: var(--s-1) 0 var(--s-2); }
.so-tally { font-size: var(--t-body); color: var(--aa-ink); }

/* fights */
.so-fight-head { margin-bottom: var(--s-3); }
.so-foes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-2); }
.tf-app .so-foe { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-1); text-align: left; background: var(--aa-sheet); border: 1px solid var(--aa-hairline); padding: var(--s-2) var(--s-3); min-height: 64px; }
.tf-app .so-foe.aim { border: 2px solid var(--aa-accent); padding: calc(var(--s-2) - 1px) calc(var(--s-3) - 1px); }
.tf-app .so-foe.dead { opacity: .5; }
.tf-app .so-foe.dead .so-foe-name { text-decoration: line-through; }
.so-foe-top { display: flex; justify-content: space-between; gap: var(--s-2); }
.so-foe-name { font-family: var(--aa-read); font-weight: 600; color: var(--aa-ink); }
.so-foe-ac, .so-foe-hp { font-size: var(--t-ui); color: var(--aa-ink-muted); }
.so-order { margin: var(--s-2) 0; }
.so-feed { list-style: none; margin: var(--s-2) 0 var(--s-3); padding: 0; border-top: 1px solid var(--aa-hairline); }
.so-feed-row { padding: var(--s-2) 0; border-bottom: 1px solid var(--aa-hairline); display: flex; flex-direction: column; gap: 2px; font-size: var(--t-ui); }
.so-feed-row.theirs { padding-left: var(--s-3); border-left: 2px solid var(--aa-hairline); }
.so-feed-what { color: var(--aa-ink); }
.so-feed-math { color: var(--aa-ink-body); }
.so-feed-row.bad .so-feed-math { color: var(--aa-ink-muted); }
.so-feed-text { color: var(--aa-ink-body); }
.so-actions { display: flex; flex-direction: column; gap: var(--s-3); }
.so-actgroup { display: flex; flex-direction: column; gap: var(--s-1); }
.tf-app .so-act { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%; padding: var(--s-2) var(--s-3); }
.so-act-l { font-weight: 500; }
.so-act-d { font-size: var(--t-ui); font-weight: 400; color: var(--aa-ink-muted); }
.tf-app .so-act.primary { background: var(--aa-ink); color: var(--aa-ground); border-color: var(--aa-ink); }
.tf-app .so-act.primary .so-act-d { color: var(--aa-ground); }
.tf-app .so-act.end { border-style: dashed; }

/* playtest */
.so-playtest { border: 1px dashed var(--aa-rule); padding: var(--s-3); margin-bottom: var(--s-3); }
.so-slot { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; border-bottom: 1px solid var(--aa-hairline); padding: var(--s-2) 0; }

/* ---------------- the hero sheet ---------------- */
.so-hero-row.current .so-name::after { content: ' \00B7 playing'; font-family: var(--aa-operate); font-weight: 400; font-size: var(--t-ui); color: var(--aa-ink-muted); }
.tf-app .so-card-btn { display: block; text-align: left; width: 100%; padding: var(--s-3) var(--s-4); }
.so-card-text { display: block; }
.so-card-text .so-kicker { margin-left: var(--s-2); }
.so-card-sub { display: block; font-family: var(--aa-read); font-weight: 400; color: var(--aa-ink-body); margin-top: var(--s-1); }
.so-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); margin: var(--s-2) 0; }
.so-stat { border: 1px solid var(--aa-hairline); padding: var(--s-2); }
.so-stat-v { font-size: var(--t-4); color: var(--aa-ink); }
.so-stat-l { font-size: var(--t-meta); color: var(--aa-ink-muted); letter-spacing: .04em; }
@media (max-width: 420px) { .so-stats { grid-template-columns: 1fr 1fr; } }
.so-conds { color: var(--aa-warn); font-size: var(--t-ui); }
.so-abils { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.so-abil { border: 1px solid var(--aa-hairline); padding: var(--s-2); text-align: center; }
.so-abil-k { font-family: var(--aa-measure); font-size: var(--t-meta); letter-spacing: .1em; color: var(--aa-ink-muted); }
.so-abil-v { font-size: var(--t-4); color: var(--aa-ink); }
.so-abil-s { font-size: var(--t-meta); color: var(--aa-ink-muted); }
.so-skills { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--s-4); }
@media (max-width: 420px) { .so-skills { columns: 1; } }
.so-skills li { display: flex; justify-content: space-between; gap: var(--s-2); padding: 3px 0; border-bottom: 1px solid var(--aa-hairline); break-inside: avoid; font-size: var(--t-ui); color: var(--aa-ink-muted); }
.so-skills li.prof { color: var(--aa-ink); }
.so-play-side .so-abils { grid-template-columns: repeat(3, 1fr); }
.so-play-side .so-skills { columns: 1; }

/* ---------------- Journal ---------------- */
.so-journal { list-style: none; margin: var(--s-3) 0; padding: 0; }
.so-journal li { padding: var(--s-1) 0 var(--s-1) var(--s-3); font-size: var(--t-ui); color: var(--aa-ink-body); border-left: 1px solid var(--aa-hairline); overflow-wrap: anywhere; }
.so-journal li.so-j-scene { font-family: var(--aa-read); font-size: var(--t-body); color: var(--aa-ink); border-left: 2px solid var(--aa-accent); margin-top: var(--s-3); padding-top: var(--s-2); }
.so-journal li.so-j-choice { color: var(--aa-ink); font-weight: 500; }
.so-journal li.so-j-roll { font-family: var(--aa-measure); font-size: var(--t-ui); }
.so-journal li.so-j-note { font-family: var(--aa-read); font-style: italic; color: var(--aa-ink); font-size: var(--t-body); }
.so-journal li.so-j-rewind { color: var(--aa-warn); }
.so-journal li.so-j-end { font-weight: 600; color: var(--aa-ink); }

/* ---------------- Oracle ---------------- */
.so-oracle { max-width: 760px; margin: 0 auto; }
@media (min-width: 800px) {
  .so-oracle { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: var(--s-6); align-items: start; }
  .so-oracle-tools { border-left: 1px solid var(--aa-hairline); padding-left: var(--s-5); }
}
.so-olog { list-style: none; margin: var(--s-3) 0; padding: 0; border-top: 1px solid var(--aa-rule); }
.so-olog-row { padding: var(--s-2) 0; border-bottom: 1px solid var(--aa-hairline); }
.so-olog-row:last-child { border-left: 2px solid var(--aa-accent); padding-left: var(--s-3); }
.so-olog-head { font-size: var(--t-ui); color: var(--aa-ink-muted); overflow-wrap: anywhere; }
.so-olog-body { color: var(--aa-ink); overflow-wrap: anywhere; }
.so-olog-row.ask .so-olog-body { font-family: var(--aa-read); font-size: var(--t-4); }
.so-olog-row.note .so-olog-body { font-family: var(--aa-read); font-size: var(--t-body); color: var(--aa-ink-body); line-height: 1.6; }
.so-olog-empty { color: var(--aa-ink-muted); padding: var(--s-3) 0; }
.so-listed li.closed .so-grow { text-decoration: line-through; color: var(--aa-ink-muted); }
.so-addrow { display: flex; gap: var(--s-2); }
.so-addrow .tf-input { flex: 1 1 auto; min-width: 0; }

/* ---------------- Studio ---------------- */
.so-studio { max-width: 1180px; margin: 0 auto; }
.so-seg { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--aa-rule); margin: 0 0 var(--s-2); }
.tf-app .so-seg-b { flex: 1 1 auto; border: none; border-right: 1px solid var(--aa-hairline); padding: var(--s-2) var(--s-3); font-size: var(--t-ui); }
.tf-app .so-seg-b.on { background: var(--aa-ink); color: var(--aa-ground); }
.so-split-ed { display: none; }
.so-split.editing .so-split-list { display: none; }
.so-split.editing .so-split-ed { display: block; }
@media (min-width: 800px) {
  .so-split { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
  .so-split .so-split-list, .so-split.editing .so-split-list { display: block; }
  .so-split .so-split-ed { display: block; border-left: 1px solid var(--aa-hairline); padding-left: var(--s-5); }
  .tf-app .so-only-phone { display: none; }
}
.so-scenes { list-style: none; margin: 0 0 var(--s-3); padding: 0; border-top: 1px solid var(--aa-hairline); }
.tf-app .so-scene-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--aa-hairline); border-left: 2px solid transparent; padding: var(--s-2) var(--s-3); }
.tf-app .so-scene-btn.sel { border-left-color: var(--aa-accent); background: var(--aa-sheet); }
.so-scene-btn-t { font-family: var(--aa-read); color: var(--aa-ink); font-weight: 400; overflow-wrap: anywhere; }
.so-scene-btn-s { font-family: var(--aa-measure); font-size: var(--t-meta); color: var(--aa-ink-muted); font-weight: 400; overflow-wrap: anywhere; }
.so-scene-btn.error .so-scene-btn-s, .so-scene-btn.warn .so-scene-btn-s { color: var(--aa-warn); }
.so-sub { border-left: 1px solid var(--aa-rule); padding-left: var(--s-3); margin: var(--s-2) 0 var(--s-3); }
.so-mrow { display: flex; gap: var(--s-2); align-items: center; }
.so-mrow input[type=text] { flex: 1 1 auto; min-width: 0; }
.so-mrow input[type=number] { width: 72px; flex: 0 0 auto; }
.so-verdict { font-weight: 600; padding: var(--s-2) var(--s-3); border-left: 2px solid var(--aa-ok); }
.so-verdict.bad { border-left-color: var(--aa-warn); color: var(--aa-warn); }
.so-problems li.error .so-kicker { color: var(--aa-warn); }
.so-legend { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.so-key { padding-left: var(--s-4); position: relative; }
.so-key::before { content: ''; position: absolute; left: 0; top: .3em; width: 12px; height: 10px; border: 1px solid var(--aa-rule); }
.so-key.warn::before { border-color: var(--aa-warn); border-style: dashed; }
.so-key.end::before { border: 3px double var(--aa-rule); }
.so-map { border: 1px solid var(--aa-rule); background: var(--aa-recess); height: 60vh; min-height: 320px; overflow: hidden; touch-action: none; }
.so-map svg { width: 100%; height: 100%; display: block; cursor: grab; }
.so-map-edge { fill: none; stroke: var(--aa-ink-muted); stroke-width: 1.2; }
.so-map-edge.back { stroke-dasharray: 4 3; }
.so-map-node rect { fill: var(--aa-sheet); stroke: var(--aa-rule); stroke-width: 1; }
.so-map-node rect.inner { fill: none; }
.so-map-node.warn rect { stroke: var(--aa-warn); stroke-dasharray: 5 3; }
.so-map-node.sel rect { stroke: var(--aa-accent); stroke-width: 2; }
.so-map-node text { fill: var(--aa-ink); font-family: var(--aa-read); font-size: 14px; }
.so-map-node text.sub { fill: var(--aa-ink-muted); font-family: var(--aa-measure); font-size: 12px; }
.so-map-node { cursor: pointer; }
.so-map-node:focus-visible rect { stroke: var(--aa-accent); stroke-width: 2; }

/* the dice tray (js/player/dicetray.js) - its rules live in css/player.css, which this app does not load */
#diceTray { position: fixed; inset: 0; z-index: 400; touch-action: none; cursor: pointer; }
#diceTray[hidden] { display: none; }
#diceTray canvas { display: block; }
body.tray-on #tfToast { opacity: 0; }

/* WORKAROUND (shared-platform bug, recorded in specs/RM841-solo-app/evidence/platform-bugs.md): shell.css's generic
 * `.tf-app button` rule (padding 8px 16px, display inline-flex) outranks its own `.tf-tab` rule, so on a phone the
 * tab labels lose 32px of width and are squeezed to 10px tall ("Libra", clipped). Restore the thumb index here. */
.tf-app .tf-tab { padding: 4px 2px 3px; gap: 2px; display: flex; flex-direction: column; font-size: var(--t-ui); font-weight: 500; }
.tf-app .tf-tab .tf-ti, .tf-app .tf-tab .tf-tl { flex: 0 0 auto; }
.tf-app .tf-tab .tf-tl { line-height: 1.2; }
@media (min-width: 600px) { .tf-app .tf-tab { flex-direction: row; gap: var(--s-2); padding: 0 var(--s-2); } }