/* Riding Hall: the one stylesheet (VISUAL-DESIGN-SYSTEM.md). Heritage
   countryside and quiet money: hunter green, saddle tan, cream, deep navy;
   matte; no gradients, no neon, no badges. Large, high-contrast controls to
   WCAG 2.2 AA; recording state shown beyond colour. */

:root {
  --rh-green: #1F3D2B;
  --rh-tan: #8B5A2B;
  --rh-cream: #F4EFE6;
  --rh-navy: #1B2A41;
  --rh-ink: #141A1F;
  --rh-record: #9B2C2C;
  --rh-paper: #FBF8F2;
  --rh-rule: #D9CFBF;
  --rh-muted: #4A5568;
  --rh-focus: #1B2A41;
  /* The road's standard pairings, which the contrast gate checks (WCAG 2.2 AA): */
  --surface: var(--rh-cream);
  --surface-sunken: #EBE4D6;
  --surface-raised: var(--rh-paper);
  --text: var(--rh-navy);
  --text-muted: var(--rh-muted);
  --text-inverse: var(--rh-cream);
  --action: var(--rh-green);
  --action-hover: #163021;
  --action-quiet: #E3EBE4;
  --focus-ring: var(--rh-focus);
  --border-strong: #8A7E6B;
  --colour-positive-500: #1F3D2B;
  --colour-caution-500: #7A4B1E;
  --colour-critical-500: #9B2C2C;
  /* One spacing scale per product (AW-104): */
  --arcwright-spacing-scale: pair 0.5rem, between 1.25rem, submit 2rem;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem;
  --radius: 6px;
  --target: 48px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--rh-cream); }
body { margin: 0; background: var(--rh-cream); color: var(--rh-navy); font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.5; font-variant-numeric: tabular-nums; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; width: min(60rem, 100% - 2rem); margin: 0 auto; padding: var(--space-2) 0 var(--space-4); }

h1, h2, h3 { font-family: var(--font-serif); color: var(--rh-green); font-weight: 650; line-height: 1.15; margin: 0 0 var(--space-2); letter-spacing: -0.01em; }
h1 { font-size: clamp(1.75rem, 2vw + 1.2rem, 2.5rem); }
h2 { font-size: 1.375rem; margin-top: var(--space-3); }
h3 { font-size: 1.125rem; margin-top: var(--space-2); }
p { margin: 0 0 var(--space-2); }
a { color: var(--rh-green); text-underline-offset: 0.15em; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--rh-focus); outline-offset: 2px; }
.muted { color: var(--rh-muted); }
.error { color: var(--rh-record); font-weight: 600; }
.emergency { border-left: 4px solid var(--rh-record); padding: var(--space-1) var(--space-2); background: var(--rh-paper); color: var(--rh-navy); }
.notice { border-left: 4px solid var(--rh-tan); }

.masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: min(60rem, 100% - 2rem); margin: 0 auto; padding: var(--space-2) 0; border-bottom: 1px solid var(--rh-rule); flex-wrap: wrap; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-serif); font-weight: 700; font-size: 1.375rem; color: var(--rh-green); text-decoration: none; min-height: var(--target); }
.mark { color: var(--rh-green); }
.mark .mark-rail { color: var(--rh-tan); }
.nav ul { list-style: none; display: flex; gap: var(--space-2); margin: 0; padding: 0; flex-wrap: wrap; }
.nav a { display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--space-1); text-decoration: none; border-bottom: 3px solid transparent; }
.nav a[aria-current="page"] { border-bottom-color: var(--rh-tan); }
.foot { width: min(60rem, 100% - 2rem); margin: 0 auto; padding: var(--space-2) 0 var(--space-3); border-top: 1px solid var(--rh-rule); font-size: 0.9375rem; }

.panel, .lesson, .watch, .diary, .lessons-list { background: var(--rh-paper); color: var(--rh-navy); border: 1px solid var(--rh-rule); border-radius: var(--radius); padding: var(--space-3); margin-top: var(--space-2); }
.panel.narrow { max-width: 32rem; margin-inline: auto; }
.hero { padding: var(--space-4) 0 var(--space-3); }
.lede { font-size: 1.25rem; max-width: 42rem; }
.three { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.three article { background: var(--rh-paper); color: var(--rh-navy); border: 1px solid var(--rh-rule); border-radius: var(--radius); padding: var(--space-2) var(--space-3); }
.plain { padding: var(--space-3) 0; max-width: 42rem; }
.legal { max-width: 44rem; margin: 0 auto; }

button, .button { font: inherit; font-weight: 600; min-height: var(--target); padding: 0 var(--space-3); border-radius: var(--radius); border: 2px solid var(--rh-green); background: var(--rh-green); color: var(--rh-cream); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
button.secondary { background: transparent; color: var(--rh-green); }
button.danger { background: transparent; color: var(--rh-record); border-color: var(--rh-record); }
@media (hover: hover) { button:hover, .button:hover { background: var(--action-hover); color: var(--rh-cream); transform: translateY(-1px); } button.secondary:hover, button.danger:hover { background: var(--action-quiet); color: var(--rh-green); transform: translateY(-1px); } }
button:active, .button:active { background: var(--rh-navy); color: var(--rh-cream); transform: translateY(1px); }
button.secondary:active, button.danger:active { background: var(--surface-sunken); color: var(--rh-navy); }
button[disabled] { opacity: 0.55; cursor: not-allowed; }
input, select, textarea { font: inherit; min-height: var(--target); padding: 0.5rem 0.75rem; border: 2px solid var(--border-strong); border-radius: var(--radius); background: #fff; color: var(--rh-ink); width: 100%; }
textarea { min-height: 6rem; }
label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
label input[type="checkbox"] { width: 1.5rem; height: 1.5rem; min-height: 0; vertical-align: middle; margin-right: var(--space-1); }
.stack { display: grid; gap: var(--space-2); max-width: 36rem; }
.stack.inline { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: end; }
form.inline { display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-1); }
table.list { width: 100%; border-collapse: collapse; margin-bottom: var(--space-2); }
table.list th, table.list td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--rh-rule); }

