/* TEK Brains additions on top of the main site's shared CSS. Values come from tokens.css only. */

/* ---------- Background: fixed deep-space video (poster frame as fallback) + dark overlay. Replaces the main site's star field. ---------- */
body { display: flex; flex-direction: column; background: transparent; }
.srv-main { flex: 1 0 auto; } /* footer sits at the bottom on short pages */
.tb-backdrop,
.tb-backdrop::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.tb-backdrop { background: var(--bg) var(--backdrop-image) center / cover no-repeat; }
.tb-backdrop::after { content: ""; z-index: 0; background: var(--backdrop-overlay); } /* above the video */
.tb-backdrop__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Reduced motion: the still poster frame only (backdrop.js also removes the video so it never downloads). */
@media (prefers-reduced-motion: reduce) { .tb-backdrop__video { display: none; } }

/* ---------- Training area: solid background (no video), the member's Dark or Light colours ---------- */
html[data-area="training"], html[data-area="training"] body { background: var(--bg); }
/* Nothing in the training area may widen the page sideways (wide lesson tables scroll inside .tb-table-wrap); without
   this, phones zoomed the whole lesson page out. */
html[data-area="training"], html[data-area="training"] body { overflow-x: clip; }
/* The header keeps its dark colours in Light mode (data-theme="dark" on the header: the logo has a black background),
   so its bar is solid from the top instead of transparent over a light page. */
html[data-area="training"] .srv-header__bar { background: var(--bg); }
.tb-reading-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.tb-reading-ctl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.tb-seg { display: inline-flex; align-items: center; padding: var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); }
.tb-seg button {
  min-height: var(--btn-arrow-size); padding-inline: var(--space-3); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-soft); font: 500 var(--text-label) var(--font-sans); cursor: pointer;
}
.tb-seg button:hover:not(:disabled) { color: var(--ink); }
.tb-seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.tb-seg button:disabled { opacity: 0.4; cursor: not-allowed; }
.tb-seg__value { min-width: 7ch; padding-inline: var(--space-1); color: var(--ink-muted); font: 400 var(--text-caption) var(--font-sans); text-align: center; }
.tb-account__nav .tb-reading-ctl { margin-top: var(--space-4); }

/* ---------- Client-required buttons (role tokens; used only on these buttons) ---------- */
.srv-btn--info     { --btn-fill: var(--btn-info);     --btn-ink: var(--on-btn-info);     --btn-border: var(--btn-info); }
.srv-btn--go       { --btn-fill: var(--btn-go);       --btn-ink: var(--on-btn-go);       --btn-border: var(--btn-go); }
.srv-btn--register { --btn-fill: var(--btn-register); --btn-ink: var(--on-btn-register); --btn-border: var(--btn-register); }
/* Disabled state from components.css must win over the role colours. */
.srv-btn[aria-disabled="true"] {
  --btn-fill: var(--surface-raised);
  --btn-ink: var(--ink-muted);
  --btn-border: var(--line-strong);
}

/* ---------- Header: sister-brand strip (Track Selection v14) ---------- */
.srv-header__bar { position: relative; gap: var(--space-4); }
.tb-sister {
  color: var(--ink-muted);
  font: 500 var(--text-caption) var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
}
.tb-sister:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 1023px) {
  /* Second row under the floating bar, readable over content when scrolled. */
  .tb-sister {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 50%;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--bg);
    transform: translateX(-50%);
  }
  .srv-main { padding-top: calc(var(--header-height) + var(--header-inset) + var(--sister-row)); }
}

/* ---------- Footer: disclaimer summary, links, copyright and age line ---------- */
.tb-footer { display: grid; gap: var(--space-6); }
.tb-footer__disclaimer {
  max-width: 90ch;
  color: var(--ink-muted);
  font: 400 var(--text-caption) var(--font-sans);
}
.tb-footer__disclaimer strong { color: var(--ink-soft); }
.tb-footer__base { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.tb-footer__legal { display: grid; gap: var(--space-1); }

/* Social row (lib/social.json): 44px round buttons beside the copyright line. The list is the positioning box for
   the tooltips (items are static), so a tooltip starts at the row's left edge and never runs off a phone screen. */
.tb-social { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 0 auto; padding: 0; list-style: none; }
.tb-social__item { position: static; }
.tb-social__link {
  display: inline-grid; place-items: center; width: var(--tap-target); height: var(--tap-target);
  border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.tb-social__link svg { width: var(--icon-md); height: var(--icon-md); }
a.tb-social__link:hover { border-color: var(--line-strong); color: var(--accent); }
.tb-social__link.is-disabled { border-style: dashed; color: var(--ink-muted); cursor: not-allowed; }
.tb-social__tip {
  position: absolute; left: 0; bottom: calc(100% + var(--space-2)); z-index: 10;
  padding: var(--space-1) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-raised); box-shadow: var(--elev-1); color: var(--ink);
  font: 500 var(--text-label) var(--font-sans); white-space: nowrap;
  opacity: 0; transform: translateY(var(--space-1)); pointer-events: none;
  transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-reveal);
}
.tb-social__item:hover .tb-social__tip,
.tb-social__item:focus-within .tb-social__tip { opacity: 1; transform: none; }

/* Credit: centred at the very bottom. The logo is white on transparent; Light reading mode turns it dark. */
.tb-credit { display: flex; justify-content: center; padding-bottom: calc(var(--btn-height) + var(--gutter)); } /* room for the chat button */
.tb-credit__link {
  display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap-target);
  color: var(--ink-muted); opacity: var(--credit-opacity); text-decoration: none;
  font: 500 var(--text-micro) var(--font-sans); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  transition: color var(--dur-fast), opacity var(--dur-fast);
}
.tb-credit__link:hover { color: var(--ink); opacity: 1; }
.tb-credit__link img { width: var(--credit-logo); height: var(--credit-logo); }
[data-theme="light"] .tb-credit__link img { filter: invert(1); }
 (max-width: 767px) {
  .tb-social { margin-left: 0; }
}

/* ---------- Page content block over the background ---------- */
.tb-page { padding-block: var(--space-16); }

/* ---------- Shared bits ---------- */
.tb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.tb-measure { max-width: 72ch; }
.tb-preserve { white-space: pre-wrap; }
.tb-section-title { color: var(--accent); }
.tb-grid-2, .tb-grid-3 { display: grid; gap: var(--space-6); }
.tb-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.tb-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.srv-section { border-top-color: var(--line); }

/* Tooltip that opens downwards (header, near the top edge). */
.srv-tooltip--below { top: calc(100% + var(--space-2)); bottom: auto; transform: translate(-50%, calc(-1 * var(--space-1))); }
/* Header Login while Coming Soon: greyed, dashed, stays focusable for the tooltip. */
.srv-header__account.is-disabled { border-style: dashed; border-color: var(--line-strong); color: var(--ink-muted); cursor: not-allowed; }

/* ---------- Notices above the hero ---------- */
.tb-notices { display: grid; gap: var(--space-3); padding-top: var(--space-6); }

