.site-header {
  height: 80px;
  padding: 0 40px;
  background: var(--paper);
}
.brand {
  letter-spacing: -0.04em;
  font-size: 18px;
}
.brand-mark {
  width: 27px;
  height: 30px;
  font-size: 21px;
}
main {
  max-width: 1440px;
  padding: 0 40px 64px;
}
.page-title {
  padding: 38px 0 28px;
}
.page-title h1 {
  font-size: clamp(30px, 4vw, 49px);
  letter-spacing: -0.055em;
  max-width: 1000px;
}
.page-title > p:last-child:not(:first-child) {
  max-width: 700px;
  font-size: 15px;
}
.hero.training-hero {
  grid-template-columns: 1fr 1.12fr;
  gap: 64px;
  padding: 55px 0 45px;
}
.training-hero .hero-copy h1 {
  font:
    750 clamp(44px, 5.4vw, 76px) / 1.01 Arial,
    Helvetica,
    sans-serif;
  text-transform: none;
  letter-spacing: -0.065em;
  margin: 22px 0;
}
.training-hero .intro {
  font-size: 16px;
  line-height: 1.7;
  max-width: 430px;
}
.hero-proof {
  font-size: 11px;
  letter-spacing: 0;
  margin-top: 26px;
}
.training-feature {
  background: #172328;
  border-radius: var(--radius);
  overflow: hidden;
}
.training-feature svg {
  display: block;
  width: 100%;
  height: auto;
}
.training-feature > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: var(--paper);
  font-weight: 700;
  border: 1px solid var(--line);
}
.training-feature > a span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}
.training-hero .hero-actions {
  gap: 20px;
  flex-wrap: wrap;
}
.training-intro {
  display: grid;
  grid-template-columns: 210px 1fr 1fr;
  gap: 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
  align-items: center;
}
.training-intro .hero-photo {
  height: 130px;
  transform: none;
  border-radius: 4px;
}
.training-intro .hero-photo:after {
  display: none;
}
.training-intro h2 {
  font:
    700 19px/1.3 Arial,
    Helvetica,
    sans-serif;
  letter-spacing: -0.02em;
  margin-bottom: 7px;
}
.training-intro p {
  font-size: 13px;
  line-height: 1.7;
}
.program-card {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  padding: 24px;
}
.program-card h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 27px;
  font-weight: 650 !important;
}
.program-card p {
  font-size: 14px;
}
.program-grid {
  gap: 18px;
}
.filterbar {
  background: var(--paper);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  gap: 24px;
}
.filterbar input,
.filterbar select {
  background: var(--bg);
}
.chips {
  padding: 20px 0;
  gap: 9px;
}
.chip {
  border-radius: 4px;
  /* 40 px is under the 44 px a thumb needs, and the position filters are the
     first thing anybody taps on the library. */
  min-height: 44px;
}
.drill-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.drill-card {
  display: grid;
  grid-template-columns: 42% 58%;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
}
.drill-art {
  height: 100%;
  min-height: 210px;
  background: #172328;
  border-radius: 0;
  overflow: hidden;
}
.drill-art svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.drill-art svg text {
  display: none;
}
.drill-body {
  padding: 21px;
}
.drill-body h2 {
  font:
    700 22px/1.18 Arial,
    Helvetica,
    sans-serif;
  letter-spacing: -0.03em;
  margin: 13px 0 10px;
}
.drill-body p {
  font-size: 13px;
  min-height: 0;
  line-height: 1.6;
}
.drill-body .eyebrow {
  font-size: 10px;
}
.drill-body .program-meta {
  font-size: 10px;
  margin-top: 15px;
  gap: 9px;
  flex-wrap: wrap;
}
.art-arrow {
  background: #fff;
  color: #172328;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 16px;
}
.favorite {
  font-size: 24px;
  min-width: 36px;
  min-height: 36px;
}
.drill-card:hover {
  border-color: var(--ink);
}
.technique-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(290px, 1fr);
  gap: 32px;
  align-items: start;
}
.technique-layout .study-canvas {
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.study-label {
  padding: 17px 22px;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.study-label .eyebrow,
.study-label .pill {
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.technique-layout .motion-stage {
  width: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: 640/440;
}
.technique-figure {
  display: block;
  width: 100%;
  height: auto;
}
.phase-readout {
  display: flex;
  gap: 17px;
  align-items: start;
  padding: 20px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  min-height: 102px;
}
.phase-readout > span {
  font:
    500 30px/1.2 ui-monospace,
    monospace;
  color: var(--muted);
}
.phase-readout strong {
  font-size: 17px;
  letter-spacing: -0.025em;
}
.phase-readout p {
  font-size: 13px;
  line-height: 1.6;
  margin-top: 4px;
  color: var(--ink);
}
.transport {
  display: flex;
  align-items: end;
  gap: 18px;
  padding: 20px 22px 14px;
}
.transport > label {
  font-size: 11px;
  color: var(--muted);
  display: grid;
  gap: 8px;
}
.transport .scrub-label {
  flex: 1;
  min-width: 60px;
}
.transport input[type="range"] {
  width: 100%;
  padding: 0;
  min-height: 44px;
  accent-color: var(--ink);
  border: 0;
  cursor: ew-resize;
}
.transport select {
  min-height: 45px;
  padding: 10px;
}
.transport .button {
  white-space: nowrap;
}
.phase-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0 22px;
}
.phase-tabs button {
  min-height: 65px;
  border-top: 3px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 4px;
  padding: 10px 7px;
  font-size: 11px;
  text-align: left;
}
.phase-tabs button span {
  font:
    10px ui-monospace,
    monospace;
  color: var(--muted);
}
.phase-tabs button b {
  font-weight: 600;
}
.phase-tabs button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--bg);
}
.view-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 17px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}
.view-options label {
  display: flex;
  gap: 7px;
  align-items: center;
}
.view-options input {
  min-height: 0;
  width: 15px;
  height: 15px;
  accent-color: var(--ink);
}
.view-options > span {
  color: var(--muted);
  margin-left: auto;
}
.sequence-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 22px 0;
  font-size: 12px;
}
.study-progress {
  padding: 12px 22px 20px;
  gap: 8px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}
