/* Intricate Events, site shell and base components.
   Tokens live in variables.css. Nothing here hardcodes a value that has a token.
   Root is 12px per CSS.md; public body copy is 1.33rem (16px) per DESIGN.md. */

html {
  font-size: 12px;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 1.33rem;
  line-height: 1.5;
  color: var(--dark);
  background: var(--paper);
}

main {
  flex: 1 0 auto;
}

/* ---------- Type ---------- */

h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin: 0 0 var(--size-6) 0;
}

h1 {
  font-size: 2.67rem;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 1.83rem;
  font-weight: 700;
  line-height: 1.25;
}

h3 {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.3;
}

h4 {
  font-size: 1.33rem;
  font-weight: 700;
}

a {
  color: var(--primary-dark);
}

a:hover {
  color: var(--primary-darker);
}

.lede {
  font-size: 1.5rem;
  color: var(--graphite);
}

.mono {
  font-family: var(--font-mono);
}

.mono-medium {
  font-weight: 500;
}

/* Date stamp: mono, uppercase, letter-spaced. */
.stamp {
  font-family: var(--font-mono);
  font-size: 1.08rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Meta line: mono, graphite, middle-dot separated. */
.meta {
  font-family: var(--font-mono);
  font-size: 1.08rem;
  color: var(--graphite);
}

.chip {
  display: inline-block;
  padding: var(--size-4);
  border: var(--size-1) solid var(--rule);
  border-radius: var(--radius-card);
  font-family: var(--font-mono);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--graphite);
  line-height: 1;
}

/* ---------- Focus ---------- */

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--size-6);
  z-index: 100;
  padding: var(--size-5) var(--size-6);
  background: var(--surface);
  color: var(--primary);
  border: var(--size-1) solid var(--primary);
  border-radius: var(--radius-card);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--size-5);
}

/* ---------- Shell ---------- */

.content,
.site-header-inner,
.site-footer-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-left: var(--size-7);
  padding-right: var(--size-7);
}

.content {
  padding-top: var(--size-8);
  padding-bottom: var(--size-8);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 4.5rem;
  background: var(--surface);
  border-bottom: var(--size-1) solid var(--rule);
}

.site-header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-7);
}

.wordmark {
  font-weight: 700;
  font-size: 1.83rem;
  letter-spacing: 0.01em;
  color: var(--dark);
  text-decoration: none;
}

.wordmark:hover {
  color: var(--dark);
}

.site-nav {
  display: flex;
  gap: var(--size-7);
}

.site-nav a {
  font-weight: 700;
  text-decoration: none;
  padding: var(--size-4) 0;
}

.site-nav a[aria-current="page"] {
  border-bottom: var(--size-2) solid var(--primary);
}

.site-footer {
  background: var(--navy);
  color: var(--primary-faded);
  padding: var(--size-8) 0;
  margin-top: var(--size-9);
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--size-6);
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: var(--surface);
}

.site-footer-nav {
  display: flex;
  gap: var(--size-7);
}

/* ---------- Live banner ---------- */

.live-banner {
  background: var(--dark);
  color: var(--surface);
  text-align: center;
  padding: var(--size-5) var(--size-7);
}

.live-banner a {
  color: var(--surface);
}

.live-banner .live {
  color: var(--surface);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.live-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--secondary);
  margin-right: var(--size-4);
  vertical-align: middle;
}

/* ---------- Status words. Colour never carries state alone. ---------- */

.status {
  font-family: var(--font-mono);
  font-size: 1.08rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.status-live,
.status-registered {
  color: var(--secondary);
}

.status-pending {
  color: var(--amber);
}

/* ---------- Buttons, per CSS.md section 6 ---------- */

.button {
  display: inline-block;
  color: var(--surface);
  background-color: var(--primary);
  border: var(--size-1) solid var(--primary);
  border-radius: var(--size-4);
  padding: var(--size-5) var(--size-7);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.17rem;
  line-height: 1.4;
  box-shadow: var(--shadow);
  margin: var(--size-3);
  cursor: pointer;
  text-decoration: none;
}

.button:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--surface);
}

.button:active {
  background-color: var(--primary-darker);
  border-color: var(--primary-darker);
}

.button.disabled,
.button:disabled {
  background-color: var(--accent);
  border-color: var(--accent);
  cursor: not-allowed;
}

