/* ============================================================
  Team 86 -- brand guidance pages

  Page-level layout ONLY. Every color, size, radius and duration below
  resolves to a design-system token, and no rule here restyles a tr-*
  component through a descendant selector (see design-system/readme.md,
  "Never restyle a component through a descendant selector"). If something
  here wants a component to look different, the component needs a modifier
  upstream instead.
  ============================================================ */

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ---------- top bar ---------- */

.guide-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  background: color-mix(in srgb, var(--bg-page) 88%, transparent);
  backdrop-filter: blur(8px);
}

.guide-bar__home {
  display: block;
  line-height: 0;
}

.guide-bar__logo {
  height: 30px;
}

.guide-bar__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.guide-bar__nav a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.guide-bar__nav a:hover {
  color: var(--accent-text);
}

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

.guide-hero {
  padding: var(--space-10) 0 var(--space-8);
  background: radial-gradient(760px 420px at 78% -18%, var(--wash-volt), transparent 62%);
}

/* .tr-actions is a one-column grid by default; --grid makes it a row. Cells
  stretch to fill, so the row itself is what gets a width.

  --action-min has to clear the longest label's min-content width. minmax()
  overrides a grid item's automatic minimum, so a floor set too low does not
  widen the track: the label bursts out of its own button instead. Measured at
  258px for "Download brand kit" at --lg, so the floor is 16.5rem and the row is
  wide enough for two of them plus the gap. Re-measure if a label changes.

  A floor is also the row's intrinsic contribution, so on a narrow screen the
  row would rather stretch the page than drop to one column. The media query at
  the end of this file sets the floor to 100% there, which collapses it. */
.guide-hero__actions {
  --action-min: 16.5rem;

  max-width: 34rem;
  margin-top: var(--space-6);
}

/* ---------- sections ---------- */