.study-progress .beat {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 10px 12px;
  min-height: 42px;
  font-size: 12px;
  flex: none;
}
.study-progress .beat.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.study-progress .beat span {
  font-size: 10px;
  opacity: 0.75;
  display: inline;
}
.study-notes h2 {
  font:
    700 30px/1.12 Arial,
    Helvetica,
    sans-serif;
  letter-spacing: -0.04em;
  margin: 10px 0 20px;
}
.technical-steps {
  list-style: none;
  padding: 0;
  margin: 0;
}
.technical-steps li {
  display: flex;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding: 15px 12px 15px 0;
  transition: background 0.15s;
}
.technical-steps li.current {
  background: var(--paper);
}
.technical-steps li > span {
  font:
    11px ui-monospace,
    monospace;
  color: var(--muted);
  padding-top: 4px;
  min-width: 22px;
}
.technical-steps h3 {
  font:
    650 15px/1.4 Arial,
    Helvetica,
    sans-serif;
  letter-spacing: 0;
  margin-bottom: 3px;
}
.technical-steps p {
  font-size: 13px;
  line-height: 1.7;
}
.error-note {
  border-left: 3px solid var(--accent);
  background: var(--paper);
  padding: 14px 16px;
  margin: 17px 0;
}
.error-note strong {
  font-size: 12px;
}
.error-note p {
  font-size: 12px;
  line-height: 1.65;
  margin-top: 5px;
}
.source-note {
  font-size: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}
