/* The Hub-branded pages on the API host (templates/webinars/base.html and
   webinars/pages/), in the Hub's "engineer's notebook" style: light warm
   paper, dark ink, one deep blue for links and the primary button, hairline
   rules instead of glows, flat 4-6px corners, sentence-case labels.
   The tokens are the Hub's (web/src/app/globals.css); keep the two in step.
   Contrast (WCAG AA) is noted against the page ground.
   IBM Plex Sans for text and headings, IBM Plex Mono for dates, times,
   prices, counts and step numbers, both self-hosted from fonts/ (SIL OFL
   1.1, fonts/OFL.txt): no font request leaves for a third party, and the
   pages' CSP names each font file (webinars.pages.FONTS).
   Plain CSS, no framework, no inline styles anywhere. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}
/* Metric-matched stand-ins while the files load, the same overrides next/font
   gives the Hub (next/dist/server/font-utils, Arial scaled to Plex), so the
   swap does not move the text: without them the cancellation form shifted by
   0.35 at first paint. */
@font-face {
  font-family: "IBM Plex Sans Fallback";
  src: local("Arial"), local("ArialMT");
  ascent-override: 101.32%;
  descent-override: 27.18%;
  line-gap-override: 0%;
  size-adjust: 101.17%;
}
@font-face {
  font-family: "IBM Plex Mono Fallback";
  src: local("Arial"), local("ArialMT");
  ascent-override: 76.16%;
  descent-override: 20.43%;
  line-gap-override: 0%;
  size-adjust: 134.59%;
}

