/*
 * Product site styles.
 *
 * The first :root block transcribes tokens of the design system's token sheet, with the same
 * names and values. No raw colour value appears anywhere outside the two :root blocks.
 */
:root {
  color-scheme: dark;

  /* colour: neutrals */
  --color-canvas: #0a0c0f;
  --color-surface: #0f1216;
  --color-surface-raised: #161a20;
  --color-text-primary: #e6eaef;
  --color-text-secondary: #a3acb8;
  --color-text-tertiary: #838d9a;
  --color-text-disabled: #4e5662;
  --color-line-faint: rgba(200, 220, 255, 0.06);
  --color-line-rule: rgba(200, 220, 255, 0.10);
  --color-line-strong: rgba(200, 220, 255, 0.16);
  --color-line-control: rgba(200, 220, 255, 0.44);
  --color-line-signal: rgba(60, 200, 224, 0.60);

  /* colour: the one accent */
  --color-signal-cyan: #3cc8e0;
  --color-signal-wash: #102328;

  /* colour: status */
  --color-status-ok: #3fcf8e;
  --color-status-pending: #8ea2bc;
  --color-status-late: #f0b03f;
  --color-status-frozen: #b9d1f0;
  --color-status-error: #ff6e6e;
  --color-late-wash: #262015;
  --color-frozen-wash: #1c2026;
  --color-error-wash: #2c1a1c;

  /* colour: team */
  --color-team-ally: #5a9cff;
  --color-team-ally-wash: #172335;
  --color-line-ally: rgba(90, 156, 255, 0.72);
  --color-team-enemy: #f0485a;
  --color-team-enemy-wash: #2f161b;
  --color-line-enemy: rgba(240, 72, 90, 0.72);

  /* type: digits inside text, and weights */
  --numeral-scale: 0.93em;
  --font-weight-regular: 400;
  --font-weight-strong: 600;

  /* shape */
  --radius-none: 0px;
  --radius-xs: 2px;
  --border-width: 1px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --bar-height: 2px;
  --pip-size: 6px;

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --press-scale: 0.97;
}

/*
 * Site tokens. These are not design-system tokens: the site is public, so each family keeps the
 * design system's faces first and adds system fallbacks for other platforms, and the sizes below
 * set the site's own scale, grid and rhythm.
 *
 * Grid: one container, at most 1240px of content, centred. From 1024px the content is twelve
 * columns with a 24px gap. Rhythm: every section opens 64, 88 or 112px below the one before it
 * (phone, tablet, desktop), on a hairline.
 */
:root {
  --font-text: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-label: Bahnschrift, "DIN Alternate", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-numeric: "Cascadia Mono", Consolas, ui-monospace, Menlo, monospace;

  --site-max: 1240px;
  --site-gutter: 16px;
  --grid-gap: 24px;
  --section-pad: 64px;
  --hero-pad: 40px;
  --head-gap: 32px;
  --header-height: 0px;
  --measure: 62ch;
  --control-height: 48px;
  --replay-time: 5.5rem;
  --replay-status: 6.5rem;
  --panel-shift: 6px;
  --rune-gap: 8px;
  --rune-options: 184px;
}

/* The narrowest phones: the replay's step names keep whole words. */
@media (max-width: 359.98px) {
  :root {
    --replay-time: 4.75rem;
    --replay-status: 5.5rem;
    --rune-gap: 4px;
    --rune-options: 172px;
  }
}

@media (min-width: 640px) {
  :root {
    --site-gutter: 24px;
    --section-pad: 88px;
    --hero-pad: 56px;
    --head-gap: 40px;
    --header-height: 56px;
  }
}

@media (min-width: 1024px) {
  :root {
    --site-gutter: 32px;
    --section-pad: 112px;
    --hero-pad: 48px;
    --head-gap: 48px;
    --replay-time: 6.5rem;
  }
}

/* ------------------------------------------------------------------ base */

/* Anything scrolled into view clears the sticky header and the bottom edge by 8px, so a focus ring
   (2px offset, 2px line) is never cut. */
