/*
 * RTC shared base. Loaded by every prototype page after fonts/trial.css and before the page's own <style>.
 *
 * It carries machinery only: a reset, motion and spacing tokens, the hidden states the kit animates out of,
 * router transition defaults, clock digits, steel drawing defaults, the skip link, the focus style and the
 * review bar. It sets no typefaces and no colours beyond a handful of neutral tokens that pages override.
 *
 * Rule for everything hidden here: a pre-animation state only exists under `html.js` (set by the head
 * snippet) and never under `html.rtc-failsafe`. With JavaScript off, or if the kit fails, nothing is
 * hidden or offset.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: light;

  /* Neutral placeholders. Pages override all of these. */
  --paper: #ffffff;
  --ink: #161a24;
  --ink-soft: #5b616d;
  --rule: #c8ccd2;
  --focus: currentColor;

  /* Motion. */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ui: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-travel: cubic-bezier(0.625, 0.05, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-ui: 220ms;
  --dur-reveal: 1000ms;
  --dur-line: 1100ms;
  --dur-rule: 1200ms;
  --dur-draw: 1600ms;
  --dur-page: 560ms;
  --dur-page-out: 260ms;
  --stagger-line: 100ms;
  --stagger-item: 70ms;
  --stagger-draw: 120ms;
  --rise: 16px;            /* distance of an unmasked rise */
  --line-travel: 110%;     /* masked lines travel this share of their own height, plus the mask padding */
  --page-lift: 12px;       /* the leaving page lifts by this much */

  /* Each line mask is made as much taller than its line as the text needs (the kit measures this:
     the reach of the text box above, the depth of the ink below), plus these margins. Raise the
     top one for a face whose accents overshoot its metrics, the bottom one if descenders are ever
     cut while a line rises. The bottom margin is where a rising line shows below its own line box,
     so keep it small. The padding is cancelled by negative margin: it costs nothing in layout. */
  --mask-pad-top: 0.04em;
  --mask-pad-bottom: 0px;

  /* Spacing. */
  --gutter: clamp(1rem, 0.25rem + 3.2vw, 4rem);     /* never below 16px */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: clamp(4rem, 2.5rem + 6vw, 8rem);
  --space-3xl: clamp(6rem, 3rem + 11vw, 13rem);
}

/* The gutter is cut to a whole pixel where the browser can. Text that starts on a fraction of a
   pixel is drawn a device pixel to one side while a reveal moves it and jumps back when the reveal
   ends; on a whole pixel it stays put. Keep your own column offsets on whole pixels for the same reason. */
@supports (width: round(down, 1px, 1px)) {
  :root {
    --gutter: round(down, clamp(1rem, 0.25rem + 3.2vw, 4rem), 1px);
  }
}

/* ----------------------------------------------------------------- reset */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: auto;
  /* The review bar is fixed over the foot of the viewport: nothing scrolled to, and no focused
     link, should come to rest behind it. The kit keeps --rtc-bar-height up to date. */
  scroll-padding-bottom: var(--rtc-bar-height, 0px);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

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

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* Without JavaScript, or if the kit never starts, nothing can switch pages: show them all, stacked. */
html:not(.js) [data-page][hidden],
html.rtc-failsafe:not(.rtc-on) [data-page][hidden] {
  display: block !important;
}

/* ------------------------------------------------------ focus, skip link */

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

/* Focus moved by the router (page heading) or by an in-page jump is not shown as a ring. */
[data-rtc-focus]:focus,
[data-rtc-focus]:focus-visible {
  outline: none;
}

.rtc-skip {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 2147483001;
  padding: 0.6em 0.9em;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transform: translateY(-120%);
}