.daynav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.daynav h1 { margin: 0; font-size: 1.5rem; }
.daynav a { min-height: var(--target); display: inline-flex; align-items: center; }
ol.lessons, .lessons-list ol { list-style: none; margin: var(--space-2) 0; padding: 0; display: grid; gap: var(--space-1); }
.lesson-card { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline; padding: var(--space-2); border: 1px solid var(--rh-rule); border-radius: var(--radius); background: #fff; color: var(--rh-navy); }
.lesson-card a { text-decoration: none; display: flex; gap: var(--space-2); flex: 1; min-height: var(--target); align-items: center; }
.lesson-card .clock, .lesson-card .when { font-weight: 700; color: var(--rh-ink); }
.lesson-card .who { font-weight: 600; }
.lesson-card .filming, .lesson-card .state { color: var(--rh-muted); font-size: 0.9375rem; }
.lesson-card.state-filmable .filming { color: var(--rh-green); font-weight: 600; }
.lesson-card.state-refused .filming { color: var(--rh-tan); }

/* The capture screen shows one thing: rider, horse, red button, clock, state (CAPTURE-SPEC §1). */
.capture { display: grid; gap: var(--space-2); }
.scene { font-size: 1.125rem; }
.viewfinder { position: relative; background: var(--rh-ink); color: var(--rh-cream); border-radius: var(--radius); aspect-ratio: 16 / 9; overflow: hidden; }
.viewfinder video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-state { position: absolute; top: var(--space-1); left: var(--space-1); display: flex; gap: var(--space-1); align-items: center; background: rgba(20, 26, 31, 0.85); color: var(--rh-cream); padding: 0.25rem 0.75rem; border-radius: var(--radius); font-weight: 700; font-size: 1.125rem; }
.rec-state.recording .rec-word::before { content: ""; display: inline-block; width: 0.8em; height: 0.8em; background: var(--rh-record); margin-right: 0.4em; vertical-align: -0.05em; border-radius: 2px; }
.controls { display: flex; gap: var(--space-2); justify-content: center; }
button.record { min-width: 96px; min-height: 96px; border-radius: 50%; background: var(--rh-record); color: var(--rh-cream); border-color: var(--rh-record); font-size: 1.125rem; }
button.stop { min-width: 96px; min-height: 96px; border-radius: var(--radius); background: var(--rh-ink); color: var(--rh-cream); border-color: var(--rh-ink); font-size: 1.125rem; }
.upload-state { text-align: center; font-weight: 600; }
.state { font-weight: 600; }
.guardian-words, .child-words, .child-explanation { background: #fff; color: var(--rh-navy); border: 1px solid var(--rh-rule); border-radius: var(--radius); padding: var(--space-2); }
.child-words { font-size: 1.25rem; line-height: 1.55; }
.player video { width: 100%; background: var(--rh-ink); color: var(--rh-cream); border-radius: var(--radius); aspect-ratio: 16 / 9; }
.actions { margin-top: var(--space-3); display: grid; gap: var(--space-1); }
details summary { cursor: pointer; min-height: var(--target); display: flex; align-items: center; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*), ::view-transition-image-pair(*) { animation: none !important; transition: none !important; } button:hover, .button:hover, button:active, .button:active { transform: none; } }
@media (max-width: 40rem) { .panel, .lesson, .watch, .diary, .lessons-list { padding: var(--space-2); } .lesson-card a { flex-direction: column; align-items: flex-start; gap: 0; } }

/* Booking (D-36): the free times as a grid of plain buttons, the coach's hours as a list. */
.slots { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--space-1); }
.slots li form.inline { margin: 0; }
.slots .button { width: 100%; justify-content: center; }
.hours { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.hours li { padding: var(--space-1) 0; border-bottom: 1px solid var(--border-strong); display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.hours .window { display: inline-flex; gap: var(--space-1); align-items: center; }

/* ---- forms, lists and hours, 10 October (Philip's walk-through): fields and their buttons share one baseline ---- */
/* A quiet button: the secondary action beside a row (Remove, Open again, Take offline). */
.button--quiet, button.button--quiet { background: transparent; color: var(--rh-green); border-color: var(--rh-green); }
@media (hover: hover) { .button--quiet:hover, button.button--quiet:hover { background: var(--action-quiet); color: var(--rh-green); } }
.button--compact { min-height: 44px; padding: 0 var(--space-2); font-size: 0.9375rem; }
/* A select draws its own arrow, clear of the edge. */
select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231B2A41' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 8px; }
/* A form on one line: labels above their fields, the button level with the fields. */
.form-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; margin: 0 0 var(--space-2); }
.form-row > label { flex: 1 1 11rem; max-width: 16rem; margin: 0; }
.form-row > label.wide { flex: 2 1 14rem; max-width: 24rem; }
.form-row > label.narrow { flex: 0 1 7rem; }
.form-row > label { display: flex; flex-direction: column; white-space: nowrap; }
.form-row > label[hidden] { display: none; }
.form-row > button, .form-row > .button { flex: 0 0 auto; }
label > input, label > select, label > textarea { margin-top: 0.375rem; }
.stack.inline > label, form.inline > label { margin-bottom: 0; }
form.inline { align-items: flex-end; }
input[type="file"] { padding: 0.55rem 0.75rem; background: #fff; }
fieldset { border: 0; margin: 0 0 var(--space-2); padding: 0; min-width: 0; }
legend { font-weight: 600; padding: 0; margin-bottom: 0.375rem; }
/* Day chips: a checkbox that reads as a choice. */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.chip { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.875rem; border: 2px solid var(--border-strong); border-radius: 999px; background: #fff; font-weight: 600; margin: 0; cursor: pointer; }
.chip input[type="checkbox"] { width: 1.125rem; height: 1.125rem; min-height: 0; margin: 0; accent-color: var(--rh-green); }
.chip:has(input:checked) { border-color: var(--rh-green); background: var(--action-quiet); }
/* Rows: one item a line, its action at the right. */
ul.rows { list-style: none; margin: 0 0 var(--space-2); padding: 0; border-top: 1px solid var(--rh-rule); }
ul.rows li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-1) var(--space-2); padding: 0.625rem 0; border-bottom: 1px solid var(--rh-rule); }
ul.rows li form.inline { margin: 0; }
.tag { font-size: 0.9375rem; font-weight: 600; padding: 0.125rem 0.625rem; border-radius: 999px; background: var(--surface-sunken); color: var(--rh-navy); white-space: nowrap; }
/* The week: day, its hours, then copy. */
ol.week { list-style: none; margin: 0 0 var(--space-3); padding: 0; border-top: 1px solid var(--rh-rule); }
ol.week > li.day { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: var(--space-1) var(--space-2); align-items: center; padding: 0.625rem 0; border-bottom: 1px solid var(--rh-rule); }
.day-name { font-weight: 700; }
.day--off .day-name { color: var(--text-muted); font-weight: 600; }
.day-hours { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.window { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.25rem 0.25rem 0.25rem 0.875rem; border: 1px solid var(--rh-rule); border-radius: var(--radius); background: #fff; font-weight: 600; }
.window form.inline { margin: 0; }
details.copy { justify-self: end; }
details.copy > summary { min-height: 44px; padding: 0 var(--space-2); border: 2px solid var(--rh-green); border-radius: var(--radius); color: var(--rh-green); list-style: none; font-size: 0.9375rem; }
details.copy > summary::-webkit-details-marker { display: none; }
details.copy[open] { grid-column: 1 / -1; justify-self: stretch; }
details.copy[open] > summary { display: inline-flex; margin-bottom: var(--space-2); }
.copy-form { padding: var(--space-2); border: 1px solid var(--rh-rule); border-radius: var(--radius); background: var(--surface-sunken); }
.add-hours { margin-bottom: var(--space-1); }
/* Sign out sits in the nav as a link does, and posts. */
.nav-signout { margin: 0; }
.nav-signout button { background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--rh-green); font-weight: inherit; min-height: var(--target); padding: 0 var(--space-1); text-decoration: none; }
@media (hover: hover) { .nav-signout button:hover { background: none; color: var(--rh-green); transform: none; border-bottom-color: var(--rh-rule); } }
.nav-signout button:active { background: none; color: var(--rh-green); }
@media (max-width: 40rem) {
  ol.week > li.day { grid-template-columns: 1fr; }
  details.copy { justify-self: start; }
  .form-row > label, .form-row > label.wide, .form-row > label.narrow { max-width: none; flex-basis: 100%; }
}

/* ---- the front page: a lesson in an arena behind the opening, faded into the page (photo: Anton Kotlovskii,
   Unsplash licence). The rider and the coach are seen from a distance; no face is legible. ---- */
body.page-front { position: relative; isolation: isolate; }
body.page-front::before { content: ""; position: absolute; inset: 0 0 auto 0; height: min(100vh, 52rem); z-index: -1; pointer-events: none;
  /* Stronger on the left where the words are, lighter on the right where the rider is; then into the page. */
  background-image: linear-gradient(to right, rgba(244, 239, 230, 0.86) 0%, rgba(244, 239, 230, 0.78) 50%, rgba(244, 239, 230, 0.62) 100%), linear-gradient(to bottom, rgba(244, 239, 230, 0) 55%, #F4EFE6 100%), url("/images/lesson-1920.webp");
  background-size: cover; background-position: center, center, center 45%; background-repeat: no-repeat;
  /* Out of focus, as the far side of an arena is behind the lesson in front: the framed photograph is the subject. */
  filter: blur(3px); }
body.page-front .three article { background: rgba(251, 248, 242, 0.88); }
@media (max-width: 48rem) { body.page-front::before { background-image: linear-gradient(to bottom, rgba(244, 239, 230, 0.78) 0%, rgba(244, 239, 230, 0.86) 50%, #F4EFE6 100%), url("/images/lesson-1200.webp"); background-position: 30% 35%; } }
body.page-front .masthead { border-bottom-color: rgba(138, 126, 107, 0.45); }

/* ---- the front page, with depth (10 October): the opening beside a framed lesson photo, the three cards raised
   off the page with a firm edge so they hold against the photograph behind ---- */
.hero--front { display: grid; gap: var(--space-3); align-items: center; }
@media (min-width: 56rem) { .hero--front { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-4); } }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.hero-actions .button { box-shadow: 0 1px 2px rgba(27, 42, 65, 0.12), 0 4px 12px rgba(27, 42, 65, 0.10); }
.hero-actions .button--quiet { background: rgba(251, 248, 242, 0.9); color: var(--rh-green); }
.hero-photo { margin: 0; justify-self: center; width: min(100%, 22rem); }
.hero-photo { perspective: 900px; }
.hero-photo-frame { position: relative; display: block; overflow: hidden; border-radius: 10px; border: 6px solid var(--rh-paper); aspect-ratio: 4 / 5;
  box-shadow: 0 2px 4px rgba(27, 42, 65, 0.10), 0 18px 40px rgba(27, 42, 65, 0.22), 0 40px 60px -30px rgba(27, 42, 65, 0.35);
  transform: rotate(1.5deg) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transform-style: preserve-3d; transition: transform 260ms ease-out; }
.hero-photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 40%; }
/* The light that crossed the headline catches the photograph a moment later, as glass would. */
.hero-photo-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.0) 44%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0.0) 56%, transparent 62%);
  background-size: 300% 100%; background-position: 100% 0; background-repeat: no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  /* Life: the photograph breathes, a slow drift in and across, as a camera held on a lesson does. */
  .hero-photo-frame img { animation: rh-drift 15s ease-in-out 1.2s infinite alternate; }
  .hero-photo-frame::after { animation: rh-glare 1800ms linear 1500ms forwards; }
  .hero-photo { animation: rh-float 7s ease-in-out 1s infinite alternate; }
  @keyframes rh-drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-3%, 2%); } }
  @keyframes rh-glare { to { background-position: 0% 0; } }
  @keyframes rh-float { from { translate: 0 0; } to { translate: 0 -8px; } }
}
@media (max-width: 55.99rem) { .hero-photo { width: min(100%, 18rem); } .hero-photo-frame { transform: none; } }
/* The cards as objects: a lit top face, a visible thickness below (the stacked hard shadows), a soft cast shadow
   on the page, and a tilt that follows the pointer so the light seems to move across them. */