.source-note summary {
  cursor: pointer;
  min-height: 32px;
  padding-top: 6px;
  font-weight: 600;
}
.source-note p {
  margin-top: 12px;
  line-height: 1.7;
}
.source-note a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.drill-purpose {
  margin: 23px 0;
}
.drill-purpose h3 {
  font:
    650 17px/1.4 Arial,
    Helvetica,
    sans-serif;
  letter-spacing: -0.01em;
  margin: 5px 0;
}
.drill-purpose > p:last-child {
  font-size: 13px;
  line-height: 1.6;
}
.study-notes > .button {
  margin-top: 7px;
}
.composer-canvas {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0 0 20px;
  overflow: hidden;
}
.composer-canvas .study-controls,
.composer-canvas .fine,
.sequence-track {
  margin: 15px 20px;
}
.composer-canvas .fine {
  color: var(--muted) !important;
}
.player-visual {
  padding: 0 0 20px;
  overflow: hidden;
  background: #172328;
  color: #e3e7e3;
}
.player-visual p {
  padding: 0 20px;
  color: #c7d0d2 !important;
}
.player-visual .motion-stage {
  max-width: none;
}
.technique-layout .fine {
  padding: 0 22px 16px;
  color: var(--muted) !important;
}
.button {
  transition: background 0.15s;
}
.button:hover {
  transform: none;
  filter: brightness(0.95);
}
@media (min-width: 1100px) {
  .technique-layout .study-canvas {
    position: sticky;
    top: 20px;
  }
}
@media (max-width: 1000px) {
  .site-header {
    padding: 0 24px;
  }
  .site-header nav {
    gap: 15px;
  }
  main {
    padding: 0 24px 50px;
  }
  .hero.training-hero {
    gap: 30px;
  }
  .technique-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(265px, 1fr);
    gap: 22px;
  }
  .drill-card {
    grid-template-columns: 1fr;
  }
  .drill-art {
    height: 200px;
    min-height: 0;
  }
  .drill-art svg {
    height: 100%;
    width: 100%;
  }
  .drill-body {
    padding: 20px;
  }
  .transport {
    gap: 10px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .phase-tabs {
    padding: 0 15px;
  }
  .training-intro {
    grid-template-columns: 150px 1fr 1fr;
    gap: 20px;
  }
}
@media (max-width: 760px) {
  .site-header {
    height: auto;
    padding: 18px 20px;
    gap: 17px;
    flex-wrap: wrap;
  }
  .site-header nav {
    order: 3;
    width: 100%;
    overflow: auto;
    gap: 22px;
  }
  .header-cta {
    margin-left: auto;
  }
  .hero.training-hero {
    grid-template-columns: 1fr;
    padding: 35px 0;
    gap: 28px;
  }
  .training-hero .hero-copy h1 {
    font-size: 52px;
    max-width: 450px;
  }
  .training-feature {
    max-width: 620px;
    width: 100%;
  }
  .training-intro {
    grid-template-columns: 1fr 1fr;
  }
  .training-intro .hero-photo {
    display: none;
  }
  .technique-layout {
    grid-template-columns: 1fr;
  }
  .study-notes {
    padding-top: 10px;
  }
  .drill-grid {
    gap: 13px;
  }
  .drill-body h2 {
    font-size: 21px;
  }
  .drill-body .program-meta span {
    flex-basis: auto;
  }
  .page-title {
    padding: 29px 0 22px;
  }
  .filterbar {
    padding: 16px;
  }
  .phase-readout {
    min-height: 98px;
  }
  .transport .button {
    font-size: 12px;
    padding: 12px 15px;
  }
  .view-options > span {
    margin-left: 0;
  }
  .training-hero .hero-proof {
    margin-top: 22px;
  }
}
@media (max-width: 440px) {
  main {
    padding-left: 16px;
    padding-right: 16px;
  }
  .site-header {
    padding-left: 16px;
    padding-right: 16px;
  }
  .site-header nav {
    font-size: 12px;
    gap: 20px;
  }
  .header-cta {
    font-size: 10px;
    padding: 10px;
    gap: 8px;
  }
  .brand {
    font-size: 15px;
    gap: 7px;
  }
  .brand-mark {
    width: 22px;
    height: 25px;
    font-size: 18px;
  }
  .drill-grid {
    grid-template-columns: 1fr;
  }
  .drill-card {
    grid-template-columns: 39% 61%;
  }
  .drill-art {
    height: 100%;
    min-height: 185px;
  }
  .drill-body {
    padding: 15px;
  }
  .drill-body h2 {
    font-size: 19px;
  }
  .drill-body p {
    font-size: 12px;
  }
  .drill-body .program-meta {
    font-size: 9px;
  }
  .drill-body .eyebrow {
    font-size: 9px;
  }
  .training-hero .hero-copy h1 {
    font-size: 43px;
  }
  .training-hero .intro {
    font-size: 14px;
  }
  .training-intro {
    grid-template-columns: 1fr;
  }
  .training-feature > a {
    padding: 17px;
    font-size: 14px;
  }
  .training-feature > a span {
    font-size: 10px;
  }
  .transport {
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
  }
  .transport .scrub-label {
    order: 3;
    flex-basis: 100%;
    gap: 0;
  }
  .transport > label:last-child {
    margin-left: auto;
    display: flex;
    align-items: center;
  }
  .phase-tabs {
    padding: 0 10px;
  }
  .phase-tabs button {
    font-size: 10px;
    padding: 10px 5px;
    min-height: 75px;
  }
  .phase-readout {
    padding: 17px 16px;
    gap: 13px;
    min-height: 115px;
  }
  .study-label {
    padding: 14px 15px;
  }
  .phase-readout p {
    font-size: 12px;
  }
  .phase-readout strong {
    font-size: 16px;
  }
  .study-progress {
    padding: 10px 15px 18px;
  }
  .sequence-heading {
    padding: 10px 15px 0;
  }
  .view-options {
    padding: 15px;
    gap: 12px;
  }
  .view-options > span {
    display: none;
  }
  .study-notes h2 {
    font-size: 27px;
  }
  .technical-steps p {
    font-size: 13px;
  }
  .page-title h1 {
    font-size: 32px;
  }
  .filterbar {
    gap: 16px;
  }
  .favorite {
    min-width: 32px;
  }
  .hero-proof {
    gap: 9px;
  }
  .hero-proof span + span:before {
    margin-right: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .technical-steps li {
    transition: none;
  }
}
@media print {
  .transport,
  .phase-tabs,
  .view-options,
  .study-progress,
  .sequence-heading {
    display: none;
  }
  .technique-layout {
    display: block;
  }
  .technical-steps li {
    break-inside: avoid;
  }
  .study-canvas {
    position: static !important;
  }
  .motion-stage {
    max-width: 450px !important;
    margin: auto !important;
  }
}
.program-card:first-child {
  --line: #d1d6d3;
}
.drill-art .technique-figure {
  transform: scale(1.55);
  transform-origin: 50% 55%;
}
.reference-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 12px;
}
.sequence-limit {
  padding-top: 15px !important;
  padding-bottom: 0 !important;
}

