/*********************
  Styles ported from the jfolio Jekyll site.
  The old Sass variables are now CSS custom properties.
**********************/

/* Light palette. Dark overrides live in the two blocks below. */
:root {
  color-scheme: light;

  --bg-color: #f5f5f5;
  --text: #0b0c0c;
  --grey: #444444;
  --light-grey: #dddddd;
  --surface: #ffffff;
  --code-bg: #ffeb9d;
  --code-text: #0b0c0c;
  --highlight: #ffeb9d;
  --highlight-text: #0b0c0c;
  --yellow: #ffb81c;
  --yellow-dark: #eee2c0;
  --focus-text: #0b0c0c;
  --focus-underline: #0b0c0c;

  /* Pass and fail states, used by the accessibility discovery exercises */
  --ok: #216e39;
  --ok-bg: #e3f2e7;
  --bad: #a4262c;
  --bad-bg: #fbe9ea;

  /* The exercise demos sit on a fixed light surface whatever the theme, so
     that a contrast ratio is the same for everybody in the room */
  --demo-paper: #ffffff;
  --demo-ink: #0b0c0c;
  --demo-line: #c9c9c9;

  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Auto: follow the system, unless the reader has chosen light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg-color: #1b1b1b;
    --text: #ededed;
    --grey: #b8b8b8;
    --light-grey: #3a3a3a;
    --surface: #262626;
    --code-bg: #3a3a3a;
    --code-text: #ffffff;
    --yellow-dark: #4a4432;
    --ok: #6fd48a;
    --ok-bg: #1f3a27;
    --bad: #ff9ea3;
    --bad-bg: #3d2224;
  }
}

/* The reader has chosen dark */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-color: #1b1b1b;
  --text: #ededed;
  --grey: #b8b8b8;
  --light-grey: #3a3a3a;
  --surface: #262626;
  --code-bg: #3a3a3a;
  --code-text: #ffffff;
  --yellow-dark: #4a4432;
  --ok: #6fd48a;
  --ok-bg: #1f3a27;
  --bad: #ff9ea3;
  --bad-bg: #3d2224;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  height: 100%;
  overflow-y: scroll;
}

body {
  background: var(--bg-color);
  border: var(--light-grey) 1em solid;
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100%;
  position: relative;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5em;
}

iframe {
  display: block;
  border: 0;
}

/* Typography */
h1,
h2,
h3,
strong {
  font-weight: 500;
}

h1 {
  font-size: 3.75em;
  margin-top: 1.5em;
}

h2 {
  font-size: 2em;
  margin-top: 1.3em;
}

h3 {
  font-size: 1.5em;
  margin-top: 1.1em;
}

/* Lists with a class (cards, post list, tags) have their own styles */
p,
.prose ul:not([class]),
.prose ol:not([class]) {
  line-height: 1.5em;
  margin-top: 1em;
  font-size: 1.3em;
}

.prose li p {
  font-size: 1em;
}

p.lede,
/* the first paragraph of a blog post is always the lede */
.prose.post > p:first-of-type {
  font-size: 1.5em;
}

a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--text);
}

a:hover {
  text-decoration-thickness: 4px;
}

a:focus {
  background-color: var(--yellow);
  color: var(--focus-text);
  outline: none;
  text-decoration: none;
  box-shadow: 0 -2px var(--yellow), 0 4px var(--focus-underline);
}

a.active {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 4px;
}

.prose ul:not([class]),
.prose ol:not([class]) {
  margin-left: 1em;
}

span.highlight {
  background: var(--highlight);
  color: var(--highlight-text);
}

/* Skip link */
.skiplinks {
  left: -9999px;
  top: -9999px;
  position: absolute;
}

.skiplinks:active,
.skiplinks:focus {
  left: 0.5em;
  top: 0.5em;
  z-index: 99;
}

/* Structure */
.wrapper {
  max-width: 70em;
  margin: 0 auto;
  padding: 2em;
  display: grid;
}

header {
  margin: 0 0 2em 0;
}

header h1 {
  max-width: 30ch;
  margin-top: 0;
}

header h1 span {
  color: var(--grey);
  font-weight: 400;
}

/* Navigation */
nav.navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8em;
}

.site-name {
  margin-top: 1em;
  font-size: 1.3em;
  font-weight: 700;
  text-transform: uppercase;
}

nav.navigation ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 6em;
  margin-top: 1em;
  font-size: 1.3em;
}

nav.navigation li a {
  display: block;
  padding: 0.5em;
}

/* Page / post content */
.prose {
  padding: 2em 0 4em 0;
}