html {
  overflow-x: clip;
  scroll-padding-top: calc(var(--header-height) + 8px);
  scroll-padding-bottom: 8px;
  background-color: var(--color-canvas);
  scrollbar-color: var(--color-line-control) transparent;
  scrollbar-width: thin;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  margin: 0;
  background-color: var(--color-canvas);
  color: var(--color-text-secondary);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 26px;
  font-weight: var(--font-weight-regular);
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

p,
dd,
li,
td,
th,
figcaption {
  text-wrap: pretty;
}

:focus-visible {
  outline: var(--focus-width) solid var(--color-signal-cyan);
  outline-offset: var(--focus-offset);
}

/* Links and buttons carry their own press state, so a tap draws no second, browser-coloured box. */
a,
button {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background-color: var(--color-signal-wash);
  color: var(--color-text-primary);
}

/* ------------------------------------------------------------------ type */

h1,
h2,
h3 {
  min-width: 0;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-weight: var(--font-weight-strong);
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Three lines at every width: the first sentence, then the second balanced over two. */
h1 {
  max-width: 7.4em;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* From 640px to 1023px the hero is one column as wide as the page, so the head keeps its weight. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  h1 {
    font-size: clamp(44px, 8.4vw, 64px);
  }
}

h2 {
  max-width: 24em;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.16;
  letter-spacing: -0.015em;
}

/* Digits in a head keep the mono face, set a little closer so a decimal point does not gape. */
h1 .num,
h2 .num,
.statement .num {
  letter-spacing: -0.05em;
}

h3 {
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.005em;
}

.lead {
  max-width: var(--measure);
  font-size: 18px;
  line-height: 28px;
}

.label {
  color: var(--color-text-tertiary);
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.caption,
figcaption,
.note {
  color: var(--color-text-tertiary);
  font-size: 14px;
  line-height: 22px;
}

.caption,
figcaption {
  max-width: var(--measure);
}

/* The Tabular Rule: every digit sits in the numeric family with tabular figures. */
.num,
.readout {
  font-family: var(--font-numeric);
  font-size: var(--numeral-scale);
  font-variant-numeric: tabular-nums;
}

/* A date in running text stays on one line: at 390px the hero note broke 2026-11-10 at a hyphen. */
.note .num,
.lead .num {
  white-space: nowrap;
}

.readout {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-primary);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ layout */

.container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--site-max) + 2 * var(--site-gutter));
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

/* An anchor lands 24px above the section's hairline, not on its top padding. */
.section {
  padding-top: var(--section-pad);
  scroll-margin-top: calc(24px - var(--section-pad));
}

/* A section opens on a hairline: its label, its head and the one line under it. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 16px;
  margin-bottom: var(--head-gap);
  padding-top: 20px;
  border-top: 1px solid var(--color-line-rule);
}

.section-head > .label {
  margin-bottom: 4px;
}

@media (min-width: 1024px) {
  .section-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: baseline;
    padding-top: 24px;
  }

  .section-head > .label {
    grid-column: 1 / 4;
    margin-bottom: 0;
  }

  .section-head > h2 {
    grid-column: 4 / 12;
  }

  .section-head > .lead {
    grid-column: 4 / 11;
  }
}

/* ------------------------------------------------------------------ header */

.site-header {
  border-bottom: 1px solid var(--color-line-strong);
  background-color: var(--color-surface);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 32px;
}

/* The wordmark is the link to the top of the home page: no underline at rest, the nav links' hover
   and press rules. */
.wordmark {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  color: var(--color-text-primary);
  font-family: var(--font-label);
  font-size: 13px;
  line-height: 16px;
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 16px;
  width: 100%;
  border-top: 1px solid var(--color-line-faint);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--color-text-secondary);
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Below 360px the four links do not fit one row: two even rows of two, never one link alone. */
@media (max-width: 359.98px) {
  .site-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* From 640px the header is one sticky row; on a phone it scrolls away and gives the screen back. */
@media (min-width: 640px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .header-inner {
    flex-wrap: nowrap;
    height: calc(var(--header-height) - 1px);
  }

  .site-nav {
    justify-content: flex-end;
    column-gap: 32px;
    width: auto;
    border-top: 0;
  }
}

/* ------------------------------------------------------------------ actions and links */

.button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--control-height);
  padding: 0 24px;
  border: 1px solid var(--color-line-control);
  border-radius: var(--radius-xs);
  background-color: var(--color-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-label);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 120ms var(--ease-out), background-color 150ms ease, border 150ms ease;
}

.button[hidden] {
  display: none;
}

.button-small {
  min-height: 44px;
  padding: 0 16px;
}

.button:active {
  border: 1px solid var(--color-line-signal);
  transform: scale(var(--press-scale));
}

/* The one filled action, the hero's: an Instrument White ground. Its edge is the faintest line token,
   which disappears into the fill. Hover and press turn it into the outlined button at once (the
   ground does not fade, so the text never sits on a half-faded fill). */
.button-primary {
  border: 1px solid var(--color-line-faint);
  background-color: var(--color-text-primary);
  color: var(--color-canvas);
  transition: transform 120ms var(--ease-out), border 150ms ease;
}

.button-primary:active {
  border: 1px solid var(--color-line-signal);
  background-color: var(--color-canvas);
  color: var(--color-text-primary);
}