body.page-front .three article { position: relative; background: linear-gradient(160deg, #FFFDF9 0%, var(--rh-paper) 55%, #F3EDE2 100%); border: 1px solid var(--border-strong); border-top: 4px solid var(--rh-tan); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 0 #E3DACB, 0 2px 0 #DCD2C1, 0 3px 0 #D4C9B6, 0 4px 0 #CDC1AC, 0 6px 8px rgba(27, 42, 65, 0.10), 0 22px 40px -8px rgba(27, 42, 65, 0.24);
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform 220ms ease-out, box-shadow 220ms ease-out; }
body.page-front .three article::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 0%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%); opacity: 0.6; transition: opacity 220ms ease-out; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.page-front .three article:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 0 #E3DACB, 0 2px 0 #DCD2C1, 0 3px 0 #D4C9B6, 0 4px 0 #CDC1AC, 0 5px 0 #C6B9A2, 0 10px 14px rgba(27, 42, 65, 0.12), 0 34px 56px -10px rgba(27, 42, 65, 0.30); }
  body.page-front .three article:hover::before { opacity: 1; }
}
body.page-front .about { margin-top: var(--space-4); }
body.page-front .about .closing { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.45; color: var(--rh-green); border-left: 4px solid var(--rh-tan); padding-left: var(--space-2); }
body.page-front .three { margin-top: var(--space-2); }