/* Text is kept to a readable measure; figures can go full width */
.prose > :not(figure) {
  max-width: 32em;
}

.prose > :first-child {
  margin-top: 0;
}

.prose figure {
  margin: 2em 0 0 0;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--code-bg);
  color: var(--code-text);
  padding: 0 0.25em;
}

.prose blockquote,
.inset-text {
  padding: 1em 1em 1em 2em;
  border-left: var(--light-grey) 1em solid;
  margin: 2em 0 2em 0;
}

.prose blockquote p,
.inset-text p {
  margin: 0;
}

figcaption {
  padding: 1em;
  background: var(--bg-color);
  line-height: 1.5em;
}

a.back-arrow {
  position: relative;
  display: inline-block;
  margin-top: 2em;
  font-size: 1.3em;
}

a.back-arrow .icon {
  position: absolute;
  top: -0.4em;
  width: 2em;
  fill: var(--grey);
}

a.back-arrow .arrow-text {
  padding-left: 2em;
}

/* Home page cards */
ul.cards {
  list-style: none;
  margin: 4em 0 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
  column-gap: 1.5em;
  row-gap: 2.5em;
}

ul.cards li {
  border: 0;
  position: relative;
}

ul.cards li h2 {
  font-size: 1em;
  font-weight: 400;
  margin: 0;
  line-height: 1.5em;
  max-width: 60ch;
}

ul.cards li .text {
  padding: 0.5em 0 0 0;
}

ul.cards li a {
  color: var(--grey);
}

/* Makes the whole card clickable */
ul.cards li a::after {
  content: "";
  position: absolute;
  inset: 0;
}

ul.cards li a:hover {
  text-decoration-thickness: 2px;
}

ul.cards li a:focus {
  outline: none;
  text-decoration: underline;
  background-color: transparent;
  box-shadow: none;
}

ul.cards li:focus-within,
ul.cards li:hover {
  box-shadow: 0 0 0 4px var(--yellow);
  border-radius: 0.5em;
}

ul.cards li:focus-within a:focus {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Posts */
hr {
  width: 11em;
  margin: 2em 0 0 0;
  border: 0;
  border-top: var(--light-grey) 8px solid;
}

.post hr {
  border-top: var(--yellow-dark) 1px solid;
}

.date {
  color: var(--grey);
}

/* The Writing list isn't body copy, so it isn't held to the prose measure */
.prose > .post-list {
  max-width: none;
}

.post-list {
  list-style: none;
}

.post-list > li {
  padding: 1em 0 1em 0;
}

.post-list > li h2 {
  margin: 0;
}

.post-list .date {
  font-size: 1.1em;
  margin-top: 0.5em;
}

.tag_list {
  list-style: none;
  margin-top: 0.75em;
}

.tag_list li {
  padding: 0.2em 0.5em 0.2em 0.5em;
  margin-right: 0.2em;
  display: inline-block;
  color: var(--grey);
  border: var(--light-grey) 1px solid;
  font-size: 1em;
}

header .tag_list li {
  font-size: 0.875em;
}

/* CV: text inside the panels matches the blog measure (32em of 1.3em text),
   so the panel itself is that plus its own 30px side padding */
.prose > article.cv {
  max-width: calc(41.6rem + 60px);
}

article.cv section {
  background-color: var(--surface);
  margin-bottom: 80px;
  margin-top: 50px;
  padding: 60px 30px 30px 30px;
  position: relative;
}

article.cv section h2 {
  display: inline-block;
  position: absolute;
  padding: 10px 70px 10px 20px;
  background: var(--highlight);
  color: var(--highlight-text);
  margin: -90px 0 0 -30px;
}

article.cv ul {
  margin-left: 40px;
}

article.cv h3 {
  margin-top: 40px;
}

article.cv h3.first {
  margin-top: 0;
}

article.cv .lede {
  margin: 0;
}

/* Dark mode toggle: a button group of radios, shown only when JS runs */
.theme-toggle {
  border: 0;
  margin: 0;
}

/* Floated so the legend shares the line with the buttons */
.theme-toggle legend {
  float: left;
  padding: 0.5em 0.75em 0.5em 0;
  color: var(--grey);
}

.theme-toggle__options {
  display: inline-flex;
  border: 1px solid var(--light-grey);
  border-radius: 0.3em;
  overflow: hidden;
}

/* Visually hidden, but still focusable and announced */
.theme-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.theme-toggle label {
  display: block;
  padding: 0.5em 1em;
  cursor: pointer;
  border-right: 1px solid var(--light-grey);
}

.theme-toggle label:last-of-type {
  border-right: 0;
}

.theme-toggle input:checked + label {
  background: var(--text);
  color: var(--bg-color);
  font-weight: 500;
}

.theme-toggle input:focus-visible + label {
  background: var(--yellow);
  color: var(--focus-text);
  box-shadow: inset 0 -4px var(--focus-underline);
}

/* Footer */
footer {
  border-top: var(--light-grey) 1px solid;
  padding: 2em 0 2em 0;
  margin-top: 5em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1em 2em;
}

footer ul {
  list-style: none;
  font-size: 1em;
  line-height: 1.5em;
  margin: 0;
}

.footer-legal {
  flex-basis: 100%;
  margin-top: 1.5em;
  font-size: 1em;
  color: var(--grey);
}

footer li {
  display: inline-block;
  margin-right: 1em;
}

/* Small screens */
@media screen and (max-width: 631px) {
  .prose { padding: 2em 0 2em 0; }
  h1 { font-size: 2em; }
  nav.navigation ul { margin-bottom: 2em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1.2em; }
  p, .prose ul:not([class]), .prose ol:not([class]), a.back-arrow, nav.navigation ul, .site-name { font-size: 1.125em; }
  header { margin: 0; }
  body { border: 0; }
  .wrapper { padding: 1em; }
  .prose blockquote, .inset-text { padding-left: 1em; }
  nav.navigation li:first-child a { margin-left: -0.5em; }
  footer { display: block; }
  footer li { display: block; }
  .theme-toggle { margin-top: 1.5em; }
}

/*********************
  Accessibility discovery exercises (/accessibility-discovery/).

  These build on the custom properties above, so the exercises inherit the
  site's palette, typography, focus styles and dark mode.

  Anything inside a .demo--broken container, or anything marked data-barrier,
  is deliberately poor: that is the exercise. Those styles are scoped to their
  container so they can never leak into the page chrome.
**********************/

/* ---------- Page furniture ---------- */

.eyebrow {
  font-size: 1.1em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey);
  margin: 1em 0 0.5em 0;
}