/* ---------- Hero ---------- */
.tb-hero { padding-block: var(--space-16) var(--space-12); }
.tb-hero__kicker { color: var(--ink-soft); }
.tb-hero__title { max-width: 16ch; }
.tb-hero__lead { max-width: 60ch; color: var(--ink-soft); }

/* ---------- Market alert stats ---------- */
.tb-stats { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); list-style: none; padding: 0; }
.tb-stats__item { display: grid; gap: var(--space-1); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-card-inner); background: var(--surface); }
.tb-stats__value { padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); color: var(--stat-color, var(--ink)); font: 300 var(--text-display-lg) var(--font-serif); font-variant-numeric: tabular-nums; }
/* Each figure its own colour, always next to its label. */
.tb-stats__item:nth-child(5n + 1) { --stat-color: var(--danger); }
.tb-stats__item:nth-child(5n + 2) { --stat-color: var(--success); }
.tb-stats__item:nth-child(5n + 3) { --stat-color: var(--accent); }
.tb-stats__item:nth-child(5n + 4) { --stat-color: var(--warning); }
.tb-stats__item:nth-child(5n + 5) { --stat-color: var(--accent-2); }
.tb-stats__label { color: var(--ink-muted); font: 400 var(--text-body-sm) var(--font-sans); }

/* ---------- Track cards (overview) ---------- */
.tb-track-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); list-style: none; padding: 0; }
.tb-track-card { display: grid; align-content: start; gap: var(--space-3); }
.tb-track-card__num { color: var(--ink-muted); font: 400 var(--text-code-sm) var(--font-mono); }
.tb-track-card__name { font: 500 var(--text-h4) var(--font-display); }
.tb-track-card .srv-badge { justify-self: start; }
.tb-track-card__topics { display: grid; gap: var(--space-1); margin-top: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--line); padding-left: var(--space-4); color: var(--ink-muted); font: 400 var(--text-body-sm) var(--font-sans); }
.tb-track-card__topics li::marker { color: var(--accent); }

/* ---------- Clock list and closing ---------- */
.tb-clock { display: grid; gap: var(--space-3); max-width: 80ch; margin: var(--space-4) 0 0; padding-left: var(--space-6); color: var(--ink-soft); font: 400 var(--text-body) var(--font-sans); }
.tb-clock li::marker { color: var(--warning); }

/* ---------- Track Selection ---------- */
.tb-toggle { display: inline-flex; margin: 0; padding: var(--space-1); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); }
.tb-toggle__option { position: relative; cursor: pointer; }
.tb-toggle__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tb-toggle__option span { display: inline-flex; align-items: center; min-height: calc(var(--btn-height) - var(--space-2)); padding-inline: var(--space-6); border-radius: var(--radius-pill); color: var(--ink-muted); font: 500 var(--text-label) var(--font-sans); }
.tb-toggle__option input:checked + span { background: var(--accent); color: var(--on-accent); }
.tb-toggle__option input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }


/* Pick button (checkbox inside a pill). Selected: check icon + "In cart" word. */
.tb-pick { position: relative; }
.tb-pick:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.tb-pick__on, .tb-incart { display: none; }
.tb-pick:has(input:checked) .tb-pick__on { display: inline; }
.tb-pick:has(input:checked) .tb-pick__off { display: none; }
.tb-pick__on svg, .tb-pick__off svg { width: 100%; height: 100%; }
.tb-incart { align-items: center; gap: var(--space-1); color: var(--success); font: 600 var(--text-overline) var(--font-sans); letter-spacing: var(--tracking-overline); text-transform: uppercase; }
.tb-pick:has(input:checked) + .tb-incart { display: inline-flex; }

/* Cart bar: sticky inside the selection form. */
.tb-cart {
  position: sticky;
  bottom: var(--space-4);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6);
  border: 1px solid var(--accent);
  border-radius: var(--radius-card-outer);
  background: var(--bg);
  box-shadow: var(--elev-1);
}
.tb-cart[hidden] { display: none; }
.tb-cart__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-6); }
.tb-cart__items { color: var(--ink-muted); font: 400 var(--text-body-sm) var(--font-sans); }
.tb-cart__total { font: 400 var(--text-body) var(--font-sans); }
.tb-cart__total strong { font: 500 var(--text-h4) var(--font-display); }
.tb-cart__hint { flex-basis: 100%; order: 3; color: var(--ink-soft); font: 400 var(--text-body-sm) var(--font-sans); }
.tb-cart__hint svg { display: inline-block; vertical-align: -0.15em; }
.tb-cart__hint[hidden] { display: none; }
.tb-cart__hint svg { color: var(--accent); }

/* ---------- Plan cards (Track Selection): bundle on top, then one card per track ---------- */
/* Track cards share their rows (subgrid), so names, prices and Register buttons line up across each row. */
.tb-plans {
  display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); /* 3 columns at desktop: 15 tracks in 5 rows */
}
.tb-plan { transition: border-color var(--dur-fast); }
.tb-plan:hover { border-color: var(--line-strong); }
.tb-plan:has(input:checked) { border-color: var(--accent); }
.tb-plans > .tb-plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
.tb-plan__inner { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: var(--space-4); align-content: start; }
@supports not (grid-template-rows: subgrid) {
  .tb-plans > .tb-plan { display: block; }
  .tb-plan__inner { display: grid; grid-template-rows: none; }
}
.tb-plan__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--space-8); }
.tb-plan__num { color: var(--ink-muted); font: 400 var(--text-code-sm) var(--font-mono); }
.tb-plan__name { margin: 0; align-self: center; text-align: center; color: var(--plan-color, var(--accent)); font: 700 var(--text-h3) var(--font-display); }
/* Card colour follows the track's badge, so the colour always comes with its word (HOT, NEW, CRITICAL). */
.tb-plan--hot { --plan-color: var(--danger); }
.tb-plan--new { --plan-color: var(--success); }
.tb-plan--critical { --plan-color: var(--text-warning); }
.tb-plan .srv-badge { border-color: var(--plan-color, var(--accent)); color: var(--plan-color, var(--accent)); }
.tb-plan__price {
  display: flex; align-items: baseline; justify-content: center; gap: var(--space-1); margin: 0;
  color: var(--ink); font: 500 var(--text-h1) var(--font-display); font-variant-numeric: tabular-nums;
}
.tb-plan__per { color: var(--ink-muted); font: 400 var(--text-body) var(--font-sans); }
.tb-plan__pick { display: grid; justify-items: center; align-content: start; gap: var(--space-2); }
.tb-plan__pick .tb-pick { width: 100%; justify-content: space-between; }
.tb-plan__topics {
  display: grid; align-content: start; gap: var(--space-2); margin: 0; padding: var(--space-4) 0 0; list-style: none;
  border-top: 1px solid var(--line); color: var(--ink-soft); font: 400 var(--text-body-sm) var(--font-sans);
}
.tb-plan__topics li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); }
.tb-plan__topics li::before {
  content: ""; width: var(--space-2); height: var(--space-2); margin-top: calc((1lh - var(--space-2)) / 2);
  border: 1px solid var(--accent); border-radius: var(--radius-pill);
}
/* Bundle: the featured card, with a tab on its top edge. */
.tb-plan--bundle { position: relative; margin-top: var(--space-16); border-color: var(--accent); overflow: visible; }
.tb-plan__ribbon {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); margin: 0;
  padding: var(--space-1) var(--space-8); border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--accent); color: var(--on-accent);
  font: 600 var(--text-overline) var(--font-sans); letter-spacing: var(--tracking-overline); white-space: nowrap;
}
.tb-plan__bundle { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-6) var(--space-12); }
.tb-plan__tag { color: var(--accent); }
.tb-plan__headline { margin: 0; font: 500 var(--text-h3) var(--font-display); }
.tb-plan__buy { display: grid; gap: var(--space-3); justify-items: start; }
.tb-plan--bundle .tb-plan__price { justify-content: flex-start; font: 500 var(--text-display-lg) var(--font-display); }
.tb-plan--bundle .tb-plan__pick { justify-items: start; }
.tb-plans-head { display: grid; justify-items: center; gap: var(--space-2); margin-top: var(--space-12); text-align: center; }
.tb-plans-head + .tb-plans { margin-top: var(--space-8); }

