/* Clanova landing page. Colours are the app's dark palette (corpus docs/design/04-design-system.md, Colour tokens);
   every text pair passes WCAG AA as measured there or as marked [DERIVED] (WCAG 2.2 formula, alpha composited in
   sRGB): text 18.50, textSecondary 7.55 and accent 7.97 on background; text 16.30 and textSecondary 6.65 on surface;
   text 17.11 and textSecondary 6.98 on surfaceCard; text 17.97 and textSecondary 7.33 on surfaceInset; white 5.70 on
   primary, 7.10 on primary-hover and 8.98 on primaryMuted. primary is never small text on dark (3.40, fails), and
   textMuted is never text (3.58 to 4.07, fails). The pieces under .ui are the approved mockup kit's components
   (docs/design/mockups, generated by tools/mockup-kit.mjs) rebuilt here without inline styles. */
:root {
  --background: #0d0d14;
  --surface: #1a1a2e;
  --surface-card: #151625;
  --surface-inset: #10111a;
  --border: #2e2e4a;
  --border-subtle: rgba(46, 46, 74, 0.65);
  --primary: #7c3aed;
  --primary-hover: #6d28d9;
  --primary-muted: #5b21b6;
  --primary-soft: rgba(124, 58, 237, 0.16);
  --primary-border: rgba(124, 58, 237, 0.38);
  --tab-active-bg: #2a1b4e;
  --accent: #06b6d4;
  --error: #ef4444;
  --text: #f8fafc;
  --text-secondary: #94a3b8;
  --white: #ffffff;
  /* The edge of a form field must reach 3:1 against the page (WCAG 1.4.11); border does not (1.48 on background).
     field-edge measures 4.07 on background and 3.58 on surface. */
  --field-edge: #64748b;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.36);
  --radius: 16px;
  --ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
  color-scheme: dark;
}

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

/* Nothing on the page moves: no smooth scrolling, transitions or animation. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

/* On the short pages (sign-in, not found) the footer sits at the foot of the window. */
body.gate {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.gate main {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: center;
}

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}

/* accent on background 7.97 (design/04) and on surfaceCard 7.37 [DERIVED] (non-text, 3:1 needed). Plain text links
   get a rounded ring; pills, buttons, the field and the wordmark keep their own corners. */
a:focus-visible,
input:focus-visible,
button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

a:not([class]):focus-visible {
  border-radius: 4px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* The kit's line icons: 24 by 24, stroke currentColor at 1.9, round caps and joins. Used through an in-page sprite. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ico {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico.sm {
  width: 16px;
  height: 16px;
}

.ico.xs {
  width: 13px;
  height: 13px;
}

.ico.lg {
  width: 28px;
  height: 28px;
}

/* Header: the wordmark and one link, Sign in. The mark is favicon.svg itself, drawn from this file (the address
   resolves against styles.css, so it is the site's root favicon on every page), so the privacy page, whose markup
   does not change, carries it too. */
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
}

.brand::before {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  background: url("favicon.svg") center / contain no-repeat;
}

a.brand:focus-visible {
  border-radius: 8px;
}

/* text on background 18.50 (design/04); the outline is decoration, the words name the link. */
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

.nav-link:hover {
  border-color: var(--text-secondary);
  background: var(--surface);
}

/* Hero: the words and the request box, then the board */
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
  padding-top: 16px;
  padding-bottom: 64px;
}

/* The status tag in the app's own tag shape (.upc): textSecondary on surface 6.65; the glyph is decoration. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tag .ico {
  color: var(--accent);
}

/* Headings break only between words: the body's overflow-wrap: anywhere is a guard for long addresses in running
   text, and in a heading squeezed by its neighbours it would split a word. */
h1,
h2,
h3 {
  font-weight: 800;
  overflow-wrap: normal;
  text-wrap: balance;
}

