/* Shinclock identity: ropes, painted gym signage, terracotta and brass.
   Loaded last so it owns typography, colour and the surfaces this app added. */
@font-face {
  font-family: "Gym Sign";
  src: url("./assets/fonts/fraunces-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gym Text";
  src: url("./assets/fonts/work-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gym Text";
  src: url("./assets/fonts/work-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Round Mono";
  src: url("./assets/fonts/roboto-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

body[data-theme="muaythai"] {
  color-scheme: light;
  --bg: #e6d6c8;
  --paper: #fbf5ee;
  --ink: #241812;
  --muted: #62503f;
  --line: #cdb9a8;
  --accent: #a03b22;
  --accent-ink: #fdf6ef;
  --teal: #0e4a47;
  --teal-ink: #f2ece3;
  --brass: #b3842f;
  --brass-lit: #e2b660;
  --stage: #16332f;
  --stage-bg: #e8dacd;
  --board: #fbf5ee;
  --hover: #f0e4d6;
  --danger: #a82424;
  --accent-text: #a03b22;
  --radius: 3px;
  --heading: "Gym Sign", Georgia, serif;
  --mono: "Round Mono", ui-monospace, "SFMono-Regular", monospace;
  /* human.css reads --sans with a fallback and nothing ever defined it, so the
     model's camera toolbar and its caption rendered in Arial rather than the
     site face. Defining it here is the one-line fix wave one deferred. */
  --sans: "Gym Text", "Helvetica Neue", Arial, sans-serif;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
}
body[data-theme="muaythai"] h1,
body[data-theme="muaythai"] h2,
body[data-theme="muaythai"] h3,
body[data-theme="muaythai"] .brand {
  font-family: var(--heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
body[data-theme="muaythai"] .brand {
  letter-spacing: 0.02em;
}
body[data-theme="muaythai"] .pill,
body[data-theme="muaythai"] .row-no,
body[data-theme="muaythai"] .round-clock,
body[data-theme="muaythai"] .round-count,
body[data-theme="muaythai"] .player-clock,
body[data-theme="muaythai"] #phase-number,
body[data-theme="muaythai"] .phase-tabs span,
body[data-theme="muaythai"] .beat span {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Header and footer read as painted board, not a generic app bar. */
body[data-theme="muaythai"] .site-header {
  background: var(--teal);
  color: var(--teal-ink);
  border-bottom: 4px solid var(--brass);
}
body[data-theme="muaythai"] .site-header a {
  color: var(--teal-ink);
}
body[data-theme="muaythai"] .site-header nav a {
  padding: 10px 4px;
  border-bottom: 2px solid transparent;
}
body[data-theme="muaythai"] .site-header nav a:hover,
body[data-theme="muaythai"] .site-header nav a[aria-current="page"] {
  border-bottom-color: var(--brass);
  color: #fff;
}
body[data-theme="muaythai"] .brand-mark {
  background: var(--brass);
  color: var(--teal);
}
body[data-theme="muaythai"] .header-cta {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
}
body[data-theme="muaythai"] footer {
  background: var(--teal);
  color: var(--teal-ink);
  border-top: 4px solid var(--brass);
}
body[data-theme="muaythai"] footer a {
  color: var(--teal-ink);
  text-decoration: underline;
}
body[data-theme="muaythai"] footer small,
body[data-theme="muaythai"] footer p {
  color: #cfc4b6;
}
body[data-theme="muaythai"] footer .brand {
  color: #fff;
  text-decoration: none;
}

/* Focus is always visible and always brass on teal, ink on paper. */
body[data-theme="muaythai"] :focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 2px;
}
body[data-theme="muaythai"] .site-header :focus-visible,
body[data-theme="muaythai"] footer :focus-visible {
  outline-color: #ffd88a;
}

/* Hero: the rope frame, the eight-limbs chart and the live model. */
.rope-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding: 48px 40px 40px;
  max-width: 1320px;
  margin: 0 auto;
}
.rope-hero-copy {
  max-width: 46ch;
}
.rope-hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  margin: 0 0 16px;
}
.rope-hero .lede {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  color: var(--muted);
  margin: 0 0 22px;
}
.rope-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.rope-hero-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.limb-chart,
.rope-hero-viewer {
  margin: 0;
  background: var(--paper);
  border: 2px solid var(--teal);
  border-radius: var(--radius);
  padding: 18px;
  min-width: 0;
}
.limb-chart img {
  display: block;
  width: 100%;
  height: auto;
}
.limb-chart figcaption,
.rope-hero-note {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.rope-hero-note .tag {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 2px 7px;
  margin-right: 6px;
}
.rope-hero-viewer .motion-stage {
  min-height: 320px;
}

/* Round timer. */
.round-block {
  background: var(--teal);
  color: var(--teal-ink);
  padding: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  border-top: 4px solid var(--brass);
  border-bottom: 4px solid var(--brass);
}
.round-block h2 {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
}
.round-copy p {
  margin: 0;
  color: #d6cabb;
  max-width: 42ch;
}
.round-dial {
  text-align: center;
}
.round-count {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-lit);
}
.round-clock {
  margin: 4px 0 2px;
  font-size: clamp(3.2rem, 10vw, 5rem);
  line-height: 1;
  color: #fff;
}
.round-phase {
  margin: 0 0 18px;
  color: #d6cabb;
}
.round-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.round-block .button.quiet {
  color: var(--teal-ink);
  border: 1px solid #4c7672;
  background: transparent;
}
.round-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.round-presets button {
  min-height: 64px;
  padding: 10px;
  background: transparent;
  color: var(--teal-ink);
  border: 1px solid #4c7672;
  border-radius: var(--radius);
  display: grid;
  gap: 2px;
  text-align: left;
}
.round-presets button b {
  font-family: var(--mono);
  font-size: 1.2rem;
}
.round-presets button span {
  font-size: 0.85rem;
}
.round-presets button small {
  color: #b9ac9c;
}
.round-presets button[aria-pressed="true"] {
  background: var(--brass);
  color: #17130a;
  border-color: var(--brass);
}
.round-presets button[aria-pressed="true"] span,
.round-presets button[aria-pressed="true"] small {
  color: #17130a;
}

/* Study board: numbered rows on a painted board, not a card grid. */
.limb-board,
.plan-strip,
.pad-notes,
.gym-questions {
  max-width: 1320px;
  margin: 0 auto;
  padding: 44px 40px;
}
.board-head h2 {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
}
.board-head p {
  margin: 0 0 24px;
  color: var(--muted);
  max-width: 58ch;
}
.limb-group {
  margin: 0 0 26px;
}
.limb-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  border-bottom: 2px solid var(--teal);
  padding-bottom: 6px;
}
.limb-group-head h3 {
  margin: 0;
  font-size: 1.25rem;
}
.limb-group-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.study-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.study-rows a {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  min-height: 56px;
  padding: 14px 6px;
  border-bottom: 1px solid var(--line);
}
.study-rows a:hover,
.study-rows a:focus-visible {
  background: var(--paper);
}
.row-no {
  color: var(--accent-text);
}
.row-name {
  font-weight: 600;
}
.row-focus,
.row-kit {
  color: var(--muted);
  font-size: 0.9rem;
}
.row-kit {
  text-align: right;
}

/* Pad notes strip on the home page. */
.pad-notes .note-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.pad-notes .note-line time {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 0.85rem;
}
.pad-notes .note-line strong {
  font-weight: 600;
}
.pad-notes .note-line span {
  color: var(--muted);
}

/* Empty states name the next move instead of showing a zero. */
.next-move {
  background: var(--paper);
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 24px;
  display: grid;
  gap: 10px;
  justify-items: start;
}
.next-move h3 {
  margin: 0;
  font-size: 1.2rem;
}
.next-move p {
  margin: 0;
  color: var(--muted);
  max-width: 54ch;
}

/* Player and study chrome: teal rope track, brass marker. */
body[data-theme="muaythai"] input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
}
body[data-theme="muaythai"] input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 5px;
  background: repeating-linear-gradient(
    90deg,
    var(--teal) 0 14px,
    #2c6763 14px 18px
  );
}
body[data-theme="muaythai"] input[type="range"]::-moz-range-track {
  height: 10px;
  border-radius: 5px;
  background: repeating-linear-gradient(
    90deg,
    var(--teal) 0 14px,
    #2c6763 14px 18px
  );
}
body[data-theme="muaythai"] input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--brass);
  border: 2px solid var(--ink);
}
body[data-theme="muaythai"] input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brass);
  border: 2px solid var(--ink);
}
body[data-theme="muaythai"] progress {
  width: 100%;
  height: 12px;
  border: 0;
  background: #2c6763;
  border-radius: 6px;
}
body[data-theme="muaythai"] progress::-webkit-progress-bar {
  background: #2c6763;
  border-radius: 6px;
}
body[data-theme="muaythai"] progress::-webkit-progress-value {
  background: var(--brass);
  border-radius: 6px;
}
body[data-theme="muaythai"] progress::-moz-progress-bar {
  background: var(--brass);
  border-radius: 6px;
}
body[data-theme="muaythai"] .player,
body[data-theme="muaythai"] .player-bottom {
  background: var(--teal);
  color: var(--teal-ink);
}
body[data-theme="muaythai"] .player h1,
body[data-theme="muaythai"] .player-clock {
  color: #fff;
}
body[data-theme="muaythai"] .player .fine,
body[data-theme="muaythai"] .player p {
  color: #d6cabb;
}
body[data-theme="muaythai"] .status-dot {
  background: var(--brass);
}