/* ---------- My Courses (/courses) and course pages (/courses/:slug) ---------- */
.tb-course__state { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); margin: 0; color: var(--ink-soft); font: 500 var(--text-body-sm) var(--font-sans); }
.tb-course__state svg { width: var(--space-4); height: var(--space-4); }
.tb-course__state--active svg { color: var(--success); }
.tb-course__state--cancelled svg { color: var(--accent); }
.tb-course__state--past_due { color: var(--text-warning); }
.tb-course__state--locked { color: var(--ink-muted); }
.tb-course__meta { display: grid; gap: var(--space-2); justify-items: center; color: var(--ink-muted); font: 400 var(--text-caption) var(--font-sans); }
.tb-course__bar { display: block; width: 100%; height: var(--space-1); border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.tb-course__bar > span { display: block; width: var(--done); height: 100%; border-radius: inherit; background: var(--success); }
.tb-course .tb-plan__pick .srv-btn { width: 100%; justify-content: space-between; }
.tb-course.is-locked .tb-plan__name { color: var(--ink-muted); }
.tb-course.is-locked .srv-badge { border-color: var(--line-strong); color: var(--ink-muted); }
.tb-course.is-locked:hover { border-color: var(--line); }
.tb-courses-empty { margin-top: var(--space-6); }
.tb-course-head__title { margin: 0; color: var(--plan-color, var(--accent)); font: 700 var(--text-h1) var(--font-display); }
.tb-course-head__title + .tb-chips { margin-top: var(--space-4); }
.tb-course-head__foot { margin-top: var(--space-6); }
.tb-course-head__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
.tb-course-head__foot .tb-course__meta { min-width: min(100%, 240px); justify-items: start; }
.tb-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.tb-chips li { padding: var(--space-1) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink-soft); font: 400 var(--text-caption) var(--font-sans); }

/* ---------- Account (/account): left menu on desktop, cards stacked ---------- */
.tb-account { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: var(--space-8); }
.tb-account__nav { position: sticky; top: calc(var(--header-height) + var(--space-8)); display: grid; gap: var(--space-3); }
.tb-account__title { margin: 0; font: 700 var(--text-h2) var(--font-display); }
.tb-account__menu { display: grid; gap: var(--space-1); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.tb-account__menu a {
  display: block; padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md);
  color: var(--ink-soft); font: 500 var(--text-body-sm) var(--font-sans); text-decoration: none;
}
.tb-account__menu a:hover, .tb-account__menu a:focus-visible { border-color: var(--line); color: var(--ink); }
.tb-account__menu a[aria-current="true"] { border-color: var(--accent); color: var(--accent); }
.tb-account__card { scroll-margin-top: calc(var(--header-height) + var(--space-8)); }
.tb-form { display: grid; gap: var(--space-4); max-width: 520px; }
.tb-form .srv-field__input[readonly] { color: var(--ink-muted); cursor: not-allowed; }
.tb-empty { display: grid; gap: var(--space-2); padding: var(--space-6); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); }
.tb-empty > * { margin: 0; }
.tb-subs { display: grid; gap: var(--space-3); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.tb-sub {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3) var(--space-6);
  padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.tb-sub--active { border-color: var(--line-strong); }
.tb-sub__plan { margin: 0; font: 600 var(--text-body) var(--font-display); }
.tb-sub__tracks { margin: 0; font: 400 var(--text-body-sm) var(--font-sans); }
.tb-sub__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; }
.tb-sub__facts dt { color: var(--ink-muted); font: 400 var(--text-caption) var(--font-sans); }
.tb-sub__facts dd { margin: 0; color: var(--ink); font: 500 var(--text-body-sm) var(--font-sans); }
.tb-sub__status { display: inline-flex; align-items: center; gap: var(--space-1); }
.tb-sub__status svg { width: var(--space-4); height: var(--space-4); }
.tb-sub--active .tb-sub__status svg { color: var(--success); }
.tb-sub--past_due .tb-sub__status { color: var(--text-warning); }
.tb-sub--expired .tb-sub__status, .tb-sub--refunded .tb-sub__status, .tb-sub--flagged .tb-sub__status { color: var(--ink-muted); }
.tb-mycourses { display: grid; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.tb-mycourse { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2) var(--space-4); padding-block: var(--space-3); border-top: 1px solid var(--line); }
.tb-mycourse__name { color: var(--plan-color, var(--accent)); font: 600 var(--text-body) var(--font-display); }
.tb-mycourse__state { color: var(--ink-muted); font: 400 var(--text-caption) var(--font-sans); }
.tb-mycourse__open { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--accent); font: 500 var(--text-body-sm) var(--font-sans); text-decoration: none; }
.tb-mycourse__open:hover { text-decoration: underline; }
.tb-mycourse__open svg { width: var(--space-4); height: var(--space-4); }
.tb-danger { display: grid; gap: var(--space-2); margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--danger); border-radius: var(--radius-md); }
.tb-danger > * { margin: 0; }
.tb-btn-danger { border-color: var(--danger); color: var(--danger); }
.tb-btn-danger:hover { background: var(--danger); color: var(--on-danger); }