/* ---- Tiecount home: the mat is the page -------------------------------- */
.mat-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: 44px 48px;
  align-items: start;
  padding: 46px 0 54px;
  border-bottom: 1px solid var(--line);
}
.mat-hero-copy h1 {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(34px, 4.1vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
  max-width: 15ch;
}
.mat-lede {
  font-size: 17px;
  line-height: 1.62;
  color: var(--muted);
  max-width: 48ch;
  margin: 0 0 28px;
}
.mat-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}
.mat-resume {
  margin: 26px 0 0;
  padding: 13px 16px;
  border-left: 3px solid var(--warn);
  background: var(--stage-bg);
  font-size: 14px;
}
.mat-hero-stage,
.mat-hero-plan,
.mat-hero-trace {
  margin: 0;
}
.mat-hero-stage figcaption,
.mat-hero-plan figcaption,
.mat-hero-trace figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.mat-hero-stage .motion-stage {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.mat-hero-plan,
.mat-hero-trace {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}
.mat-hero-plan figcaption,
.mat-hero-trace figcaption {
  margin-top: 0;
}
.mat-plan,
.foot-trace {
  width: 100%;
  height: auto;
  display: block;
}
.mat-protection {
  fill: var(--stage-bg);
}
.mat-passivity {
  fill: #a4382b;
}
.mat-inner {
  fill: #1f5488;
}
.mat-edge {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.07;
}
.mat-centre {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.05;
}
.mat-start {
  stroke: var(--ink);
  stroke-width: 0.05;
}
.mat-plan .mat-label {
  fill: var(--muted);
  font: 500 0.58px var(--sans);
  text-anchor: middle;
}
.foot-trace .mat-centre {
  stroke-width: 0.012;
}
.foot-trace .mat-label {
  fill: var(--muted);
  font: 500 0.1px var(--sans);
  text-anchor: middle;
}
.trace-rear {
  fill: none;
  stroke: var(--muted);
  stroke-width: 0.014;
  stroke-dasharray: 0.04 0.032;
}
.trace-lead {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.02;
  stroke-linecap: round;
}
.foot-lead {
  fill: var(--ink);
}
.foot-rear {
  fill: var(--muted);
}
.foot-start {
  fill: none;
  stroke: var(--muted);
  stroke-width: 0.012;
}
.practice-board,
.positions,
.room-notes,
.mat-faq {
  padding: 46px 0;
  border-bottom: 1px solid var(--line);
}
.practice-board h2,
.positions h2,
.room-notes h2,
.mat-faq h2 {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 31px);
  margin: 0;
}
.board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 12px;
}
.board-total {
  font: 700 26px/1 var(--heading);
  font-variant-numeric: tabular-nums;
}
.board-caption {
  color: var(--muted);
  font-size: 15px;
  margin: 14px 0 22px;
}
.board-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.board-rows li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto 46px;
  gap: 16px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.board-num,
.board-reps {
  font: 700 15px/1 var(--heading);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.board-reps {
  text-align: right;
  color: var(--ink);
}
.board-drill {
  font-size: 16px;
  font-weight: 600;
}
.board-time {
  font-size: 14px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.board-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 26px;
}
.positions-lede {
  color: var(--muted);
  max-width: 62ch;
  margin: 14px 0 30px;
  font-size: 15px;
  line-height: 1.6;
}
.position-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px 40px;
  align-items: start;
}
.position-group h3 {
  font: 700 13px/1 var(--heading);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.position-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.position-rows a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  min-height: 44px;
  align-content: center;
}
.position-rows a:hover {
  background: var(--stage-bg);
}
.position-name {
  font-weight: 600;
  font-size: 15px;
}
.position-focus {
  grid-column: 1;
  font-size: 13px;
  color: var(--muted);
}
.position-go {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.position-rows a:hover .position-go {
  color: var(--ink);
}
.note-list {
  list-style: none;
  margin: 22px 0 18px;
  padding: 0;
  max-width: 70ch;
}
.note-list li {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.note-date,
.note-minutes {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.note-empty {
  color: var(--muted);
  max-width: 60ch;
  line-height: 1.62;
  margin: 18px 0 22px;
  font-size: 15px;
}
.missing-routes {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 64ch;
}
.missing-routes li {
  display: grid;
  gap: 4px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.missing-routes a {
  font-weight: 600;
  font-size: 16px;
  /* The list of places to go next is the whole point of this page, and on a
     phone each line was a 24 px tap target. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* A standalone link at the end of a section, rather than one inside running
   text, is a control and gets a control's height on touch widths. */
.settings-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.missing-routes span {
  color: var(--muted);
  font-size: 14px;
}
@media (max-width: 1180px) {
  .position-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .position-groups {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  .mat-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 30px 0 38px;
  }
  /* Wave six: on a phone the live study comes first, so the first screen
     shows the product doing its job rather than a paragraph about it. */
  .mat-hero-stage {
    order: -1;
  }
  .mat-hero-plan,
  .mat-hero-trace {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 18px;
  }
}
@media (max-width: 520px) {
  .board-rows li {
    grid-template-columns: 34px minmax(0, 1fr) 44px;
    gap: 10px;
  }
  .board-time {
    grid-column: 2;
  }
  .board-reps {
    grid-row: 1;
    grid-column: 3;
  }
  .note-list li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .note-date {
    grid-column: 1 / -1;
  }
}

/* ---- Player chrome: whistle white on mat blue, mat lines under the head -- */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
  border: 1.5px solid var(--line);
  border-radius: 2px;
  background: var(--stage-bg);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  flex: none;
}
input[type="checkbox"]::before {
  content: "";
  width: 11px;
  height: 11px;
  transform: scale(0);
  background: var(--accent-ink);
  clip-path: polygon(14% 46%, 0 60%, 39% 100%, 100% 22%, 85% 9%, 38% 71%);
}
input[type="checkbox"]:checked {
  background: var(--ink);
  border-color: var(--ink);
}
input[type="checkbox"]:checked::before {
  transform: scale(1);
}
input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 0;
  background: repeating-linear-gradient(
    90deg,
    var(--line) 0 10px,
    transparent 10px 16px
  );
  border-bottom: 1px solid var(--line);
}
input[type="range"]::-moz-range-track {
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--line) 0 10px,
    transparent 10px 16px
  );
  border-bottom: 1px solid var(--line);
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--ink);
  cursor: ew-resize;
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--ink);
  cursor: ew-resize;
}
input[type="range"]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}
.study-cues {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.study-cues h3 {
  font: 700 17px/1.3 var(--heading);
  margin: 0 0 14px;
}
.study-cues ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cue;
}
.study-cues li {
  counter-increment: cue;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.55;
}
.study-cues li::before {
  content: counter(cue, decimal-leading-zero);
  font: 700 13px/1.6 var(--heading);
  color: var(--muted);
}
.study-cues .fine {
  margin-top: 16px;
}