.eyebrow a {
  color: inherit;
}

header .eyebrow + h1 {
  margin-top: 0;
}

/* Activities, briefs and nav are furniture, not body copy, so they are not
   held to the 32em prose measure. */
.prose.exercise > .brief,
.prose.exercise > .activity,
.prose.exercise > .debrief,
.prose.exercise > .exercise-nav,
.prose.exercise > .callout {
  max-width: none;
}

.prose.exercise .brief p,
.prose.exercise .brief li,
.prose.exercise .debrief p,
.prose.exercise .debrief li,
.prose.exercise .callout p {
  max-width: 34em;
}

/* ---------- The scenario and task brief ---------- */

.brief {
  background: var(--surface);
  border: var(--light-grey) 1px solid;
  padding: 3.5em 1.5em 1.5em 1.5em;
  margin: 0 0 3em 0;
  position: relative;
}

.brief h2 {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.3em;
  margin: 0;
  padding: 0.5em 3em 0.5em 1em;
  background: var(--highlight);
  color: var(--highlight-text);
}

.brief h3 {
  font-size: 1.5em;
  margin-top: 1.5em;
}

.brief__tasks {
  margin: 0.75em 0 0 1.2em;
}

.brief__tasks li {
  font-size: 1.3em;
  line-height: 1.5em;
  margin-top: 0.5em;
}

.brief__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1em 2.5em;
  margin-top: 2em;
  padding-top: 1.5em;
  border-top: var(--light-grey) 1px solid;
}

.brief__meta dt {
  color: var(--grey);
  font-size: 0.95em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.brief__meta dd {
  margin-top: 0.25em;
  font-weight: 500;
  max-width: 22em;
}

/* ---------- Activity shell ---------- */

.activity {
  margin: 0 0 3em 0;
  border: var(--light-grey) 2px solid;
  border-radius: 0.5em;
  overflow: hidden;
}

.activity__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 1em 1.25em;
  background: var(--surface);
  border-bottom: var(--light-grey) 2px solid;
}

.activity__bar h2,
.activity__bar h3 {
  font-size: 1.2em;
  margin: 0;
}

.activity__body {
  padding: 1.5em 1.25em;
}

.activity__body > :first-child {
  margin-top: 0;
}

.activity__footer {
  padding: 1.25em;
  border-top: var(--light-grey) 2px solid;
  background: var(--surface);
}

.activity__footer > :first-child {
  margin-top: 0;
}

/* ---------- Buttons and fields (the page's own controls) ---------- */

.btn {
  font-family: inherit;
  font-size: 1.1em;
  line-height: 1.4;
  padding: 0.6em 1.2em;
  min-height: 44px;
  background: var(--text);
  color: var(--bg-color);
  border: 2px solid var(--text);
  border-radius: 0.3em;
  cursor: pointer;
}