/* ---------- Legal pages (/terms, /privacy, /disclaimer): contents on the left, text on a card ---------- */
.tb-legal-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-8); }
.tb-legal-head__title { margin: 0; font: 700 var(--text-h1) var(--font-display); }
.tb-legal-head__meta { margin: 0; color: var(--ink-muted); font: 400 var(--text-body-sm) var(--font-sans); }
.tb-legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: var(--space-8); }
.tb-legal__toc { position: sticky; top: calc(var(--header-height) + var(--space-8)); max-height: calc(100dvh - var(--header-height) - var(--space-16)); overflow-y: auto; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.tb-legal__toc summary { cursor: pointer; color: var(--accent); }
.tb-legal__toc ol { display: grid; gap: var(--space-1); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.tb-legal__toc a { display: block; padding: var(--space-1) 0; color: var(--ink-soft); font: 400 var(--text-body-sm) var(--font-sans); text-decoration: none; }
.tb-legal__toc a:hover { color: var(--accent); }
.tb-legal__text { padding: var(--space-8); color: var(--ink-soft); font: 400 var(--text-body) var(--font-sans); }
.tb-legal__text > * { max-width: 75ch; margin: 0 0 var(--space-4); }
.tb-legal__text h2 { margin-top: var(--space-8); color: var(--ink); font: 600 var(--text-h3) var(--font-display); scroll-margin-top: calc(var(--header-height) + var(--space-8)); }
.tb-legal__text h2:first-child { margin-top: 0; }
.tb-legal__text h3 { margin-top: var(--space-6); color: var(--ink); font: 600 var(--text-h4) var(--font-display); scroll-margin-top: calc(var(--header-height) + var(--space-8)); }
.tb-legal__text ul { padding-left: var(--space-6); }
.tb-legal__text li + li { margin-top: var(--space-2); }
.tb-legal__text li::marker { color: var(--accent); }
.tb-legal__callout { padding: var(--space-4) var(--space-6); border-left: 3px solid var(--accent); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); }
.tb-legal__note { color: var(--ink-muted); font: 400 var(--text-body-sm) var(--font-sans); font-style: italic; }
.tb-legal__text .tb-table-wrap { max-width: none; }
.tb-legal__text table { width: 100%; border-collapse: collapse; font: 400 var(--text-body-sm) var(--font-sans); }
.tb-legal__text th, .tb-legal__text td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tb-legal__text th { color: var(--ink); background: var(--surface-raised); }

/* ---------- Gyan's Bio (/gyans-bio): photo first, then the text ---------- */
.tb-bio { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); align-items: start; gap: var(--space-12); }
.tb-bio__photo { position: sticky; top: calc(var(--header-height) + var(--space-8)); margin: 0; }
.tb-bio__photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-card-inner); }
.tb-bio__caption { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-2) var(--space-2); color: var(--ink-muted); font: 400 var(--text-body-sm) var(--font-sans); }
.tb-bio__name { color: var(--ink); font: 600 var(--text-body) var(--font-display); }
.tb-bio__title { margin: var(--space-2) 0 var(--space-6); font: 700 var(--text-h1) var(--font-display); }
.tb-bio__text { padding: var(--space-8); color: var(--ink-soft); font: 400 var(--text-body-lg) var(--font-sans); }
.tb-bio__text p { max-width: 70ch; margin: 0 0 var(--space-4); }
.tb-bio__text .tb-pricing__kicker { margin: 0; }
.tb-bio__sign { margin-top: var(--space-6) !important; color: var(--ink); font-weight: 500; }

/* ---------- Pricing head (Track Selection): centred title, lead, Monthly / Yearly ---------- */
.tb-pricing { padding-top: var(--space-12); }
.tb-pricing__head { display: grid; justify-items: center; gap: var(--space-6); text-align: center; }
.tb-pricing__title {
  display: grid; justify-items: center; gap: var(--space-4); margin: 0;
  font: 700 var(--text-hero-title) var(--font-display); letter-spacing: var(--tracking-hero); text-transform: uppercase;
}
.tb-pricing__kicker { color: var(--accent); }
.tb-pricing__lead { margin: 0; max-width: 40ch; color: var(--ink-soft); }
.tb-pricing__head .tb-reading-ctl { margin-block-end: var(--space-8); }
.tb-toggle--lg .tb-toggle__option span { gap: var(--space-2); min-height: var(--btn-height); padding-inline: var(--space-8); font: 500 var(--text-body) var(--font-sans); }
.tb-toggle__chip {
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill);
  background: var(--success); color: var(--on-success);
  font: 600 var(--text-caption) var(--font-sans); font-style: normal; white-space: nowrap;
}
.tb-hero--lower { padding-block: var(--space-12) var(--space-4); }

/* Checkout + disclaimer acceptance */
.tb-checkout { scroll-margin-top: calc(var(--header-height) + var(--space-12)); }
.tb-accept { margin-top: 0; }
.tb-accept__label { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; color: var(--ink); font: 500 var(--text-body) var(--font-sans); cursor: pointer; }
.tb-accept__label input { width: var(--space-6); height: var(--space-6); margin: 0; accent-color: var(--accent); }
.tb-accept.has-error .tb-accept__label input { outline: 2px solid var(--danger); outline-offset: 2px; }
.tb-accept__notice { margin-top: var(--space-3); color: var(--ink-muted); font: 400 var(--text-caption) var(--font-sans); }

/* ---------- Story sections (hero lower, alert, figures, clock, why now, close): public/js/story-motion.js ---------- */
.srv-section.tb-story { padding-block: var(--space-12); }
.srv-section.tb-story + .srv-section.tb-story { border-top: 0; padding-top: 0; }
.tb-line { display: inline-block; overflow: hidden; padding-bottom: 0.12em; vertical-align: top; }
.tb-line > span { display: inline-block; }
.tb-clock-card { border-color: var(--warning); }
.tb-clock-card__title { display: flex; align-items: center; gap: var(--space-3); margin: 0; color: var(--warning); font: 600 var(--text-h4) var(--font-display); }
.tb-clock-card__icon { display: inline-flex; flex-shrink: 0; }
.tb-clock-card__icon svg { width: var(--space-8); height: var(--space-8); }
.tb-why { position: relative; }
.tb-why::before {
  content: ""; position: absolute; top: 0; left: var(--space-8); right: var(--space-8); height: 2px;
  border-radius: var(--radius-pill); background: var(--why-color);
}
.tb-why--accent { --why-color: var(--accent); }
.tb-why--violet { --why-color: var(--accent-2); }
.tb-why--warning { --why-color: var(--warning); }
.tb-why--success { --why-color: var(--success); }
.tb-band { margin-top: var(--space-8); border-color: var(--line-strong); }
.tb-band__inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-6) var(--space-12); padding: var(--space-8); }
.tb-band__text { margin: 0; color: var(--ink); font: 300 var(--text-h2) var(--font-serif); }
.tb-band__cta { flex-wrap: wrap; }

/* ---------- Coming Soon popup ---------- */
.tb-dialog {
  width: min(100% - 2 * var(--gutter), 640px);
  max-height: calc(100dvh - 2 * var(--gutter));
  padding: var(--card-outer-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-card-outer);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--elev-1);
}
.tb-dialog::backdrop { background: var(--backdrop-overlay); }
.tb-dialog__inner { padding: var(--space-6); border-radius: var(--radius-card-inner); background: var(--surface); }
.tb-dialog__list { display: grid; gap: var(--space-1) var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); list-style: none; padding: 0; color: var(--ink-soft); font: 400 var(--text-body-sm) var(--font-sans); }
.tb-dialog__num { color: var(--ink-muted); font: 400 var(--text-code-sm) var(--font-mono); }