.action-link {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  min-height: var(--control-height);
  color: var(--color-text-secondary);
  font-family: var(--font-label);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.06em;
  text-decoration-line: underline;
  text-decoration-color: var(--color-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 120ms var(--ease-out);
}

.action-link:active {
  color: var(--color-text-primary);
  text-decoration-color: var(--color-line-signal);
  transform: scale(var(--press-scale));
}

.text-link {
  color: var(--color-text-primary);
  text-decoration-line: underline;
  text-decoration-color: var(--color-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.text-link:active,
.nav-link:active,
.wordmark:active {
  color: var(--color-text-primary);
  text-decoration-line: underline;
  text-decoration-color: var(--color-line-signal);
}

/* ------------------------------------------------------------------ hero */

.hero {
  padding-top: var(--hero-pad);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 48px;
}

.hero-text {
  min-width: 0;
}

.hero-lead {
  max-width: 30em;
  margin-top: 24px;
  color: var(--color-text-primary);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
  margin-top: 32px;
}

.note {
  max-width: 34em;
  margin-top: 20px;
}

@media (max-width: 479.98px) {
  .actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .actions > .button {
    justify-self: stretch;
  }
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: center;
  }

  .hero-text {
    grid-column: 1 / 6;
  }

  .replay {
    grid-column: 7 / 13;
  }
}

/* ------------------------------------------------------------------ lock replay */

/* A readout of one lock: time, what was set, its status. Status changes are instant. */
.replay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  min-width: 0;
}

.replay-rows {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-line-strong);
  border-bottom: 1px solid var(--color-line-rule);
}

.replay-row {
  display: grid;
  grid-template-columns: var(--replay-time) minmax(0, 1fr) var(--replay-status);
  grid-template-areas:
    "time what status"
    "time detail detail";
  align-items: baseline;
  column-gap: 16px;
  padding-block: 20px;
}

.replay-row + .replay-row {
  border-top: 1px solid var(--color-line-faint);
}

.replay-time.num {
  grid-area: time;
  color: var(--color-text-primary);
  font-size: 20px;
  line-height: 26px;
  font-weight: var(--font-weight-strong);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.replay-what {
  grid-area: what;
  min-width: 0;
  color: var(--color-text-secondary);
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

/* What each write set, from the first draft's engine output: icons beside their names. */
.replay-detail {
  grid-area: detail;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 16px;
  min-width: 0;
  margin-top: 8px;
}

.replay-detail:empty {
  display: none;
}

/* The still beat before the lock lands: the lock row keeps its place, its status and champion unseen.
   Opacity rather than visibility, which a loaded icon's image would override. */
.replay-row.is-waiting > .status,
.replay-row.is-waiting > .replay-detail {
  opacity: 0;
}

.replay figcaption {
  grid-column: 1;
  grid-row: 2;
  margin-top: 16px;
}

/* A quiet control beside the caption: the page's one filled action is the hero's. */
.replay-button {
  grid-column: 2;
  grid-row: 2;
  margin-top: 16px;
  padding: 0 12px;
  border: 1px solid var(--color-line-strong);
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
}

/* On a phone the caption takes the full width and the button its own row under it, at the left:
   beside the button the caption would be squeezed into a narrow column. */
@media (max-width: 479.98px) {
  .replay figcaption {
    grid-column: 1 / -1;
  }

  .replay-button {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
  }
}

/* A status word with its pip: filled once settled, hollow while in flight. */
.status {
  grid-area: status;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-label);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pip {
  flex-shrink: 0;
  align-self: center;
  width: var(--pip-size);
  height: var(--pip-size);
  background-color: currentColor;
}

.pip-hollow {
  background-color: transparent;
  outline: 1px solid currentColor;
  outline-offset: -1px;
}

.status-ok {
  color: var(--color-status-ok);
}

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

.status-frozen {
  color: var(--color-status-frozen);
}

.replay-detail .named-name {
  color: var(--color-text-secondary);
}

.replay-champion > .named-name {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-strong);
}

.replay-trees {
  min-width: 0;
  color: var(--color-text-tertiary);
  font-size: 14px;
  line-height: 20px;
}

/* ------------------------------------------------------------------ icons */

/* A square box sized before its image exists, its monogram behind the image. The image shows once it
   has loaded (at once when the same address loaded before) and is removed if it fails. */
.icon {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--radius-none);
  background-color: var(--color-surface-raised);
  color: var(--color-text-secondary);
  vertical-align: top;
}

.icon-40 {
  width: 40px;
  height: 40px;
}

.icon-32 {
  width: 32px;
  height: 32px;
}

.icon-24 {
  width: 24px;
  height: 24px;
}

.icon-20 {
  width: 20px;
  height: 20px;
}

.icon-ally {
  border: 1px solid var(--color-line-ally);
  background-color: var(--color-team-ally-wash);
  color: var(--color-team-ally);
}

.icon-enemy {
  border: 1px solid var(--color-line-enemy);
  background-color: var(--color-team-enemy-wash);
  color: var(--color-team-enemy);
}

.icon-item {
  border: 1px solid var(--color-line-rule);
}

.icon.is-empty {
  background-color: transparent;
}

.icon-mono {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--font-weight-strong);
  text-transform: uppercase;
}

.icon-32 > .icon-mono,
.icon-40 > .icon-mono {
  font-size: 14px;
  line-height: 20px;
}