/* Touch targets stay at 44px where a finger has to find them. */
@media (pointer: coarse), (max-width: 860px) {
  body[data-theme="muaythai"] main button,
  body[data-theme="muaythai"] main .button,
  body[data-theme="muaythai"] main select,
  body[data-theme="muaythai"] main input:not([type="range"]):not([type="checkbox"]) {
    min-height: 44px;
  }
  body[data-theme="muaythai"] main input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }
  body[data-theme="muaythai"] .block-tools button,
  body[data-theme="muaythai"] .icon-button {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (min-width: 760px) {
  .rope-hero-panels {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .round-block {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.9fr);
    align-items: center;
    padding: 48px 40px;
  }
  .round-presets {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 700px) {
  .rope-hero,
  .limb-board,
  .plan-strip,
  .pad-notes,
  .gym-questions {
    padding-left: 20px;
    padding-right: 20px;
  }
  .round-block {
    padding: 32px 20px;
  }
  .study-rows a {
    grid-template-columns: 2.6rem minmax(0, 1fr);
    row-gap: 4px;
  }
  .row-focus,
  .row-kit {
    grid-column: 2;
    text-align: left;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Session cards carry a number, not a label above every heading. */
body[data-theme="muaythai"] .program-card h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
body[data-theme="muaythai"] .plan-no {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--accent-text);
}

/* The display face is wider than the old system stack, so at narrow widths the
   three round controls need tighter padding to stay on one row. */
@media (max-width: 860px) {
  body[data-theme="muaythai"] .player-controls {
    gap: 6px;
  }
  body[data-theme="muaythai"] .player-controls .button {
    padding: 12px 9px;
    font-size: 11.5px;
    white-space: nowrap;
  }
}

/* Five navigation labels in the display stack need a touch less width at phone
   sizes so the last one is not clipped by the header edge. */
@media (max-width: 430px) {
  body[data-theme="muaythai"] .site-header nav {
    gap: 4px;
    font-size: 11.5px;
    letter-spacing: -0.01em;
  }
}
@media (max-width: 360px) {
  /* At the narrowest supported width the row wraps instead of clipping. */
  body[data-theme="muaythai"] .site-header nav {
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 14px;
    row-gap: 0;
  }
}

/* Wave three: the small responses that make a page feel answered rather than
   reloaded. Everything here is a state change on something the visitor just
   touched, and every one of them is switched off under reduced motion. */
body[data-theme="muaythai"] .button,
body[data-theme="muaythai"] .card-link,
body[data-theme="muaythai"] .beat,
body[data-theme="muaythai"] .phase-tabs button,
body[data-theme="muaythai"] .round-presets button,
body[data-theme="muaythai"] .study-rows a {
  transition:
    transform 90ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease;
}
body[data-theme="muaythai"] .button:active,
body[data-theme="muaythai"] .card-link:active,
body[data-theme="muaythai"] .beat:active,
body[data-theme="muaythai"] .phase-tabs button:active,
body[data-theme="muaythai"] .round-presets button:active {
  transform: translateY(1px) scale(0.995);
}
/* Focus has to be visible on a dark player bar and on paper alike. */
body[data-theme="muaythai"] :focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 2px;
  border-radius: 2px;
}
body[data-theme="muaythai"] .player :focus-visible,
body[data-theme="muaythai"] .human-toolbar :focus-visible {
  outline-color: var(--brass-lit);
}
/* The phase that just became current gets one short pulse, so stepping through
   a movement has a beat to it rather than silently swapping a number. */
body[data-theme="muaythai"] .phase-tabs button[aria-pressed="true"] {
  animation: phase-tick 240ms ease-out;
}
@keyframes phase-tick {
  from {
    box-shadow: 0 0 0 0 var(--brass);
  }
  to {
    box-shadow: 0 0 0 6px #b3842f00;
  }
}
/* While the model loads, the frame shows that it is coming rather than a flat
   rectangle that might be broken. */
body[data-theme="muaythai"] .human-study[data-ready="loading"] {
  background:
    linear-gradient(100deg, #242e3100 22%, #38474b66 48%, #242e3100 74%) 0 0 /
      220% 100%,
    #242e31;
  animation: human-skeleton 1500ms linear infinite;
}
@keyframes human-skeleton {
  to {
    background-position: -220% 0;
  }
}
body[data-theme="muaythai"] .human-study[data-ready="fallback"] .human-status::before {
  content: "3D unavailable. ";
  font-weight: 700;
}
/* The round ring behind the player clock. */
body[data-theme="muaythai"] .player-dial {
  position: relative;
  display: grid;
  place-items: center;
  width: min(220px, 60vw);
  aspect-ratio: 1;
}
body[data-theme="muaythai"] .round-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
body[data-theme="muaythai"] .ring-track {
  fill: none;
  stroke: #ffffff26;
  stroke-width: 7;
}
body[data-theme="muaythai"] .ring-value {
  fill: none;
  stroke: var(--brass);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 240ms linear;
}
body[data-theme="muaythai"] .ring-value[data-rest="true"] {
  stroke: var(--brass-lit);
}
body[data-theme="muaythai"] .player-dial .player-clock {
  position: relative;
  margin: 0;
  font-size: clamp(44px, 12vw, 68px);
}
/* The first-visit tour, in the flow above the phase readout so it never covers
   the model it is describing. */
body[data-theme="muaythai"] .study-tour {
  margin: 0 0 12px;
  padding: 16px 18px;
  background: var(--teal);
  color: var(--teal-ink);
  border-left: 4px solid var(--brass);
}
body[data-theme="muaythai"] .study-tour h3 {
  margin: 4px 0 6px;
  color: var(--teal-ink);
}
body[data-theme="muaythai"] .study-tour p {
  margin: 0;
  color: #e6ded2;
}
body[data-theme="muaythai"] .tour-step {
  font: 500 11px/1 var(--mono, monospace);
  letter-spacing: 0.08em;
  color: var(--brass-lit);
}
body[data-theme="muaythai"] .tour-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}
body[data-theme="muaythai"] .tour-actions .text-link {
  color: var(--brass-lit);
}
body[data-theme="muaythai"] .summary-line {
  display: flex;
  gap: 18px;
  align-items: baseline;
  font: 500 13px/1.2 var(--sans, system-ui);
}
body[data-theme="muaythai"] .summary-line b {
  font: 700 30px/1 var(--mono, monospace);
  margin-right: 4px;
  color: var(--teal);
}
body[data-theme="muaythai"] .summary-list {
  margin: 0 0 14px;
  padding-left: 18px;
}
@media (prefers-reduced-motion: reduce) {
  body[data-theme="muaythai"] .button,
  body[data-theme="muaythai"] .card-link,
  body[data-theme="muaythai"] .beat,
  body[data-theme="muaythai"] .phase-tabs button,
  body[data-theme="muaythai"] .round-presets button,
  body[data-theme="muaythai"] .study-rows a,
  body[data-theme="muaythai"] .ring-value {
    transition: none;
  }
  body[data-theme="muaythai"] .phase-tabs button[aria-pressed="true"],
  body[data-theme="muaythai"] .human-study[data-ready="loading"] {
    animation: none;
  }
}

/* Wave five: the depth panel under the study notes, the stage chips, the
   partner note and the four-week progression sheets. */
.study-depth {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.study-depth h3 {
  font-family: var(--heading);
  font-size: 1.1rem;
  margin: 1.1rem 0 0.35rem;
}
.fault-list {
  padding-left: 1.2rem;
  margin: 0;
}
.fault-list li {
  margin: 0 0 0.5rem;
}
.prescription {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 0.35rem;
  font-family: var(--mono);
}
.prescription b {
  font-size: 1.35rem;
  color: var(--ink);
  margin-right: 0.2rem;
}
.partner-note {
  margin: 0.4rem 0 0;
}
.stage-chips {
  margin-top: 0.4rem;
}
.progression-list {
  display: grid;
  gap: 1.25rem;
  margin: 0 0 2rem;
}
.progression {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius, 6px);
  padding: 1.25rem;
}
.progression-head h3 {
  font-family: var(--heading);
  font-size: 1.5rem;
  margin: 0.4rem 0 0.4rem;
}
.progression-head .pill {
  display: inline-block;
}
.week-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.95rem;
}
.week-table th,
.week-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.5rem;
  border-top: 1px solid var(--line);
}
.week-table thead th {
  border-top: 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.week-table th small,
.week-table td small {
  display: block;
  font-weight: 400;
  color: var(--muted);
  margin-top: 0.15rem;
}
.week-table .card-link {
  padding: 0;
  min-height: 44px;
  text-align: left;
}
.progression-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .week-table thead {
    display: none;
  }
  .week-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0.5rem 0;
    border-top: 1px solid var(--line);
  }
  .week-table th,
  .week-table td {
    border-top: 0;
    padding: 0.25rem 0;
  }
}
/* Wave six: the progression sheet. Built into #print-sheet only while the
   print dialog is open; never shown on screen. One page per week, black on
   white, borders instead of colour, legible at A4 and Letter. */