h1 {
  margin: 0 0 20px;
  font-size: clamp(2.5rem, 1.55rem + 3.7vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

p,
li {
  text-wrap: pretty;
}

.lede {
  margin: 0;
  max-width: 33rem;
  color: var(--text-secondary);
  font-size: 1.125rem;
}

/* Request an invitation. The page has no script, so every message is in the page and the one the address fragment
   names is shown (:target, set by the 303 the form's script answers with). After a successful request the form gives
   way to its message. */
.request {
  max-width: 33rem;
  margin: 32px 0 0;
  scroll-margin-top: 24px;
}

.request-form {
  margin: 0;
}

.request-form label {
  display: block;
  margin: 0 0 8px;
  font-size: 0.9375rem;
  font-weight: 700;
}

/* On a phone the field and the button stack. flex: none, because in a column a flex basis would set the field's
   height, not its width. */
.field-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* text on surface 16.30; the field's edge, field-edge on background, 4.07 [DERIVED]. */
.field-row input {
  flex: none;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--field-edge);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

/* white on primary 5.70 (design/04); white on primary-hover 7.10 [DERIVED]. */
.field-row button {
  flex: none;
  width: 100%;
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: var(--primary);
  color: var(--white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.field-row button:hover {
  background: var(--primary-hover);
}

/* Arriving from a link to #request (the closing link, or the script's answer to a GET), and while the field has
   focus, the field's edge turns accent: accent on background 7.97 and on surface 7.03 (design/04). Stacked on a phone
   the edge is the field's own; from 520 px it is the bar's. The field and the button keep their own focus outlines. */
#request:target .field-row,
#request:target .field-row input,
.field-row:focus-within {
  border-color: var(--accent);
}

.fine {
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.fine + .fine {
  margin-top: 4px;
}

/* The script's answer lands on /#request-...; the margin keeps the headline in view above the message: at 1280 by 900
   the page scrolls 144 px instead of 234, and 92 px at 390 by 900 [MEASURED 2026-10-11 in headless Chrome]. */
.msg {
  display: none;
  scroll-margin-top: 40vh;
  margin: 0 0 16px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-card);
  color: var(--text);
}

.msg:target {
  display: block;
}

/* text on the accent tint over surfaceCard 14.73, and on the error tint 15.22 [DERIVED]: the tint is painted over
   surfaceCard, as measured. */
.msg-ok:target {
  border-color: var(--accent);
  background: linear-gradient(rgba(6, 182, 212, 0.1), rgba(6, 182, 212, 0.1)) var(--surface-card);
}

.msg-bad:target {
  border-color: var(--error);
  background: linear-gradient(rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.12)) var(--surface-card);
}

.msg-ok:target ~ .request-form {
  display: none;
}

/* The trap field: out of sight and out of the tab order for people, still in the page for a robot that fills every
   field. Moved off-screen rather than display:none, which some robots skip. */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The approved kit's components, namespaced under .ui so they never touch the page's own classes. Text pairs:
   text/surfaceCard 17.11, textSecondary/surfaceCard 6.98, text/surfaceInset 17.97, textSecondary/surface 6.65,
   white/primary 5.70, white/primaryMuted 8.98. White initials sit on g4 (#5B21B6 to #0F172A), 8.98 or better. */
.ui {
  color: var(--text);
  font-family: var(--ui-font);
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: normal;
  text-align: left;
}

.ui p {
  margin: 0;
}

.ui .chips {
  display: flex;
  gap: 8px;
  overflow: hidden;
}

.ui .chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.ui .chip.on {
  background: var(--primary-muted);
  color: var(--white);
  font-weight: 800;
}

.ui .chip.ct {
  border: 1px solid var(--border);
}

.ui .lbl {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.ui .cap13 {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.ui .ink {
  color: var(--text);
}

/* A rank range such as Gold–Plat stays on one line: the en dash would otherwise allow a break after it. */
.ui .nw {
  white-space: nowrap;
}

.ui .name {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
}

.ui .pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.ui .avatar {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(140deg, #5b21b6, #0f172a);
  color: var(--white);
  font-size: 14px;
  font-weight: 750;
}

.ui .avatar.sq {
  border-radius: 11px;
}

.ui .avatar.big {
  width: 56px;
  height: 56px;
  font-size: 18px;
}

.ui .avatar.s {
  width: 30px;
  height: 30px;
  font-size: 11px;
}

/* Looking-for-group post (screen discover-lfg). The tag reads LFG; the board's status badge is not rebuilt. */
.ui .lfg {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: var(--surface-card);
}

.ui .hd {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ui .upc {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.ui .ttl {
  color: var(--text);
  font-size: 17px;
  font-weight: 800;
  line-height: 22px;
}

/* Party slots: filled seats in the kit gradient, open seats as dashed rings (textSecondary, 6.98 on surfaceCard). On
   the narrowest phones the count moves whole to the line below the seats. */
.ui .slots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ui .slots .a {
  width: 30px;
  height: 30px;
  margin-left: -6px;
  border: 2px solid var(--surface-card);
  border-radius: 50%;
  background: linear-gradient(140deg, #7c3aed, #06b6d4);
}

.ui .slots .a:first-child {
  margin-left: 0;
}

.ui .slots .s {
  width: 30px;
  height: 30px;
  border: 2px dashed var(--text-secondary);
  border-radius: 50%;
}

.ui .slots .n {
  margin-left: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.ui .host {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-inset);
}

.ui .host .who {
  flex: 1;
  min-width: 0;
}

/* Player card with the shared chips: game, platform, hours, language, play style (screens discover-players and
   discover-players-sheet). Idle chips keep the surface fill and edge so they show on a surfaceCard tile. */
.ui .player {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: var(--surface-card);
}

.ui .who-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ui .who-row .name {
  font-size: 17px;
}

.ui .cg-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 18px;
}

.ui .cg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ui .cg .chip {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

/* Clan row (screen discover-clans), without the member count or activity line. */
.ui .clan {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface-card);
}

.ui .clan .rt {
  flex: 1;
  min-width: 0;
}

/* The board: the three pieces placed by hand on an inset surface with a faint grid, like a squad's planning board. */
.board {
  min-width: 0;
  margin: 0;
}

.board-ui {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background-color: var(--surface-inset);
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.055) 1px, transparent 1px);
  background-position: 15px 15px;
  background-size: 28px 28px;
}

.board-ui .lfg,
.board-ui .player,
.board-ui .clan {
  box-shadow: var(--shadow);
}

.board-ui .player {
  margin-left: 16px;
}

.board-ui .clan {
  margin-right: 16px;
}

/* How it works */
.section {
  border-top: 1px solid var(--border);
}

.section .wrap {
  padding-top: 64px;
  padding-bottom: 72px;
}

h2 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.section-lede {
  max-width: 26rem;
  margin: 0;
  color: var(--text-secondary);
  font-size: 1.125rem;
}

.how-head {
  display: grid;
  gap: 28px;
  align-items: end;
}

/* The five areas, drawn as the app's tab bar (Discover selected): text on surface 16.30, textSecondary on surface
   6.65, text on tabActiveBg 14.70. It repeats the sentence beside it, so it is hidden from assistive technology.
   A label is one word and never wraps; on the narrowest phones the labels drop to the kit's own tab-label size. */
.areas {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  max-width: 32rem;
  padding: 10px 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  background: var(--surface);
  overflow-wrap: normal;
}

.area {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.area .iw {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 30px;
  border-radius: 15px;
}

.area.on {
  color: var(--text);
}

.area.on .iw {
  background: var(--tab-active-bg);
}

.steps {
  display: grid;
  gap: 64px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h3 {
  margin: 0 0 12px;
  font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.step-copy p:last-child {
  max-width: 25rem;
  margin: 0;
  color: var(--text-secondary);
  font-size: 1.125rem;
}

@media (min-width: 860px) {
  .step-copy p:last-child {
    font-size: 1.1875rem;
  }
}

/* A screen of the approved design, cropped by its panel: the phone rises into the panel from its top padding, and the
   panel ends in a gap of the screen, never through a line of it. The phone is 220 px wide (0.2821 of the 780 by 1688
   image), 250 px from 520 (0.3205) and 290 px from 860 (0.3718). It starts 29 px below the panel's top edge (45 px
   from 860), and the panel shows it down to 30 px above its bottom edge (46 px from 860). Rows measured in the images
   by a pixel scan [MEASURED 2026-10-11]: on the profile the Valorant row ends at y 1095 and the About heading
   starts at 1135, so the crop ends at y 1114 to 1117; on the Clans tab the last row ends at 1239. */
.shot {
  position: relative;
  min-width: 0;
  margin: 0;
}

.shot-frame {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 352px;
  padding-top: 28px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  background-color: var(--surface-card);
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.045) 1px, transparent 1px);
  background-position: center top;
  background-size: 28px 28px;
}

.shot-frame img {
  flex: none;
  width: 220px;
  max-width: none;
}

/* 345 - 30 = 315 px of phone: y 1117 of the image, 22 under the Valorant row and 18 above About. */
.shot-profile .shot-frame {
  height: 345px;
}

/* 392 - 30 = 362 px of phone: y 1283, 44 under the last row. */
.shot-clans .shot-frame {
  height: 392px;
}

/* One line of each screen, enlarged and laid exactly over the line it repeats, so the phone shows it once. Each
   callout is centred on the phone and its top comes from the image (y in the 1688 px image). Profile: it covers the
   Rocket League row (808 to 943) with the "Plays" heading above it (757 to 791), clear of the action labels (to 706)
   and the Valorant row (from 960). Clans: it covers the Nightfall Esports row (424 to 583), whose second line counts
   members and join requests, with its section label above it (385 to 401), clear of the buttons (to 329) and the
   next label (from 627). Decorative copies of what the image shows, hidden from assistive technology. */
.callout {
  position: absolute;
  z-index: 1;
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
}

.shot-profile .callout {
  top: 235px;
}

.shot-clans .callout {
  top: 136px;
}

.callout .game-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--primary-border);
  border-radius: 16px;
  background: var(--surface-card);
  box-shadow: var(--shadow);
}

/* The Rocket League tile keeps the kit's orange gradient; its letters are dark (the background colour): 9.01 on
   #F59E0B, 6.61 at the midpoint and 5.14 on #EF4444 [DERIVED], because white falls to 2.15 there. */
.callout .tile {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(140deg, #f59e0b, #ef4444);
  color: var(--background);
  font-size: 13px;
  font-weight: 800;
}

.callout .game-row .name {
  font-size: 17px;
  font-weight: 800;
  line-height: 22px;
}

.callout .game-row .lbl {
  font-size: 13px;
  line-height: 18px;
}

/* The owned clan's row from the Clans tab (the kit's filled .lrow on surface, the leader's crown after the name),
   with the role in place of the counts: text on surface 16.30, textSecondary on surface 6.65 (design/04); the crown,
   warning on surface 7.94 (non-text; always beside the word Owner); initials white on g4, 8.98 or better [DERIVED]. */
.callout .clan-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 250px;
  padding: 10px 18px 10px 10px;
  border: 1px solid var(--primary-border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.callout .clan-row .name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 800;
  line-height: 22px;
  white-space: nowrap;
}

.callout .clan-row .lbl {
  font-size: 13px;
  line-height: 18px;
}

.ui .crown {
  color: var(--warning);
}

/* The conversation, rebuilt from the approved thread (screen conversation, state happy) with the kit's header and
   bubbles at their own sizes, and set straight on the page without a panel, so the three rows do not repeat one
   shape. The line the step is about is enlarged and lifted like the callouts. Left out: the presence line, the read
   receipt, the unread divider, the party invitation and the message composer. Pairs: their bubbles text on surface
   16.30, the reply white on primary 5.70, the date pill textSecondary on surface 6.65, the stamps textSecondary on
   background 7.55, the name text on background 18.50 (design/04); the initials white on g4, 8.98 or better. */
.thread-fig {
  min-width: 0;
  margin: 0;
}

/* In one column the thread lines up with the words above it; beside them (from 860 px) it is centred in its half. */
.ui.thread {
  max-width: 27.5rem;
  margin: 0;
}

.ui .th-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.ui .th-head .name {
  font-size: 17px;
  font-weight: 800;
}

.ui .th-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ui .datep {
  align-self: center;
  margin-bottom: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.ui .bub {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 21px;
}

.ui .bub.them {
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  background: var(--surface);
  color: var(--text);
}

.ui .bub.me {
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  background: var(--primary);
  color: var(--white);
}

.ui .bub.big {
  max-width: 100%;
  margin: 4px 0 0;
  padding: 12px 18px;
  border: 1px solid var(--primary-border);
  border-radius: 22px 22px 22px 8px;
  box-shadow: var(--shadow);
  font-size: 18px;
  line-height: 25px;
}

.ui .stamp {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.ui .stamp.l {
  align-self: flex-start;
}

.ui .stamp.r {
  align-self: flex-end;
}

/* Closing: the plain facts, then the one ask again as a link back to the form. */
.closing .wrap {
  padding-top: 56px;
}

.facts {
  display: grid;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
}

.facts li {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.facts li:last-child {
  border-bottom: 1px solid var(--border);
}

/* The band sits on the same faint grid as the board and the screen panels: text on surfaceCard 17.11 (design/04). */
.lobby {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 24px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background-color: var(--surface-card);
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.045) 1px, transparent 1px);
  background-position: 13px 13px;
  background-size: 28px 28px;
}

.lobby h2 {
  margin: 0;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 12px;
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

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

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 28px;
  padding-bottom: 36px;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

/* The wordmark again at the foot of every page, the privacy policy included, drawn from this file alone. It repeats
   the header, so its text alternative is empty (after the slash) and assistive technology skips it; a browser that
   does not know that syntax keeps the first declaration. text on background 18.50 (design/04). */
.site-footer .wrap::before {
  content: "Clanova";
  content: "Clanova" / "";
  flex-basis: 100%;
  min-height: 26px;
  margin-bottom: 4px;
  padding-left: 36px;
  background: url("favicon.svg") left center / 26px 26px no-repeat;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 26px;
  letter-spacing: -0.02em;
}

.site-footer p {
  margin: 0;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.site-footer .legal {
  flex-basis: 100%;
  font-size: 0.8125rem;
}

/* The privacy policy: the reading column only, so the header and footer stay as on the home page. Its first list,
   "In short", sits on a card: textSecondary on surfaceCard 6.98, links 7.37 [DERIVED]. */
.doc main .wrap {
  max-width: 760px;
  padding-top: 24px;
  padding-bottom: 80px;
}

.doc h1 {
  margin: 0 0 10px;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
}

.doc h2 {
  margin: 44px 0 12px;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.doc main h2:first-of-type {
  margin-top: 36px;
}

.doc main h2:first-of-type + ul {
  margin: 0;
  padding: 18px 24px 18px 44px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-card);
}

.doc p,
.doc li {
  color: var(--text-secondary);
}

.doc ul {
  padding-left: 1.25em;
}

.doc li + li {
  margin-top: 8px;
}

.doc strong {
  color: var(--text);
}

.updated {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

/* Sign-in and not-found pages: one panel in the kit's state-panel shape, a glyph in a tinted well, a headline, one
   line and one way forward. text on surface 16.30, textSecondary on surface 6.65. */
/* The board's faint grid behind the panel, fading out toward the edges so it has no hard border. */
.gate main {
  position: relative;
  isolation: isolate;
}

.gate main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
  background-position: center top;
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 35%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 35%, #000 25%, transparent 75%);
}

.gate main .wrap {
  padding-top: 32px;
  padding-bottom: 72px;
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 30rem;
  margin: 0 auto;
  padding: 36px 24px 32px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}

.panel .well {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--text);
}

.panel h1 {
  margin: 0;
  font-size: clamp(2.25rem, 1.8rem + 2vw, 2.75rem);
}

.panel p {
  max-width: 24rem;
  margin: 0;
  color: var(--text-secondary);
}

.panel .button {
  margin-top: 12px;
}

/* Narrow phones (under 400 px): the tab bar takes the kit's own icon well (44 by 28) and less padding, and its labels
   drop to 12 px, so each fits its fifth of the bar: "Messages" in bold measures 54.2 px at 12 px against a 59.6 px cell
   at 360 [MEASURED 2026-10-11 in headless Chrome]. */
@media (max-width: 399px) {
  .areas {
    gap: 2px;
    padding: 8px 6px 10px;
  }

  .area {
    gap: 4px;
    font-size: 0.75rem;
  }

  .area .iw {
    width: 44px;
    height: 28px;
    border-radius: 14px;
  }
}

/* The smallest phones (under 360 px): the tab labels take the kit's tab-label size, 11 px ("Messages" 49.7 px against
   a 51.6 px cell at 320), the board's pieces stop staggering and use the full width, and the callouts' names shrink a
   step to stay inside their 280 px panels. The callouts' tops do not change: the phone stays 220 px wide. */
@media (max-width: 359px) {
  .area {
    font-size: 0.6875rem;
  }

  .area .iw {
    width: 40px;
  }

  .board-ui .player,
  .board-ui .clan {
    margin-right: 0;
    margin-left: 0;
  }

  /* Room for the clan's name on one line: "Nightfall Esports" measures 118.7 px; the text column grows from 101 px to
     125 px at 320 [MEASURED 2026-10-11 in headless Chrome]. */
  .board-ui {
    padding: 12px;
  }

  .ui .clan {
    gap: 10px;
    padding: 12px;
  }

  .ui .clan .avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .ui .clan .pill {
    padding: 0 12px;
  }

  /* The party count (77.9 px) has as little as 52 px beside the seats at 320 [MEASURED 2026-10-11 in headless Chrome],
     so on these phones it takes its own line, flush with the seats. */
  .ui .slots .n {
    flex-basis: 100%;
    margin-left: 0;
  }

  .callout .game-row .name,
  .callout .clan-row .name {
    font-size: 16px;
  }
}

@media (min-width: 520px) {
  /* One bar from here up: the field and its button joined, with the field's edge on the bar (4.07 on background). */
  .field-row {
    flex-direction: row;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--field-edge);
    border-radius: 16px;
    background: var(--surface);
  }

  .field-row input {
    flex: 1 1 auto;
    width: auto;
    min-height: 48px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
  }

  .field-row button {
    flex: 0 0 auto;
    width: auto;
    min-height: 48px;
    border-radius: 11px;
  }

  .board-ui {
    gap: 14px;
    padding: 22px;
  }

  .board-ui .lfg,
  .board-ui .clan {
    margin-right: 48px;
  }

  .board-ui .player {
    margin-left: 48px;
  }

  .shot-frame img {
    width: 250px;
  }

  /* 387 - 30 = 357 px of phone: y 1114 of the image. */
  .shot-profile .shot-frame {
    height: 387px;
  }

  /* 436 - 30 = 406 px of phone: y 1267. */
  .shot-clans .shot-frame {
    height: 436px;
  }

  .shot-profile .callout {
    top: 259px;
  }

  .shot-clans .callout {
    top: 151px;
  }

  .callout .game-row {
    gap: 14px;
    min-width: 300px;
    padding: 12px 18px 12px 12px;
    border-radius: 18px;
  }

  .callout .tile {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 14px;
  }

  .callout .game-row .name {
    font-size: 19px;
    line-height: 24px;
  }

  .callout .game-row .lbl {
    font-size: 14px;
    line-height: 20px;
  }

  .callout .clan-row {
    gap: 14px;
    min-width: 300px;
    padding: 12px 20px 12px 12px;
    border-radius: 18px;
  }

  .callout .clan-row .avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 15px;
  }

  .callout .clan-row .name {
    font-size: 19px;
    line-height: 24px;
  }

  .callout .clan-row .lbl {
    font-size: 14px;
    line-height: 20px;
  }

  .callout .clan-row .crown {
    width: 15px;
    height: 15px;
  }
}

@media (min-width: 760px) {
  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .facts li,
  .facts li:last-child {
    padding: 16px 0 0;
    border-bottom: 0;
  }
}

@media (min-width: 860px) {
  .section .wrap {
    padding-top: 96px;
    padding-bottom: 104px;
  }

  .closing .wrap {
    padding-top: 72px;
  }

  .steps {
    gap: 96px;
    margin-top: 72px;
  }

  .step {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
  }

  .step:nth-child(even) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .step:nth-child(even) .step-copy {
    order: 2;
  }

  .shot-frame {
    padding-top: 44px;
  }

  .shot-frame img {
    width: 290px;
  }

  /* 460 - 46 = 414 px of phone: y 1114 of the image. */
  .shot-profile .shot-frame {
    height: 460px;
  }

  /* 516 - 46 = 470 px of phone: y 1264. */
  .shot-clans .shot-frame {
    height: 516px;
  }

  .shot-profile .callout {
    top: 322px;
  }

  .shot-profile .callout .game-row {
    min-width: 340px;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .shot-clans .callout {
    top: 186px;
  }

  .callout .clan-row {
    min-width: 340px;
    padding: 13px 22px 13px 13px;
  }

  .callout .clan-row .avatar {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    font-size: 16px;
  }

  .ui.thread {
    margin: 0 auto;
  }

  .ui .bub {
    font-size: 16px;
    line-height: 22px;
  }

  .ui .bub.big {
    padding: 14px 20px;
    font-size: 22px;
    line-height: 29px;
  }
}

@media (min-width: 960px) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    gap: 56px;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 96px;
  }

  .lede {
    font-size: 1.1875rem;
  }

  .how-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
    gap: 48px;
  }

  /* The closing band turns into one row only here, where the heading has room for its words beside the button. */
  .lobby {
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 32px 36px;
  }

  .lobby h2 {
    flex: 1;
  }
}

/* Colour. Each area of the app has its own tone, used for its icon, its step and its card: Discover violet, Feed
   pink, Clans amber, Messages green, Profile cyan. The tones are lighter steps of the palette's primary, accent,
   success and warning hues, chosen so every text pair passes [DERIVED, WCAG 2.2, alpha composited in sRGB over the
   brightest point behind the text]. Only the violet wash sits behind text: with the cyan and pink glows on top,
   textSecondary would fall to 3.55, so those glows stay around the board, cast away from the words. */
:root {
  --violet-ink: #c4b5fd;
  --violet-tone: #a78bfa;
  --pink-tone: #f472b6;
  --amber-ink: #fcd34d;
  --amber-tone: #fbbf24;
  --green-ink: #86efac;
  --green-tone: #4ade80;
  --cyan-ink: #67e8f9;
  --cyan-tone: #22d3ee;
}

/* The violet wash at the top of every page. At its brightest (0.40 over background) text measures 12.69,
   textSecondary 5.18 and the accent link 5.47 [DERIVED]. Sized in pixels, so a long page does not stretch it. */
body {
  background:
    radial-gradient(900px 620px at 12% -140px, rgba(124, 58, 237, 0.4), transparent 70%) no-repeat,
    var(--background);
}

/* The status tag in green: green-ink on surface 12.15 [DERIVED]. */
.tag {
  border-color: rgba(34, 197, 94, 0.45);
  color: var(--green-ink);
}

.tag .ico {
  color: var(--green-ink);
}

/* One word of the headline in a violet, cyan and green blend; each stop on the wash 4.88 or better [DERIVED], for
   large text that needs 3. The plain colour stays where text cannot be painted with a background. */
.hl {
  color: var(--violet-ink);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hl {
    background: linear-gradient(90deg, var(--violet-tone), var(--cyan-ink) 55%, var(--green-ink));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* The request button in a violet to magenta blend: white on #7c3aed 5.70 and on #a21caf 6.32 [DERIVED]. */
.field-row button {
  background: linear-gradient(135deg, var(--primary), #a21caf);
}

.field-row button:hover {
  background: linear-gradient(135deg, var(--primary-hover), #86198f);
}

/* The board glows in violet and cyan, cast downward, away from the words above it on a phone. */
.board-ui {
  border-color: rgba(167, 139, 250, 0.35);
  box-shadow:
    0 40px 90px -40px rgba(124, 58, 237, 0.7),
    40px 30px 90px -50px rgba(6, 182, 212, 0.55),
    -30px 50px 90px -60px rgba(236, 72, 153, 0.45);
}

/* The LFG tag in violet: violet-ink on its tint over surfaceCard 9.16 [DERIVED]. */
.board-ui .upc {
  background: rgba(124, 58, 237, 0.24);
  color: var(--violet-ink);
}

/* Why Clanova: the problem, then what Clanova does about it, one card per answer. */
.kicker {
  margin: 0 0 14px;
  color: #f9a8d4;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.why-head {
  max-width: 46rem;
}

.why-head h2 {
  margin-bottom: 16px;
}

.why-head .section-lede {
  max-width: 36rem;
}

.cards {
  display: grid;
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

/* Each card is its own colour field, lightest at the top left, with a glow in the top right corner. Measured at the
   glow's centre over the lightest stop [DERIVED]: white headings 5.09 or better (large, needs 3), body text 4.89 or
   better, and the problem line 4.55 or better. */
.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 28px;
  border-radius: 24px;
  box-shadow: var(--shadow);
  color: var(--white);
}

.card .well {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
}

.card .prob {
  margin: 0 0 4px;
  font-size: 0.9375rem;
  font-weight: 700;
}

.card h3 {
  margin: 0;
  color: var(--white);
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem);
}

.card p {
  margin: 0;
}

.card-violet {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(236, 72, 153, 0.3), transparent 55%),
    linear-gradient(155deg, #5b21b6, #1e1b4b);
}

.card-violet .prob {
  color: #ddd6fe;
}

.card-violet p:last-child {
  color: #f5f3ff;
}

.card-teal {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(6, 182, 212, 0.3), transparent 55%),
    linear-gradient(155deg, #155e75, #0b2530);
}

.card-teal .prob {
  color: #cffafe;
}

.card-teal p:last-child {
  color: #ecfeff;
}

.card-ember {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(249, 115, 22, 0.28), transparent 55%),
    linear-gradient(155deg, #9a3412, #3b0d1a);
}

.card-ember .prob {
  color: #fef3c7;
}

.card-ember p:last-child {
  color: #fffbeb;
}

/* The tab bar's icons in their area's tone (non-text, 3:1 needed): 6.27, 6.44, 10.22, 9.79 and 9.44 on surface
   [DERIVED]. */
.area:nth-child(1) .ico {
  color: var(--violet-tone);
}

.area:nth-child(2) .ico {
  color: var(--pink-tone);
}

.area:nth-child(3) .ico {
  color: var(--amber-tone);
}

.area:nth-child(4) .ico {
  color: var(--green-tone);
}

.area:nth-child(5) .ico {
  color: var(--cyan-tone);
}

/* The three steps, numbered, each in its area's tone: Profile cyan, Messages green, Clans amber. The eyebrow becomes
   a pill: its ink on its tint over background 10.9 or better [DERIVED]. Each screen panel takes a glow in the same
   tone. */
.steps {
  counter-reset: step;
}

.step {
  counter-increment: step;
}

.step:nth-child(1) {
  --tone-ink: var(--cyan-ink);
  --tone-soft: rgba(6, 182, 212, 0.14);
  --tone-edge: rgba(34, 211, 238, 0.4);
  --tone-glow: rgba(6, 182, 212, 0.3);
}

.step:nth-child(2) {
  --tone-ink: var(--green-ink);
  --tone-soft: rgba(34, 197, 94, 0.14);
  --tone-edge: rgba(74, 222, 128, 0.4);
  --tone-glow: rgba(34, 197, 94, 0.26);
}

.step:nth-child(3) {
  --tone-ink: var(--amber-ink);
  --tone-soft: rgba(245, 158, 11, 0.14);
  --tone-edge: rgba(251, 191, 36, 0.4);
  --tone-glow: rgba(245, 158, 11, 0.24);
}

.step .eyebrow {
  display: inline-flex;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--tone-edge);
  border-radius: 999px;
  background: var(--tone-soft);
  color: var(--tone-ink);
}

.step .eyebrow::before {
  content: counter(step, decimal-leading-zero);
  padding-right: 6px;
  border-right: 1px solid var(--tone-edge);
}

.step .shot-frame {
  border-color: var(--tone-edge);
  background-image:
    radial-gradient(70% 55% at 50% 0%, var(--tone-glow), transparent 70%),
    linear-gradient(rgba(148, 163, 184, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.045) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
}

/* The conversation has no frame of its own, so its glow sits behind it: textSecondary (the date and the times) on
   the glow's centre, 0.16 over background, 5.93 [DERIVED]. */
.step .thread-fig {
  background: radial-gradient(60% 60% at 50% 45%, rgba(34, 197, 94, 0.16), transparent 70%);
}

/* Closing: the facts as chips in three tones (ink on its tint over background 10.88 or better [DERIVED]), then the
   band in a violet, magenta and rose blend. White text measures 6.04 or better on every stop of the band, the white
   button's primaryMuted text 8.98, and its focus ring, white on the band, 6.04 [DERIVED]. */
.closing .facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 32px;
}

.closing .facts li,
.closing .facts li:last-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.closing .facts li:nth-child(1) {
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(34, 197, 94, 0.14);
  color: var(--green-ink);
}

.closing .facts li:nth-child(2) {
  border-color: rgba(34, 211, 238, 0.4);
  background: rgba(6, 182, 212, 0.14);
  color: var(--cyan-ink);
}

.closing .facts li:nth-child(3) {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(245, 158, 11, 0.14);
  color: var(--amber-ink);
}

.closing .lobby {
  border: 0;
  background: linear-gradient(120deg, #6d28d9, #a21caf 55%, #be185d);
  box-shadow: 0 30px 80px -30px rgba(190, 24, 93, 0.6);
}

.lobby-copy p {
  max-width: 34rem;
  margin: 10px 0 0;
  color: var(--white);
  font-size: 1.0625rem;
}

.closing .lobby .button {
  background: var(--white);
  color: var(--primary-muted);
}

.closing .lobby .button:hover {
  background: #f5f3ff;
}

.closing .lobby .button:focus-visible {
  outline-color: var(--white);
}

/* The sign-in and not-found panels: a violet edge and glow, and the glyph's well in a violet to teal blend (white
   glyph 5.36 or better on it [DERIVED]). */
.panel {
  border-color: rgba(167, 139, 250, 0.35);
  box-shadow: 0 30px 80px -30px rgba(124, 58, 237, 0.6);
}

.panel .well {
  background: linear-gradient(135deg, var(--primary), #0e7490);
  color: var(--white);
}

@media (min-width: 860px) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 56px;
  }

  .card {
    padding: 30px 28px 32px;
  }
}

@media (min-width: 960px) {
  .lobby-copy {
    flex: 1;
  }
}

/* In Windows' high-contrast mode backgrounds are dropped, so the headline word keeps its own colour. */
@media (forced-colors: active) {
  .hl {
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* Nothing on the page moves; if a later change adds a transition or an animation, a visitor who asks for less motion
   still gets none. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Printing and save-as-PDF drop the dark background, so print uses the light-theme text, secondary-text, border and
   card colours from design/04 (Colour tokens, per theme) on white paper. The light accent fails on white there (3.68
   in design/04), so links print in the text colour and stay underlined. The illustrations drawn in HTML are left out:
   without their backgrounds they would print as loose words. */
@media print {
  :root {
    --background: #ffffff;
    --surface: #ffffff;
    --surface-card: #ffffff;
    --surface-inset: #ffffff;
    --border: #d5dce8;
    --text: #0f172a;
    --text-secondary: #475569;
    --accent: #0f172a;
    color-scheme: light;
  }

  .request,
  .nav-link,
  .board,
  .areas,
  .callout,
  .thread-fig,
  .lobby .button {
    display: none;
  }

  .gate main::before {
    display: none;
  }

  .panel {
    box-shadow: none;
  }

  /* Without their colour fields the cards, the band and the headline word print as dark text on white. */
  body {
    background: var(--background);
  }

  .hl {
    background: none;
    color: var(--text);
    -webkit-text-fill-color: currentColor;
  }

  .card,
  .closing .lobby {
    border: 1px solid var(--border);
    background: none;
    box-shadow: none;
  }

  .card,
  .card h3,
  .card p,
  .card .prob,
  .lobby-copy p {
    color: var(--text);
  }

  .card .well {
    display: none;
  }
}