/* ---- the header stays at the top of every page, translucent over what scrolls beneath (10 October) ---- */
.masthead { position: sticky; top: 0; z-index: 50; width: 100%; box-sizing: border-box;
  padding: var(--space-1) max(1rem, calc((100% - 60rem) / 2)); padding-top: max(var(--space-1), env(safe-area-inset-top));
  background: rgba(244, 239, 230, 0.72); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgba(138, 126, 107, 0.35); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 6px 18px rgba(27, 42, 65, 0.06); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .masthead { background: rgba(244, 239, 230, 0.96); } }
html { scroll-padding-top: 6rem; }
@media (max-width: 40rem) {
  .masthead { flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: 0; }
  .nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem; }
  .nav::-webkit-scrollbar { display: none; }
  .nav ul { flex-wrap: nowrap; white-space: nowrap; gap: var(--space-1); }
}

/* ---- the front page headline: one pass of light across the words, once, on arrival (10 October). Lifted from
   the ArcGabriel reference (Arc Systems/Reference-headline-sheen-effect.md): the gradient moves, not the text;
   the core is bright and narrow; the flanks carry the brand colour, here the tan of the doorway's rail. All three
   guards kept: inside @supports, parked on ink at rest, held on ink when done. ---- */
.sheen .ln { display: block; }
/* The headline is sized to its own column, so on any font it stays on one line and clear of the photograph. */
.hero-words { position: relative; z-index: 2; min-width: 0; }
@media (min-width: 56rem) { .hero-words { container-type: inline-size; } .hero--front h1.sheen { font-size: min(3rem, 7.2cqi); white-space: nowrap; } }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .sheen .ln {
    background-image: linear-gradient(96deg,
      var(--rh-green) 0%, var(--rh-green) 42%,
      #2a2416 44.5%, #5a3a1c 46.2%, #8B5A2B 47.6%,
      #d8b98a 48.8%, #f6efe2 49.6%, #fff 50%, #f6efe2 50.4%,
      #d8b98a 51.2%, #8B5A2B 52.4%, #5a3a1c 53.8%, #2a2416 55.5%,
      var(--rh-green) 58%, var(--rh-green) 100%);
    background-size: 300% 100%; background-position: 100% 0; background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    padding-bottom: 0.34em; margin-bottom: -0.34em; width: fit-content;
    animation: rh-sheen 2800ms linear 500ms forwards;
  }
  .sheen .ln:nth-child(2) { animation-delay: 680ms; }
  @keyframes rh-sheen { to { background-position: 0% 0; } }
}
@media (prefers-reduced-motion: reduce) { .sheen .ln { animation: none; } }