.print-sheet {
  display: none;
}
@media print {
  body[data-print="progression"] > *:not(#print-sheet) {
    display: none !important;
  }
  body[data-print="progression"] {
    background: #fff !important;
    color: #000 !important;
  }
  body[data-print="progression"] .print-sheet {
    display: block;
    font-family: var(--sans);
    font-size: 9pt;
    line-height: 1.22;
    color: #000;
  }
  .print-week {
    break-after: page;
    page-break-after: always;
  }
  .print-week:last-child {
    break-after: auto;
    page-break-after: auto;
  }
  .sheet-head {
    border-bottom: 2pt solid #000;
    margin: 0 0 8pt;
    padding: 0 0 6pt;
  }
  .sheet-kicker {
    font-family: var(--mono);
    font-size: 8pt;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 2pt;
  }
  .sheet-head h2 {
    font-family: var(--heading);
    font-size: 17pt;
    margin: 0;
    color: #000;
  }
  .sheet-note {
    margin: 2pt 0 0;
    font-size: 10.5pt;
  }
  .sheet-sessions {
    list-style: none;
    padding: 0;
    margin: 0 0 8pt;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8pt;
  }
  .sheet-sessions > li {
    border: 1pt solid #000;
    padding: 4pt 6pt;
    font-size: 8pt;
    break-inside: avoid;
  }
  .sheet-sessions h3 {
    font-family: var(--heading);
    font-size: 11.5pt;
    margin: 0 0 4pt;
    color: #000;
    display: flex;
    flex-wrap: wrap;
    gap: 4pt 6pt;
    align-items: baseline;
  }
  .sheet-sessions h3 small {
    font-family: var(--mono);
    font-weight: 400;
    font-size: 8pt;
  }
  .sheet-sessions .tick {
    margin-left: auto;
    font-size: 13pt;
    line-height: 1;
  }
  .sheet-blocks {
    margin: 0;
    padding-left: 12pt;
  }
  .sheet-blocks li {
    margin: 0 0 2pt;
  }
  .sheet-cues h3 {
    font-family: var(--heading);
    font-size: 11pt;
    margin: 0 0 3pt;
    color: #000;
    border-bottom: 1pt solid #000;
  }
  .sheet-cues {
    column-count: 3;
    column-gap: 10pt;
  }
  .sheet-cues h3 {
    column-span: all;
  }
  .sheet-study {
    break-inside: avoid;
    margin: 0 0 6pt;
  }
  .sheet-study h4 {
    font-family: var(--heading);
    font-size: 9.5pt;
    margin: 0 0 2pt;
    color: #000;
  }
  .sheet-action {
    margin: 0 0 1pt;
    font-size: 8pt;
  }
  .sheet-action span {
    display: block;
  }
  .sheet-studies {
    margin: 0 0 5pt;
    padding-left: 12pt;
    column-span: all;
    columns: 2;
    column-gap: 14pt;
    font-size: 8.5pt;
  }
  .sheet-studies li {
    margin: 0 0 1pt;
  }
  .sheet-watch {
    margin: 0 0 2pt;
    font-size: 8pt;
    font-style: italic;
  }
  .sheet-foot {
    border-top: 1pt solid #000;
    margin-top: 4pt;
    padding-top: 3pt;
    font-size: 7.5pt;
  }
  .week-table .card-link {
    color: #000;
    text-decoration: none;
  }
}
@page {
  margin: 7mm 9mm;
}
.ics-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
}