/* Wave three: the things a reader touches should answer back. */
.button,.chip,.beat,.drill-card,.phase-tabs button,.human-toolbar button{transition:transform .12s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
.button:active,.chip:active,.beat:active,.phase-tabs button:active,.human-toolbar button:active{transform:translateY(1px) scale(.99)}
.drill-card:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.button,.chip,.beat,.drill-card,.phase-tabs button,.human-toolbar button{transition:none}.button:active,.chip:active,.beat:active,.drill-card:hover{transform:none}}

/* The viewer says it is working without hiding the picture while it does it.
   This used to be an opaque sheen across the whole stage at z-index 0, drawn
   over the rendered phase image that was already on the screen, so every
   visitor watched a shimmer instead of the study for as long as the model took
   to arrive. It is a line along the top edge now. */
.human-study[data-ready=loading]::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(100deg,#1b3c5a 30%,#7fc4f2 50%,#1b3c5a 70%);background-size:220% 100%;animation:mat-sheen 1.4s linear infinite;z-index:2}
@keyframes mat-sheen{from{background-position:120% 0}to{background-position:-20% 0}}
@media(prefers-reduced-motion:reduce){.human-study[data-ready=loading]::after{animation:none;background:#7fc4f2}}

/* The round clock, with the round itself drawn around it. */
.clock-dial{container-type:inline-size;position:relative;display:grid;place-items:center;width:min(330px,78vw);aspect-ratio:1;margin:2px 0 12px}
.round-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.round-ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.ring-track{stroke:var(--line)}
.ring-run{stroke:var(--ink);transition:stroke-dashoffset .3s linear}
.ring-run[data-kind=rest]{stroke:var(--warn-text)}
.clock-dial .player-clock{margin:0;position:relative;font-size:25cqw;line-height:1;letter-spacing:-.06em}
@media(prefers-reduced-motion:reduce){.ring-run{transition:none}}

/* The tour, and what it is pointing at. */
.tour{margin:12px 0;padding:14px 16px;border:1px solid var(--accent);border-radius:4px;background:var(--paper);display:grid;gap:10px}
.tour p{margin:0}
.tour b{display:inline-block;margin-right:6px;font:700 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.tour-actions{display:flex;gap:8px;flex-wrap:wrap}
.tour-target{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}

/* What the clock leaves behind. */
.finished-card{margin:0 0 22px;padding:18px 20px;border-left:3px solid var(--ink);background:var(--paper);border-radius:0 4px 4px 0}
.finished-card h2{margin:0 0 6px}
.finished-card p{margin:0 0 4px}

/* A control on a phone should be worth a thumb. The navigation and the footer
   links were 38 px and 25 px; the study checkboxes were a 26 px box inside a
   label that was not tall enough to make up the difference. */
@media (pointer:coarse),(max-width:820px){
  header nav a,.site-footer a,footer a{min-height:44px;display:inline-flex;align-items:center}
  .view-options label{min-height:44px;display:flex;align-items:center;gap:8px}
  .view-options input[type=checkbox]{width:22px;height:22px;flex:0 0 auto}
  summary{min-height:44px;display:flex;align-items:center}
}
@media (pointer:coarse),(max-width:820px){
  .brand,header .brand a,a.brand{min-height:44px;display:inline-flex;align-items:center}
  .study-progress .beat{min-height:44px}
  .study-notes summary,.source-note summary,.human-help summary{min-height:44px;display:flex;align-items:center}
}

/* A date field keeps its focus inside its own shadow parts in Chromium, so the
   host never matched :focus-visible and the only keyboard stop in the app
   without a visible ring was the journal date. */
input[type=date]:focus-within{outline:3px solid var(--ink);outline-offset:4px}
@media (pointer:coarse),(max-width:820px){
  .reference-link{min-height:44px;display:flex;align-items:center;justify-content:space-between}
}

/* Wave five: the two-figure studies. */
.study-label .pill-partner {
  background: var(--warn);
  color: #fff;
}
.two-body-note {
  border-left: 3px solid var(--warn);
  padding: 0.5rem 0.75rem;
  margin: 0.75rem 0 0;
}

/* Wave five: curriculum, study, plan and reference pages (static, crawlable). */
.policy .crumbs {
  font-size: 0.85rem;
  color: var(--muted, #b9c8d6);
  margin: 0 0 1rem;
}
.policy .crumbs a {
  color: inherit;
}
.policy .lede {
  font-size: 1.1rem;
  max-width: 62ch;
}
.policy .scope {
  border-left: 3px solid var(--warn);
  padding: 0.5rem 0.75rem;
  max-width: 62ch;
}
.policy .study-action h3 {
  margin-bottom: 0.25rem;
}
.policy ol.phases li {
  margin: 0.35rem 0;
}
.policy .watch {
  font-size: 0.95rem;
}
.policy dl.faults dt,
.policy dl.glossary dt {
  font-weight: 700;
  margin-top: 0.75rem;
}
.policy dl.faults dd,
.policy dl.glossary dd {
  margin: 0.2rem 0 0;
  max-width: 62ch;
}
.policy table.prescription,
.policy table.sheet {
  border-collapse: collapse;
  width: 100%;
  max-width: 48rem;
  margin: 0.75rem 0;
}
.policy table.prescription th,
.policy table.prescription td,
.policy table.sheet th,
.policy table.sheet td {
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  vertical-align: top;
}
.policy table.prescription th {
  width: 9rem;
}
.policy .total {
  font-weight: 700;
}
.policy ol.study-list,
.policy ul.plan-list {
  padding-left: 1.25rem;
}
.policy ol.study-list li,
.policy ul.plan-list li {
  margin: 0.4rem 0;
}
.policy ol.study-list li span,
.policy ul.plan-list li span {
  display: block;
  font-size: 0.9rem;
  color: var(--muted, #b9c8d6);
}
.policy .faq-list section {
  margin: 1.25rem 0;
}
.policy .faq-list h2 {
  font-size: 1.1rem;
}
.policy .week {
  margin: 1.5rem 0;
}
.policy .sheet-cues {
  margin: 0.5rem 0 1rem;
  padding-left: 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--muted);
}
.policy .sheet-cues li {
  margin: 0.5rem 0;
}
.policy .sheet-cues b {
  color: var(--ink);
}
.policy .sheet-cues i {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}
@media print {
  .policy .no-print,
  .policy .crumbs,
  .site-header,
  footer {
    display: none !important;
  }
  .policy,
  body {
    background: #fff !important;
    color: #000 !important;
  }
  /* Monochrome: every token colour inside the sheet becomes ink. */
  .policy * {
    color: #000 !important;
    background: transparent !important;
  }
  .policy table.sheet th,
  .policy table.sheet td {
    border-bottom: 1px solid #000;
  }
  /* Wave six: the wall sheet. One page per week, no chrome, monochrome,
     legible on A4 and Letter; the cues per study sit under each table. */
  @page {
    margin: 10mm 12mm;
  }
  .policy p,
  .policy li,
  .policy .lede,
  .policy .total,
  .policy table.sheet,
  .policy table.sheet th,
  .policy table.sheet td {
    font-size: 10pt !important;
    line-height: 1.35 !important;
  }
  .policy h1 {
    font-size: 20pt !important;
    line-height: 1.1 !important;
  }
  .policy h2 {
    font-size: 14pt !important;
    line-height: 1.2 !important;
    margin: 0 0 3pt !important;
  }
  .policy .lede,
  .policy h1 + p {
    margin: 0 0 6pt !important;
  }
  .policy .week {
    break-inside: auto;
    break-after: page;
    margin: 0;
  }
  .policy .week:last-of-type {
    break-after: auto;
  }
  .policy .week h2 {
    font-size: 15pt;
    margin: 0 0 4pt;
  }
  .policy .week > p {
    font-size: 10pt;
    margin: 0 0 6pt;
  }
  .policy h1 {
    font-size: 20pt;
    margin: 0 0 4pt;
  }
  .policy .lede,
  .policy h1 + p,
  .policy .week + p,
  .policy .eyebrow {
    font-size: 10pt;
  }
  .policy table.sheet {
    max-width: none;
    font-size: 10pt;
    margin: 4pt 0;
  }
  .policy table.sheet th,
  .policy table.sheet td {
    padding: 3pt 6pt;
    border-bottom: 1px solid #000;
    color: #000;
  }
  .policy .total {
    font-size: 10pt;
    margin: 2pt 0 6pt;
  }
  /* Sizes carry !important here because the screen rules for the policy
     pages set list and paragraph sizes with the same specificity later in the
     cascade; a grid rather than multicol so a week never splits a page. */
  .policy .sheet-cues {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2pt 8mm;
    font-size: 9pt !important;
    line-height: 1.3 !important;
    margin: 0;
    padding-left: 0;
    list-style: none;
  }
  .policy .sheet-cues li,
  .policy .sheet-cues span {
    font-size: 9pt !important;
    line-height: 1.3 !important;
    break-inside: avoid;
    margin: 0 0 3pt;
  }
  .policy .sheet-cues span {
    display: block;
  }
  .policy .sheet-cues i {
    font-style: normal;
    font-weight: 700;
  }
  .policy a {
    color: #000;
    text-decoration: none;
  }
}
.calendar-export {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}
.calendar-export label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}
.calendar-export input {
  min-height: 44px;
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}

/* Wave six: gym mode. Landscape first: the clock and the picture side by side,
   digits sized from the viewport so they read from three metres. Portrait
   stacks them. The state colours the top strip only; the digits stay chalk. */
.gym{display:grid;gap:clamp(10px,2vw,24px);min-height:calc(100vh - 140px);padding:clamp(8px,2vw,20px) 0}
body[data-page="gym"] main{max-width:none;padding-left:clamp(12px,3vw,40px);padding-right:clamp(12px,3vw,40px)}
body[data-page="gym"] footer{display:none}
.gym-top{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:baseline;font:700 clamp(16px,2.2vw,28px)/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;border-bottom:3px solid var(--line);padding-bottom:10px}
.gym-top #gym-name{margin-left:auto;font:600 clamp(13px,1.4vw,18px)/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.gym[data-kind="work"] .gym-top{border-color:var(--accent)}
.gym[data-kind="rest"] .gym-top{border-color:var(--muted);color:var(--muted)}
.gym[data-kind="paused"] .gym-top{border-color:var(--warn)}
.gym-main{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(16px,3vw,48px);align-items:center;flex:1}
.gym-clock{font:700 clamp(96px,22vw,320px)/0.95 var(--heading);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);text-wrap:nowrap}
.gym[data-kind="rest"] .gym-clock{color:var(--muted)}
.gym h1#gym-drill{margin:clamp(8px,1.5vw,20px) 0 6px;font-size:clamp(28px,4.5vw,64px);line-height:1.05}
.gym-cue{margin:0;font-size:clamp(18px,2.6vw,36px);line-height:1.3;max-width:26ch;color:var(--ink)}
.gym-poster-wrap{margin:0;display:grid;gap:10px;justify-items:stretch}
.gym-poster{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:var(--stage-bg);border:1px solid var(--line);border-radius:var(--radius)}
.gym-poster-wrap figcaption{font:600 clamp(16px,2vw,26px)/1.3 var(--sans);color:var(--muted)}
.gym-controls{display:flex;flex-wrap:wrap;gap:10px}
.gym-controls .button{min-height:52px;font-size:clamp(15px,1.6vw,20px)}
.gym-keys{margin:0}
@media (max-width:820px),(orientation:portrait){.gym-main{grid-template-columns:minmax(0,1fr)}.gym-clock{font-size:clamp(88px,26vw,200px)}}
main:fullscreen{background:var(--bg);overflow:auto;padding:24px}
main:fullscreen .gym{min-height:calc(100vh - 48px)}
@media (prefers-reduced-motion: reduce){.gym-poster{transition:none}}

/* Wave six: training records. */
.record-panel{margin:28px 0 0;padding:clamp(16px,3vw,24px);border:1px solid var(--line);border-top:4px solid var(--accent);background:var(--paper);border-radius:var(--radius)}
.record-panel h2{margin:0 0 12px;font-size:1.3rem}
.record-panel h3{margin:22px 0 8px;font-size:1rem}
.record-form{display:grid;gap:14px;max-width:640px}
.record-form label{display:grid;gap:5px;font-size:13px;font-weight:600}
.record-form input,.record-form select{min-height:44px;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink)}
.rating-set{margin:0;padding:0;border:0;display:grid;gap:8px}
.rating-set legend{font-size:13px;font-weight:600;margin-bottom:6px}
.rating-option{display:flex;gap:10px;align-items:flex-start;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;font-weight:400}
.rating-option input{margin:4px 0 0;min-height:0;width:18px;height:18px}
.rating-option b{display:block}
.rating-option small{color:var(--muted)}
.rating-option:has(input:checked){border-color:var(--accent);background:var(--raised)}
.record-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.record-row{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--raised);font-size:14px}
.record-date{font-family:var(--mono);font-size:12px;color:var(--muted)}
.record-study{font-weight:600}
.record-rating{font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border:1px solid currentColor;border-radius:2px}
.rating-sloppy{color:var(--warn-text)}
.rating-getting-there{color:var(--muted)}
.rating-clean{color:var(--ink)}
.record-note{flex-basis:100%;color:var(--muted)}
.record-row .icon-button{margin-left:auto}
.week-panel,.records-section{margin:28px 0 0;padding:clamp(16px,3vw,24px);border:1px solid var(--line);background:var(--paper);border-radius:var(--radius)}
.week-panel h2,.records-section h2{margin:0 0 12px;font-size:1.3rem}
.week-stats{display:flex;flex-wrap:wrap;gap:18px 32px;margin:0 0 12px}
.week-stats b{display:block;font:700 2rem/1 var(--heading)}
.week-stats span{font-size:13px;color:var(--muted)}
.week-studies,.week-ratings{margin:0 0 8px;color:var(--muted)}
.week-ratings span{margin-right:14px}
.week-streak{margin:10px 0 0;font-weight:600}
.records-actions{display:flex;flex-wrap:wrap;gap:8px}
.file-button{position:relative;overflow:hidden;cursor:pointer}
.file-button input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.board-done{font-weight:600}
.pill-done{border-color:var(--accent)}

/* Wave six: the self-review camera. Tablet landscape first: the model and
   the camera side by side; a phone stacks them. The ghost is the model's
   poster laid over the picture at reduced opacity. */
.camera-panel{margin:28px 0 0;padding:clamp(16px,3vw,24px);border:1px solid var(--line);border-top:4px solid var(--accent);background:var(--paper);border-radius:var(--radius)}
.camera-panel h2{margin:0 0 6px;font-size:1.3rem}
.camera-lede{margin:0 0 16px;color:var(--muted)}
.camera-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.camera-stage figure{margin:0;min-width:0}
.camera-stage figcaption{margin-top:6px;font-size:13px;color:var(--muted)}
.camera-model img,.camera-live video,.camera-ghost{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--stage-bg);border:1px solid var(--line);border-radius:var(--radius)}
.camera-live{position:relative}
/* The hidden attribute wins over the display rules inside the wave six panels.
   Not global: a global rule stopped WebKit remounting the human viewer on a
   second visit to a study, so it stays scoped to these panels. */