/* ---- the header thins as the page moves under it: clearer glass once scrolled ---- */
.masthead { transition: background-color 240ms ease, box-shadow 240ms ease, -webkit-backdrop-filter 240ms ease, backdrop-filter 240ms ease; }
html.is-scrolled .masthead { background: rgba(244, 239, 230, 0.12); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 8px 24px rgba(27, 42, 65, 0.08); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html.is-scrolled .masthead { background: rgba(244, 239, 230, 0.94); } }
@media (prefers-reduced-motion: reduce) { .masthead { transition: none; } }

/* ---- classes (D-58): the class cards a family buys from, and times that show places left or Full ---- */
ul.class-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; gap: var(--space-2); }
.class-card { padding: var(--space-2) var(--space-3); border: 1px solid var(--border-strong); border-radius: 10px; background: #fff; box-shadow: 0 1px 0 #E3DACB, 0 2px 0 #DCD2C1, 0 8px 18px rgba(27, 42, 65, 0.08); }
.class-card h3 { margin-top: 0; }
.class-card .form-row { margin-bottom: 0; }
.pay-ways { margin: 0; }
.slot { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.slot small { font-size: 0.75rem; font-weight: 600; opacity: 0.8; }
.slot--full { min-height: var(--target); width: 100%; border: 2px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-muted); font-weight: 600; }
.lede-small { font-size: 1.0625rem; }
.class-setup fieldset { margin-top: var(--space-1); }

/* ---- the coach's home (D-59): figures, then the calendar in day, week, month or year ---- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.figures { display: grid; gap: var(--space-2); grid-template-columns: 1fr; margin-top: var(--space-2); }
@media (min-width: 60rem) { .figures { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: stretch; } }
.tiles { display: grid; gap: var(--space-1); grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.tile { display: flex; flex-direction: column; gap: 0.25rem; padding: var(--space-2); background: var(--rh-paper); color: var(--rh-navy); border: 1px solid var(--rh-rule); border-radius: 10px; box-shadow: 0 1px 0 #E3DACB, 0 6px 14px rgba(27, 42, 65, 0.06); }
.tile-n { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 650; color: var(--rh-green); line-height: 1.1; }
.tile-l { font-size: 0.9375rem; color: var(--rh-muted); }
.tile-l small { display: block; font-size: 0.8125rem; }
.tile--attention { border-color: var(--colour-caution-500); border-left-width: 4px; }
.weeks-chart { margin: 0; padding: var(--space-2); background: var(--rh-paper); border: 1px solid var(--rh-rule); border-radius: 10px; }
.weeks-chart figcaption { font-weight: 600; font-size: 0.9375rem; margin-bottom: var(--space-1); color: var(--rh-navy); }
.weeks-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.weeks-chart .axis { stroke: var(--rh-rule); stroke-width: 1; }
.weeks-chart .bar rect:first-of-type { fill: var(--rh-green); opacity: 0.55; }
.weeks-chart .bar--now rect:first-of-type { opacity: 1; }
.weeks-chart .bar:hover rect:first-of-type { opacity: 0.9; }
.weeks-chart .hit { fill: transparent; }
.weeks-chart text { font-size: 10px; fill: var(--rh-navy); font-family: var(--font-sans); }
.weeks-chart .now-label { fill: var(--rh-muted); }
.cal-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); }
.view-switch { display: inline-flex; border: 2px solid var(--rh-green); border-radius: var(--radius); overflow: hidden; }
.view-switch a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 var(--space-2); text-decoration: none; font-weight: 600; color: var(--rh-green); }
.view-switch a + a { border-left: 1px solid var(--rh-green); }
.view-switch a[aria-current="page"] { background: var(--rh-green); color: var(--rh-cream); }
.cal-jump { display: inline-flex; gap: var(--space-1); align-items: center; }
.cal-jump input { width: auto; min-height: 40px; }
.cal-today { margin: 0 0 var(--space-1); text-align: center; font-size: 0.9375rem; }
.week-grid { display: grid; gap: var(--space-1); grid-template-columns: repeat(7, minmax(0, 1fr)); }
.week-day { background: #fff; border: 1px solid var(--rh-rule); border-radius: 8px; padding: var(--space-1); min-height: 8rem; }
.week-day.is-today { border-color: var(--rh-tan); box-shadow: inset 0 3px 0 var(--rh-tan); }
.week-day-head { display: block; text-decoration: none; margin-bottom: var(--space-1); font-size: 0.9375rem; }
.week-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.week-day li a { display: block; padding: 4px 6px; border-radius: 6px; background: var(--action-quiet); text-decoration: none; color: var(--rh-navy); font-size: 0.875rem; line-height: 1.3; }
.week-day li small { display: block; color: var(--rh-muted); }
.week-day .muted { font-size: 0.875rem; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.month-head { display: contents; }
.month-head span { text-align: center; font-weight: 600; font-size: 0.8125rem; color: var(--rh-muted); padding-bottom: 4px; }
.month-cell { display: flex; flex-direction: column; gap: 2px; min-height: 4.5rem; padding: 6px; border: 1px solid var(--rh-rule); border-radius: 8px; background: #fff; text-decoration: none; color: var(--rh-navy); }
.month-cell.is-out { background: transparent; color: var(--rh-muted); }
.month-cell.is-today { border-color: var(--rh-tan); box-shadow: inset 0 3px 0 var(--rh-tan); }
.month-cell.has-lessons { background: var(--action-quiet); }
.month-day { font-weight: 700; font-size: 0.9375rem; }
.month-n { font-size: 0.8125rem; }
.year-grid { display: grid; gap: var(--space-1); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.year-cell { display: flex; flex-direction: column; gap: 4px; padding: var(--space-2); border: 1px solid var(--rh-rule); border-radius: 10px; background: #fff; text-decoration: none; color: var(--rh-navy); }
.year-cell.has-lessons { background: var(--action-quiet); }
details.move { margin: var(--space-2) 0; }
details.move > summary { font-weight: 600; }
@media (max-width: 48rem) { .week-grid { grid-template-columns: 1fr; } .week-day { min-height: 0; } .month-cell { min-height: 3.25rem; padding: 4px; } .month-n { font-size: 0.6875rem; } }

/* ---- the coach's tools (D-60): people, messages, notices, invoices, ledger, set-up ---- */
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem; border-radius: 999px; background: var(--rh-record); color: #fff; font-size: 0.75rem; font-weight: 700; margin-left: 0.25rem; }
.tag--new { background: var(--rh-green); color: var(--rh-cream); }
a.person { flex: 1; text-decoration: none; color: var(--rh-navy); display: block; min-height: 44px; padding: 4px 0; }
a.person strong { color: var(--rh-green); }
.row-actions { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.input--compact { width: 11rem; min-height: 44px; }
.notes-list li { align-items: flex-start; }
.note-edit { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1); flex: 1; align-items: end; }
.note-edit textarea { grid-column: 1 / -1; }
.thread { list-style: none; padding: 0; margin: 0 0 var(--space-2); display: grid; gap: var(--space-1); }
.msg { max-width: 38rem; padding: var(--space-1) var(--space-2); border-radius: 12px; border: 1px solid var(--rh-rule); }
.msg p { margin: 0 0 4px; white-space: pre-wrap; }
.msg .muted { font-size: 0.8125rem; }
.msg--mine { justify-self: end; background: var(--action-quiet); border-bottom-right-radius: 4px; }
.msg--theirs { justify-self: start; background: #fff; border-bottom-left-radius: 4px; }
.board { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.board-item { padding: var(--space-2); background: #fff; border: 1px solid var(--rh-rule); border-left: 4px solid var(--rh-tan); border-radius: 8px; }
.board-item h3 { margin: 0 0 4px; }
.board-item p { margin: 0 0 4px; white-space: pre-wrap; }
.invoice-form .form-row { margin-bottom: 0; }
table.ledger { font-size: 0.9375rem; }
table.list .num, table.ledger .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
ul.setup-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
ul.setup-grid a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: var(--space-2); border: 1px solid var(--border-strong); border-radius: 10px; background: #fff; text-decoration: none; color: var(--rh-navy); box-shadow: 0 1px 0 #E3DACB, 0 6px 14px rgba(27, 42, 65, 0.06); }
ul.setup-grid strong { color: var(--rh-green); }
ul.setup-grid span { font-size: 0.9375rem; color: var(--rh-muted); }
.notice-ok { padding: var(--space-1) var(--space-2); border-left: 4px solid var(--rh-green); background: var(--action-quiet); }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--space-2); }
dl.facts dt { font-weight: 600; } dl.facts dd { margin: 0; }

/* ---- the directory (D-61) and onboarding (D-62) ---- */
ul.dir-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.dir-card a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--rh-navy); background: #fff; border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 0 #E3DACB, 0 2px 0 #DCD2C1, 0 10px 22px rgba(27, 42, 65, 0.10); transition: transform 180ms ease-out, box-shadow 180ms ease-out; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .dir-card a:hover { transform: translateY(-3px); box-shadow: 0 1px 0 #E3DACB, 0 2px 0 #DCD2C1, 0 3px 0 #D4C9B6, 0 18px 32px rgba(27, 42, 65, 0.16); } }
/* Every photo the same shape and size, whatever was uploaded. */
.dir-photo { display: block; aspect-ratio: 4 / 3; width: 100%; overflow: hidden; background: var(--surface-sunken); }
.dir-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dir-photo-none { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--font-serif); font-size: 3rem; color: var(--rh-tan); background: linear-gradient(160deg, #F6F0E5, #E9E0CF); }
.dir-body { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); }
.dir-body strong { font-family: var(--font-serif); font-size: 1.125rem; color: var(--rh-green); }
.dir-search { margin-bottom: var(--space-3); }
.dir-profile-grid { display: grid; gap: var(--space-3); }
@media (min-width: 48rem) { .dir-profile-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.dir-photo--large { border-radius: 12px; border: 6px solid var(--rh-paper); box-shadow: 0 2px 4px rgba(27, 42, 65, 0.10), 0 18px 40px rgba(27, 42, 65, 0.20); }
.dir-photo-edit { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 16rem) 1fr; align-items: start; margin-bottom: var(--space-2); }
.dir-photo-edit .dir-photo { border-radius: 10px; }
@media (max-width: 40rem) { .dir-photo-edit { grid-template-columns: 1fr; } }
.chosen-line { padding: var(--space-1) var(--space-2); border-left: 4px solid var(--rh-tan); background: #fff; }
.chosen { padding: var(--space-2); border: 1px solid var(--border-strong); border-radius: 10px; background: #fff; margin-bottom: var(--space-2); }
.onboarding { border-top: 4px solid var(--rh-tan); }
.onboarding-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.onboarding-head h2 { margin: 0; }
.progress { flex: 1; min-width: 8rem; height: 8px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.progress-bar { display: block; height: 100%; width: 0; background: var(--rh-green); border-radius: inherit; transition: width 400ms ease-out; }
ol.steps { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; gap: var(--space-1); }
.step { display: grid; grid-template-columns: 2rem 1fr auto; gap: var(--space-1) var(--space-2); align-items: center; padding: var(--space-1) 0; border-bottom: 1px solid var(--rh-rule); }
.step-mark { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--rh-cream); }
.step--done .step-mark { background: var(--rh-green); border-color: var(--rh-green); }
.step--done strong { color: var(--rh-muted); }
.step-body { display: flex; flex-direction: column; gap: 2px; }
.step-body .muted { font-size: 0.9375rem; }
@media (max-width: 40rem) { .step { grid-template-columns: 2rem 1fr; } .step > :last-child:not(.step-body) { grid-column: 2; } }

/* ---- support in a coach's portal (D-63): unmistakable while it lasts ---- */
.support-banner { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; justify-content: center; padding: var(--space-1) var(--space-2); background: var(--rh-navy); color: var(--rh-cream); font-size: 0.9375rem; }
.support-banner form { margin: 0; }
.support-banner button { background: var(--rh-cream); color: var(--rh-navy); border-color: var(--rh-cream); }

/* ---- movement that feels made (D-64): every button eases into its hover and out of it, with a soft lift and a
   shadow that grows under it; the press is quicker and settles. Page to page, and tab to tab in the portals, the
   page fades across slowly while the header stays still. All of it stops under reduced motion. ---- */
button, .button { transition: background-color 380ms cubic-bezier(0.22, 1, 0.36, 1), border-color 380ms cubic-bezier(0.22, 1, 0.36, 1),
  color 380ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
@media (hover: hover) { button:hover, .button:hover { box-shadow: 0 2px 4px rgba(27, 42, 65, 0.10), 0 10px 22px rgba(27, 42, 65, 0.14); transform: translateY(-2px); }
  .nav-signout button:hover { box-shadow: none; transform: none; } }
button:active, .button:active { transition-duration: 140ms; box-shadow: 0 1px 2px rgba(27, 42, 65, 0.14); transform: translateY(0) scale(0.985); }
.nav a { transition: color 320ms ease, border-color 320ms ease, background-color 320ms ease; }

@view-transition { navigation: auto; }
/* The whole view dissolves; only the header is held still. Nothing is moved from where the old page sat, so a page
   left scrolled half-way down fades out where it is instead of sweeping into place (D-65). */
.masthead { view-transition-name: rh-masthead; }
::view-transition-group(rh-masthead) { animation-duration: 600ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
::view-transition-old(root) { animation: rh-view-out 480ms cubic-bezier(0.4, 0, 0.6, 1) both; }
::view-transition-new(root) { animation: rh-page-in 900ms cubic-bezier(0.22, 1, 0.36, 1) 160ms both; }
@keyframes rh-view-out { to { opacity: 0; filter: blur(2px); } }
@keyframes rh-page-in { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } }
/* Browsers without page transitions still arrive gently. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(rh-masthead) { animation: none; }
  main { animation: none; }
  button, .button, .nav a { transition: none; }
  button:hover, .button:hover, button:active, .button:active { transform: none; }
}

.small { font-size: 0.875rem; }
.dir-hint { margin: calc(-1 * var(--space-2)) 0 var(--space-3); }
.foot-house a { color: inherit; text-decoration-color: var(--rh-rule); }

/* A note under a form sits clear of the button above it (sign in, join and the like). */
form.stack + p, form.stack + .muted { margin-top: var(--space-3); }

/* ---- the footer (D-66): two rows on a computer; on a phone the links and the house line each stack cleanly, the
   footer sits on the bottom edge with the phone's own safe area and no spare band below it. ---- */
.foot { padding: var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--space-1); }
.foot > p, .foot > nav { margin: 0; }
.foot-links, .foot-house { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; row-gap: 0.25rem; }
.foot-sep { color: var(--rh-rule); }
@media (max-width: 40rem) {
  main { padding-bottom: var(--space-3); }
  .foot { padding: var(--space-2) 0 calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); gap: var(--space-2); }
  .foot-links { column-gap: var(--space-2); row-gap: var(--space-1); }
  .foot-links .foot-sep { display: none; }
  .foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-house { flex-direction: column; gap: 0.125rem; }
  .foot-house .foot-sep { display: none; }
}

/* ---- on a phone the page change is slower still (D-66): a phone's screen fills the eye, so the same timing reads as a cut. ---- */
@media (max-width: 40rem) {
  ::view-transition-old(root) { animation-duration: 700ms; }
  ::view-transition-new(root) { animation-duration: 1300ms; animation-delay: 260ms; }
  ::view-transition-group(rh-masthead) { animation-duration: 900ms; }
}
/* Browsers that cannot carry a transition between pages (older iPhones among them) fade the new page in instead. */
html.rh-arrive main { animation: rh-page-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (max-width: 40rem) { html.rh-arrive main { animation-duration: 1200ms; } }
@media (prefers-reduced-motion: reduce) { html.rh-arrive main { animation: none; } }

/* ---- what just happened, said once at the top of the page (D-68) ---- */
.flash { width: min(60rem, 100%); box-sizing: border-box; margin: 0 auto var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius);
  background: #E6EFE8; color: var(--rh-green); border: 1px solid #B9D1C0; font-weight: 600; }
.flash::before { content: "✓"; margin-right: 0.5rem; }
@media (prefers-reduced-motion: no-preference) { .flash { animation: rh-flash-in 600ms cubic-bezier(0.22, 1, 0.36, 1) both; } }
@keyframes rh-flash-in { from { opacity: 0; transform: translateY(-6px); } }
.handoff .button { margin-top: var(--space-1); }

/* ---- a note under a button or a form always stands clear of it (D-68; the D-65 rule covered only the stacked forms) ---- */
main form + p, main form + .muted, main .button + p, main button + p, main .form-row + p, main .actions + p { margin-top: var(--space-2); }

/* ---- the register in parts: riders, horses, classes, accreditation, each its own card, with a jump row (D-68) ---- */
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-2); }
.page-head h1 { margin: 0; }
.jump { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.jump a { padding: 0.35rem 0.8rem; border: 1px solid var(--rh-rule); border-radius: 999px; text-decoration: none; color: var(--rh-green); background: var(--rh-paper); font-weight: 600; font-size: 0.9375rem;
  transition: border-color 320ms ease, background-color 320ms ease; }
@media (hover: hover) { .jump a:hover { border-color: var(--rh-green); background: #FFFFFF; color: var(--rh-green); } }
.register-part { margin-top: var(--space-3); scroll-margin-top: 6rem; }
.register-part > h2 { margin-bottom: var(--space-2); }
.register-part h3 { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--rh-rule); }
@media (prefers-reduced-motion: reduce) { .jump a { transition: none; } }