/* Wave five: the public reference and study pages. Breadcrumbs, the glossary
   list and the phase lists read in the same face as the app. */
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0;
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.crumbs li + li::before {
  content: "/";
  margin-right: 0.35rem;
  color: var(--muted);
}
.crumbs a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.policy .lede {
  font-size: 1.15rem;
  color: var(--muted);
}
.policy h3 {
  font-family: var(--heading);
  font-size: 1.15rem;
  margin: 1.25rem 0 0.4rem;
}
.glossary {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0 2rem;
}
.glossary dt {
  font-family: var(--heading);
  font-weight: 700;
}
.glossary dd {
  margin: 0.15rem 0 0;
}
.phase-list li,
.study-list li {
  margin: 0 0 0.5rem;
}
.policy footer a {
  min-height: 44px;
}

/* Wave six: the dark scheme. The same room after the lights go down: the
   ground goes to a deep clay, paper to a warm dark, ink to bone; the teal
   ropes, the brass and the stage keep their colours because they carry the
   identity and already sit on dark. Two copies of one token set: the first
   follows the system unless the visitor chose light, the second is the
   explicit choice. tests/scheme.test.mjs fails if the copies drift apart. */
@media (prefers-color-scheme: dark) {
  body[data-theme="muaythai"]:not([data-scheme="light"]) {
  color-scheme: dark;
  --bg: #1c1512;
  --paper: #27201b;
  --ink: #f3e9dc;
  --muted: #c9b9a6;
  --line: #4d3d33;
  --accent: #b8412a;
  --accent-ink: #fdf6ef;
  --accent-text: #f0876b;
  --teal: #0e4a47;
  --teal-ink: #f2ece3;
  --brass: #d9a54d;
  --brass-lit: #efc97c;
  --stage: #16332f;
  --stage-bg: #2f2622;
  --board: #fbf5ee;
  --hover: #33291f;
  --danger: #ff9b86;
  }
}
body[data-theme="muaythai"][data-scheme="dark"] {
  color-scheme: dark;
  --bg: #1c1512;
  --paper: #27201b;
  --ink: #f3e9dc;
  --muted: #c9b9a6;
  --line: #4d3d33;
  --accent: #b8412a;
  --accent-ink: #fdf6ef;
  --accent-text: #f0876b;
  --teal: #0e4a47;
  --teal-ink: #f2ece3;
  --brass: #d9a54d;
  --brass-lit: #efc97c;
  --stage: #16332f;
  --stage-bg: #2f2622;
  --board: #fbf5ee;
  --hover: #33291f;
  --danger: #ff9b86;
}
/* The eight-limbs diagram is an image drawn in ink, so it keeps a light board
   behind it in both schemes, the way a chart pinned to a gym wall would. */
