/* Tallentex 8 — the delta on top of the ink stylesheet.
   Tokens only, never a literal colour. One surface: hairlines and space
   separate things, not a second background. Weight tops out at 600. */

[x-cloak] { display: none !important; }

/* ── App bar: theme switch sits where the account button sits ───────── */
.tx-theme { gap: 0.375rem; font: 400 var(--t-xs) var(--font-label); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }

/* ── Chapter header meta ───────────────────────────────────────────── */
.tx-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.tx-tabs { margin: 1.5rem 0 0.5rem; }

/* ── Section heads inside the reading column ───────────────────────── */
.tx-sec { margin-top: var(--s-sub); }
.tx-sec > .eyebrow { margin-bottom: 0.25rem; }

/* ── Recall checklist ──────────────────────────────────────────────── */
.tx-check { list-style: none; margin: 0.75rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.tx-check li { border-bottom: 1px solid var(--rule); }
.tx-check button {
  display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.75rem; align-items: start;
  width: 100%; padding: 0.625rem 0; text-align: left; background: none; border: 0;
  color: var(--ink); font: inherit; cursor: pointer;
}
.tx-check .box {
  width: 1rem; height: 1rem; margin-top: 0.3rem; border: 1.5px solid var(--rule-2); border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--paper);
}
.tx-check [aria-pressed="true"] .box { background: var(--h-good); border-color: var(--h-good); }
.tx-check [aria-pressed="true"] .t { color: var(--ink-3); }
.tx-check-foot { margin-top: 0.5rem; font: 400 var(--t-xs) var(--font-label); color: var(--ink-3); }

/* ── Figures in the reading column ─────────────────────────────────── */
.tx-fig { margin: 1.25rem 0 1.5rem; }
.tx-fig svg { display: block; width: 100%; height: auto; max-height: 20rem; }
.tx-fig figcaption { margin-top: 0.5rem; font-size: var(--t-sm); color: var(--ink-3); text-align: center; }
.tx-fig-row { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@container doc (width >= 36rem) { .tx-fig-row { grid-template-columns: 1fr 1fr; } }
.tx-photo { margin: 1.25rem 0 1.5rem; }
.tx-photo img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--rule); }
.tx-photo figcaption { margin-top: 0.5rem; font-size: var(--t-sm); color: var(--ink-3); }

/* Beyond-the-book marker */
.tx-ext { color: var(--h-warn); }