.button.secondary {
  color: var(--primary);
  background-color: var(--surface);
}

.button.secondary:hover {
  background-color: var(--primary-faded);
  color: var(--primary-dark);
}

.button.secondary:active {
  border-color: var(--primary-darker);
  color: var(--primary-darker);
}

.button.transparent {
  color: var(--primary-dark);
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

.button.transparent:hover {
  color: var(--primary-darker);
  background-color: transparent;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- Inputs, per CSS.md section 7 ---------- */

.text-input-container {
  margin: var(--size-3);
  display: flex;
  flex-direction: column;
  gap: var(--size-3);
}

.field-label {
  font-weight: 700;
  font-size: 1.17rem;
}

.text-input {
  flex: 1;
  display: block;
  width: 100%;
  padding: var(--size-5);
  font-family: var(--font-body);
  font-size: 1.33rem;
  color: var(--dark);
  background-color: var(--primary-faded);
  border: var(--size-1) solid var(--accent-faded);
  border-radius: var(--size-4);
  resize: vertical;
}

.text-input:focus {
  outline: none;
  box-shadow: 0 0 var(--size-4) var(--primary);
  border-color: var(--primary);
}

.text-input::placeholder {
  color: var(--accent);
}

.text-input[aria-invalid="true"] {
  border-color: var(--secondary);
}

.field-error {
  color: var(--secondary);
  font-size: 1.17rem;
}

/* ---------- Alert overlays, retained from CSS.md section 14 ---------- */

.alert-overlay {
  position: fixed;
  left: 50%;
  top: var(--size-8);
  transform: translateX(-50%);
  z-index: 50;
  width: min(90vw, 48rem);
  padding: var(--size-6);
  background-color: var(--surface);
  color: var(--dark);
  border: var(--size-1) solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  text-align: center;
}

.alert-overlay[hidden] {
  display: none;
}

.alert-overlay-title {
  font-weight: 700;
  margin-bottom: var(--size-4);
}

.alert-overlay .contents {
  max-height: 50vh;
  overflow: auto;
  text-align: left;
}

.alert-overlay.error {
  border-color: var(--secondary);
}

.alert-overlay.error .alert-overlay-title {
  color: var(--secondary);
}

.alert-overlay.warning {
  border-color: var(--amber);
}

.alert-overlay.warning .alert-overlay-title {
  color: var(--amber);
}

/* ---------- Error pages ---------- */

.error-page {
  max-width: 60ch;
}

/* ---------- Phase 0 specimen page ---------- */

.intro {
  margin-bottom: var(--size-9);
}

.specimen {
  margin-bottom: var(--size-9);
}

.specimen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--size-7);
}

.specimen-item {
  background: var(--surface);
  border: var(--size-1) solid var(--rule);
  border-radius: var(--radius-card);
  padding: var(--size-6);
}

.specimen-label {
  font-size: 1.08rem;
  color: var(--graphite);
  margin-bottom: var(--size-4);
}

.specimen-sample {
  font-size: 1.5rem;
  margin-bottom: var(--size-4);
}

.specimen-bold { font-weight: 700; }
.specimen-light { font-weight: 300; }
.specimen-italic { font-style: italic; }

.swatches {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--size-6);
}

.swatch {
  display: grid;
  gap: var(--size-3);
}

.swatch-chip {
  display: block;
  height: var(--size-9);
  border: var(--size-1) solid var(--rule);
  border-radius: var(--radius-card);
}

.swatch-primary .swatch-chip { background: var(--primary); }
.swatch-primary-dark .swatch-chip { background: var(--primary-dark); }
.swatch-primary-darker .swatch-chip { background: var(--primary-darker); }
.swatch-primary-faded .swatch-chip { background: var(--primary-faded); }
.swatch-secondary .swatch-chip { background: var(--secondary); }
.swatch-amber .swatch-chip { background: var(--amber); }
.swatch-navy .swatch-chip { background: var(--navy); }
.swatch-dark .swatch-chip { background: var(--dark); }
.swatch-graphite .swatch-chip { background: var(--graphite); }
.swatch-accent .swatch-chip { background: var(--accent); }
.swatch-accent-faded .swatch-chip { background: var(--accent-faded); }
.swatch-rule .swatch-chip { background: var(--rule); }
.swatch-paper .swatch-chip { background: var(--paper); }
.swatch-surface .swatch-chip { background: var(--surface); }