/* ---------- Checkout dialog and thank-you popup (public/js/checkout.js) ---------- */
/* margin: auto centres the modal; the extra class beats the stack spacing of the form it sits in. */
.tb-dialog.tb-dialog--sheet { width: min(100% - 2 * var(--gutter), 480px); margin: auto; overscroll-behavior: contain; }
.tb-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tb-dialog__close {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: var(--btn-height); height: var(--btn-height);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: transparent; color: var(--ink); cursor: pointer;
}
.tb-dialog__close:hover { border-color: var(--line-strong); }
.tb-dialog__close svg { width: var(--space-4); height: var(--space-4); }
.tb-summary { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); }
.tb-summary__items { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.tb-summary__items li, .tb-summary__row {
  display: flex; justify-content: space-between; gap: var(--space-3); margin: 0;
  color: var(--ink-soft); font: 400 var(--text-body-sm) var(--font-sans);
}
.tb-summary__total { padding-top: var(--space-2); border-top: 1px solid var(--line); color: var(--ink); font: 500 var(--text-body) var(--font-sans); }
.tb-step-note { margin: 0; padding: var(--space-2) var(--space-3); border-left: 2px solid var(--accent); color: var(--ink-soft); font: 400 var(--text-body-sm) var(--font-sans); }
.tb-thanks__icon { margin: 0; color: var(--success); }
.tb-thanks__icon svg { width: var(--space-12); height: var(--space-12); }
[data-tb-step-heading]:focus, #thanks-title:focus { outline: none; }
.srv-btn[aria-busy="true"] { cursor: progress; opacity: 0.75; }
/* Lemon.js loading screen (inline styles, light by default): match the site. */
.lemonsqueezy-loader { background: var(--backdrop-overlay) !important; }
.lemonsqueezy-loader div { background-color: var(--accent) !important; }
/* Scroll lock while a dialog or the Lemon Squeezy overlay is open. */
html.tb-modal-open, html.tb-modal-open body, body.lemonsqueezy-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .tb-dialog--sheet[open] { animation: tb-sheet-in var(--dur-base) var(--ease-reveal); }
  .tb-dialog--sheet[open]::backdrop { animation: tb-fade-in var(--dur-base) ease-out; }
}
@keyframes tb-sheet-in { from { opacity: 0; transform: translateY(var(--space-6)); } }
@keyframes tb-fade-in { from { opacity: 0; } }
/* Phones: a bottom sheet across the full width. */
@media (max-width: 600px) {
  .tb-dialog.tb-dialog--sheet {
    width: 100%; max-width: 100%; max-height: 92dvh;
    margin: auto 0 0;
    border-bottom: 0;
    border-radius: var(--radius-card-outer) var(--radius-card-outer) 0 0;
  }
  .tb-dialog--sheet .tb-dialog__inner { padding: var(--space-4); }
}

@media (max-width: 767px) {
  .tb-hero { padding-block: var(--space-8); }
  .tb-plan__bundle { grid-template-columns: 1fr; }
  .tb-bio { grid-template-columns: 1fr; gap: var(--space-6); }
  .tb-legal { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } /* minmax: the licence table scrolls in its box instead of widening the page */
  .tb-legal__toc { position: static; max-height: none; }
  .tb-legal__text { padding: var(--space-6) var(--space-4); }
  .tb-bio__photo { position: static; max-width: 260px; }
  .tb-bio__text { padding: var(--space-6); }
  .tb-pricing { padding-top: var(--space-8); }
  .srv-section.tb-story { padding-block: var(--space-8); }
  .tb-band__inner { grid-template-columns: 1fr; padding: var(--space-6); }
  .tb-band__text { font: 300 var(--text-h3) var(--font-serif); }
  .tb-toggle--lg .tb-toggle__option span { padding-inline: var(--space-4); }
  .tb-course-head__title { font: 700 var(--text-h2) var(--font-display); }
  /* Account: menu becomes a row of links above the stacked cards. */
  .tb-account { grid-template-columns: 1fr; gap: var(--space-6); }
  .tb-account__nav { position: static; }
  .tb-account__menu { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .tb-account__menu a { border-color: var(--line); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); }
  .tb-sub { grid-template-columns: 1fr; }
  .tb-mycourse { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tb-mycourse__state { grid-column: 2; }
  .tb-lesson { grid-template-columns: auto 1fr; }
  .tb-lesson__state { grid-column: 2; }
  .tb-plan--bundle .tb-plan__price { font: 500 var(--text-h1) var(--font-display); }
  .tb-stats__value { font-size: var(--space-8); line-height: 1.1; }
  /* Phones: two figures per row, the fifth across the full width. */
  .tb-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .tb-stats__item { padding: var(--space-4); }
  .tb-stats__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Compact cart bar: count over total, button beside it, hint underneath. */
  .tb-cart {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
  }
  .tb-cart__summary { display: grid; gap: 0; }
  .tb-cart__hint { grid-column: 1 / -1; }
}

/* ---------- Auth and account pages ---------- */
.tb-auth { max-width: 560px; margin-inline: auto; }
.tb-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-6); margin: 0; }
.tb-dl dt { color: var(--ink-muted); font: 500 var(--text-label) var(--font-sans); }
.tb-dl dd { margin: 0; overflow-wrap: anywhere; }
/* Header Logout is a form button styled like the Account link. */
.tb-logout { display: contents; }
button.srv-header__account { background: transparent; cursor: pointer; }
/* Phones: Account and Logout show icons only (labels stay for screen readers). */
@media (max-width: 479px) {
  .srv-header__account-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .srv-header__account { padding-inline: var(--space-3); }
}

/* ---------- Track page (members) ---------- */
.tb-badge-start { justify-self: start; align-self: flex-start; gap: var(--space-1); }
.tb-badge-start svg { width: 1.2em; height: 1.2em; }
.tb-lessons { list-style: none; padding: 0; }
/* A topic heading on the course page: the lessons under it follow, up to the next topic. */
.tb-topic { margin-top: var(--space-8); padding-bottom: var(--space-2); color: var(--accent); font: 600 var(--text-h4) var(--font-display); }
.tb-topic:first-of-type { margin-top: var(--space-2); }
.srv-stack > .tb-topic + .tb-lessons { margin-top: 0; }
.tb-topic + .tb-lessons .tb-lesson:first-child { border-top-color: var(--accent); }
.tb-lesson { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-2) var(--space-4); padding-block: var(--space-4); border-top: 1px solid var(--line); }
.tb-lesson__num { color: var(--ink-muted); font: 400 var(--text-code-sm) var(--font-mono); }
.tb-lesson__title { color: var(--ink); font: 500 var(--text-body-lg) var(--font-display); text-decoration: none; }
.tb-lesson__title:hover { color: var(--accent); text-decoration: underline; }
.tb-lesson__state { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-muted); font: 500 var(--text-label) var(--font-sans); white-space: nowrap; }
.tb-lesson__state.is-done { color: var(--success); }
.tb-lesson__state.is-started { color: var(--accent); }
.tb-topics-wide { border-top: 0; padding-top: 0; columns: 2 280px; column-gap: var(--space-8); }
@media (max-width: 479px) {
  .tb-lesson { grid-template-columns: auto 1fr; }
  .tb-lesson__state { grid-column: 2; }
}