:root {
  --bg: #f7f5f0;              /* page ground: warm paper */
  --surface: #fcfbf8;         /* cards, panels, inputs */
  --surface-raised: #efece4;  /* hover, quiet panels */
  --border: #e3ded3;          /* hairline rules and card edges */
  --border-strong: #cfc8ba;   /* stronger hairline: tags, link underlines */
  --border-control: #8a8374;  /* form field outline, 3.45:1 */
  --fg: #1b1a17;              /* ink, 15.97:1 */
  --fg-secondary: #46433c;    /* body copy, 9.06:1 */
  --fg-muted: #635e55;        /* small print, 5.91:1 (5.45:1 on raised) */
  --accent: #1d4ed8;          /* the one deep blue: links 6.15:1, markers, focus */
  --accent-strong-hover: #1e40af; /* filled button hover, white text 8.72:1 */
  --on-accent: #ffffff;       /* text on the filled button, 6.70:1 */
  --selection: #d6e0f7;
  --danger: #b42318;          /* 6.03:1 */
  --success: #1e7a3c;         /* the live badge, 4.94:1 on the card surface */
  --radius-card: 6px;
  --radius-control: 4px;
  --gutter: 24px;             /* the Hub's px-6 at every width */
  --sans: "IBM Plex Sans", "IBM Plex Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
::selection { background: var(--selection); color: var(--fg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(29, 78, 216, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
a:hover { text-decoration-color: var(--accent); }

/* Header: solid paper, a hairline below, the A-dot mark and the wordmark. */
.hub-header { background: var(--bg); border-bottom: 1px solid var(--border); }
.hub-header .inner, .hub-footer .inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.hub-header .inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; }
.hub-brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  color: var(--fg); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none;
  border-radius: var(--radius-control);
}
.hub-brand:hover { color: var(--fg); }
.hub-mark { display: block; width: 28px; height: 28px; flex: none; border-radius: 22%; }
.hub-header nav { display: flex; align-items: center; gap: 2px; }
.hub-header nav a {
  color: var(--fg-secondary); font-size: 0.875rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  padding: 8px 8px; border-radius: var(--radius-control);
}
.hub-header nav a:hover { color: var(--fg); }
/* Phones: the links' text lines up with the gutter, as the Hub's menu button
   does, and below 390px (the lockup and both links need about 375px) the
   header shows the mark alone; the wordmark stays for screen readers, so the
   link keeps its name. Fits down to 320px with no sideways scroll. */
@media (max-width: 639px) {
  .hub-header .inner { gap: 8px; }
  .hub-header nav { margin-right: -6px; }
  .hub-header nav a { padding: 8px 6px; }
}
@media (max-width: 389px) {
  .hub-header .hub-brand span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}
@media (min-width: 640px) {
  .hub-brand { font-size: 1rem; }
  .hub-header nav { gap: 4px; }
  .hub-header nav a { padding: 8px 12px; }
}

/* The reading column, the Hub's Container size="prose" (max-w-3xl, px-6: 720px
   of text in 768px); the live and replay pages widen to the Hub's 1200px. */
.hub-main { flex: 1; width: 100%; max-width: 768px; margin: 0 auto; padding: 40px var(--gutter) 72px; }
.hub-main.wide { max-width: 1200px; }
@media (min-width: 640px) { .hub-main { padding-top: 56px; padding-bottom: 96px; } }

h1, h2, h3 { color: var(--fg); }
/* The Hub's Heading h1: 36, 48 and 56px, semibold, -0.02em. */
h1 { font-size: 2.25rem; font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 16px; }
@media (min-width: 640px) { h1 { font-size: 3rem; } }
@media (min-width: 768px) { h1 { font-size: 3.5rem; } }
h2 {
  font-size: 1.375rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em;
  margin: 48px 0 12px; padding-top: 24px; border-top: 1px solid var(--border);
}
h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; margin: 24px 0 6px; }
p, li, dd, dt { font-size: 1rem; }
p, li, dd { color: var(--fg-secondary); }
p { margin: 0 0 16px; }
strong { color: var(--fg); font-weight: 600; }
ul, ol { padding-left: 22px; margin: 0 0 16px; }
li { margin-bottom: 8px; padding-left: 4px; }
li::marker { color: var(--fg-muted); }
ol > li::marker { font-family: var(--mono); font-size: 0.9em; }

/* Sentence-case label above a heading, led by a short hairline. */
.kicker {
  display: flex; align-items: center; gap: 10px;
  color: var(--fg-muted); font-size: 0.875rem; font-weight: 500; margin: 0 0 16px;
}
.kicker::before { content: ""; width: 20px; height: 1px; background: var(--border-strong); flex: none; }
.lead { font-size: 1.125rem; line-height: 1.6; color: var(--fg-secondary); }
@media (min-width: 768px) { .lead { font-size: 1.25rem; } }
.muted, p.muted { color: var(--fg-muted); }
p.muted { font-size: 0.9375rem; }
/* Dates, times, prices and version numbers. */
.mono { font-family: var(--mono); font-size: 0.92em; letter-spacing: 0; }
/* A session's date and time on its own mono line under the title, as in the
   Hub's session list, never inline in a sans sentence. */
.dateline { font-family: var(--mono); font-size: 0.875rem; line-height: 1.5; color: var(--fg-muted); margin: 0 0 20px; }
h1 + .dateline, .title-row + .dateline { margin-top: -6px; }
dd .dateline { display: block; margin: 0 0 4px; color: var(--fg); }

/* Flat cards on the paper; a notice carries a 2px coloured rule on its left. */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 24px; margin: 24px 0;
}
@media (min-width: 640px) { .card { padding: 28px; } }
.card h2 { margin-top: 0; padding-top: 0; border-top: 0; font-size: 1.25rem; }
.card > :last-child { margin-bottom: 0; }
.notice { border-left: 2px solid var(--accent); }
.notice.warn { border-left-color: var(--danger); }
.todo {
  border: 1px dashed var(--danger); color: var(--danger); padding: 1px 6px;
  border-radius: var(--radius-control); font-size: 0.875rem;
}

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--on-accent); text-decoration: none;
  padding: 12px 24px; border-radius: var(--radius-control); border: 0;
  font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.25; cursor: pointer;
  transition: background-color 0.15s ease;
}
.button:hover { background: var(--accent-strong-hover); color: var(--on-accent); }
/* A disabled button goes flat rather than faded, as the Hub's flatDisabled
   (web/src/components/ui.tsx): the raised fill, muted text (5.45:1) and an
   inset hairline that keeps the size. aria-disabled is the chat's Send while
   the draft is empty or a message is on its way: it keeps focus. */