.btn--secondary {
  background: transparent;
  color: var(--text);
}

.btn:hover {
  opacity: 0.9;
}

.btn:focus-visible {
  outline: none;
  background: var(--yellow);
  color: var(--focus-text);
  border-color: var(--focus-underline);
  box-shadow: inset 0 -4px var(--focus-underline);
}

.field {
  margin-top: 1.5em;
  max-width: 24em;
}

.field label {
  display: block;
  font-size: 1.1em;
  font-weight: 500;
}

.field .hint {
  display: block;
  font-size: 1.05em;
  line-height: 1.45;
  color: var(--grey);
  margin-top: 0.25em;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
  font-family: inherit;
  font-size: 1.1em;
  margin-top: 0.4em;
  padding: 0.5em;
  min-height: 44px;
  width: 100%;
  background: var(--bg-color);
  color: var(--text);
  border: 2px solid var(--text);
  border-radius: 0.2em;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 0;
  box-shadow: 0 4px var(--focus-underline);
}

/* ---------- Broken / fixed switch, styled like the site's theme toggle ---------- */

.mode-toggle {
  border: 0;
  margin: 0;
  padding: 0;
}

.mode-toggle legend {
  float: left;
  padding: 0.5em 0.75em 0.5em 0;
  color: var(--grey);
}

.mode-toggle__options {
  display: inline-flex;
  border: 1px solid var(--light-grey);
  border-radius: 0.3em;
  overflow: hidden;
}

.mode-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mode-toggle label {
  display: block;
  padding: 0.6em 1em;
  cursor: pointer;
  border-right: 1px solid var(--light-grey);
}

.mode-toggle label:last-of-type {
  border-right: 0;
}

.mode-toggle input:checked + label {
  background: var(--text);
  color: var(--bg-color);
  font-weight: 500;
}

.mode-toggle input:focus-visible + label {
  background: var(--yellow);
  color: var(--focus-text);
  box-shadow: inset 0 -4px var(--focus-underline);
}

/* ---------- Feedback ---------- */

.result {
  margin-top: 1.25em;
  padding: 0.9em 1em;
  border-left: 0.5em solid var(--light-grey);
  background: var(--surface);
  max-width: 40em;
}

.result:empty {
  display: none;
}

.result p {
  font-size: 1.1em;
  margin-top: 0.5em;
}

.result > :first-child {
  margin-top: 0;
}

.result--pass {
  border-left-color: var(--ok);
  background: var(--ok-bg);
}

.result--fail {
  border-left-color: var(--bad);
  background: var(--bad-bg);
}

.tally {
  font-size: 1.1em;
  margin-top: 1em;
  color: var(--grey);
}

.tally strong {
  color: var(--text);
  font-size: 1.2em;
}

/* ---------- Debrief ---------- */

.debrief {
  margin: 0 0 3em 0;
  border-top: var(--light-grey) 1px solid;
  padding-top: 0.5em;
}

.debrief summary {
  font-size: 1.3em;
  font-weight: 500;
  padding: 0.75em 0;
  cursor: pointer;
}

.debrief summary:focus-visible {
  outline: none;
  background: var(--yellow);
  color: var(--focus-text);
  box-shadow: 0 -2px var(--yellow), 0 4px var(--focus-underline);
}

.debrief[open] summary {
  border-bottom: var(--light-grey) 1px solid;
}

.callout {
  background: var(--surface);
  border-left: 0.5em solid var(--yellow);
  padding: 1em 1.25em;
  margin: 2em 0;
}

.callout h2,
.callout h3 {
  font-size: 1.4em;
  margin: 0;
}

/* ---------- Exercise navigation ---------- */

.exercise-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1em 2em;
  margin-top: 3em;
  padding-top: 1.5em;
  border-top: var(--light-grey) 1px solid;
}

.exercise-nav .back-arrow {
  margin-top: 0;
}

.next-link {
  font-size: 1.3em;
}

/* ---------- Hub page cards ---------- */

ul.exercise-list {
  list-style: none;
  margin: 2em 0 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18em, 1fr));
  gap: 1.5em;
}

.prose > ul.exercise-list {
  max-width: none;
}

ul.exercise-list li {
  position: relative;
  background: var(--surface);
  border: var(--light-grey) 1px solid;
  border-radius: 0.5em;
  padding: 1.25em;
}

ul.exercise-list li h2 {
  font-size: 1.3em;
  margin: 0.4em 0 0 0;
}