/* ---------- Lesson page ---------- */
.tb-lesson-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
  padding-block: var(--space-8) var(--space-16);
}
.tb-reading { min-width: 0; max-width: 72ch; }
.tb-lesson-meta { margin-top: var(--space-6); color: var(--ink-muted); font: 500 var(--text-label) var(--font-sans); }
.tb-lesson-title { margin-top: var(--space-2); }
.tb-lesson-topic { margin-top: var(--space-2); color: var(--accent); font: 600 var(--text-label) var(--font-sans); }

/* Contents pane: sticky on wide screens. */
.tb-toc {
  position: sticky;
  top: calc(var(--header-height) + var(--header-inset) + var(--space-6));
  max-height: calc(100dvh - var(--header-height) - var(--header-inset) - var(--space-12));
  overflow-y: auto;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.tb-toc__head { display: flex; align-items: center; justify-content: space-between; }
.tb-toc__close { display: none; }
.tb-toc__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block: var(--space-3);
  padding-inline: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--ink-muted);
}
.tb-toc__search:focus-within { border-color: var(--accent); }
.tb-toc__search input {
  flex: 1;
  min-width: 0;
  min-height: calc(var(--btn-height) - var(--space-2));
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 var(--text-body-sm) var(--font-sans);
}
.tb-toc__search input:focus-visible { outline: none; }
.tb-toc__list, .tb-toc__list ol { list-style: none; margin: 0; padding: 0; }
.tb-toc__list ol { padding-left: var(--space-3); }
.tb-toc__list a {
  display: block;
  padding: var(--space-1) var(--space-2);
  border-left: 2px solid transparent;
  color: var(--ink-soft);
  font: 400 var(--text-body-sm) var(--font-sans);
  text-decoration: none;
}
.tb-toc__list ol a { color: var(--ink-muted); font-size: var(--space-3); }
.tb-toc__list a:hover { color: var(--ink); }
.tb-toc__list a[aria-current="location"] { border-left-color: var(--accent); color: var(--accent); font-weight: 600; }
.tb-toc__empty { color: var(--ink-muted); font: 400 var(--text-body-sm) var(--font-sans); }
.tb-toc-toggle { display: none; }
.tb-toc-scrim[hidden] { display: none; }

/* Reading text (imported from Word). */
.tb-prose { margin-top: var(--space-8); color: var(--ink-soft); font: 400 var(--text-body-lg) var(--font-sans); zoom: var(--reading-scale); } /* text size: lib/site.json reading */
.tb-prose > * + * { margin-top: var(--space-4); }
.tb-prose h2, .tb-prose h3, .tb-prose h4, .tb-prose h5, .tb-prose h6 { color: var(--ink); scroll-margin-top: calc(var(--header-height) + var(--header-inset) + var(--space-8)); }
.tb-prose h2 { margin-top: var(--space-12); font: 400 var(--text-h2) var(--font-serif); }
.tb-prose h3 { margin-top: var(--space-8); font: 500 var(--text-h3) var(--font-display); }
.tb-prose h4, .tb-prose h5, .tb-prose h6 { margin-top: var(--space-6); font: 600 var(--text-h4) var(--font-display); }
.tb-prose .tb-doc-title { color: var(--ink); font: 400 var(--text-h2) var(--font-serif); }
.tb-prose ul, .tb-prose ol { padding-left: var(--space-6); }
.tb-prose li + li { margin-top: var(--space-1); }
.tb-prose li::marker { color: var(--accent); }
.tb-prose strong, .tb-prose b { color: var(--ink); }
.tb-prose a { overflow-wrap: anywhere; }
.tb-prose img { height: auto; padding: var(--space-2); border-radius: var(--radius-md); background: var(--image-backing); }
.tb-prose pre, .tb-prose code { color: var(--ink); }
.tb-prose pre { overflow-x: auto; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.tb-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.tb-table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tb-prose table { width: 100%; border-collapse: collapse; font: 400 var(--text-body-sm) var(--font-sans); }
.tb-prose th, .tb-prose td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tb-prose tr:last-child td { border-bottom: 0; }
.tb-prose th { color: var(--ink); background: var(--surface-raised); }
.tb-prose td p, .tb-prose th p { margin: 0; }

/* Video block: YouTube loads only after the click. */
.tb-video { margin-block: var(--space-12); }
.tb-video__frame {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card-inner);
  background: var(--surface);
}
.tb-video__frame iframe { width: 100%; height: 100%; border: 0; }
.tb-video__play {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--btn-height);
  padding: 0 var(--space-6) 0 var(--space-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--ink);
  font: 500 var(--text-label) var(--font-sans);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-reveal);
}
.tb-video__play:active { transform: scale(var(--press-scale)); }
.tb-video__icon { display: inline-grid; place-items: center; width: var(--btn-arrow-size); height: var(--btn-arrow-size); border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); }
.tb-video__caption { margin-top: var(--space-2); color: var(--ink-muted); font: 400 var(--text-body-sm) var(--font-sans); }
.tb-video__num { color: var(--accent); font-weight: 600; }

/* Progress and lesson pager */
.tb-progress { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--line); display: grid; gap: var(--space-4); scroll-margin-top: calc(var(--header-height) + var(--space-12)); }
.tb-progress form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.tb-progress__state { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--success); font: 600 var(--text-label) var(--font-sans); }
.tb-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-block: var(--space-8) var(--space-6); }
.tb-pager__link { display: grid; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; transition: border-color var(--dur-fast); }
.tb-pager__link:hover { border-color: var(--accent); color: var(--ink); }
.tb-pager__link--next { text-align: right; grid-column: 2; }
.tb-pager__dir { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--accent); font: 600 var(--text-overline) var(--font-sans); letter-spacing: var(--tracking-overline); text-transform: uppercase; }
.tb-pager__link--next .tb-pager__dir { justify-content: flex-end; }
.tb-pager__title { font: 500 var(--text-body) var(--font-display); }