.swatch-name {
  font-family: var(--font-mono);
  font-size: 1.08rem;
}

.swatch-use {
  font-size: 1.08rem;
  color: var(--graphite);
}

.status-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-7);
}

.specimen-form {
  max-width: 40rem;
}

.ground-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 60rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.ground {
  padding: var(--size-7);
}

.ground p:last-child {
  margin-bottom: 0;
}

.ground-navy {
  background: var(--navy);
  color: var(--surface);
  border-left: var(--size-3) solid var(--secondary);
}

.ground-surface {
  background: var(--surface);
}

.ground-title {
  font-weight: 700;
  font-size: 1.33rem;
}

.ground-title-link a {
  font-weight: 700;
  text-decoration: none;
}

/* ---------- Breakpoints: 1900, 1110, 850, 600, 480 only ---------- */

@media only screen and (max-width: 850px) {
  .swatches {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 600px) {
  .content,
  .site-header-inner,
  .site-footer-inner {
    padding-left: var(--size-6);
    padding-right: var(--size-6);
  }

  .site-nav {
    gap: var(--size-6);
  }

  .specimen-grid,
  .ground-pair {
    grid-template-columns: 1fr;
  }

  .swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  h1 {
    font-size: 2.17rem;
  }
}

@media only screen and (max-width: 480px) {
  .site-footer-inner {
    flex-direction: column;
  }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print ---------- */

@media print {
  .site-header, .site-footer, .live-banner, .alert-overlay, .skip-link {
    display: none;
  }
}

/* ---------- Forms and auth pages (phase 1) ---------- */

.auth-page {
  max-width: 52rem;
}

.form-stack {
  display: grid;
  gap: var(--size-6);
  margin-bottom: var(--size-8);
}

.field {
  display: grid;
  gap: var(--size-3);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--size-6);
}

.field-hint {
  color: var(--graphite);
  font-size: 1.17rem;
  margin: 0;
}

.field-optional {
  font-weight: 400;
  color: var(--graphite);
}

.field.checkbox {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--size-5);
}

.field.checkbox input {
  width: 1.6rem;
  height: 1.6rem;
  margin-top: var(--size-2);
  accent-color: var(--primary);
}

.field.checkbox label {
  font-size: 1.17rem;
}

.disclosure {
  border: var(--size-1) solid var(--rule);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 0;
}

.disclosure summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--primary);
  padding: var(--size-5) var(--size-6);
}

.disclosure[open] summary {
  border-bottom: var(--size-1) solid var(--rule);
}

.disclosure > :not(summary) {
  margin-left: var(--size-6);
  margin-right: var(--size-6);
}

.disclosure > .field-hint {
  margin-top: var(--size-5);
}

.disclosure > .field {
  margin-top: var(--size-6);
}

.disclosure > .field:last-child,
.disclosure > .field.checkbox {
  margin-bottom: var(--size-6);
}

.disclosure > .field-row {
  margin-top: var(--size-6);
}

select.text-input {
  appearance: auto;
}

.notice {
  background: var(--primary-faded);
  border-left: var(--size-3) solid var(--primary);
  padding: var(--size-5) var(--size-6);
  margin-bottom: var(--size-6);
}

.sso-block {
  border-top: var(--size-1) solid var(--rule);
  padding-top: var(--size-7);
}

.sso-block h2 {
  font-size: 1.5rem;
}

.detail-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--size-4) var(--size-7);
  margin-bottom: var(--size-7);
}

.detail-list dt {
  color: var(--graphite);
}

.detail-list dd {
  margin: 0;
}

@media only screen and (max-width: 600px) {
  .field-row,
  .detail-list {
    grid-template-columns: 1fr;
  }
}

/* ---------- Landing, series and session pages (phase 2) ---------- */

.section-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--graphite);
  text-transform: none;
  margin-bottom: var(--size-6);
}

.landing-intro {
  margin-bottom: var(--size-8);
}

.landing-empty {
  background: var(--surface);
  border: var(--size-1) solid var(--rule);
  padding: var(--size-8);
  text-align: center;
  color: var(--graphite);
  margin-bottom: var(--size-9);
}

.featured {
  margin-bottom: var(--size-9);
}