ul.exercise-list li p {
  font-size: 1.05em;
  margin-top: 0.6em;
}

ul.exercise-list .exercise-number {
  color: var(--grey);
  font-size: 0.95em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

ul.exercise-list li a::after {
  content: "";
  position: absolute;
  inset: 0;
}

ul.exercise-list li:focus-within,
ul.exercise-list li:hover {
  box-shadow: 0 0 0 4px var(--yellow);
}

ul.exercise-list li a:focus {
  outline: none;
  background: transparent;
  box-shadow: none;
  text-decoration-thickness: 4px;
}

/* ---------- Shared demo surface ---------- */

.demo {
  background: var(--demo-paper);
  color: var(--demo-ink);
  border: var(--demo-line) 1px solid;
  border-radius: 0.4em;
  padding: 1.5em;
  max-width: 34em;
}

.demo h2,
.demo h3,
.demo h4,
.demo p,
.demo li,
.demo label {
  color: var(--demo-ink);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

@media screen and (max-width: 631px) {
  .brief { padding: 3.5em 1em 1.25em 1em; }
  .brief__tasks li { font-size: 1.125em; }
  .brief h3 { font-size: 1.25em; }
  .callout h2, .callout h3 { font-size: 1.2em; }
  .next-link { font-size: 1.125em; }
  .demo { padding: 1em; }
}

/* ---------- 1. Low contrast ---------- */

.demo-note {
  font-size: 0.95em;
  color: var(--grey);
  margin: 0;
  max-width: 24em;
}

.demo--contrast {
  --demo-contrast-ink: #d2d2d2;
  background: #ffffff;
  color: var(--demo-contrast-ink);
}

.demo--contrast h3,
.demo--contrast p,
.demo--contrast a {
  color: var(--demo-contrast-ink);
}

.demo--contrast h3 {
  margin-top: 0.3em;
  font-size: 1.4em;
}

.demo--contrast p {
  font-size: 1.05em;
  margin-top: 0.75em;
}

.demo--contrast__kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9em !important;
  margin-top: 0 !important;
}

.demo--contrast__code {
  font-family: var(--font-mono);
  font-size: 1.6em !important;
  letter-spacing: 0.12em;
  margin-top: 0.6em !important;
}

.demo--contrast__small {
  font-size: 0.85em !important;
}

.demo--contrast a:focus {
  background: var(--yellow);
  color: #0b0c0c;
  box-shadow: 0 -2px var(--yellow), 0 4px #0b0c0c;
}

.contrast-controls {
  margin-top: 2em;
}

.contrast-controls .field {
  max-width: 28em;
}

input[type="range"] {
  width: 100%;
  margin-top: 0.75em;
  accent-color: var(--text);
  height: 44px;
}

input[type="range"]:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}

.contrast-readout {
  margin-top: 0.5em;
  font-size: 1.1em;
}

.contrast-readout__ratio {
  font-weight: 700;
  font-size: 1.3em;
  font-family: var(--font-mono);
  margin-right: 0.5em;
}

.contrast-readout__verdict {
  color: var(--grey);
}

.contrast-controls p,
#contrast-form p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  margin-top: 1.25em;
}

/* ---------- Controls sitting on the light demo surface ---------- */

.demo .field input[type="text"],
.demo .field input[type="email"],
.demo .field input[type="tel"],
.demo .field input[type="number"],
.demo .field select,
.demo .field textarea {
  background: #ffffff;
  color: var(--demo-ink);
  border-color: var(--demo-ink);
}

.demo .hint {
  color: #4d4d4d;
}

.demo .btn {
  background: var(--demo-ink);
  color: #ffffff;
  border-color: var(--demo-ink);
}

.demo .btn--secondary {
  background: transparent;
  color: var(--demo-ink);
}

.demo .btn:focus-visible {
  background: var(--yellow);
  color: #0b0c0c;
  border-color: #0b0c0c;
  box-shadow: inset 0 -4px #0b0c0c;
}

/* ---------- 2. Form controls: the version with the barrier ---------- */

.demo--form-broken {
  font-size: 0.95em;
}

.demo--form-broken h3 {
  margin-top: 0;
  font-size: 1.3em;
}

.demo--form-broken input[type="text"] {
  display: block;
  font-family: inherit;
  font-size: 0.95em;
  width: 100%;
  margin-top: 0.8em;
  padding: 0.35em 0.4em;
  background: #ffffff;
  color: var(--demo-ink);
  border: 1px solid #b7b7b7;
  border-radius: 2px;
}

/* Deliberately faint: the only description of the field, in text that is
   hard to read and gone as soon as you type. */