/* Phones and tablets: contents becomes a drawer opened from a sticky button. */
@media (max-width: 1023px) {
  .tb-lesson-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .tb-reading { max-width: none; }
  .tb-toc-toggle {
    position: sticky;
    top: calc(var(--header-height) + var(--header-inset) + var(--sister-row));
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    justify-self: start;
    min-height: var(--btn-height);
    padding-inline: var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--bg);
    color: var(--ink);
    font: 500 var(--text-label) var(--font-sans);
    cursor: pointer;
  }
  .tb-toc {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 70;
    width: min(320px, 88vw);
    max-height: none;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    transform: translateX(-105%);
    transition: transform var(--dur-base) var(--ease-reveal);
    visibility: hidden;
  }
  .tb-toc.is-open { transform: none; visibility: visible; }
  .tb-toc__close { display: inline-grid; place-items: center; width: var(--btn-height); height: var(--btn-height); border: 1px solid var(--line); border-radius: var(--radius-pill); background: transparent; color: var(--ink); cursor: pointer; }
  .tb-toc-scrim { position: fixed; inset: 0; z-index: 65; background: var(--backdrop-overlay); }
  .tb-toc-open, .tb-toc-open body { overflow: hidden; }
  .tb-prose { margin-top: var(--space-6); }
}
@media (max-width: 479px) {
  .tb-pager { grid-template-columns: 1fr; }
  .tb-pager__link--next { grid-column: 1; }
}

/* ---------- Lesson protection ---------- */
/* Watermark: the viewer's email (server-rendered SVG tile used as a mask), over the text, never catches clicks. */
.tb-prose-wrap { position: relative; }
.tb-watermark {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: var(--watermark-ink);
  opacity: var(--tb-wm-opacity);
  -webkit-mask-image: var(--tb-wm-image);
  mask-image: var(--tb-wm-image);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
[data-theme="light"] .tb-watermark { opacity: var(--tb-wm-opacity-light, var(--tb-wm-opacity)); }
/* Deterrents: no text selection or image dragging on lesson pages; form fields stay usable. */
.tb-protected main { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tb-protected main input, .tb-protected main textarea { -webkit-user-select: text; user-select: text; }
.tb-protected main img { -webkit-user-drag: none; }
.tb-video__note { margin-top: var(--space-1); color: var(--ink-muted); font: 400 var(--text-caption) var(--font-sans); }

/* Printing a lesson page shows only the message. */
.tb-print-block { display: none; }
@media print {
  body:has(.tb-print-block) > *:not(.tb-print-block) { display: none !important; }
  body:has(.tb-print-block) .tb-print-block { display: block !important; margin: 2cm; color: var(--print-ink); font: 600 18pt/1.4 var(--font-sans); }
}

/* Turnstile widget (registration, login): keep its space so the form does not jump when it loads. */
.tb-turnstile { min-height: 65px; }

/* ---------- Contact Us (/contact) ---------- */
.tb-contact__hero { display: grid; justify-items: start; gap: var(--space-4); margin-bottom: var(--space-12); }
.tb-contact__title { margin: 0; font: 300 var(--text-hero-title) var(--font-serif); letter-spacing: var(--tracking-display); }
.tb-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.tb-word > span { display: inline-block; }
.tb-contact__grid { display: grid; grid-template-columns: var(--contact-cols); gap: var(--space-6); align-items: start; }
.tb-contact__grid > * { min-width: 0; }

/* Details card */
.tb-contact__rows { display: grid; gap: var(--space-4); margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--line); list-style: none; }
.tb-contact__row { display: flex; align-items: flex-start; gap: var(--space-3); }
.tb-contact__row-icon { flex-shrink: 0; color: var(--accent); }
.tb-contact__row-icon svg { width: var(--icon-md); height: var(--icon-md); }
.tb-contact__row-text { display: grid; gap: var(--space-1); min-width: 0; }
.tb-contact__row-label { color: var(--ink-muted); }
.tb-contact__row-value { color: var(--ink); overflow-wrap: anywhere; }
a.tb-contact__row-value:hover { color: var(--accent); }

/* Form card */
.tb-contact__intro { margin: 0 0 var(--space-6); color: var(--ink); font: 300 var(--text-h3) var(--font-sans); }
.tb-contact__notice, .tb-contact__summary { margin-bottom: var(--space-4); }
.tb-contact__summary[hidden] { display: none; }
.tb-contact__summary-list { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.tb-contact__summary-list a { color: var(--ink); }
.tb-contact__required { margin: 0; color: var(--ink-soft); }
.tb-req { color: var(--danger); }
.tb-contact__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.tb-contact__row2 > * { min-width: 0; }
.tb-consent { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-target); color: var(--ink-soft); font: 400 var(--text-body-sm) var(--font-sans); cursor: pointer; }
.tb-consent__box { flex-shrink: 0; width: var(--icon-md); height: var(--icon-md); margin: 0; accent-color: var(--accent); cursor: pointer; }
.tb-contact__submit { margin-top: var(--space-6); }

/* States (sent, nomail, failed, rate) */
.tb-contact__state { display: grid; justify-items: start; gap: var(--space-4); }
.tb-contact__state:focus { outline: none; }
.tb-contact__state:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tb-contact__state-icon svg { width: var(--icon-state); height: var(--icon-state); }
.tb-contact__state-icon--success { color: var(--success); }
.tb-contact__state-icon--danger { color: var(--danger); }
.tb-contact__state-title { margin: 0; font: 400 var(--text-h2) var(--font-serif); }
.tb-contact__state-text { margin: 0; color: var(--ink-soft); }
.tb-contact__state-note { margin: 0; color: var(--ink-muted); }

/* Booking */
.tb-book__head { display: grid; justify-items: start; gap: var(--space-4); }
.tb-book__title { margin: 0; }
.tb-book__card { margin-top: var(--space-8); }
.tb-book__inner { padding: 0; overflow: hidden; background: var(--calendly-bg); }
.tb-book__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); background: var(--surface);
}
.tb-book__pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.tb-book__pill {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink-soft); font: 500 var(--text-label) var(--font-sans);
}
.tb-book__pill svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--accent); }
.tb-book__open { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-target); color: var(--accent); font: 500 var(--text-label) var(--font-sans); }
.tb-book__open svg { width: var(--icon-sm); height: var(--icon-sm); }
.tb-book__widget { min-width: var(--calendly-min-width); height: var(--calendly-height); }
.tb-book__missing { display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-6); color: var(--ink-soft); }
.tb-book__missing-icon { color: var(--warning); }
.tb-book__missing-icon svg { width: var(--icon-md); height: var(--icon-md); }
.tb-book__fallback { margin: var(--space-4) 0 0; color: var(--ink-soft); }
.tb-book__fallback a { color: var(--accent); }

@media (max-width: 767px) {
  .tb-contact__grid, .tb-contact__row2 { grid-template-columns: 1fr; }
  .tb-contact__intro { font: 300 var(--text-body-lg) var(--font-sans); }
  .tb-book__bar { padding: var(--space-3) var(--space-4); }
  .tb-book__open { display: none; }
  .tb-book__widget { height: var(--calendly-height-mobile); }
}