/* ── Widgets: the SVG sits on the stage at its own aspect ──────────── */
.tx-stage svg { display: block; width: 100%; height: auto; }
.tx-stage text { font: 400 13px var(--font-label); fill: currentColor; stroke: none; }
.tx-mirror-word { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.tx-mirror-word > div { padding: 0.75rem 0.5rem; text-align: center; border-left: 1px solid var(--rule); }
.tx-mirror-word > div:first-child { border-left: 0; }
.tx-mirror-word .w { font: 600 1.5rem/1.2 var(--font-body); letter-spacing: 0.04em; color: var(--ink); overflow-wrap: anywhere; }
.tx-mirror-word .k { margin-top: 0.25rem; font: 400 var(--t-micro) var(--font-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.tx-flip-x { display: inline-block; transform: scaleX(-1); }
.tx-flip-y { display: inline-block; transform: scaleY(-1); }
.tx-input {
  flex: 1 1 10rem; min-width: 0; padding: 0.375rem 0.625rem; border: 1px solid var(--rule-2);
  border-radius: var(--r-sm); background: var(--paper); color: var(--ink);
  font: 500 var(--t-body) var(--font-label); text-transform: uppercase; letter-spacing: 0.08em;
}

/* ── Quiz ──────────────────────────────────────────────────────────── */
.tx-score {
  position: sticky; top: 0; z-index: 5; margin: 1rem 0 0; padding: 0.625rem 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem;
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.tx-score .big { font: 600 var(--t-h2) var(--font-label); font-variant-numeric: tabular-nums; color: var(--ink); }
.tx-score .big small { font-size: var(--t-sm); font-weight: 400; color: var(--ink-3); }
.tx-score .cnt { font: 400 var(--t-xs) var(--font-label); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.tx-score .cnt b { font-weight: 600; color: var(--ink-2); }
.tx-score .cnt .ok { color: var(--h-good); }
.tx-score .cnt .no { color: var(--h-bad); }
.tx-score .grow { flex: 1 1 auto; }
.tx-bar { flex: 1 1 100%; display: flex; height: 3px; background: var(--rule); border-radius: 999px; overflow: hidden; }
.tx-bar i { display: block; height: 100%; }
.tx-bar .ok { background: var(--h-good); }
.tx-bar .no { background: var(--h-bad); }
.tx-bar .sk { background: var(--rule-2); }

.tx-q { padding: 1.5rem 0 1.25rem; border-bottom: 1px solid var(--rule); }
.tx-q-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; margin-bottom: 0.5rem; }
.tx-q-n { font: 600 var(--t-sm) var(--font-label); color: var(--ink); margin-right: 0.25rem; }
.tx-q-stem { color: var(--ink); line-height: var(--lh-body); }
.tx-q-stem p { margin: 0 0 0.5rem; }
.tx-q-stem ol, .tx-q-stem ul { margin: 0.25rem 0 0.5rem; padding-left: 1.5rem; }
.tx-q-stem table { margin: 0.5rem 0; }
.tx-q-fig { margin: 0.75rem 0; }
.tx-q-fig svg { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto; }
.tx-q .opts { margin-top: 0.75rem; }
.tx-q-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.tx-q-result { font: 500 var(--t-xs) var(--font-label); text-transform: uppercase; letter-spacing: 0.06em; }
.tx-q-result[data-v="right"] { color: var(--h-good); }
.tx-q-result[data-v="wrong"] { color: var(--h-bad); }
.tx-q-result[data-v="skip"] { color: var(--ink-3); }
.tx-q .callout { margin-top: 0.75rem; }
.tx-empty { padding: 2rem 0; color: var(--ink-3); text-align: center; }

/* ── Flash summary ─────────────────────────────────────────────────── */
.tx-flash { counter-reset: fl; list-style: none; padding: 0; margin: 0.75rem 0 0; border-top: 1px solid var(--rule); }
.tx-flash li { counter-increment: fl; display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem; padding: 0.625rem 0; border-bottom: 1px solid var(--rule); }
.tx-flash li::before { content: counter(fl, decimal-leading-zero); font: 400 var(--t-xs)/2 var(--font-label); color: var(--ink-3); }

/* ── Dashboard ─────────────────────────────────────────────────────── */
.tx-hero { display: grid; gap: 1.5rem; grid-template-columns: 1fr; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); }
@container doc (width >= 40rem) { .tx-hero { grid-template-columns: 1fr auto; align-items: end; } }
.tx-count { font: 600 3rem/1 var(--font-label); font-variant-numeric: tabular-nums; color: var(--ink); }
.tx-count-k { font: 400 var(--t-xs) var(--font-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-top: 0.375rem; }
.tx-pattern { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 1rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tx-pattern > div { padding: 0.625rem 0.5rem; border-left: 1px solid var(--rule); }
.tx-pattern > div:first-child { border-left: 0; padding-left: 0; }
.tx-pattern .v { font: 600 var(--t-h2) var(--font-label); font-variant-numeric: tabular-nums; }
.tx-pattern .k { font: 400 var(--t-micro) var(--font-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.tx-today { margin-top: 1.5rem; }
.tx-day { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 0.25rem 1rem; align-items: baseline; padding: 0.625rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; }
.tx-day:first-child { border-top: 1px solid var(--rule); }
.tx-day .d { font: 400 var(--t-xs) var(--font-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tx-day .t { color: var(--ink); }
.tx-day .m { font: 400 var(--t-xs) var(--font-label); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tx-day[aria-current="date"] .d { color: var(--mark); font-weight: 600; }
.tx-day[aria-current="date"] { box-shadow: inset 2px 0 0 var(--mark); padding-left: 0.75rem; }
.tx-day[data-past] .t { color: var(--ink-3); }
@container doc (width < 34rem) { .tx-day { grid-template-columns: 1fr auto; } .tx-day .t { grid-column: 1 / -1; } }
.tx-subj-n { font: 400 var(--t-xs) var(--font-label); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.row[aria-disabled="true"] .row-t { color: var(--ink-3); }
.tx-q-stem ol { list-style: lower-alpha outside; }
.tx-q-stem ul { list-style: disc outside; }

/* Stage drawings: capped so a wide column doesn't blow the labels up. */
.tx-stage { --stage-min: 16rem; }
.tx-stage svg { max-height: 20rem; margin: 0 auto; }
.tx-stage text { font-size: 11px; }

/* Heading ladder inside a chapter: h2 section, h3 pattern. */
.tx-sec > h2 { font: 600 var(--t-h1)/1.3 var(--font-body); margin: 0.25rem 0 0.75rem; }
.tx-sec h3:not(.wg-title) { font: 600 var(--t-h3)/1.35 var(--font-body); margin: 2rem 0 0.75rem; }
.tx-sec .callout, .tx-sec .forms, .tx-sec .traps { margin-top: 1rem; }
.tx-sec .steps { margin-top: 0.75rem; }
@container wg (width < 32rem) { .tx-stage text { font-size: 20px; } }

/* ── Shortcut / tip — the one highlighted voice for a time-saving move ─── */
.callout.tx-shortcut {
  border-left-color: var(--mark);
  background: color-mix(in srgb, var(--mark) 9%, var(--paper));
}
.callout.tx-shortcut .callout-label { color: var(--mark); }
.callout.tx-shortcut .callout-label::before { content: "⚡ "; }
mark.tx-hl {
  padding: 0 0.2em; border-radius: var(--r-sm); color: inherit;
  background: color-mix(in srgb, var(--mark) 16%, transparent);
}

/* ── Revision sheet ──────────────────────────────────────────────────── */
.tx-rev { margin-top: 1.25rem; }
.tx-rev-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.tx-rev-block { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.tx-rev-block > h3 { margin: 0 0 0.625rem; font: 500 var(--t-xs)/1.3 var(--font-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.tx-rev-list { list-style: none; margin: 0; padding: 0; }
.tx-rev-list li { position: relative; padding: 0.3125rem 0 0.3125rem 1rem; line-height: 1.55; }
.tx-rev-list li::before { content: ""; position: absolute; left: 0.125rem; top: 0.95em; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--rule-2); }
.tx-rev-forms { display: grid; grid-template-columns: 1fr; gap: 0.5rem 1.5rem; }
@container doc (width >= 40rem) { .tx-rev-forms { grid-template-columns: 1fr 1fr; } }
.tx-rev-form { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.tx-rev-form .n { font-size: var(--t-sm); color: var(--ink-2); }
.tx-rev-form .e { margin-top: 0.125rem; overflow-x: auto; }
.tx-rev-traps li::before { background: var(--h-bad); }
.tx-rev-cuts li::before { background: var(--mark); }
@media print {
  .appbar, .tabs, .footnav, .tx-meta, .btn, .wg { display: none !important; }
  .tx-rev-block { break-inside: avoid; }
}

/* ── Progress ────────────────────────────────────────────────────────── */
.tx-prog { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--rule); }
.tx-prog i { display: block; height: 100%; }
.tx-prog .m { background: var(--h-good); }
.tx-prog .p { background: color-mix(in srgb, var(--h-good) 55%, var(--paper)); }
.tx-prog .l { background: color-mix(in srgb, var(--mark) 45%, var(--paper)); }
.tx-prog-key { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.5rem; font: 400 var(--t-xs) var(--font-label); color: var(--ink-3); }
.tx-prog-key b { font-weight: 600; color: var(--ink-2); }
.tx-prog-key i { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 2px; margin-right: 0.3rem; vertical-align: -1px; }
.row .chip { margin-left: 0.5rem; }
.tx-subj-prog { margin-top: 1rem; border-top: 1px solid var(--rule); }
.tx-sp-row { display: grid; grid-template-columns: 7rem 1fr 3.5rem; align-items: center; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; }
.tx-sp-n { font-size: var(--t-sm); color: var(--ink); }
.tx-sp-c { font: 400 var(--t-xs) var(--font-label); color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
/* The bundle pins list-item padding with a layered !important, which an unlayered rule cannot beat.
   So the sheet's bullet gets its own grid column instead of padding. */
.tx-rev-list > li { display: block; position: relative; margin-inline-start: 1rem; }
.tx-rev-list > li::before { position: absolute; left: -0.875rem; top: 0.9em; }
.tx-rev-list > li::marker { content: none; }
.tx-fig svg, .tx-q-fig svg { margin-inline: auto; }

/* ── Confirm dialog ──────────────────────────────────────────────────── */
.tx-modal-back {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem;
  background: color-mix(in srgb, var(--ink) 38%, transparent);
  animation: tx-fade 0.12s ease-out;
}
.tx-modal {
  width: min(28rem, 100%); padding: 1.25rem 1.375rem 1.125rem;
  background: var(--paper-over); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: 0 18px 48px -18px color-mix(in srgb, var(--ink) 55%, transparent);
  animation: tx-rise 0.14s ease-out;
}
.tx-modal-t { margin: 0; font: 500 var(--t-h2)/1.3 var(--font-display); color: var(--ink); }
.tx-modal-b { margin: 0.5rem 0 0; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); }
.tx-modal-a { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }
.tx-modal .btn[data-danger] { background: var(--h-bad); border-color: var(--h-bad); }
@keyframes tx-fade { from { opacity: 0; } }
@keyframes tx-rise { from { opacity: 0; transform: translateY(6px); } }

/* formulas scroll sideways on a phone if they must, but never show a vertical bar */
.tx-rev-form .e { overflow-y: hidden !important; padding-block: 0.35em; }
/* no rule under the last row of a list; the section rule already closes it */
.part > .rows > .row:last-child, .part > div > .rows > .row:last-child { border-bottom: 0; }

/* Trap list toggle */
.tx-traps-bar { display: flex; justify-content: flex-end; margin: 0.75rem 0 0.5rem; }
/* Figure labels: the mono face reads a step larger than the sans at the same size */
.tx-fig .sg-fig-label, .tx-q-fig .sg-fig-label, .tx-rev .sg-fig-label { font-size: 12.5px; }

/* Tables inside notes breathe away from the bullets around them */
.doc .tbl { margin-block: 1rem 1.25rem; }
.doc ul + .tbl, .doc .tbl + ul { margin-top: 1.25rem; }
/* Lists inside callouts keep their bullets (the prose reset strips them) */
.callout ul { list-style: disc outside !important; padding-left: 1.15rem !important; margin: 0.35rem 0 0 !important; }
.callout ol { list-style: decimal outside !important; padding-left: 1.3rem !important; margin: 0.35rem 0 0 !important; }
.callout li { display: list-item; margin: 0.15rem 0 !important; }
.callout li::marker { color: var(--ink-3); }
/* Wide display maths scrolls sideways on narrow screens instead of being clipped */
.katex-display { overflow-x: auto; overflow-y: hidden; max-width: 100%; padding-block: 0.2em; }
.form-e, .tx-rev-form .e { max-width: 100%; }

/* Site-wide legal footer (every page). */
.ev-legal { max-width: 46rem; margin: 3rem auto 0; padding: 1.25rem var(--gutter, 1rem) 2.5rem; border-top: 1px solid var(--rule); color: var(--ink-3, var(--mute)); font-size: 12.5px; line-height: 1.55; }
.ev-legal p { margin: 0 0 0.4rem; }
.ev-legal b { color: var(--ink-2, inherit); font-weight: 600; }