.demo--form-broken ::placeholder {
  color: #b0b0b0;
  opacity: 1;
}

.demo--form-broken input:focus {
  outline: 1px dotted #999999;
  outline-offset: 0;
}

.bf-dob-text {
  font-size: 0.8em !important;
  color: #b0b0b0 !important;
  margin: 1em 0 0 0 !important;
}

.bf-dob {
  display: flex;
  gap: 0.4em;
}

.bf-dob input[type="text"] {
  width: 3em;
}

.bf-dob input#bf-year {
  width: 4.5em;
}

/* Error state carried by colour alone, which is the point. */
.demo--form-broken .bf-invalid {
  border: 2px solid #d4351c;
}

.bf-error {
  margin-top: 1.2em !important;
  font-size: 0.9em !important;
  color: #d4351c !important;
}

.bf-actions {
  display: flex;
  gap: 0.5em;
  margin-top: 1.5em;
}

/* Clear and Submit: same size, same colour, Clear first. */
.bf-btn {
  font-family: inherit;
  font-size: 0.95em;
  padding: 0.4em 0.9em;
  background: #e7e7e7;
  color: #3d3d3d;
  border: 1px solid #b7b7b7;
  border-radius: 2px;
  cursor: pointer;
}

.bf-btn:focus {
  outline: 1px dotted #999999;
}

/* ---------- 2. Form controls: the accessible version ---------- */

.demo--form-fixed h3 {
  margin-top: 0;
  font-size: 1.3em;
}

.form-intro {
  margin-top: 1em;
  color: #4d4d4d;
}

.error-summary {
  margin-top: 1.5em;
  padding: 1em 1.25em;
  border: 4px solid #d4351c;
}

.error-summary:focus {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.error-summary h4 {
  margin: 0;
  font-size: 1.2em;
  color: #d4351c;
}

.error-summary ul {
  margin: 0.75em 0 0 1.2em;
}

.error-summary li {
  margin-top: 0.4em;
}

.error-summary a {
  color: #d4351c;
  font-weight: 500;
}

.field--fieldset {
  border: 0;
  padding: 0;
}

.field--fieldset legend {
  font-size: 1.1em;
  font-weight: 500;
  padding: 0;
}

.field-error {
  margin-top: 0.4em !important;
  font-weight: 500;
  color: #d4351c !important;
}

/* The error is repeated as a red bar beside the field, not colour alone. */
.field--error {
  border-left: 4px solid #d4351c;
  padding-left: 1em;
}

.ff-dob {
  display: flex;
  gap: 0.75em;
  margin-top: 0.5em;
}

.date-part label {
  font-weight: 400;
  font-size: 1em;
}

.date-part input {
  width: 3.5em;
}

.date-part--year input {
  width: 5em;
}

.input--short {
  max-width: 9em;
}

/* ---------- 3. Keyboard only ---------- */

.demo--keyboard h3 {
  margin-top: 0;
  font-size: 1.3em;
}

.kb-label {
  font-weight: 500;
  margin-top: 1.5em !important;
}

.kb-rooms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  margin-top: 0.5em;
}

/* A div dressed up as a card. Looks like a control, is not one. */
.kb-card {
  flex: 1 1 10em;
  padding: 0.75em;
  border: 2px solid var(--demo-line);
  border-radius: 0.3em;
  cursor: pointer;
}

.kb-card:hover {
  border-color: #6b6b6b;
}

.kb-card.is-selected {
  border-color: #0b0c0c;
  background: #f0f0f0;
}

.kb-card__name {
  display: block;
  font-weight: 500;
}

.kb-card__meta {
  display: block;
  font-size: 0.9em;
  color: #4d4d4d;
}

.kb-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-top: 0.5em;
  padding: 0.6em 0.75em;
  max-width: 12em;
  border: 2px solid var(--demo-line);
  border-radius: 0.3em;
  cursor: pointer;
}

.kb-options {
  max-width: 12em;
  border: 2px solid var(--demo-line);
  border-top: 0;
}

.kb-option {
  padding: 0.6em 0.75em;
  cursor: pointer;
}

.kb-option:hover {
  background: #f0f0f0;
}

.kb-check {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.5em;
  cursor: pointer;
}

.kb-check__box {
  width: 1.2em;
  height: 1.2em;
  border: 2px solid var(--demo-line);
  border-radius: 0.2em;
  display: inline-block;
}

.kb-check.is-checked .kb-check__box {
  background: #0b0c0c;
  border-color: #0b0c0c;
}