/* ---------- Live chat widget ---------- */
.tb-chat { position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: var(--chat-layer); display: grid; justify-items: end; gap: var(--space-3); }
.tb-chat__toggle {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--btn-height); padding-inline: var(--space-4) var(--space-6);
  border: 1px solid var(--accent); border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent);
  box-shadow: var(--elev-1); font: 600 var(--text-body-sm) var(--font-sans); cursor: pointer;
  transition: transform var(--dur-fast), box-shadow var(--dur-base);
}
.tb-chat__toggle:hover { box-shadow: var(--elev-1), var(--glow-accent); }
.tb-chat__toggle:active { transform: scale(var(--press-scale)); }
.tb-chat__toggle-icon svg { width: var(--icon-md); height: var(--icon-md); }
.tb-chat__badge {
  position: absolute; top: calc(-1 * var(--space-2)); right: calc(-1 * var(--space-1));
  min-width: var(--icon-md); height: var(--icon-md); padding-inline: var(--space-1);
  display: inline-grid; place-items: center; border-radius: var(--radius-pill);
  background: var(--danger); color: var(--on-danger); font: 600 var(--text-caption) var(--font-sans);
}
.tb-chat__badge[hidden] { display: none; }
.tb-chat__panel {
  display: flex; flex-direction: column; width: min(var(--chat-width), calc(100vw - 2 * var(--gutter)));
  border: 1px solid var(--line-strong); border-radius: var(--radius-card-inner); background: var(--surface);
  box-shadow: var(--elev-1); color: var(--ink); overflow: hidden;
  transform-origin: bottom right; animation: tb-chat-in var(--dur-base) var(--ease-reveal);
}
.tb-chat__panel[hidden] { display: none; }
/* Only the conversation needs a fixed height; the sign-in and admin notes fit their text. */
.tb-chat[data-chat-mode="member"] .tb-chat__panel { height: min(var(--chat-height), calc(100dvh - var(--btn-height) - 4 * var(--gutter))); }
@keyframes tb-chat-in { from { opacity: 0; transform: translateY(var(--space-2)) scale(var(--motion-field-scale)); } }
.tb-chat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.tb-chat__title { margin: 0; font: 500 var(--text-body) var(--font-display); }
.tb-chat__close { display: inline-grid; place-items: center; width: var(--tap-target); height: var(--tap-target); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-soft); cursor: pointer; }
.tb-chat__close:hover { color: var(--ink); background: var(--surface-raised); }
.tb-chat__close svg { width: var(--icon-md); height: var(--icon-md); }
.tb-chat__body { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: var(--space-4); }
.tb-chat__body--note { gap: var(--space-3); }
.tb-chat__body--note p { margin: 0; }
.tb-chat__links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.tb-chat__links a { display: inline-flex; align-items: center; min-height: var(--tap-target); color: var(--accent); }
.tb-chat__muted { margin: 0; color: var(--ink-muted); font: 400 var(--text-body-sm) var(--font-sans); }
.tb-chat__intro { margin-bottom: var(--space-3); }
.tb-chat__log { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.tb-chat__msg { display: grid; gap: var(--space-1); max-width: 85%; }
.tb-chat__msg--user { align-self: flex-end; justify-items: end; }
.tb-chat__msg--admin { align-self: flex-start; }
.tb-chat__text { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); font: 400 var(--text-body-sm) var(--font-sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.tb-chat__msg--user .tb-chat__text { background: var(--accent); color: var(--on-accent); }
.tb-chat__msg--admin .tb-chat__text { border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); }
.tb-chat__meta { color: var(--ink-muted); font: 400 var(--text-caption) var(--font-sans); }
.tb-chat__form { display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--line); }
.tb-chat__input {
  flex: 1; min-height: var(--tap-target); max-height: calc(var(--tap-target) * 3); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink);
  font: 400 var(--text-body-sm) var(--font-sans); resize: none;
}
.tb-chat__input:focus-visible { border-color: var(--accent); }
.tb-chat__send { flex-shrink: 0; display: inline-grid; place-items: center; width: var(--tap-target); height: var(--tap-target); border: 0; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); cursor: pointer; }
.tb-chat__send svg { width: var(--icon-md); height: var(--icon-md); }
.tb-chat__status { margin: 0; padding: 0 var(--space-3); color: var(--ink-muted); font: 400 var(--text-caption) var(--font-sans); }
.tb-chat__status:empty { display: none; }
.tb-chat__status:not(:empty) { padding-bottom: var(--space-2); }
@media print { .tb-chat { display: none; } }

/* ---------- Chat inbox (/admin/chat) ---------- */
.tb-inbox__head { display: grid; justify-items: start; gap: var(--space-3); margin-bottom: var(--space-6); }
.tb-inbox__title { margin: 0; }
.tb-inbox__inner {
  display: grid; grid-template-columns: var(--inbox-list-width) 1fr; padding: 0; overflow: hidden;
  height: min(var(--inbox-height), calc(100dvh - var(--header-height) - var(--space-24)));
}
.tb-inbox__list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.tb-inbox__list-title { margin: 0; padding: var(--space-4); border-bottom: 1px solid var(--line); font: 600 var(--text-overline) var(--font-sans); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--ink-muted); }
.tb-inbox__threads { flex: 1; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.tb-inbox__empty { padding: var(--space-4); }
.tb-inbox__item {
  display: grid; gap: var(--space-1); width: 100%; min-height: var(--tap-target); padding: var(--space-3) var(--space-4);
  border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  transition: background var(--dur-fast);
}
.tb-inbox__item:hover { background: var(--surface-raised); }
.tb-inbox__item.is-current { background: var(--surface-raised); box-shadow: inset 2px 0 0 var(--accent); }
.tb-inbox__item-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.tb-inbox__item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--text-body-sm) var(--font-sans); }
.tb-inbox__item-time { color: var(--ink-muted); font: 400 var(--text-caption) var(--font-sans); }
.tb-inbox__badge { position: static; flex-shrink: 0; }
.tb-inbox__thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tb-inbox__thread-head { padding: var(--space-4); border-bottom: 1px solid var(--line); }
.tb-inbox__name { margin: 0; font: 500 var(--text-body) var(--font-display); }
.tb-inbox__back { display: none; }
.tb-inbox__log { padding: var(--space-4); }
.tb-inbox__thread .tb-chat__form[hidden] { display: none; }
@media (max-width: 767px) {
  /* One pane at a time: the list, or the open conversation with a back button. */
  .tb-inbox__inner { grid-template-columns: 1fr; height: calc(100dvh - var(--header-height) - var(--space-24)); }
  .tb-inbox__list { border-right: 0; }
  .tb-inbox__thread, [data-inbox].is-reading .tb-inbox__list { display: none; }
  [data-inbox].is-reading .tb-inbox__thread { display: flex; }
  .tb-inbox__back {
    display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-target); margin-bottom: var(--space-2); padding: 0;
    border: 0; background: transparent; color: var(--accent); font: 500 var(--text-label) var(--font-sans); cursor: pointer;
  }
  .tb-inbox__back svg { width: var(--icon-sm); height: var(--icon-sm); }
}