.featured-layout {
  display: grid;
  grid-template-columns: minmax(0, 32rem) minmax(0, 1fr);
  gap: var(--size-8);
  align-items: start;
}

.featured-code {
  font-size: 1.17rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: var(--size-4);
}

.featured-title {
  font-size: 2.17rem;
  line-height: 1.2;
  margin-bottom: var(--size-5);
}

.featured-title a {
  text-decoration: none;
}

.featured-when {
  font-family: var(--font-mono);
  font-size: 1.33rem;
  margin-bottom: var(--size-4);
}

.featured-presenter {
  margin-top: var(--size-5);
}

.upcoming,
.series-index,
.on-demand {
  margin-bottom: var(--size-9);
}

/* ---------- Card grid: 4, 3 at 1110, 2 at 850, 1 at 600 ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--size-7);
}

.session-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 0;
}

.session-card[hidden] {
  display: none;
}

.card-upper {
  position: relative;
  background: var(--navy);
  color: var(--surface);
  padding: var(--size-6);
  min-height: 11rem;
  display: flex;
  flex-direction: column;
  gap: var(--size-5);
}

.session-card.is-featured .card-upper,
.session-card.is-registered .card-upper {
  border-left: var(--size-3) solid var(--secondary);
}

.card-stamp {
  color: var(--primary-faded);
  margin: 0;
}

.card-stamp time {
  color: inherit;
}

.card-title {
  font-size: 1.33rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--surface);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-play {
  position: absolute;
  top: var(--size-6);
  right: var(--size-6);
  color: var(--secondary);
  font-size: 1.5rem;
}

.card-lower {
  padding: var(--size-6);
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
  flex: 1;
}

.card-meta {
  margin: 0;
}

.card-cancelled {
  color: var(--dark);
  font-weight: 500;
  text-transform: uppercase;
}

.session-card.is-cancelled .card-title {
  text-decoration: line-through;
  text-decoration-thickness: 0.15rem;
}

.card-link {
  margin: 0;
  font-weight: 700;
  font-size: 1.33rem;
  line-height: 1.3;
}

.card-link a {
  text-decoration: none;
}

.card-link a:hover {
  text-decoration: underline;
}

.card-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--size-4);
  flex-wrap: wrap;
}

.card-chips {
  margin: 0;
  display: flex;
  gap: var(--size-3);
  flex-wrap: wrap;
}

.card-chips a.chip {
  text-decoration: none;
}

.card-lock {
  color: var(--accent);
  font-size: 1.17rem;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-4);
  margin-bottom: var(--size-6);
}

.chip-filter {
  background: var(--surface);
  cursor: pointer;
  font-size: 1.08rem;
  padding: var(--size-4) var(--size-5);
}

.chip-filter.is-active {
  border-color: var(--primary);
  color: var(--primary-dark);
  font-weight: 500;
}

/* ---------- Series index ---------- */

.series-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--size-5) var(--size-8);
}

.series-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--size-6);
  padding: var(--size-5) 0;
  border-bottom: var(--size-1) solid var(--rule);
}

.series-name {
  font-weight: 700;
  font-size: 1.5rem;
  text-decoration: none;
}

/* ---------- Series and session pages ---------- */

.series-header,
.session-header {
  margin-bottom: var(--size-8);
  max-width: 72rem;
}

.series-code,
.session-code {
  font-size: 1.17rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: var(--size-4);
}

.session-code a {
  text-decoration: none;
}

.session-when {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  margin: var(--size-6) 0 var(--size-4);
}

.series-actions {
  margin-top: var(--size-7);
  background: var(--surface);
  border: var(--size-1) solid var(--rule);
  padding: var(--size-6) var(--size-7);
  max-width: 60rem;
}

.series-subscribe {
  margin-bottom: 0;
}

.session-register {
  margin-bottom: var(--size-8);
}

.session-page section {
  margin-bottom: var(--size-8);
  max-width: 72rem;
}

.prose {
  max-width: 72rem;
}

.prose h2,
.prose h3,
.prose h4 {
  margin-top: var(--size-7);
}

.prose blockquote {
  border-left: var(--size-3) solid var(--rule);
  margin: 0 0 var(--size-6);
  padding-left: var(--size-6);
  color: var(--graphite);
}

.prose code,
.prose pre {
  font-family: var(--font-mono);
  font-size: 1.17rem;
}