body[data-theme="muaythai"] .limb-chart {
  background: var(--board);
}
body[data-theme="muaythai"] .limb-chart figcaption {
  color: #62503f;
}
body[data-theme="muaythai"] .study-rows a:hover {
  background: var(--hover);
}
body[data-theme="muaythai"] .danger {
  color: var(--danger);
}
body[data-theme="muaythai"] .storage-warning {
  background: var(--brass-lit);
  color: #17130a;
}

/* Wave six: gym mode. The round on a tablet or a television. Teal ground like
   the player bar, bone digits in the round mono, the poster beside the clock
   in landscape and under it in portrait. Header and footer step out of the
   way; the page attribute hides them. Readable from three metres: the clock is
   sized from the viewport, never from the type scale. */
body[data-page="gym"] .site-header,
body[data-page="gym"] footer,
body[data-page="gym"] #storage-warning {
  display: none;
}
body[data-page="gym"] main {
  padding: 0;
  max-width: none;
}
.gym {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 0;
  background: var(--teal);
  color: var(--teal-ink);
  padding: clamp(12px, 2vw, 28px) clamp(16px, 3vw, 40px);
  box-sizing: border-box;
}
.gym-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-family: var(--mono);
  font-size: clamp(0.85rem, 1.6vw, 1.4rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gym-phase {
  color: var(--brass-lit);
}
.gym-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 3vw, 40px);
  padding: clamp(8px, 2vh, 24px) 0;
}
.gym-clock {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(5rem, 26vw, 24rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #fff;
}
.gym-study {
  font-family: var(--heading);
  font-size: clamp(1.6rem, 4.5vw, 4rem);
  margin: 0.2em 0 0.15em;
  color: var(--teal-ink);
}
.gym-cue {
  font-size: clamp(1.15rem, 2.6vw, 2.2rem);
  line-height: 1.3;
  margin: 0;
  max-width: 28ch;
  color: #e6ded2;
}
.gym-poster {
  margin: 0;
  border: 3px solid var(--brass);
  border-radius: var(--radius);
  background: var(--stage);
  overflow: hidden;
  max-width: 70vh;
  justify-self: center;
  width: 100%;
}
.gym-poster img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--stage);
}
.gym-poster figcaption {
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: clamp(0.8rem, 1.4vw, 1.2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass-lit);
}
.gym progress {
  margin: 4px 0 10px;
}
.gym-bottom {
  display: grid;
  gap: 10px;
}
.gym-next {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.6rem);
  color: #e6ded2;
}
.gym-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.gym-controls .button {
  min-height: clamp(48px, 6vh, 64px);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  padding: 0 clamp(16px, 2vw, 28px);
}
body[data-theme="muaythai"] .gym-controls .quiet,
body[data-theme="muaythai"] .gym-controls .secondary {
  color: var(--teal-ink);
  border-color: var(--teal-ink);
  background: transparent;
}
.gym-keys {
  margin: 0;
  color: #cfc4b6;
}
.gym-clock {
  white-space: nowrap;
}
body[data-theme="muaythai"] .gym-controls .quiet {
  border: 1px solid #cfc4b6;
}
@media (orientation: landscape) and (min-width: 700px) {
  .gym-main {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
  /* Five mono digits at 0.6 em each: 15vw keeps them inside two thirds. */
  .gym-clock {
    font-size: clamp(4.5rem, 15vw, 24rem);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .gym-clock {
    transition: color 200ms ease;
  }
}

/* Wave six: training records. The log form sits under the study notes; the
   week reads as a board in the journal; a plan sheet ticks what was run. */
.record-panel {
  border-top: 2px solid var(--teal);
  margin-top: 18px;
  padding-top: 14px;
}
.record-panel h3 {
  margin: 0 0 8px;
}
.record-form {
  display: grid;
  gap: 10px;
}
.record-form .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.rating-row {
  display: grid;
  gap: 6px;
}
.rating-row legend {
  font-weight: 600;
  padding: 0;
  margin-bottom: 4px;
}
.rating-row label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
}
.rating-row input:checked + span {
  font-weight: 600;
}
.rating-row label:has(input:checked) {
  border-color: var(--teal);
  box-shadow: inset 3px 0 0 var(--brass);
}
.record-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 6px;
}
.record-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 0.92rem;
}
.record-list time {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
}
.record-list .record-line small {
  display: block;
  color: var(--muted);
}
.record-rating {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
}
body[data-scheme="dark"] .record-rating {
  color: var(--brass-lit);
}
@media (prefers-color-scheme: dark) {
  body:not([data-scheme="light"]) .record-rating {
    color: var(--brass-lit);
  }
}
.week-board {
  border: 2px solid var(--teal);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 16px 18px;
  margin: 0 0 18px;
}
.week-board h2 {
  margin: 0 0 4px;
}
.week-board .week-range {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.week-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.week-totals b {
  font-family: var(--mono);
  font-size: 1.4rem;
  margin-right: 6px;
}
.week-studies {
  margin: 0;
  padding-left: 1.1rem;
}
.week-studies li {
  margin: 4px 0;
}
.streak-line {
  margin: 8px 0 0;
  font-weight: 600;
  color: var(--teal);
}
.records-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 12px 0 0;
}
.records-actions .file-label {
  margin: 0;
}
.storage-line {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.week-table .done {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--teal);
  white-space: nowrap;
}

