/* One style sheet for every page, in the style of the course slides: the same colours, the same three
   typefaces, square corners. The fonts are ours, served from /fonts/ with their OFL licences next to
   them, so no page asks anything of a third party. Only the latin subset: Italian needs nothing more. */

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/space-grotesk-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/space-grotesk-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

/* The slides' variables. Text colours checked for WCAG AA against the backgrounds they sit on, see the
   README: --fg, --muted, --accent and --warn on --bg and --surface, --on-accent on --accent. --line is
   never a text colour. */
:root {
  --bg: #0b0c09; --surface: #15170f; --line: #33372a; --fg: #f4f6ec; --muted: #b3b7a7;
  --accent: #a8ff00; --on-accent: #0a0a0a; --warn: #ffb454;
  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* The pages hide and show their parts with the attribute: no display set below may bring them back. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.5 var(--body); }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(30px, 7vw, 44px); line-height: 1.05; margin: 0 0 12px; }
p { margin: 0 0 12px; }

/* The header: the official logo, green on dark as the brand kit says, and the label of the courses, the
   same mono label as the title card of every course. */
.top { max-width: 1280px; margin: 0 auto; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.access .top { max-width: 440px; }
body.catalog .top { max-width: 960px; }
body.requirements .top, body.legal .top { max-width: 760px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--muted); text-decoration: none; }
.brand img { display: block; height: 20px; width: auto; }
.brand-label { padding-left: 12px; border-left: 1px solid var(--line); font: 500 12px/20px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }

/* Buttons: the accent for the action of the page, a plain outline for the rest. Never under 44 px. */
button, .watch, .button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px;
  border: 2px solid var(--accent); border-radius: 0; background: var(--accent); color: var(--on-accent);
  font: 600 16px/1.2 var(--body); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { button:hover, .watch:hover, .button:hover { background: #bfff40; border-color: #bfff40; } }
button:disabled { opacity: 0.6; cursor: default; }
.quiet { border-color: var(--line); background: transparent; color: var(--fg); }
@media (hover: hover) { .quiet:hover { background: var(--surface); border-color: var(--muted); } }

/* A message band, as on the slides: the accent for what is going on, orange for what went wrong. */
.band, #note, #status { margin: 0 0 12px; padding: 12px 16px; border-left: 4px solid var(--accent); background: var(--surface); color: var(--fg); }
#status:empty { display: none; }
#message { color: var(--warn); }
#message:empty { display: none; }

/* The sign-in page. */
body.access main { max-width: 440px; margin: 0 auto; padding: 24px 16px 48px; }
body.access h1 { margin-bottom: 28px; }
label { display: block; margin: 0 0 8px; color: var(--muted); font: 500 12px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
input {
  display: block; width: 100%; margin: 0 0 16px; padding: 11px 14px; min-height: 48px;
  border: 2px solid var(--line); border-radius: 0; background: var(--surface); color: var(--fg); font: 400 17px/1.3 var(--body);
}
input:focus { border-color: var(--accent); outline: none; }
#email-form button, #code-form button { width: 100%; }
#check { margin-top: 16px; min-height: 65px; }
#shown-code { margin-top: 16px; font: 500 14px/1.4 var(--mono); color: var(--accent); }
#shown-code:empty { display: none; }
body.access #message { margin-top: 16px; }

/* The catalog: one card per course. A course not bought shows its intro beside the text on a wide screen,
   above it on a phone. */
body.catalog main, body.requirements main { max-width: 960px; margin: 0 auto; padding: 24px 16px 48px; }
.who { color: var(--muted); margin: 0 0 28px; overflow-wrap: anywhere; }
.who:empty { display: none; }
.courses { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.course { min-width: 0; background: var(--surface); border: 2px solid var(--line); }
.course.ready { border-color: var(--accent); }
.card-body { padding: 20px; min-width: 0; }
.course h2 { font-size: clamp(22px, 4.6vw, 28px); line-height: 1.12; margin: 0 0 8px; overflow-wrap: anywhere; }
.facts { color: var(--muted); margin: 0 0 12px; }
.description { margin: 0 0 12px; }
.course .note { margin: 16px 0 0; padding: 12px 16px; border-left: 4px solid var(--warn); background: var(--bg); }
.actions { margin: 16px 0 0; display: flex; gap: 12px; flex-wrap: wrap; }
@media (min-width: 760px) {
  .course.intro-only:has(.intro) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .course.intro-only .card-body { padding: 24px; }
}
.intro { aspect-ratio: 16 / 9; background: #000; overflow: hidden; position: relative; }
.intro video, .intro img { display: block; width: 100%; height: 100%; object-fit: contain; }
.intro .note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 14px; border: 0; background: rgba(11, 12, 9, 0.88); color: var(--fg); }
.intro-start { display: block; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; background: #000; position: relative; }
@media (hover: hover) { .intro-start:hover { background: #000; } .intro-start:hover .intro-label { background: #bfff40; } }
.intro-label { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--accent); color: var(--on-accent); font: 600 15px/1.2 var(--body); }
.intro-label::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--on-accent); }
.more { margin: 32px 0 0; }

/* The purchase on a card: the price beside "Acquista". */
.offer { align-items: center; }
.price { font: 700 22px/1.2 var(--display); }
.full-price { color: var(--muted); font: 400 18px/1.2 var(--body); text-decoration-thickness: 1px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* A package below the cards: its courses, its price against the full one, "Acquista". */
.bundles:empty { display: none; }
.bundle { margin: 20px 0 0; padding: 20px; min-width: 0; background: var(--surface); border: 2px solid var(--accent); }
.bundle h2 { font-size: clamp(22px, 4.6vw, 28px); line-height: 1.12; margin: 0 0 12px; overflow-wrap: anywhere; }
/* A title in two parts (src/client/title.js) breaks between them, or inside a part too long for the line. */
.title-part { display: inline-block; max-width: 100%; }
.bundle-description, .product-description { margin: 0 0 12px; font-weight: 600; overflow-wrap: anywhere; }
.bundle-courses { margin: 0; padding-left: 22px; }
.bundle-courses li { margin: 0 0 4px; overflow-wrap: anywhere; }
.bundle-courses li::marker { color: var(--accent); }
@media (min-width: 760px) { .bundle { padding: 24px; } }

/* The invitation to the in-person course, at the foot of the catalog: a plain outline and a text link, never
   the accent fill of "Acquista". The link opens bodygon.com in a new tab, and says so. */
.in-person { margin: 32px 0 0; padding: 20px; min-width: 0; border: 1px solid var(--line); }
.in-person h2 { font-size: clamp(19px, 3.8vw, 22px); line-height: 1.2; margin: 0 0 8px; }
.in-person p { color: var(--muted); overflow-wrap: anywhere; }
.in-person strong { color: var(--fg); font-weight: 600; }
.external { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; }
.external-mark { flex: none; }
@media (min-width: 760px) { .in-person { padding: 24px; } }

/* The purchase page and the page after the payment: one column, as the sign-in. */
body.buy .top { max-width: 640px; }
.top .button { white-space: nowrap; }
body.buy main { max-width: 640px; margin: 0 auto; padding: 24px 16px 48px; }
.product { margin: 0 0 24px; padding: 20px; background: var(--surface); border: 2px solid var(--line); }
.product h2 { font-size: clamp(22px, 4.6vw, 28px); line-height: 1.12; margin: 0 0 8px; overflow-wrap: anywhere; }
.product .price { margin: 0; }
.product-courses { margin: 0 0 12px; padding-left: 22px; }
fieldset { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
legend { margin: 0 0 12px; padding: 0; font: 700 22px/1.2 var(--display); }
.draft { margin: 0 0 12px; padding: 10px 14px; border-left: 4px solid var(--warn); background: var(--surface); }
/* A checkbox or a radio with its text: the whole row is the target, never under 44 px. */
label.choice {
  display: flex; gap: 12px; align-items: flex-start; min-height: 44px; margin: 0 0 8px; padding: 10px 12px;
  border: 2px solid var(--line); background: var(--surface); color: var(--fg); font: 400 16px/1.45 var(--body);
  letter-spacing: normal; text-transform: none; cursor: pointer;
}
label.choice:has(input:checked) { border-color: var(--accent); }
label.choice input { flex: none; width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--accent); }
label.choice span { min-width: 0; overflow-wrap: anywhere; }
.business { margin-top: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 0 12px; }
.row > div { flex: 1 1 180px; min-width: 0; }
.row > .narrow { flex: 0 1 110px; }
#pay { width: 100%; }
.small { margin-top: 12px; color: var(--muted); font-size: 14px; }
body.buy .who { margin-bottom: 20px; }
body.buy #message { margin-top: 16px; }

/* The requirements page: plain text on the dark ground. */
body.requirements main { max-width: 760px; }
body.requirements h2 { font-size: 22px; line-height: 1.2; margin: 32px 0 8px; }
body.requirements ul { padding-left: 22px; margin: 0 0 12px; }
body.requirements li { margin: 0 0 4px; }
body.requirements li::marker { color: var(--accent); }
.back { margin: 0 0 20px; }

/* The legal pages, conditions of sale and privacy: long text in the requirements' column. A proposal not yet
   approved carries an orange tag, so a draft never reads as settled. */
body.legal main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
body.legal h2 { font-size: 22px; line-height: 1.2; margin: 36px 0 8px; }
body.legal h3 { margin: 24px 0 6px; font: 600 17px/1.3 var(--body); color: var(--fg); }
body.legal ul { padding-left: 22px; margin: 0 0 12px; }
body.legal li { margin: 0 0 6px; }
body.legal li::marker { color: var(--accent); }
body.legal main a { overflow-wrap: anywhere; }
.version { color: var(--muted); font: 500 13px/1.4 var(--mono); }
.tbc { display: inline-block; margin: 0 2px; padding: 1px 6px; background: var(--warn); color: var(--on-accent); font: 500 12px/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.table { overflow-x: auto; margin: 0 0 12px; }
.table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { color: var(--muted); font: 500 12px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
code { font: 500 14px/1.4 var(--mono); color: var(--accent); }

/* The footer on every page: the legal pages and the requirements, the seller and its VAT number. */
.foot { max-width: 960px; margin: 0 auto; padding: 20px 16px 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: none; }
.foot a[aria-current="page"] { color: var(--accent); }
@media (hover: hover) { .foot a:hover { color: var(--accent); text-decoration: underline; } }
.foot p { margin: 4px 0 0; }
body.legal .foot, body.requirements .foot { max-width: 760px; }
body.buy .foot { max-width: 640px; }
body.access .foot { max-width: 440px; }
body.player .foot { max-width: 1280px; }

/* The player. The stage never grows taller than the screen: in landscape on a phone a full-width 16:9 box
   would push the bottom of the picture, with subtitles and signature, below the fold. svh counts the
   browser toolbars as shown, so the whole frame stays visible either way; vh is the fallback. */
body.player { background: var(--bg); }
#stage { width: 100%; max-width: min(1280px, calc(100vh * 16 / 9)); margin: 0 auto; aspect-ratio: 16 / 9; background: #000; }
@supports (height: 100svh) {
  #stage { max-width: min(1280px, calc(100svh * 16 / 9)); }
}
video { display: block; width: 100%; height: 100%; background: #000; }

/* Under the stage, never above it: in landscape on a phone the stage already takes the whole height. */
.bar { max-width: 1280px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; border-bottom: 1px solid var(--line); }
.bar .brand { margin-right: 4px; }
/* The pictogram alone on a phone, so the logo and the links stay on one line; the whole logo from 600 px. */
.bar .brand img { height: 24px; width: auto; }
@media (min-width: 600px) { .bar .brand img { height: 20px; } }
#links { display: flex; flex-wrap: wrap; gap: 0 20px; }
#links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); font-weight: 600; text-decoration: none; }
/* "Scarica le slide" sits with the links, and looks like them: the bar holds no second accent. */
#links button { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--fg); font: 600 16px/1.2 var(--body); }
@media (hover: hover) { #links a:hover, #links button:hover { color: var(--accent); background: transparent; } }
/* With "Scarica le slide" the pictogram and the three items still fit one line at 390 px with tighter gaps. */
@media (max-width: 419px) { .bar { column-gap: 14px; } #links { column-gap: 14px; } }
#messages { max-width: 1280px; margin: 0 auto; padding: 16px 16px 0; }
#messages:has(#note[hidden]):has(#action[hidden]) { padding-top: 8px; }
#note { margin: 0 0 12px; }
#action { margin: 0 0 12px; }

/* Chapters under the player: one row each, minute and title, the one playing marked with the accent. A
   long title wraps inside its row instead of widening the page. */
#chapters { max-width: 1280px; margin: 0 auto; padding: 8px 16px 32px; }
#chapters h2 { margin: 0 0 8px; color: var(--accent); font: 500 13px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
#chapter-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
#chapter-list li { border-bottom: 1px solid var(--line); }
#chapter-list button {
  display: flex; gap: 16px; width: 100%; min-height: 48px; align-items: baseline; justify-content: flex-start; padding: 12px 12px 12px 13px;
  border: 0; border-left: 3px solid transparent; background: transparent; color: var(--fg); font: 400 16px/1.4 var(--body); text-align: left;
  -webkit-user-select: none; user-select: none;
}
@media (hover: hover) { #chapter-list button:hover { background: var(--surface); border-left-color: transparent; } }
#chapter-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#chapter-list .clock { flex: none; min-width: 4em; color: var(--muted); font: 500 14px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
#chapter-list .title { min-width: 0; overflow-wrap: anywhere; }
#chapter-list button[aria-current="true"], #chapter-list button[aria-current="true"]:hover { background: var(--surface); border-left-color: var(--accent); font-weight: 600; }
#chapter-list button[aria-current="true"] .clock { color: var(--accent); }