.icon-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  visibility: hidden;
}

.icon.is-known > .icon-img,
.icon.is-loaded > .icon-img {
  visibility: visible;
}

.icon.is-loaded > .icon-mono {
  visibility: hidden;
}

/* A rune is a glyph on a transparent ground: once its image is in, the tile behind it goes too. */
.icon-rune.is-loaded {
  background-color: transparent;
}

/* An icon before its name, as one unit; the box sits on the name's first line. */
.named {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  vertical-align: top;
}

.named-name {
  min-width: 0;
  color: var(--color-text-primary);
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.named-24 > .named-name {
  padding-top: 2px;
}

.named-32 > .named-name {
  padding-top: 6px;
}

.named-name.is-open {
  color: var(--color-text-tertiary);
}

/* ------------------------------------------------------------------ fact strip */

.facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 56px;
  border-top: 1px solid var(--color-line-rule);
  border-bottom: 1px solid var(--color-line-rule);
}

.fact {
  min-width: 0;
  padding-block: 20px;
}

.fact + .fact {
  border-top: 1px solid var(--color-line-faint);
}

.fact dt {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: 16px;
}

.fact-figure.num {
  color: var(--color-text-primary);
  font-size: 40px;
  line-height: 44px;
  font-weight: var(--font-weight-strong);
  letter-spacing: -0.02em;
}

.fact-label {
  min-width: 0;
  color: var(--color-text-primary);
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fact dd {
  max-width: 34em;
  margin-top: 4px;
  padding-left: calc(3rem + 16px);
}

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

  .fact {
    padding-block: 24px 28px;
    padding-inline: 12px;
  }

  .fact + .fact {
    border-top: 0;
    border-left: 1px solid var(--color-line-rule);
  }

  .fact:first-child {
    padding-left: 0;
  }

  .fact:last-child {
    padding-right: 0;
  }

  .fact dt {
    display: block;
  }

  .fact-figure.num,
  .fact-label {
    display: block;
  }

  .fact-label {
    margin-top: 12px;
  }

  .fact dd {
    margin-top: 8px;
    padding-left: 0;
  }
}

/* Twelve columns: each figure spans four, and the shared rules sit in the middle of the gaps. The
   strip sits 40px under the hero so that at 1280 x 800 its three lines end above the fold. */
@media (min-width: 1024px) {
  .facts {
    margin-top: 40px;
    grid-template-columns:
      calc(100% / 3 - var(--grid-gap) / 6)
      calc(100% / 3 + var(--grid-gap) / 3)
      calc(100% / 3 - var(--grid-gap) / 6);
  }

  .fact {
    padding-inline: calc(var(--grid-gap) / 2);
  }
}

/* ------------------------------------------------------------------ explorer frame */

.explorer {
  position: relative;
  min-width: 0;
  border-top: 1px solid var(--color-line-strong);
  border-bottom: 1px solid var(--color-line-rule);
}

.explorer-noscript {
  max-width: var(--measure);
  padding-block: 40px;
  color: var(--color-text-tertiary);
}

.explorer-caption {
  margin-top: 16px;
}

/* ------------------------------------------------------------------ explorer controls */

/* The drafts: ruled cells, two by two on a phone and tablet, one row of four from 1024px. The
   selected one carries the 2px Signal Cyan bar on its top edge and the raised ground. */
.draft-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.draft-tab,
.moment-tab {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-none);
  background-color: var(--color-canvas);
  color: var(--color-text-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: transform 120ms var(--ease-out), background-color 150ms ease;
}

.draft-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
}

.draft-tab:nth-child(even) {
  border-left: 1px solid var(--color-line-faint);
}

.draft-tab:nth-child(n + 3) {
  border-top: 1px solid var(--color-line-faint);
}

.draft-tab[aria-selected="true"],
.moment-tab[aria-selected="true"] {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

.draft-tab[aria-selected="true"]::before,
.moment-tab[aria-selected="true"]::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--bar-height);
  background-color: var(--color-signal-cyan);
}

.draft-tab:active,
.moment-tab:active {
  transform: scale(var(--press-scale));
}

.draft-faces {
  display: flex;
  gap: 4px;
}

.draft-title {
  min-width: 0;
  max-width: 100%;
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--font-weight-strong);
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  .draft-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .draft-tab:nth-child(n + 3) {
    border-top: 0;
  }

  .draft-tab + .draft-tab {
    border-left: 1px solid var(--color-line-faint);
  }
}

/* The moments: a two-part switch in label type under the drafts, smaller than the drafts above it. */
.moment-bar {
  padding-block: 16px;
  border-top: 1px solid var(--color-line-rule);
}

.moment-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--color-line-rule);
  border-radius: var(--radius-xs);
}

.moment-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.moment-tab + .moment-tab {
  border-left: 1px solid var(--color-line-rule);
}

@media (min-width: 640px) {
  .moment-tabs {
    display: inline-grid;
    grid-template-columns: repeat(2, auto);
  }
}