/* Wave six: the self-review camera. Two cells side by side in landscape, the
   camera and the model at the same phase, stacked in portrait. The ghost is
   the model's poster laid over the camera frame at reduced opacity. */
.camera-panel {
  margin: 18px 0 0;
  border-top: 2px solid var(--teal);
  padding-top: 14px;
}
.camera-panel h3 {
  margin: 0 0 4px;
  font-size: clamp(1.15rem, 4.5vw, 1.5rem);
}
/* The attribute wins over every display rule in the panel. */
.camera-panel [hidden] {
  display: none !important;
}
.camera-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 16px;
  text-align: center;
  color: var(--teal-ink);
  font-size: 0.9rem;
}
.camera-panel[data-live="true"] .camera-empty {
  display: none;
}
.camera-head .fine {
  margin: 0 0 10px;
}
.camera-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.camera-cell {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--stage);
  border: 2px solid var(--teal);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 0;
}
.camera-cell video,
.camera-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.camera-cell video.mirrored {
  transform: scaleX(-1);
}
.camera-ghost {
  pointer-events: none;
}
.camera-status {
  margin: 10px 0 6px;
  font-size: 0.92rem;
}
.camera-controls,
.clip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 8px;
}
.camera-controls .check-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.clip-list h4 {
  margin: 10px 0 4px;
}
.clip-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.clip-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 0.9rem;
}
.clip-list .text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
@media (min-width: 700px) and (orientation: landscape) {
  .camera-stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .camera-cell video {
    transition: none;
  }
}

/* The gym empty state: one button per plan, each straight onto the clock. */
.gym-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 10px;
  margin: 0 0 12px;
}
.gym-pick .button {
  justify-content: space-between;
  min-height: 52px;
}
.gym-pick .button small {
  font-family: var(--mono);
  font-weight: 400;
  margin-left: 10px;
}

/* File inputs read as buttons in the room's voice. The native control is
   visually hidden but still in the tab order: Enter or Space opens the
   dialog, a screen reader announces the label, and focus shows on the
   button because the label follows the input's focus. */
body[data-theme="muaythai"] .file-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  margin: 0;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
}
body[data-theme="muaythai"] .file-label input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
body[data-theme="muaythai"] .file-label:hover {
  background: var(--hover);
}
body[data-theme="muaythai"] .file-label:focus-within {
  outline: 3px solid var(--brass);
  outline-offset: 2px;
}
body[data-theme="muaythai"] .settings-grid .file-label {
  display: flex;
  width: 100%;
  margin: 10px 0;
}