/* The one real control in the broken version, with its focus ring removed. */
.kb-submit {
  font-family: inherit;
  font-size: 1em;
  margin-top: 1.5em;
  padding: 0.6em 1.2em;
  background: #0b0c0c;
  color: #ffffff;
  border: 2px solid #0b0c0c;
  border-radius: 0.3em;
  cursor: pointer;
}

.demo--keyboard-broken .kb-submit:focus,
.demo--keyboard-broken .kb-submit:focus-visible {
  outline: none;
}

.kb-radio {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin-top: 0.75em;
}

.kb-radio input {
  width: 1.4em;
  height: 1.4em;
  accent-color: #0b0c0c;
  flex: none;
}

.kb-radio input:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #0b0c0c;
}

.kb-radio label {
  font-size: 1.05em;
}

.kb-tools {
  margin-top: 2em;
  padding-top: 1.5em;
  border-top: var(--light-grey) 1px solid;
}

.kb-focus {
  font-family: var(--font-mono);
  font-size: 1em !important;
  padding: 0.75em 1em;
  background: var(--surface);
  border: var(--light-grey) 1px solid;
  border-radius: 0.3em;
  max-width: 34em;
}

/* ---------- 4. Colour as the only cue ---------- */

.colour-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.colour-stage {
  margin-top: 2em;
}

.input--medium {
  max-width: 28em;
}

.demo--orders {
  max-width: 40em;
  padding: 1.25em;
}

table.orders {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95em;
}

table.orders caption {
  text-align: left;
  font-weight: 500;
  font-size: 1.15em;
  padding-bottom: 0.75em;
}

table.orders th,
table.orders td {
  text-align: left;
  padding: 0.6em 0.75em 0.6em 0;
  border-bottom: 1px solid var(--demo-line);
  vertical-align: middle;
}

table.orders thead th {
  border-bottom: 2px solid var(--demo-ink);
  font-weight: 500;
}

table.orders tbody th {
  font-family: var(--font-mono);
  font-weight: 400;
}