.guide-section {
  padding: var(--space-12) 0;
  border-top: 1px solid var(--border-hairline);
  scroll-margin-top: 96px;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.guide-grid--type {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.guide-grid--files {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* ---------- logo tiles ---------- */

.guide-logo {
  margin: 0;
}

.guide-logo__stage {
  display: grid;
  place-items: center;
  min-height: 132px;
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
}

.guide-logo__stage--ink {
  background: var(--tr-ink);
}

.guide-logo__stage--paper {
  background: var(--tr-white);
}

.guide-logo__art {
  width: auto;
  max-width: 100%;
  height: 38px;
}

.guide-logo__art--tall {
  height: 92px;
}

.guide-logo__use {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* The brand's micro-label: mono, small, tracked, uppercase. Used wherever a
  line is annotating something rather than saying it. */

.guide-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-data-label);
  text-transform: uppercase;
}

.guide-logo__spec {
  margin: 0 0 var(--space-4);
  color: var(--text-faint);
}

/* ---------- rule list ---------- */

.guide-rules {
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-5);
}

.guide-rules li {
  padding-left: var(--space-4);
  border-left: 2px solid var(--tr-volt);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.guide-rules b {
  display: block;
  color: var(--text-strong);
}

/* ---------- color swatches ---------- */

.guide-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.guide-swatch {
  /* A button centres its content, and display:block does not stop Chrome doing
    it. Left alone, a swatch with a longer description sits higher than its
    neighbours and the labels stop lining up across the row. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: var(--space-5);
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-base) var(--ease-out);
}

.guide-swatch:hover {
  border-color: var(--border-strong);
}

.guide-swatch:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.guide-swatch__name {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}

.guide-swatch__hex {
  display: block;
  margin: 0.2em 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent-text);
}

.guide-swatch__use {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.guide-swatch[data-copied="yes"] .guide-swatch__hex::after {
  content: " copied";
  color: var(--text-faint);
}

.guide-alert {
  margin-top: var(--space-6);
}

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

.guide-type__specimen {
  margin: 0 0 var(--space-4);
  color: var(--text-strong);
  overflow-wrap: break-word;
}

.guide-type__specimen--display {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

.guide-type__specimen--body {
  font-family: var(--font-body);
  font-size: var(--text-lg);
}

.guide-type__specimen--mono {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}

.guide-type__note {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

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

.guide-foot {
  max-width: 1120px;
  margin: var(--space-10) auto 0;
  padding: 0 var(--space-6) var(--space-8);
}

/* ---------- narrow screens ---------- */

@media (max-width: 40rem) {
  main,
  .guide-bar,
  .guide-foot {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .guide-hero {
    padding-top: var(--space-8);
  }
}

/* ---------- print: this page is also the PDF ---------- */

@media print {
  .guide-bar,
  .guide-hero__actions {
    display: none;
  }

  .guide-section {
    break-inside: avoid;
  }
}

/* ============================================================
  Documentation layout -- guidelines.html only
  ============================================================ */

.guide-doc {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--space-10);
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-10);
  align-items: start;
}

.guide-doc__side {
  position: sticky;
  top: 92px;
}

.guide-doc__body {
  min-width: 0;
}

.guide-doc__lede {
  padding-bottom: var(--space-8);
}

.guide-doc__section {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border-hairline);
  scroll-margin-top: 96px;
}

.guide-doc__section p,
.guide-doc__section li {
  max-width: 68ch;
}

.guide-doc__section ul {
  padding-left: var(--space-5);
}

.guide-doc__section li {
  margin-bottom: var(--space-3);
}

.guide-doc__section table {
  margin: 0;
}

/* Same constraint as the hero row. "Download brand kit" measures 216px at the
  base size, so three of them plus two gaps need 44rem. */
.guide-doc__actions {
  --action-min: 14rem;

  max-width: 44rem;
}

.guide-doc__ask {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

@media (max-width: 60rem) {
  .guide-doc {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .guide-doc__side {
    position: static;
  }
}

@media print {
  .guide-doc {
    display: block;
    padding: 0;
  }

  .guide-doc__side {
    display: none;
  }

  .guide-doc__section {
    break-inside: avoid;
  }
}

/* One color chip, used at table size in the guidelines and at swatch size on
  the basics page. A CMYK build is easier to trust next to the color it is
  meant to reproduce. */

.guide-chip {
  /* border-box so the outline on the ink and paper chips sits inside the
    height, leaving every chip the same size and every label on one line. */
  box-sizing: border-box;
  display: block;
  width: 2rem;
  height: 1.1rem;
  border-radius: var(--radius-xs);
}

/* Only the chips that could otherwise disappear into the surface get an
  outline: ink on the dark page, paper on the light one. */

.guide-chip--ink,
.guide-chip--paper {
  border: 1px solid var(--border-hairline);
}

.guide-chip--lg {
  width: auto;
  height: 72px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
}

.guide-chip--volt {
  background: var(--tr-volt);
}

.guide-chip--gold {
  background: var(--tr-gold);
}

.guide-chip--ink {
  background: var(--tr-ink);
}

.guide-chip--paper {
  background: var(--tr-white);
}

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

/* ---------- photography gallery ---------- */

.guide-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-8);
}

.guide-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}

.guide-shot img {
  display: block;
  width: 100%;
  height: 11rem;
  object-fit: cover;
  border-bottom: 2px solid var(--tr-volt);
}

.guide-shot figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--text-muted);
}

/* ---------- light / dark picker ---------- */

.guide-bar__theme {
  flex: none;
}

.guide-icon {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The page ships dark, so the light-only pieces stay hidden until the
  pre-paint snippet or the button sets data-theme="light". */
.guide-when-light {
  display: none;
}

[data-theme="light"] .guide-when-light {
  display: block;
}

[data-theme="light"] .guide-when-dark {
  display: none;
}

/* A table will not shrink below its min-content width, so a wide one stretches
  the page instead of clipping. Let it scroll inside its own box. */

.guide-scroll {
  overflow-x: auto;
  margin: var(--space-6) 0;
}


/* One button per row on a narrow screen. A width floor is also the row's
  intrinsic width, so leaving it set makes the row push the page wider instead
  of wrapping. This has to come after the rules that set the floor, or those win
  on source order. */

@media (max-width: 40rem) {
  .guide-hero__actions,
  .guide-doc__actions {
    --action-min: 100%;

    grid-template-columns: minmax(0, 1fr);
  }
}