.prose pre {
  background: var(--surface);
  border: var(--size-1) solid var(--rule);
  padding: var(--size-5);
  overflow-x: auto;
}

.prose table {
  border-collapse: collapse;
  width: 100%;
}

.prose th,
.prose td {
  border-bottom: var(--size-1) solid var(--rule);
  padding: var(--size-4) var(--size-5);
  text-align: left;
}

.legal-page h1 {
  margin-bottom: var(--size-7);
}

.registration-list {
  list-style: none;
  padding: 0;
}

.registration-item {
  background: var(--surface);
  border: var(--size-1) solid var(--rule);
  padding: var(--size-6);
  margin-bottom: var(--size-5);
}

.registration-item p {
  margin-bottom: var(--size-3);
}

.registration-title {
  font-size: 1.5rem;
  font-weight: 700;
}

.registration-title a {
  text-decoration: none;
}

@media only screen and (max-width: 1110px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media only screen and (max-width: 850px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured-layout { grid-template-columns: 1fr; }
}

@media only screen and (max-width: 600px) {
  .card-grid { grid-template-columns: 1fr; }
  .series-list { grid-template-columns: 1fr; }
  .featured-title { font-size: 1.83rem; }
}

/* ---------- Issue Logger, staff pages (phase 3) ---------- */

.prewrap { white-space: pre-wrap; }

.issue-severity-low { color: var(--accent); }
.issue-severity-medium { color: var(--amber); }
.issue-severity-high { color: var(--secondary); }
.issue-severity-critical { color: #C00000; }
.issue-status-open { color: #C00000; }
.issue-status-in_progress { color: var(--amber); }
.issue-status-resolved { color: #1E7B34; }
.issue-status-closed { color: var(--accent); }
.issue-status-wont_fix { color: var(--accent); font-style: italic; }

.issue-detail section { margin-bottom: var(--size-8); }

.attachment-list, .comment-list, .activity-list { list-style: none; padding: 0; }
.attachment-list li { display: flex; align-items: center; gap: var(--size-5); margin-bottom: var(--size-4); }
.attachment-thumb { max-width: 12rem; max-height: 8rem; border: var(--size-1) solid var(--rule); }
.comment { background: var(--surface); border: var(--size-1) solid var(--rule); padding: var(--size-5); margin-bottom: var(--size-4); }
.comment p { margin-bottom: var(--size-3); }
.activity-list li { padding: var(--size-3) 0; border-bottom: var(--size-1) solid var(--rule); }

.bug-badge {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0 var(--size-3);
  border-radius: 1rem;
  background: var(--amber);
  color: var(--surface);
  font-family: var(--font-mono);
  font-size: 1rem;
  text-align: center;
  margin-left: var(--size-3);
}

.presenter-photo {
  width: 8rem;
  height: 8rem;
  object-fit: cover;
  border-radius: 50%;
  border: var(--size-1) solid var(--rule);
  margin-right: var(--size-6);
  float: left;
}

.series-hero {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  margin-bottom: var(--size-6);
}

.card-upper.has-image {
  background-size: cover;
  background-position: center;
}

/* ---------- Watch page and waiting room (phase 5) ---------- */

.watch-page { max-width: 96rem; }
.watch-header { margin-bottom: var(--size-7); }
.viewer-count { color: var(--graphite); font-weight: 400; text-transform: none; letter-spacing: 0; }

.player-section { margin-bottom: var(--size-8); }

.player-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--dark);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.player-poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-poster[hidden] { display: none; }

.play-button {
  display: inline-flex;
  align-items: center;
  gap: var(--size-5);
  background: var(--primary);
  color: var(--surface);
  border: none;
  border-radius: 999px;
  padding: var(--size-6) var(--size-8);
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.play-button:hover { background: var(--primary-dark); }
.play-button:disabled { background: var(--accent); cursor: progress; }
.play-icon { font-size: 1.33rem; }

.player-mount { position: absolute; inset: 0; }
.player-mount[hidden] { display: none; }
.player-frame { width: 100%; height: 100%; border: 0; display: block; }

/* Identity overlay: outside the player element, over the wrapper, never
   interactive. Twelve percent opacity. Repositioned by watch.js. */
.identity-overlay {
  position: absolute;
  top: 12%;
  left: 8%;
  pointer-events: none;
  color: var(--surface);
  opacity: 0.12;
  font-family: var(--font-mono);
  font-size: 1.17rem;
  white-space: nowrap;
  transition: top 1.5s ease, left 1.5s ease;
  z-index: 2;
}

.player-status { min-height: 1.5em; margin-top: var(--size-4); }

.waiting-room {
  display: grid;
  grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
  gap: var(--size-8);
  align-items: start;
  margin-bottom: var(--size-8);
}

.waiting-card img { width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: var(--shadow); }
.countdown { font-size: 2.5rem; font-weight: 500; margin: var(--size-5) 0; }

.watch-join, .watch-ended { margin-bottom: var(--size-8); }

.question-section { max-width: 64rem; }
.question-form { margin-bottom: var(--size-6); }
.my-questions { list-style: none; padding: 0; }
.my-question { background: var(--surface); border: var(--size-1) solid var(--rule); border-left: var(--size-3) solid var(--rule); padding: var(--size-5); margin-bottom: var(--size-4); }
.my-question.is-sent { border-left-color: var(--primary); }
.my-question.is-noted { border-left-color: var(--rule); }
.my-question.is-answered { border-left-color: var(--primary-dark); }
.my-question p { margin: 0 0 var(--size-3) 0; }

@media only screen and (max-width: 850px) {
  .waiting-room { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .identity-overlay { transition: none; }
}


/* ---- Phase 6: reactions, feedback, library, chapters ---- */
.reactions { display: flex; flex-wrap: wrap; gap: var(--size-4); align-items: center; margin-top: var(--size-5); }
.reaction {
  font-family: inherit; font-size: 1.125rem; font-weight: 500;
  padding: var(--size-3) var(--size-6); border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--primary-dark); border: var(--size-1) solid var(--primary);
  transition: background-color 120ms ease, color 120ms ease;
}
.reaction:hover, .reaction:focus-visible { background: var(--primary-tint, #e8eef6); }
.reaction.is-sent { background: var(--primary); color: #fff; }
.reaction[disabled] { opacity: 0.7; cursor: default; }

.feedback-section { max-width: 64rem; margin-bottom: var(--size-8); background: var(--surface); border: var(--size-1) solid var(--rule); padding: var(--size-6); }
.feedback-section[hidden] { display: none; }
.feedback-form .button.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }

.library-group { margin-bottom: var(--size-8); }
.library-list { list-style: none; padding: 0; margin: 0; }
.library-item {
  display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--size-6); align-items: center;
  padding: var(--size-5) 0; border-bottom: var(--size-1) solid var(--rule);
}
.library-item p { margin: 0 0 var(--size-2) 0; }
.library-code { color: var(--graphite); }
.progress { position: relative; height: var(--size-3); background: var(--rule); border-radius: 999px; overflow: hidden; margin-bottom: var(--size-2); }
.progress-bar { position: absolute; inset: 0 auto 0 0; background: var(--primary); width: 0; }
.progress-bar[data-width="5"] { width: 5%; }
.progress-bar[data-width="10"] { width: 10%; }
.progress-bar[data-width="15"] { width: 15%; }
.progress-bar[data-width="20"] { width: 20%; }
.progress-bar[data-width="25"] { width: 25%; }
.progress-bar[data-width="30"] { width: 30%; }
.progress-bar[data-width="35"] { width: 35%; }
.progress-bar[data-width="40"] { width: 40%; }
.progress-bar[data-width="45"] { width: 45%; }
.progress-bar[data-width="50"] { width: 50%; }
.progress-bar[data-width="55"] { width: 55%; }
.progress-bar[data-width="60"] { width: 60%; }
.progress-bar[data-width="65"] { width: 65%; }
.progress-bar[data-width="70"] { width: 70%; }
.progress-bar[data-width="75"] { width: 75%; }
.progress-bar[data-width="80"] { width: 80%; }
.progress-bar[data-width="85"] { width: 85%; }
.progress-bar[data-width="90"] { width: 90%; }
.progress-bar[data-width="95"] { width: 95%; }
.progress-bar[data-width="100"] { width: 100%; }
.progress-bar[data-width="1"] { width: 1%; }
.progress-bar[data-width="2"] { width: 2%; }
.progress-bar[data-width="3"] { width: 3%; }
.progress-bar[data-width="4"] { width: 4%; }
.progress-bar[data-width="6"] { width: 6%; }
.progress-bar[data-width="7"] { width: 7%; }
.progress-bar[data-width="8"] { width: 8%; }
.progress-bar[data-width="9"] { width: 9%; }
.progress-bar[data-width="11"] { width: 11%; }
.progress-bar[data-width="12"] { width: 12%; }
.progress-bar[data-width="13"] { width: 13%; }
.progress-bar[data-width="14"] { width: 14%; }
.progress-bar[data-width="16"] { width: 16%; }
.progress-bar[data-width="17"] { width: 17%; }
.progress-bar[data-width="18"] { width: 18%; }
.progress-bar[data-width="19"] { width: 19%; }
.progress-bar[data-width="21"] { width: 21%; }
.progress-bar[data-width="22"] { width: 22%; }
.progress-bar[data-width="23"] { width: 23%; }
.progress-bar[data-width="24"] { width: 24%; }
.progress-bar[data-width="26"] { width: 26%; }
.progress-bar[data-width="27"] { width: 27%; }
.progress-bar[data-width="28"] { width: 28%; }
.progress-bar[data-width="29"] { width: 29%; }
.progress-bar[data-width="31"] { width: 31%; }
.progress-bar[data-width="32"] { width: 32%; }
.progress-bar[data-width="33"] { width: 33%; }
.progress-bar[data-width="34"] { width: 34%; }
.progress-bar[data-width="36"] { width: 36%; }
.progress-bar[data-width="37"] { width: 37%; }
.progress-bar[data-width="38"] { width: 38%; }
.progress-bar[data-width="39"] { width: 39%; }
.progress-bar[data-width="41"] { width: 41%; }
.progress-bar[data-width="42"] { width: 42%; }
.progress-bar[data-width="43"] { width: 43%; }
.progress-bar[data-width="44"] { width: 44%; }
.progress-bar[data-width="46"] { width: 46%; }
.progress-bar[data-width="47"] { width: 47%; }
.progress-bar[data-width="48"] { width: 48%; }
.progress-bar[data-width="49"] { width: 49%; }
.progress-bar[data-width="51"] { width: 51%; }
.progress-bar[data-width="52"] { width: 52%; }
.progress-bar[data-width="53"] { width: 53%; }
.progress-bar[data-width="54"] { width: 54%; }
.progress-bar[data-width="56"] { width: 56%; }
.progress-bar[data-width="57"] { width: 57%; }
.progress-bar[data-width="58"] { width: 58%; }
.progress-bar[data-width="59"] { width: 59%; }
.progress-bar[data-width="61"] { width: 61%; }
.progress-bar[data-width="62"] { width: 62%; }
.progress-bar[data-width="63"] { width: 63%; }
.progress-bar[data-width="64"] { width: 64%; }
.progress-bar[data-width="66"] { width: 66%; }
.progress-bar[data-width="67"] { width: 67%; }
.progress-bar[data-width="68"] { width: 68%; }
.progress-bar[data-width="69"] { width: 69%; }
.progress-bar[data-width="71"] { width: 71%; }
.progress-bar[data-width="72"] { width: 72%; }
.progress-bar[data-width="73"] { width: 73%; }
.progress-bar[data-width="74"] { width: 74%; }
.progress-bar[data-width="76"] { width: 76%; }
.progress-bar[data-width="77"] { width: 77%; }
.progress-bar[data-width="78"] { width: 78%; }
.progress-bar[data-width="79"] { width: 79%; }
.progress-bar[data-width="81"] { width: 81%; }
.progress-bar[data-width="82"] { width: 82%; }
.progress-bar[data-width="83"] { width: 83%; }
.progress-bar[data-width="84"] { width: 84%; }
.progress-bar[data-width="86"] { width: 86%; }
.progress-bar[data-width="87"] { width: 87%; }
.progress-bar[data-width="88"] { width: 88%; }
.progress-bar[data-width="89"] { width: 89%; }
.progress-bar[data-width="91"] { width: 91%; }
.progress-bar[data-width="92"] { width: 92%; }
.progress-bar[data-width="93"] { width: 93%; }
.progress-bar[data-width="94"] { width: 94%; }
.progress-bar[data-width="96"] { width: 96%; }
.progress-bar[data-width="97"] { width: 97%; }
.progress-bar[data-width="98"] { width: 98%; }
.progress-bar[data-width="99"] { width: 99%; }

.chapters { max-width: 64rem; margin-bottom: var(--size-8); }
.chapter-list { list-style: none; padding: 0; margin: 0; }
.chapter { display: flex; gap: var(--size-5); width: 100%; text-align: left; background: none; border: 0; border-bottom: var(--size-1) solid var(--rule); padding: var(--size-4) 0; font: inherit; color: inherit; cursor: pointer; }
.chapter:hover .chapter-body, .chapter:focus-visible .chapter-body { color: var(--primary); text-decoration: underline; }
.chapter-time { color: var(--primary-dark); min-width: 5em; }

@media only screen and (max-width: 850px) {
  .library-item { grid-template-columns: 1fr; gap: var(--size-3); }
}


/* ---- Phase 7: account deletion ---- */
.account-danger { margin-top: var(--size-8); padding-top: var(--size-6); border-top: var(--size-1) solid var(--rule); }
.button.danger { background: var(--rust, #B5482A); border-color: var(--rust, #B5482A); color: #fff; }
.button.danger:hover, .button.danger:focus-visible { background: #93381f; border-color: #93381f; }


/* ---- Phase 8: draft preview ---- */
.draft-banner { background: var(--rust, #B5482A); color: #fff; text-align: center; padding: var(--size-3) var(--size-5); font-size: 1rem; }
.draft-section { opacity: 0.85; }


/* Screen-reader only text (DESIGN.md 11). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}


/* ---- Contact form: the honeypot is off-screen for people, present for bots ---- */
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.contact-page .detail-list { margin-bottom: var(--size-5); }


/* ---- Phase 10: breadcrumbs, library tree, internal chip ---- */
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--size-2); padding: 0; margin: 0 0 var(--size-5) 0; font-size: 0.9375rem; }
.breadcrumbs li + li::before { content: "›"; margin: 0 var(--size-2); color: var(--graphite); }
.breadcrumbs li[aria-current="page"] { color: var(--graphite); }
.chip-internal { background: var(--dark); color: #fff; }
.recent-strip { margin-bottom: var(--size-8); }
.recent-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--size-4); }
.recent-item a { display: block; background: var(--surface); border: var(--size-1) solid var(--rule); border-left: var(--size-3) solid var(--primary); padding: var(--size-4); text-decoration: none; color: inherit; }
.recent-item a:hover .recent-title, .recent-item a:focus-visible .recent-title { text-decoration: underline; color: var(--primary-dark); }
.recent-code { display: block; color: var(--graphite); font-size: 0.875rem; }
.recent-title { display: block; font-weight: 700; margin: var(--size-2) 0; }
.library-section { margin-bottom: var(--size-8); }
.library-topic { border-left: var(--size-2) solid var(--rule); padding-left: var(--size-5); margin: var(--size-5) 0; }
.library-topic > summary { cursor: pointer; list-style: revert; }
.library-topic-name { display: inline; font-size: 1.25rem; margin: 0; }
.library-series { margin: var(--size-5) 0; }
.library-series-name { font-weight: 700; font-size: 1.125rem; margin: 0 0 var(--size-2) 0; }
.library-empty { font-style: italic; }


/* ---- Phase 11: the end-of-session poll ---- */
/* Beneath the question box. It never covers, blocks or interrupts the video. */
.poll-section {
  margin: var(--size-7) 0 0 0;
  background: var(--primary-faded);
  border-left: var(--size-3) solid var(--primary);
  padding: var(--size-5) var(--size-6);
}
.poll-section[hidden] { display: none; }
.poll-prompt { margin: 0 0 var(--size-4) 0; font-size: 1.125rem; font-weight: 700; }
.poll-consent[hidden], .poll-form[hidden], .poll-thanks[hidden] { display: none; }
.poll-consent .button-row { align-items: center; gap: var(--size-4); flex-wrap: wrap; }
.poll-consent.is-yes [data-poll-consent-yes],
.poll-consent.is-no [data-poll-consent-no] { background: var(--primary); color: #FFFFFF; border-color: var(--primary); }
.poll-form textarea { width: 100%; }
.poll-thanks { margin: 0; font-weight: 700; }

/* The approved post-session summary, beneath the replay. */
.session-summary { margin-top: var(--size-8); }