.dot {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  background: var(--dot-colour, #999999);
}

.dot--green { --dot-colour: #22a43a; }
.dot--amber { --dot-colour: #f0a30a; }
.dot--red { --dot-colour: #e0392b; }

.orders-key {
  margin-top: 1em !important;
  font-size: 0.9em !important;
  color: #4d4d4d !important;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.status {
  white-space: nowrap;
}

.status .status-icon {
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: -0.1em;
  fill: currentColor;
}

/* Text first, then colour, then shape. Each one works on its own. */
.status--green { color: #1a7a2c; }
.status--amber { color: #7a5200; }
.status--red { color: #b3241a; }

.status > span {
  font-weight: 500;
}

/* ---------- 5. What a screen reader has to work with ---------- */

.sr-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19em, 1fr));
  gap: 2em;
  margin-top: 1em;
}

.sr-column-heading {
  font-size: 1.1em !important;
  margin: 0 0 0.75em 0 !important;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.demo--shop {
  max-width: none;
  padding: 0;
  overflow: hidden;
}

.shop-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75em 1em;
  background: #22303c;
  color: #ffffff;
}

.shop-banner__logo {
  font-weight: 700;
  letter-spacing: 0.15em;
  font-size: 0.9em;
}

.shop-icon {
  width: 1.5em;
  height: 1.5em;
  border: 2px solid #ffffff;
  border-radius: 0.2em;
}

.shop-hero {
  height: 5em;
  background: repeating-linear-gradient(135deg, #d8dee3, #d8dee3 8px, #cdd4da 8px, #cdd4da 16px);
}

.shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  padding: 1em;
}

.shop-card__image {
  height: 5em;
  background: repeating-linear-gradient(135deg, #e2e2e2, #e2e2e2 8px, #d6d6d6 8px, #d6d6d6 16px);
  border-radius: 0.2em;
}

.shop-card__price {
  margin-top: 0.6em !important;
  font-weight: 700;
  font-size: 0.95em !important;
}

.shop-card__link {
  margin-top: 0.2em !important;
  font-size: 0.9em !important;
  color: #1c4f8b !important;
  text-decoration: underline;
}

/* An image of text: the number is drawn into a graphic, not written. */
.shop-returns {
  margin: 0 1em 1em 1em;
  padding: 1em;
  background: #f0e6d2;
  border: 1px dashed #b09a6e;
  text-align: center;
  font-size: 0.9em;
  line-height: 1.5;
}

.shop-returns__text strong {
  font-size: 1.2em;
}

.shop-footnote {
  padding: 0 1em 1em 1em;
  font-size: 0.9em !important;
  margin: 0 !important;
}

.sr-player {
  background: var(--surface);
  border: var(--light-grey) 2px solid;
  border-radius: 0.4em;
  padding: 1.25em;
}

.sr-position {
  margin: 0 !important;
  font-size: 0.95em !important;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sr-utterance {
  margin-top: 0.5em !important;
  font-size: 1.25em !important;
  line-height: 1.5;
  min-height: 3.5em;
  font-family: var(--font-mono);
}

.sr-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-top: 1.25em;
}

.sr-controls .btn {
  font-size: 1em;
}

.sr-transcript {
  margin-top: 1.5em;
  padding: 1.25em;
  border: var(--light-grey) 1px solid;
  border-radius: 0.4em;
}

.sr-transcript h4 {
  margin: 0;
  font-size: 1.1em;
  font-weight: 500;
}

.sr-transcript ul {
  margin: 0.75em 0 0 1.2em;
}

.sr-transcript li {
  font-size: 1.05em;
  line-height: 1.6;
}

.sr-transcript .demo-note {
  margin-top: 1em;
}

/* ---------- 6. Target size ---------- */

.demo--checkout {
  position: relative;
  max-width: 24em;
}

.demo--checkout h3 {
  margin-top: 0;
  font-size: 1.3em;
}

.checkout-price {
  margin-top: 0.3em !important;
  color: #4d4d4d !important;
}

.checkout-total {
  margin-top: 1.25em !important;
  font-weight: 700;
}

/* A banner that sits over the thing you came to do, with a 12 pixel close. */
.cookie-bar {
  position: relative;
  margin: -1.5em -1.5em 1.5em -1.5em;
  padding: 0.9em 2.5em 0.9em 1em;
  background: #22303c;
  color: #ffffff;
  font-size: 0.85em;
}

.cookie-bar p {
  margin: 0 !important;
  font-size: 1em !important;
  color: #ffffff !important;
  line-height: 1.5;
}

.cookie-close {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  width: 12px;
  height: 12px;
  padding: 0;
  line-height: 1;
  font-size: 12px;
  background: transparent;
  color: #ffffff;
  border: 0;
  cursor: pointer;
}

.cookie-close:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.cookie-bar--fixed {
  background: #22303c;
  padding: 1.25em;
  font-size: 1em;
}

.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  margin-top: 1em;
}

.cookie-bar--fixed .btn {
  background: #ffffff;
  color: #22303c;
  border-color: #ffffff;
  font-size: 1em;
}

.cookie-bar--fixed .btn--secondary {
  background: transparent;
  color: #ffffff;
}

.qty {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 1.25em;
}

.qty__label {
  margin-right: 0.5em;
  font-size: 0.85em;
  color: #4d4d4d;
}

/* 16 by 16, two pixels apart. */
.qty__btn {
  width: 16px;
  height: 16px;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  background: #e7e7e7;
  color: #0b0c0c;
  border: 1px solid #b7b7b7;
  border-radius: 2px;
  cursor: pointer;
}

.qty__btn:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.qty__value {
  display: inline-block;
  min-width: 2em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.qty--fixed {
  gap: 0.75em;
  align-items: flex-end;
}

.qty--fixed .field {
  margin-top: 0;
  max-width: 6em;
}

.qty__btn-big {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.2em;
  padding: 0.5em;
}

.checkout-actions {
  display: flex;
  gap: 4px;
  margin-top: 1.5em;
}

/* Same size, same colour, four pixels apart. */
.checkout-btn {
  font-family: inherit;
  font-size: 0.85em;
  padding: 0.35em 0.7em;
  background: #22303c;
  color: #ffffff;
  border: 1px solid #22303c;
  border-radius: 2px;
  cursor: pointer;
}

.checkout-btn:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

/* Pay first and prominent, cancel clearly secondary and well away from it. */
.checkout-actions--fixed {
  display: block;
  margin-top: 2em;
}

.checkout-cancel {
  display: inline-block;
  margin-top: 1.5em;
  padding: 0.6em 0;
  min-height: 44px;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 1.05em;
  color: var(--demo-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.checkout-cancel:focus-visible {
  outline: none;
  background: var(--yellow);
  color: #0b0c0c;
  box-shadow: 0 -2px var(--yellow), 0 4px #0b0c0c;
}

ul.measure-list {
  list-style: none;
  margin: 0.75em 0 0 0;
}

ul.measure-list li {
  font-size: 1.05em;
  padding: 0.25em 0;
  font-family: var(--font-mono);
}

/* ---------- Hub page ---------- */

.exercise-barrier {
  margin-top: 0.75em !important;
  font-size: 0.95em !important;
  color: var(--grey);
  border-top: var(--light-grey) 1px solid;
  padding-top: 0.75em;
}