.button:disabled, .button[aria-disabled="true"],
.button:disabled:hover, .button[aria-disabled="true"]:hover {
  background: var(--surface-raised); color: var(--fg-muted);
  box-shadow: inset 0 0 0 1px var(--border-strong); cursor: not-allowed;
}

/* Forms: a visible control edge (3.45:1) and a blue focus ring. */
label { display: block; font-size: 0.875rem; font-weight: 500; margin: 20px 0 6px; color: var(--fg-secondary); }
.help { display: block; font-weight: 400; color: var(--fg-muted); font-size: 0.8125rem; margin-top: 4px; }
input[type="text"], input[type="email"], textarea {
  width: 100%; background: var(--surface); color: var(--fg); border: 1px solid var(--border-control);
  border-radius: var(--radius-control); padding: 11px 14px; font: inherit; font-size: 0.9375rem;
  transition: border-color 0.15s ease;
}
input::placeholder, textarea::placeholder { color: var(--fg-muted); opacity: 1; }
textarea { min-height: 120px; resize: vertical; }
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
  outline: 2px solid transparent; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent);
}
input:disabled, textarea:disabled { opacity: 0.6; }
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; font-weight: 400; color: var(--fg-secondary); }
.check input { margin-top: 3px; flex: none; }
.error { color: var(--danger); font-size: 0.875rem; margin: 6px 0 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* The law's small print: a spec sheet between hairlines. */
.legal { font-size: 0.875rem; color: var(--fg-muted); }
.legal p, .legal li, .legal dd, .legal dt { font-size: 0.875rem; }
.legal h2 { font-size: 1.125rem; }
dl.facts { display: grid; grid-template-columns: 1fr; margin: 0 0 24px; border-top: 1px solid var(--border); }
dl.facts dt { color: var(--fg-muted); font-weight: 500; padding: 12px 0 2px; }
dl.facts dd { margin: 0; padding: 0 0 12px; border-bottom: 1px solid var(--border); }
@media (min-width: 560px) {
  dl.facts { grid-template-columns: 9.5rem 1fr; column-gap: 20px; }
  dl.facts dt { padding: 12px 0; border-bottom: 1px solid var(--border); }
  dl.facts dd { padding: 12px 0; }
}
pre.form {
  white-space: pre-wrap; background: var(--surface); border: 1px solid var(--border); color: var(--fg-secondary);
  padding: 20px; border-radius: var(--radius-card); font: inherit; font-size: 0.9375rem; margin: 0 0 16px;
}

/* Footer: a hairline above, the lockup, and the legal line in small print. */
.hub-footer { border-top: 1px solid var(--border); background: var(--bg); padding: 40px 0 48px; }
.hub-footer-lines { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.hub-footer p { font-size: 0.8125rem; line-height: 1.6; color: var(--fg-muted); margin: 4px 0; max-width: 48rem; }
.hub-footer p a { color: var(--fg-secondary); text-decoration-color: var(--border-strong); text-underline-offset: 4px; }
.hub-footer p a:hover { color: var(--fg); text-decoration-color: var(--fg); }

/* The live and replay pages, drawn as the Hub's live room (web/src/components/
   webinar/live-room.tsx, live-chat.tsx, live-player.tsx). */
.live-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 1024px) { .live-grid { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; } }
.live-grid h1, .title-row h1 { font-size: 1.875rem; line-height: 1.1; margin: 0; }
@media (min-width: 640px) { .live-grid h1, .title-row h1 { font-size: 2.25rem; } }
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 8px; }
.live-grid .dateline { margin-top: 0; }