/* ------------------------------------------------------------------ explorer panel */

/* The panel keeps the height of the tallest draft at the shown moment (measured by the script), so
   switching drafts never moves what follows. New content enters with a 6px rise and a fade; the old
   leaves at once. */
.explorer-panel {
  position: relative;
  box-sizing: border-box;
  padding-block: 32px 40px;
  border-top: 1px solid var(--color-line-rule);
}

/* Focus that arrives by keyboard marks the panel's top edge with the 2px Signal Cyan bar of the
   selected tabs (the script brings that edge into view), not a ring down the whole panel. */
.explorer-panel:focus-visible {
  outline: 0;
}

.explorer-panel:focus-visible::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: var(--focus-width);
  background-color: var(--color-signal-cyan);
}

.explorer-probe {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}

.panel-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 40px;
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}

@starting-style {
  .panel-body {
    opacity: 0;
    transform: translateY(var(--panel-shift));
  }
}

.panel-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 32px 40px;
  min-width: 0;
}

.panel-block {
  min-width: 0;
}

h3.panel-label {
  margin-bottom: 12px;
  color: var(--color-text-tertiary);
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-wrap: wrap;
}

h3.panel-label.is-ally {
  color: var(--color-team-ally);
}

h3.panel-label.is-enemy {
  color: var(--color-team-enemy);
}

.panel-notes {
  grid-column: 1 / -1;
  padding-top: 16px;
  border-top: 1px solid var(--color-line-faint);
}

.panel-note {
  max-width: var(--measure);
  color: var(--color-text-tertiary);
  font-size: 13px;
  line-height: 20px;
}

.panel-note + .panel-note {
  margin-top: 4px;
}

@media (min-width: 700px) {
  .panel-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }

  .panel-col-3 {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .panel-body {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0;
  }

  .panel-col {
    padding-right: 24px;
  }

  .panel-col + .panel-col {
    padding-left: 24px;
    border-left: 1px solid var(--color-line-faint);
  }

  .panel-col-3 {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    padding-right: 0;
  }
}

/* After the lock on a phone, one column in the order a player reads a loadout: teams, lane read, rune
   page, spells, why, item build, gameplan, cited facts, the limits and the notes. The columns step
   aside (nothing in them takes focus, so the keyboard order is unchanged). */
@media (max-width: 699.98px) {
  .panel-body.is-after-lock {
    row-gap: 32px;
  }

  .panel-body.is-after-lock > .panel-col {
    display: contents;
  }

  .is-after-lock .teams { order: 1; }
  .is-after-lock .lane { order: 2; }
  .is-after-lock .runes { order: 3; }
  .is-after-lock .spells { order: 4; }
  .is-after-lock .why { order: 5; }
  .is-after-lock .build { order: 6; }
  .is-after-lock .plan { order: 7; }
  .is-after-lock .cited { order: 8; }
  .is-after-lock .stated { order: 9; }
  .is-after-lock > .panel-notes { order: 10; }
}

/* After the lock on a tablet: teams and lane beside the rune page, spells beside why, then the item
   build across both columns with its "If" stage beside the others, so neither column runs long.
   Where the rune page is taller than teams and lane together, the spare height goes under the lane
   read, which keeps the 32px gap above it. */
@media (min-width: 700px) and (max-width: 1099.98px) {
  .panel-body.is-after-lock {
    grid-template-areas:
      "teams runes"
      "lane runes"
      "spells why"
      "build build";
    grid-template-rows: auto 1fr auto auto;
    row-gap: 32px;
    align-items: start;
  }

  .panel-body.is-after-lock > .panel-col-1,
  .panel-body.is-after-lock > .panel-col-2 {
    display: contents;
  }

  .is-after-lock .teams { grid-area: teams; }
  .is-after-lock .lane { grid-area: lane; }
  .is-after-lock .runes { grid-area: runes; }
  .is-after-lock .spells { grid-area: spells; }
  .is-after-lock .why { grid-area: why; }
  .is-after-lock .build { grid-area: build; }

  .is-after-lock .build-list.has-if {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    align-items: start;
  }

  .is-after-lock .has-if > .build-row {
    grid-column: 1;
  }

  .is-after-lock .has-if > .build-row.is-if {
    grid-column: 2;
    grid-row: 1 / span 3;
    padding-top: 0;
    border-top: 0;
  }
}

/* Windows contrast themes: the selected tab's bar, the keyboard's mark on the panel and the lane
   bar keep their marks in system colours instead of being painted over. */
@media (forced-colors: active) {
  .draft-tab[aria-selected="true"]::before,
  .moment-tab[aria-selected="true"]::before,
  .explorer-panel:focus-visible::before,
  .lane-fill {
    forced-color-adjust: none;
    background-color: Highlight;
  }

  .lane-bar {
    forced-color-adjust: none;
    background-color: GrayText;
  }
}