.rtc-skip:focus,
.rtc-skip:focus-visible {
  transform: none;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

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

/* --------------------------------------------------------------- reveals */

/* Waiting state for every reveal type. Opacity keeps the element in layout, in the accessibility tree
   and in find-in-page. All movement lives in the kit's keyframes, so there is nothing else to undo. */
html.js:not(.rtc-failsafe) [data-reveal]:not(.is-in) {
  opacity: 0;
}

[data-reveal="rule"] {
  transform-origin: 0 50%;
}

[data-reveal="rule-y"] {
  transform-origin: 50% 0;
}

/* The browser must not hyphenate a heading the kit is about to split by line. */
[data-reveal="lines"] {
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* Line masks exist only while a line reveal is running; the author's markup returns when it ends.
   Layout while split is identical to layout before. The kit gives each mask padding for ascenders and
   descenders and the same lengths as negative margin, so the two cancel to the last fraction of a
   pixel. The masks are flex items, because the margins of ordinary sibling blocks would collapse. */
.rtc-lines {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.rtc-line {
  display: block;
  flex: none;
  overflow: hidden;
}

/* Lines only move vertically, so clip that axis alone and leave italic overhang untouched. */
@supports (overflow: clip) {
  .rtc-line {
    overflow-x: visible;
    overflow-y: clip;
  }
}

.rtc-li {
  display: block;
  white-space: nowrap;
  text-indent: 0;
}

.rtc-line:first-child > .rtc-li {
  text-indent: inherit;
}

/* While the kit reads or flips the font mode nothing may transition from one mode to the other. */
html.rtc-probe *,
html.rtc-probe *::before,
html.rtc-probe *::after {
  transition: none !important;
}

/* ---------------------------------------------------------------- router */

[data-site-header] {
  view-transition-name: rtc-header;
}

/* The leaving page fades and lifts, the arriving page fades in. The header and the review bar are
   captured separately and keep their place. Scoped to router navigations by the class on <html>.
   Pages may override any of these rules. */
html.rtc-nav::view-transition-old(root) {
  animation: rtc-page-out var(--dur-page-out) var(--ease-exit) both;
}

html.rtc-nav::view-transition-new(root) {
  animation: rtc-page-in var(--dur-page) var(--ease-ui) both;
}

@keyframes rtc-page-out {
  to {
    opacity: 0;
    transform: translateY(calc(-1 * var(--page-lift)));
  }
}

@keyframes rtc-page-in {
  from {
    opacity: 0;
  }
}

/* ----------------------------------------------------------------- clock */

/* Each digit sits in a cell as wide as the widest digit of the current face (the kit measures it and
   sets --rtc-digit), so the time never shifts sideways when a narrow 1 follows a wide 0. */
/* The time is also set a touch to the left when its first digit is a narrow one, so that its ink
   lines up with the text around it (the kit sets --rtc-lead). A page that wants the cells never to
   move, even when the first digit changes, sets left: 0 here. */
.rtc-clock {
  position: relative;
  left: var(--rtc-lead, 0px);
  white-space: nowrap;
}

.rtc-d {
  display: inline-block;
  width: var(--rtc-digit, auto);
  text-align: center;
}

/* -------------------------------------------------------- steel drawings */

.rtc-steel {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ----------------------------------------------------------- review bar */

/* A reviewer's control, deliberately not part of any design: system type, white ground, one hairline.
   One row from 1281px. Two rows below that: fonts, status and actions, then directions and the note.
   Three rows on a phone: fonts and actions, status and the note, directions. The words "Premium fonts
   not installed" are never cut; only the names of the faces give way to an ellipsis. */
.rtc-bar,
.rtc-bar * {
  box-sizing: border-box;
}

.rtc-bar {
  --bar-ink: #1c1c1c;
  --bar-soft: #6a6a6a;
  --bar-line: #c4c4c4;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483000;
  view-transition-name: rtc-bar;
  display: flex;
  align-items: center;
  gap: 6px 22px;
  max-height: calc(96px + env(safe-area-inset-bottom));
  padding: 6px max(12px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  overflow: hidden;
  border-top: 1px solid var(--bar-line);
  background: #ffffff;
  color: var(--bar-ink);
  font: 400 12px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}

.rtc-bar__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.rtc-bar__label,
.rtc-bar__note,
.rtc-bar__faces {
  color: var(--bar-soft);
}

.rtc-bar__label,
.rtc-bar__note,
.rtc-bar__notice {
  flex: none;
  white-space: nowrap;
}

/* The notice, then the faces in use and their source. */
.rtc-bar__status {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}

/* One line, cut with an ellipsis when it runs out of room. The source is a boxless span so that
   nothing but text ever reaches past the edge. */
.rtc-bar__faces {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rtc-bar__source {
  display: contents;
}

.rtc-bar__seg {
  display: inline-flex;
  flex: none;
}

.rtc-bar button {
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid var(--bar-line);
  background: #ffffff;
  color: var(--bar-ink);
  font: inherit;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
}

.rtc-bar__seg button + button {
  margin-left: -1px;
}

.rtc-bar button[aria-pressed="true"] {
  position: relative;
  border-color: var(--bar-ink);
  background: var(--bar-ink);
  color: #ffffff;
}

.rtc-bar button:disabled {
  color: #767676;
  cursor: not-allowed;
}

/* Links are as tall as the buttons, so they are as easy to hit. */
.rtc-bar a {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 24px;
  color: var(--bar-ink);
  text-decoration: underline;
  text-decoration-color: var(--bar-line);
  text-underline-offset: 3px;
  white-space: nowrap;
}

.rtc-bar a[aria-current] {
  font-weight: 600;
  text-decoration-color: var(--bar-ink);
}

.rtc-bar a:focus-visible,
.rtc-bar button:focus-visible {
  outline: 2px solid var(--bar-ink);
  outline-offset: -2px;
}

.rtc-bar__actions {
  display: flex;
  flex: none;
  gap: 6px;
  margin-left: auto;
}

@media (max-width: 1280px) {
  .rtc-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "fonts status actions" "directions directions note";
    gap: 6px 14px;
  }

  .rtc-bar__fonts {
    grid-area: fonts;
  }

  .rtc-bar__status {
    grid-area: status;
  }

  .rtc-bar__actions {
    grid-area: actions;
    justify-self: end;
  }

  .rtc-bar__directions {
    grid-area: directions;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .rtc-bar__directions::-webkit-scrollbar {
    display: none;
  }

  .rtc-bar__note {
    grid-area: note;
    justify-self: end;
  }
}

@media (max-width: 520px) {
  .rtc-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "fonts actions" "status note" "directions directions";
    gap: 4px 12px;
  }

  .rtc-bar__label {
    display: none;
  }
}

/* With premium missing there is one mode and the notice says why: where there is no room for more
   than a word of it, the faces line makes way. */
@media (max-width: 640px) {
  .rtc-bar.is-without-premium .rtc-bar__faces {
    display: none;
  }
}

/* Collapsed: a small tab in the corner. */
.rtc-bar.is-collapsed {
  display: flex;
  left: auto;
  padding: 0;
  border-left: 1px solid var(--bar-line);
}

.rtc-bar.is-collapsed > :not(.rtc-bar__actions),
.rtc-bar.is-collapsed [data-rtc-replay] {
  display: none;
}

.rtc-bar.is-collapsed button {
  border: 0;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
}

.rtc-bar-spacer {
  height: var(--rtc-bar-height, 0px);
}

/* The height the bar is about to have, for the moment between the first paint and the kit's start,
   so that a hero sized with --rtc-bar-height does not move when the bar arrives. The kit then sets
   the measured height on <html> (0px when the bar is collapsed or left out). These three figures
   are the heights the rules above produce: one row, two rows, three rows. */
html.js:not(.rtc-failsafe) {
  --rtc-bar-height: calc(37px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 1280px) {
  html.js:not(.rtc-failsafe) {
    --rtc-bar-height: calc(67px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 520px) {
  html.js:not(.rtc-failsafe) {
    --rtc-bar-height: calc(85px + env(safe-area-inset-bottom, 0px));
  }
}

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

/* The kit swaps every reveal for a 200ms fade and the router for a 150ms fade when this is set.
   These rules cover what CSS owns: no smooth scrolling and no moving view transition. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  html.rtc-nav::view-transition-old(root),
  html.rtc-nav::view-transition-new(root) {
    animation-duration: 150ms;
    animation-timing-function: linear;
  }

  @keyframes rtc-page-out {
    to {
      opacity: 0;
    }
  }
}

/* ----------------------------------------------------------------- print */

@media print {
  .rtc-bar,
  .rtc-bar-spacer,
  .rtc-skip {
    display: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}