.camera-panel [hidden],.record-panel [hidden],.gym [hidden],.records-section [hidden]{display:none!important}
.camera-live video{background:#0a1a2b}
.camera-ghost{position:absolute;inset:0;width:100%;height:auto;opacity:.45;pointer-events:none;border:0;background:transparent}
.camera-stage[data-mirror="true"] video{transform:scaleX(-1)}
.camera-controls{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:14px 0 0}
.camera-controls .button{min-height:44px}
.camera-controls .check-label{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.camera-timer{font:600 13px var(--mono);color:var(--muted)}
.camera-scrub-label{display:grid;gap:6px;margin:14px 0 8px;font-size:13px;font-weight:600}
.camera-scrub-label input{width:100%;min-height:44px}
.clip-video{display:block;width:100%;aspect-ratio:4/3;background:#0a1a2b;border-radius:var(--radius);margin:10px 0}
.modal-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
@media (max-width:700px){.camera-stage{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion: reduce){.camera-ghost,.camera-live video{transition:none}}

/* Wave six: every range input is a 44 px target, including the study scrubber. */
input[type="range"]{min-height:44px}

/* Wave six: the camera toolbar arrives under the picture with the model, 65 px
   tall. Its room is reserved from the first paint so nothing below the stage
   moves when the model lands; the reservation goes once the toolbar exists. */
.motion-stage:not(:has(.human-toolbar)){padding-bottom:65px}

/* Gym mode's empty state: the boards, one press each. */
.gym-boards{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:760px}
.gym-boards li{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:14px 16px;border:1px solid var(--line);background:var(--paper);border-radius:var(--radius)}
.gym-boards li>div{display:grid;gap:3px;min-width:0;flex:1 1 260px}
.gym-boards li span{color:var(--muted);font-size:14px}
.gym-boards .button{min-height:44px}
/* Wave six: the rendered frame on a public study page. */
.policy .study-poster{margin:0 0 1rem;max-width:480px}
.policy .study-poster img{display:block;width:100%;height:auto;aspect-ratio:4/3;background:var(--stage-bg);border:1px solid var(--line);border-radius:var(--radius)}
.policy .study-poster figcaption{margin-top:4px;font-size:.85rem;color:var(--muted)}