/* Teams: one row per champion, the portrait on the name's first line, the role or role read under it. */
.teams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}

.team-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-block: 8px;
  border-bottom: 1px solid var(--color-line-faint);
}

.team-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.team-name {
  padding-top: 2px;
  color: var(--color-text-primary);
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.team-name.is-open {
  color: var(--color-text-tertiary);
}

.role-reads {
  display: flex;
  flex-wrap: wrap;
  column-gap: 12px;
}

.role-read {
  display: inline-flex;
  gap: 8px;
  white-space: nowrap;
}

.role-code,
.role-share.num {
  font-family: var(--font-numeric);
  font-size: 12px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

.role-code {
  color: var(--color-text-tertiary);
}

.role-share.num {
  color: var(--color-text-secondary);
}

/* Lane read: the pair, its share with the 2px bar, then the runner-up readings. */
.lane-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 12px;
}

.lane-unit {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.lane-word {
  color: var(--color-text-tertiary);
  font-size: 14px;
  line-height: 32px;
}

.lane-meter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
}

.lane-share.num {
  min-width: 4ch;
  color: var(--color-text-primary);
  font-size: 20px;
  line-height: 26px;
  font-weight: var(--font-weight-strong);
}

.lane-bar {
  position: relative;
  flex: 1 1 6rem;
  height: var(--bar-height);
  background-color: var(--color-line-rule);
}

.lane-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color-signal-cyan);
}

.lane-others {
  margin-top: 12px;
}

.lane-other {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 8px;
  border-top: 1px solid var(--color-line-faint);
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 20px;
}

.lane-other-names {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lane-other-share.num {
  flex-shrink: 0;
  font-size: 13px;
}

/* A small status tag in label type: "Still reading", "Profile", "Locked next". */
.tag {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  box-sizing: border-box;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-xs);
  color: var(--color-text-secondary);
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Picks: the 40px portrait, the name with its tags, one or two reasons, the score on the right. */
.pick {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 12px;
  padding-block: 12px;
  border-bottom: 1px solid var(--color-line-faint);
}

.pick:first-child {
  padding-top: 0;
}

.pick-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.pick-name {
  min-width: 0;
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 22px;
  font-weight: var(--font-weight-strong);
  overflow-wrap: anywhere;
}

.pick-reason {
  margin-top: 4px;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: break-word;
}

.pick-score {
  min-width: 3ch;
  text-align: right;
}

.pick-score > .num {
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 22px;
  font-weight: var(--font-weight-strong);
}

.picks-note {
  max-width: var(--measure);
  margin-top: 12px;
  color: var(--color-text-tertiary);
  font-size: 13px;
  line-height: 20px;
}

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

/* Rune page: every option of each row, the chosen one framed in Control Edge and the others faded
   (the small stat shards less, so a row still reads as three options); the chosen names as text
   beside the rows, aligned down the whole page. */
.rune-page-name {
  margin-bottom: 16px;
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 22px;
  font-weight: var(--font-weight-strong);
  overflow-wrap: anywhere;
}

.rune-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 20px;
}

.rune-tree-head > .named-name {
  font-weight: var(--font-weight-strong);
}

.rune-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 8px;
  margin-top: 12px;
}

.is-shards {
  padding-top: 16px;
  border-top: 1px solid var(--color-line-faint);
}

.is-shards > .rune-rows {
  margin-top: 0;
}

.rune-row {
  display: grid;
  grid-template-columns: var(--rune-options) minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
}

.rune-options {
  display: flex;
  justify-content: center;
  gap: var(--rune-gap);
}

.icon-rune.is-other {
  opacity: 0.3;
}

.rune-row-20 .icon-rune.is-other {
  opacity: 0.5;
}

.icon-rune.is-chosen::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-line-control);
}

.rune-choice {
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.is-keystone > .rune-choice {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-strong);
}

/* Spells and the why-chips. */
.spell-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  box-sizing: border-box;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid var(--color-line-rule);
  border-radius: var(--radius-xs);
  background-color: var(--color-canvas);
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

/* Gameplan: three numbered lines, each with the facts it cites; then the facts themselves. */
.plan-lines {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 16px;
  counter-reset: plan;
}

.plan-line {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  counter-increment: plan;
}

.plan-line::before {
  content: counter(plan);
  grid-row: 1 / 3;
  color: var(--color-text-tertiary);
  font-family: var(--font-numeric);
  font-size: 14px;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
}

.plan-text,
.plan-cites {
  grid-column: 2;
  min-width: 0;
}

.plan-text {
  color: var(--color-text-primary);
  font-size: 15px;
  line-height: 22px;
  overflow-wrap: anywhere;
}

.plan-cites {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.plan-cite.num {
  color: var(--color-text-tertiary);
  font-size: 12px;
  line-height: 16px;
}

.cited-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 8px;
  padding-block: 8px;
  border-top: 1px solid var(--color-line-faint);
}