/* The Hub's Badge: a small outlined sentence-case tag. */
.badge {
  display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-control); background: var(--surface);
  font-size: 0.75rem; font-weight: 500; line-height: 1rem; color: var(--fg-secondary); white-space: nowrap;
}
.badge[hidden] { display: none; }
.badge.accent { border-color: rgba(29, 78, 216, 0.4); color: var(--accent); }
.badge.success { border-color: rgba(30, 122, 60, 0.4); color: var(--success); }

/* The player: a paper panel while the slate shows, black only once the
   picture plays (live.js adds .on-air). The background stops at the padding
   box and the video is hidden under the slate, so no black shows through the
   anti-aliased edge or the rounded corners of the hairline frame. */
.player {
  background: var(--surface); background-clip: padding-box;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  aspect-ratio: 16 / 9; position: relative; overflow: hidden; margin: 0 0 20px;
}
.player.on-air { background: #000; }
.player video { width: 100%; height: 100%; display: block; background: #000; }
.player:not(.on-air) video { visibility: hidden; }
.slate {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 24px; color: var(--fg); background: var(--surface);
}
.slate[hidden] { display: none; }
.slate-title { color: var(--fg); font-weight: 600; margin: 0; }
.slate-title[hidden] { display: none; }
.slate-text { color: var(--fg-secondary); font-size: 0.875rem; line-height: 1.6; max-width: 32rem; margin: 0; white-space: pre-line; }
.slate-title[hidden] + .slate-text { color: var(--fg); font-size: 1rem; font-weight: 500; }
.status { font-size: 0.875rem; color: var(--fg-muted); margin: -8px 0 12px; }
.status:empty { display: none; }
/* The host's pinned message, when the slate is not already showing it. */
.pinned {
  background: var(--surface-raised); border-left: 2px solid var(--accent);
  padding: 14px 20px; border-radius: 0 var(--radius-card) var(--radius-card) 0; margin: 0 0 20px;
  color: var(--fg-secondary); font-size: 0.9375rem; white-space: pre-line;
}
.pinned:empty, .pinned[hidden] { display: none; }

/* The chat: a heading bar, the log, and the composer under a hairline. */
.chat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  display: flex; flex-direction: column;
}
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.chat-head h2 { font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; letter-spacing: 0; margin: 0; padding: 0; border: 0; }
.chat-log {
  display: flex; flex-direction: column; gap: 12px; height: 26rem; overflow-y: auto;
  padding: 12px 16px; margin: 0; list-style: none;
}
@media (min-width: 1024px) { .chat-log { height: 30rem; } }
.chat-log li { margin: 0; padding: 0; font-size: 0.875rem; }
.chat-log li::marker { content: none; }
.msg-meta { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 4px; }
.msg-meta .name { font-weight: 600; color: var(--fg); }
.msg-time { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.25rem; color: var(--fg-muted); }
.msg-body {
  margin: 2px 0 0; font-size: 0.875rem; line-height: 1.625; color: var(--fg-secondary);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.chat-foot { border-top: 1px solid var(--border); padding: 12px 16px; }
.chat-form { display: flex; flex-direction: column; gap: 8px; }
.chat-form textarea {
  min-height: 0; resize: none; padding: 12px 16px; font-size: 0.875rem; line-height: 1.5;
}
.chat-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-actions .button { flex: none; }
.chat-hint { font-size: 0.8125rem; line-height: 1.25rem; color: var(--fg-muted); margin: 0; }
.chat-slow { font-size: 0.8125rem; line-height: 1.25rem; font-weight: 600; color: var(--fg-secondary); margin: 0; }
.chat-slow[hidden] { display: none; }
.chat-note { font-size: 0.8125rem; line-height: 1.5; color: var(--fg-muted); margin: 0; }
.chat-foot .chat-note + .chat-note { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}