.cited-id.num {
  color: var(--color-text-primary);
  font-size: 12px;
  line-height: 20px;
}

/* 13px, so the patch values inside (numbers at 0.93em) stay at 12px or more. */
.cited-text {
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

/* Item build: a labelled row per stage, 32px icons beside their names, a trigger under each "if".
   Stages without triggers let their items sit side by side when they fit. */
.build-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  column-gap: 12px;
  padding-block: 12px;
  border-top: 1px solid var(--color-line-faint);
}

.build-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.build-key {
  padding-top: 8px;
  color: var(--color-text-tertiary);
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.build-cell {
  min-width: 0;
}

.build-items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 8px;
}

.build-items.is-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.build-items.is-flow > .build-item {
  min-width: 0;
}

.build-count.num {
  color: var(--color-text-secondary);
}

.build-trigger {
  margin-top: 2px;
  padding-left: 40px;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

/* Limits stated: the engine's caveats, each after a Deadline Amber pip. */
.stated-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 8px;
}

.stated-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 20px;
}

.stated-line > .pip {
  align-self: flex-start;
  margin-top: 7px;
  color: var(--color-status-late);
}

.stated-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ how it runs */

.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: 16px;
  padding-block: 20px 24px;
  border-top: 1px solid var(--color-line-strong);
  counter-increment: step;
}

.step::before {
  content: counter(step);
  grid-row: 1 / 3;
  color: var(--color-text-tertiary);
  font-family: var(--font-numeric);
  font-size: 14px;
  line-height: 26px;
  font-variant-numeric: tabular-nums;
}

.step > h3,
.step > p {
  grid-column: 2;
  min-width: 0;
}

.step > p {
  max-width: 34em;
  margin-top: 8px;
}

@media (min-width: 640px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

  .step {
    display: block;
    padding-block: 16px 40px;
  }

  .step::before {
    display: block;
    margin-bottom: 24px;
  }
}

@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .step {
    padding-bottom: 0;
  }

  .step::before {
    margin-bottom: 32px;
  }
}

/* ------------------------------------------------------------------ compared */

.compare {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.compare th,
.compare td {
  box-sizing: border-box;
  min-width: 0;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

.compare thead th {
  padding: 0 var(--grid-gap) 12px 0;
  border-bottom: 1px solid var(--color-line-strong);
  color: var(--color-text-tertiary);
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: bottom;
}

.compare thead .col-ours {
  color: var(--color-text-primary);
}

.compare tbody th,
.compare tbody td {
  padding: 20px var(--grid-gap) 20px 0;
  border-bottom: 1px solid var(--color-line-faint);
}

.compare tbody th {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-strong);
}

.compare tbody td:nth-child(2) {
  color: var(--color-text-primary);
}

.compare th:last-child,
.compare td:last-child {
  padding-right: 0;
}

/*
 * Twelve columns: the measure on three, this product on five (under the head), the web tool on
 * four. A fixed table takes no mixed calc() widths, so these are the column edges in percent, within
 * 2px of the grid from 1024px up.
 */
.col-measure {
  width: 25.5%;
}

.col-ours {
  width: 42.5%;
}

.compare-note {
  margin-top: 16px;
}

/* On a phone each row becomes a block: the measure, then each side under its own name. */
@media (max-width: 767.98px) {
  .compare,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td {
    display: block;
  }

  /* The header row leaves the layout but stays in the accessibility tree. */
  .compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .compare tbody {
    border-top: 1px solid var(--color-line-strong);
  }

  .compare tbody tr {
    padding-block: 20px;
    border-bottom: 1px solid var(--color-line-faint);
  }

  .compare tbody th,
  .compare tbody td {
    padding: 0;
    border: 0;
  }

  .compare tbody td {
    margin-top: 12px;
  }

  .compare [data-label]::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    display: block;
    margin-bottom: 2px;
    color: var(--color-text-tertiary);
    font-family: var(--font-label);
    font-size: 12px;
    line-height: 16px;
    font-weight: var(--font-weight-strong);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

/* From 768px to 1023px the measure column gives way, so the web tool's cells keep whole phrases. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .col-measure {
    width: 22%;
  }

  .col-ours {
    width: 40%;
  }
}

/* ------------------------------------------------------------------ limits */

/* One ruled plate on the surface ground: the cells share their hairlines, each opens on its index
   (drawn by CSS and hidden from screen readers, the list itself is unordered), and "Never" is set
   back so the words that differ lead. One column on a phone, two from 640px, four from 1024px. */
.limits {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--color-line-rule);
  border-top: 0;
  background-color: var(--color-surface);
  counter-reset: limit;
}

.limit {
  min-width: 0;
  padding: 20px 20px 28px;
  border-top: 1px solid var(--color-line-rule);
  counter-increment: limit;
}

.limit::before {
  content: counter(limit, decimal-leading-zero);
  content: counter(limit, decimal-leading-zero) / "";
  display: block;
  margin-bottom: 20px;
  color: var(--color-text-tertiary);
  font-family: var(--font-numeric);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.limit-never {
  color: var(--color-text-secondary);
}

.limit > p {
  max-width: 34em;
  margin-top: 8px;
}

@media (min-width: 640px) {
  .limits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .limit:nth-child(2n) {
    border-left: 1px solid var(--color-line-rule);
  }
}

@media (min-width: 1024px) {
  .limits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .limit {
    padding: 24px 24px 40px;
  }

  .limit:nth-child(4n + 3) {
    border-left: 1px solid var(--color-line-rule);
  }

  .limit::before {
    margin-bottom: 48px;
  }
}

.riot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 12px;
  margin-top: 48px;
}

.riot > p {
  max-width: var(--measure);
}

@media (min-width: 1024px) {
  .riot {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: baseline;
    margin-top: 56px;
  }

  .riot > .label {
    grid-column: 1 / 4;
  }

  .riot > p {
    grid-column: 4 / 11;
  }
}

/* ------------------------------------------------------------------ availability */

.close {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line-rule);
}

.statement {
  max-width: 22em;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.16;
  font-weight: var(--font-weight-strong);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Each sentence of the statement starts its own line, at every width. */
.statement-line {
  display: block;
}

@media (min-width: 1024px) {
  .close {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: baseline;
    padding-top: 24px;
  }

  .close > .label {
    grid-column: 1 / 4;
  }

  .close > .statement {
    grid-column: 4 / 12;
  }
}

/* ------------------------------------------------------------------ footer */

.site-footer {
  padding-block: var(--section-pad) 48px;
  font-size: 14px;
  line-height: 22px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line-rule);
}

.footer-body {
  min-width: 0;
  max-width: var(--measure);
}

.footer-body > p + p {
  margin-top: 12px;
}

.legal {
  color: var(--color-text-tertiary);
  font-size: 13px;
  line-height: 20px;
}

.footer-body > .legal {
  margin-top: 24px;
}

.footer-body .text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: baseline;
    padding-top: 24px;
  }

  .footer-grid > .label {
    grid-column: 1 / 4;
  }

  .footer-body {
    grid-column: 4 / 11;
  }
}

/* ------------------------------------------------------------------ policy page */

.page-head {
  padding-top: var(--hero-pad);
}

.page-title {
  max-width: none;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.08;
}

.page-head .lead {
  margin-top: 16px;
}

/* A labelled block on a hairline: the label on columns 1 to 3, the content from column 4. */
.doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line-rule);
}

.doc-body {
  min-width: 0;
}

.doc-body > .lead + * {
  margin-top: 24px;
}

.rows,
.list-rows {
  min-width: 0;
}

.row,
.list-rows > li {
  padding-block: 16px;
  border-bottom: 1px solid var(--color-line-faint);
  overflow-wrap: break-word;
}

.row:first-child,
.list-rows > li:first-child {
  padding-top: 0;
}

.key {
  color: var(--color-text-tertiary);
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.row > dd {
  max-width: var(--measure);
  margin-top: 4px;
}

.lead-word {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-strong);
}

@media (min-width: 640px) {
  .row {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--grid-gap);
  }

  .row > dd {
    margin-top: 0;
  }
}

@media (min-width: 1024px) {
  .page-head .container > * {
    margin-left: calc((100% + var(--grid-gap)) / 4);
  }

  .doc {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: baseline;
    padding-top: 24px;
  }

  .doc > .label {
    grid-column: 1 / 4;
  }

  .doc > .rows,
  .doc > .doc-body {
    grid-column: 4 / 11;
  }
}

/* ------------------------------------------------------------------ hover, fine pointers only */

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    border: 1px solid var(--color-line-signal);
    background-color: var(--color-surface-raised);
  }

  .button-primary:hover {
    border: 1px solid var(--color-line-signal);
    background-color: var(--color-canvas);
    color: var(--color-text-primary);
  }

  .action-link:hover,
  .text-link:hover,
  .nav-link:hover,
  .wordmark:hover {
    color: var(--color-text-primary);
    text-decoration-line: underline;
    text-decoration-color: var(--color-line-signal);
  }

  /* The ground only: an unselected tab keeps its secondary label, so it stays quieter than the
     selected one under the pointer. */
  .draft-tab:hover,
  .moment-tab:hover {
    background-color: var(--color-surface-raised);
  }
}

/* ------------------------------------------------------------------ reduced motion */

/* The press keeps its colour change and loses its movement; the explorer's panel fades without rising. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --press-scale: 1;
    --panel-shift: 0px;
  }
}

/* ------------------------------------------------------------------ Windows contrast themes */

@media (forced-colors: active) {
  .pip {
    forced-color-adjust: none;
    background-color: CanvasText;
  }

  .pip-hollow {
    background-color: transparent;
    outline-color: CanvasText;
  }
}