/* ==========================================================================
   Newcastle Red Bulls — Kingston Park job pack
   Onesign & Digital
   ========================================================================== */

/* Subset to the 106 codepoints the pack actually sets — Latin, digits,
   × · – — ² £ and friends. ~13 KB a face instead of ~140 KB. Rebuild with
   tools/subset-fonts.py after adding any new character to the pack. */

@font-face {
  font-family: 'Futura for Red Bull';
  src: url('../fonts/FuturaforRedBull-Light.woff2') format('woff2'),
       url('../fonts/FuturaforRedBull-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura for Red Bull';
  src: url('../fonts/FuturaforRedBull-Book.woff2') format('woff2'),
       url('../fonts/FuturaforRedBull-Book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura for Red Bull';
  src: url('../fonts/FuturaforRedBull-Medium.woff2') format('woff2'),
       url('../fonts/FuturaforRedBull-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura for Red Bull';
  src: url('../fonts/FuturaforRedBull-Bold.woff2') format('woff2'),
       url('../fonts/FuturaforRedBull-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Ground */
  --ink:        #0a1526;
  --ink-2:      #0d1a2f;
  --ink-3:      #1b2c44;
  --rule:       rgba(143, 163, 188, 0.16);

  /* Type on dark */
  --on-dark:      #ffffff;
  --on-dark-2:    #8fa3bc;
  --on-dark-3:    #4e6b8c;
  --on-dark-soft: #c7d6e6;

  /* Type on light panels */
  --panel:      #ffffff;
  --on-panel:   #0a1526;
  --on-panel-2: #3a4652;
  --on-panel-3: #6c7a8a;
  --panel-rule: #e8ecf1;

  /* Semantic */
  --spec:     #1b4f9c;
  --pending:  #b8391f;
  --flat:     #0a1526;
  --sep:      #8b98a4;
  --accent:   #ffd24a;
  --nrb-blue: #001d46;
  --nrb-red:  #e31b4d;

  /* Metrics */
  --sheet-max: 1440px;
  --gutter: clamp(20px, 3.4vw, 48px);
  --panel-radius: 6px;
  --row-h: 30px;

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: 'Futura for Red Bull', 'Futura', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
[hidden] { display: none !important; }

a { color: inherit; }

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

/* --------------------------------------------------------------------------
   Splash

   Onesign × Newcastle Red Bulls. The marks rise in, a gold hairline draws out
   between them, the caption settles, then the whole thing lifts away. Kept
   short — this is a working document, not a title sequence.
   -------------------------------------------------------------------------- */

body.is-loading { overflow: hidden; }

.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--ink);
  opacity: 1;
  transition: opacity .55s ease, visibility .55s ease;
  /* Belt and braces: clears itself even if the script never runs. */
  animation: splash-failsafe 0s linear 6s forwards;
}
.splash.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@keyframes splash-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.splash__inner {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 0 24px;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
.splash.is-done .splash__inner { transform: translateY(-10px); }

.splash__marks {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3.4vw, 30px);
}
.splash__onesign {
  width: clamp(150px, 21vw, 236px);
  height: auto;
  opacity: 0;
  animation: splash-rise .62s cubic-bezier(.2, .7, .3, 1) .08s forwards;
}
.splash__crest {
  width: clamp(58px, 8.2vw, 92px);
  height: auto;
  opacity: 0;
  animation: splash-rise .62s cubic-bezier(.2, .7, .3, 1) .2s forwards;
}
.splash__x {
  color: var(--on-dark-3);
  font-size: clamp(15px, 1.9vw, 20px);
  line-height: 1;
  opacity: 0;
  animation: splash-fade .5s ease .42s forwards;
}

@keyframes splash-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes splash-fade {
  to { opacity: 1; }
}

.splash__rule {
  width: min(320px, 62vw);
  height: 1px;
  background: var(--rule);
  overflow: hidden;
}
.splash__rule i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  animation: splash-draw .82s cubic-bezier(.5, 0, .2, 1) .34s forwards;
}
@keyframes splash-draw {
  to { transform: scaleX(1); }
}

.splash__caption {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  opacity: 0;
  animation: splash-fade .6s ease .6s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .splash__onesign,
  .splash__crest,
  .splash__x,
  .splash__caption { opacity: 1; animation: none; }
  .splash__rule i { transform: none; animation: none; }
  .splash__inner { transition: none; }
}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
  max-width: var(--sheet-max);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 52px) var(--gutter) 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 24px;
}

.lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(24px, 3.5vw, 40px);
}
.lockup__onesign { width: 118px; height: auto; display: block; }
.lockup__x {
  color: var(--on-dark-3);
  font-size: 13px;
  line-height: 1;
  transform: translateY(1px);
}
.lockup__crest { width: 34px; height: auto; display: block; }

.masthead__title {
  margin: 0;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-weight: 700;
  text-transform: uppercase;
}

.masthead__sub {
  margin: 10px 0 0;
  color: var(--on-dark-2);
  font-size: clamp(13px, 1.15vw, 15px);
  font-weight: 400;
}

.masthead__crest {
  width: clamp(72px, 8vw, 108px);
  height: auto;
  justify-self: end;
}

/* --------------------------------------------------------------------------
   Sheet navigation
   -------------------------------------------------------------------------- */

.sheetnav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 21, 38, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
  margin-top: clamp(28px, 4vw, 48px);
}

.sheetnav__bar {
  max-width: var(--sheet-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: stretch;
  gap: 18px;
}

/* Tier one — always says which sheet you are on, and opens the full list. */
.sheetnav__toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 15px 0 0;
  margin: 9px 0;
  border: 0;
  border-right: 1px solid var(--rule);
  background: none;
  color: var(--on-dark);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.sheetnav__toggle-all {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--on-dark-2);
}
.sheetnav__toggle:hover .sheetnav__toggle-all { color: var(--on-dark); }
.sheetnav__toggle-current { display: none; align-items: center; gap: 9px; }
.sheetnav__toggle-label {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--on-dark-3);
}
.sheetnav__toggle-n {
  font-size: 10.5px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.sheetnav__chev {
  width: 10px;
  height: auto;
  color: var(--on-dark-2);
  transition: transform .2s ease;
}
.sheetnav__toggle[aria-expanded='true'] .sheetnav__chev { transform: rotate(180deg); }
.sheetnav__toggle:hover .sheetnav__chev { color: var(--on-dark); }

/* Tier two — the inline tabs, a convenience on wide screens. */
.sheetnav__tabs {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sheetnav__tabs::-webkit-scrollbar { display: none; }

.sheetnav__link {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 15px 13px 13px;
  border-bottom: 2px solid transparent;
  color: var(--on-dark-2);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .16s ease, border-color .16s ease;
}
.sheetnav__link:hover { color: var(--on-dark); }
.sheetnav__link[aria-current='true'] {
  color: var(--on-dark);
  border-bottom-color: var(--accent);
}
.sheetnav__n {
  font-size: 10.5px;
  color: var(--on-dark-3);
  font-variant-numeric: tabular-nums;
}
.sheetnav__link[aria-current='true'] .sheetnav__n { color: var(--accent); }

/* The panel — every sheet with what it holds. */
.sheetnav__panel {
  border-top: 1px solid var(--rule);
  background: var(--ink-2);
  max-height: min(70vh, 560px);
  overflow-y: auto;
}

.sheetmenu {
  max-width: var(--sheet-max);
  margin: 0 auto;
  padding: 10px var(--gutter) 16px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 18px;
}
@media (max-width: 1000px) { .sheetmenu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sheetmenu__item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 11px 12px 11px 10px;
  margin: 0 -10px;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: background .14s ease;
}
.sheetmenu__item:hover { background: rgba(255, 255, 255, .05); }
.sheetmenu__item[aria-current='true'] { background: rgba(255, 210, 74, .09); }

.sheetmenu__n {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--on-dark-3);
  letter-spacing: 0.04em;
}
.sheetmenu__item[aria-current='true'] .sheetmenu__n { color: var(--accent); }

.sheetmenu__body { display: grid; gap: 3px; min-width: 0; }
.sheetmenu__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--on-dark);
  text-transform: uppercase;
}
.sheetmenu__meta {
  font-size: 11px;
  color: var(--on-dark-2);
}

/* --------------------------------------------------------------------------
   Sheet
   -------------------------------------------------------------------------- */

.sheet {
  max-width: var(--sheet-max);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 82px) var(--gutter);
  scroll-margin-top: 60px;
}
.sheet + .sheet { border-top: 1px solid var(--rule); }

.sheet__head { margin-bottom: clamp(26px, 3.4vw, 42px); }

.sheet__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.sheet__eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.sheet__title {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  font-weight: 700;
  text-transform: uppercase;
}

.sheet__sub {
  margin: 8px 0 0;
  color: var(--on-dark-2);
  font-size: 13.5px;
}

/* --------------------------------------------------------------------------
   Panel grid
   -------------------------------------------------------------------------- */

/* A grid, so every card in a row takes the height of the tallest one and the
   rows read as bands across the sheet. Cards are flex columns internally, which
   lets the footnote sit on the bottom edge however much a card has stretched. */
.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: clamp(16px, 1.6vw, 22px);
  align-items: stretch;
}
.panels--wide { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }

.panel {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  color: var(--on-panel);
  border-radius: var(--panel-radius);
  padding: 18px 20px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 10px 26px -14px rgba(0, 0, 0, .5);
  break-inside: avoid;
}

.panel__head {
  display: grid;
  grid-template-columns: 14px 1fr;
  column-gap: 11px;
  align-items: start;
  padding-bottom: 12px;
}
.panel__swatch {
  width: 14px;
  height: 10px;
  border-radius: 1.5px;
  margin-top: 3px;
  box-shadow: inset 0 0 0 1px rgba(10, 21, 38, .12);
}
.panel__head--noswatch { grid-template-columns: 1fr; }

.panel__title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  line-height: 1.25;
}
.panel__note {
  margin: 3px 0 0;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--on-panel-3);
  letter-spacing: 0.005em;
}

/* Rows ------------------------------------------------------------------- */

.rows {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.rows caption {
  caption-side: top;
  text-align: left;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-panel-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--panel-rule);
}

.rows th {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-panel-3);
  text-align: left;
  padding: 0 12px 7px 0;
  border-bottom: 1px solid var(--panel-rule);
}
.rows th:last-child { padding-right: 0; }
.rows th.th-art { text-align: right; }

.rows td {
  padding: 0 12px 0 0;
  height: var(--row-h);
  border-bottom: 1px solid var(--panel-rule);
  vertical-align: middle;
}
.rows td:last-child { padding-right: 0; }
.rows tr:last-child td { border-bottom: 0; }

/* Column sizing: ref and artwork shrink to their content, the size column
   takes what is left so it always starts on the same line as its ref. */
.cell-code {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.035em;
  color: var(--on-panel);
  white-space: nowrap;
  width: 1%;
}
.cell-code .cell-code__name {
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 7px;
  color: var(--on-panel);
}

.cell-size {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--on-panel-2);
  width: auto;
}
.cell-size .nb { white-space: nowrap; }

/* Wide panels carry item names rather than short refs, so let those wrap. */
.panel--wide .cell-code { white-space: normal; width: 46%; }

.cell-art {
  width: 1%;
  text-align: right;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* The dynamic field — states -------------------------------------------- */

.art { color: var(--spec); }
.art--flat { color: var(--flat); }
.art--pending { color: var(--pending); }
.art--quote { color: var(--spec); }
.art--unquoted { color: var(--spec); }
.art__sep {
  color: var(--sep);
  font-weight: 400;
  padding: 0 3px;
}

/* auto pushes the footnote to the bottom of a stretched card; the table's own
   bottom margin keeps the minimum gap when the card has not stretched. */
.panel > .rows { margin-bottom: 12px; }

.panel__foot {
  margin: auto 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--panel-rule);
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--on-panel-3);
}

/* --------------------------------------------------------------------------
   Summary strip
   -------------------------------------------------------------------------- */

.summary {
  margin-top: clamp(20px, 2.4vw, 30px);
  background: var(--ink-3);
  border-radius: var(--panel-radius);
  padding: 22px 26px 24px;
}
.summary__title {
  margin: 0 0 16px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.summary__stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 26px;
}
.summary__stat { display: flex; align-items: baseline; gap: 12px; }
.summary__label {
  font-size: 11.5px;
  color: var(--on-dark-2);
  font-weight: 400;
}
.summary__value {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--on-dark-soft);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Sheet notes
   -------------------------------------------------------------------------- */

.notes {
  margin: clamp(22px, 2.6vw, 32px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  max-width: 92ch;
}
.notes li {
  font-size: 12px;
  line-height: 1.55;
  color: var(--on-dark-2);
}

/* --------------------------------------------------------------------------
   Sheet 1 — plan
   -------------------------------------------------------------------------- */

.planwrap {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 46px);
  align-items: start;
}

.key__title {
  margin: 0 0 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}
.key__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.key__item {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--on-dark-2);
}
.key__swatch {
  width: 15px;
  height: 10px;
  border-radius: 1.5px;
  margin-top: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.planfig { margin: 0; display: grid; gap: 10px; justify-items: start; }

/* The plan always fits its column — never a horizontal scrollbar. Detail
   lives in the full-screen view. */
.plan {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--panel-radius);
  padding: clamp(10px, 1.4vw, 20px);
  cursor: zoom-in;
  transition: border-color .16s ease;
}
.plan:hover { border-color: rgba(143, 163, 188, .34); }
.plan svg { display: block; width: 100%; height: auto; }

.plan__expand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: none;
  color: var(--on-dark-2);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}
.plan__expand:hover { color: var(--on-dark); border-color: rgba(143, 163, 188, .42); }

/* Full-screen plan --------------------------------------------------------- */

body.viewer-open { overflow: hidden; }

.planview {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--ink);
  animation: planview-in .22s ease;
}
@keyframes planview-in { from { opacity: 0; } to { opacity: 1; } }

.planview__bar {
  background: var(--ink);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px clamp(14px, 2.4vw, 26px);
  border-bottom: 1px solid var(--rule);
}
.planview__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.planview__hint {
  flex: 1 1 auto;
  font-size: 11px;
  color: var(--on-dark-3);
}
.planview__close {
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: none;
  color: var(--on-dark);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.planview__close:hover { border-color: var(--accent); color: var(--accent); }

.planview__stage {
  overflow: auto;
  padding: clamp(12px, 2vw, 26px);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.planview__stage svg {
  display: block;
  width: 1500px;
  max-width: none;
  height: auto;
  margin: 0 auto;
}
.plan-labels text {
  font-family: 'Futura for Red Bull', 'Futura', 'Avenir Next', system-ui, sans-serif;
  letter-spacing: 0.02em;
}

.callout {
  margin-top: clamp(22px, 2.6vw, 30px);
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 18px;
  max-width: 62ch;
}
.callout__label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  margin: 0 0 5px;
}
.callout__value {
  margin: 0;
  font-size: clamp(17px, 1.9vw, 22px);
  font-weight: 700;
  color: var(--accent);
  line-height: 1.15;
}
.callout__note {
  margin: 9px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--on-dark-3);
}

/* --------------------------------------------------------------------------
   Sheet 5 — fitting times
   -------------------------------------------------------------------------- */

.fitting {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}

.chart__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}

.chart__list { margin: 0; padding: 0; list-style: none; }
.chart__row {
  display: grid;
  grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) 46px;
  gap: 16px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
}
.chart__label {
  font-size: 11.5px;
  color: var(--on-dark-2);
  line-height: 1.3;
}
.chart__track { min-width: 0; }
.chart__bar {
  display: block;
  height: 15px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
  min-width: 3px;
}
.chart__value {
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--on-dark-soft);
  font-variant-numeric: tabular-nums;
}
.chart__foot {
  display: grid;
  grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) 46px;
  gap: 16px;
  padding-top: 13px;
  border-top: 1px solid rgba(143, 163, 188, .3);
  margin-top: 3px;
}
.chart__foot .chart__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}

.sidecards { display: grid; gap: clamp(14px, 1.6vw, 20px); }

.card {
  background: var(--panel);
  color: var(--on-panel);
  border-radius: var(--panel-radius);
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 10px 26px -14px rgba(0, 0, 0, .5);
}
.card--dark {
  background: var(--ink-3);
  color: var(--on-dark);
  box-shadow: none;
}
.card__title {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.card--dark .card__title { color: var(--accent); }
.card__note {
  margin: 5px 0 0;
  font-size: 10px;
  color: var(--on-panel-3);
}
.card__rows {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-variant-numeric: tabular-nums;
}
.card__rows td {
  padding: 8px 0;
  border-bottom: 1px solid var(--panel-rule);
  font-size: 11px;
  vertical-align: baseline;
}
.card__rows tr:last-child td { border-bottom: 0; }
.card__rows .u-mid { color: var(--on-panel-3); text-align: left; padding-left: 14px; }
.card__rows .u-end { text-align: right; font-weight: 700; color: var(--spec); white-space: nowrap; }
.card__rows .u-end--pending { color: var(--pending); }
.card__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(10, 21, 38, .16);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.card__total b {
  color: var(--spec);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
}

.card__big {
  margin: 14px 0 0;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.card__sub { margin: 10px 0 0; font-size: 11.5px; color: var(--on-dark-soft); }
.card__foot { margin: 5px 0 0; font-size: 10.5px; color: var(--on-dark-2); }

/* --------------------------------------------------------------------------
   Sheet 6 — item details
   -------------------------------------------------------------------------- */

.details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  align-items: stretch;
}
.detail { display: flex; flex-direction: column; }
.detail__foot, .detail__foots { margin-top: auto; }

.detail__title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.detail__note {
  margin: 4px 0 0;
  font-size: 10.5px;
  color: var(--on-panel-3);
}

.detail__figure {
  margin: 18px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 172px;
}
.detail__figure svg { width: 100%; height: auto; max-height: 230px; }

.detail__photo {
  margin: 16px 0 0;
  border-radius: 3px;
  overflow: hidden;
  background: var(--ink-3);
}
.detail__photo img { display: block; width: 100%; height: auto; }

.detail__caption {
  margin: 14px 0 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.faces {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.face {
  border: 1px solid var(--panel-rule);
  border-radius: 2px;
  padding: 12px 4px 10px;
  text-align: center;
}
.face__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.face__size { font-size: 8.5px; color: var(--on-panel-3); margin-top: 4px; }

.pieces { display: grid; gap: 9px; margin-top: 14px; }
.piece {
  border-top: 1px solid var(--panel-rule);
  padding-top: 9px;
}
.piece__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.piece__spec { text-transform: none; letter-spacing: 0.01em; font-weight: 400; color: var(--on-panel-2); }
.piece__note { font-size: 9.5px; color: var(--on-panel-3); margin-top: 2px; }

.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px 20px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--panel-rule);
}
.spec__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.spec__value {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--spec);
  line-height: 1.45;
}

.detail__warning {
  margin: 12px 0 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--pending);
}
.detail__foots { margin: 12px 0 0; padding: 0; list-style: none; }
.detail__foots li {
  font-size: 9.5px;
  line-height: 1.55;
  color: var(--on-panel-3);
  text-align: center;
}
.detail__foot {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--panel-rule);
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--on-panel-3);
}

/* --------------------------------------------------------------------------
   Colophon
   -------------------------------------------------------------------------- */

.colophon {
  border-top: 1px solid var(--rule);
  margin-top: 20px;
}
.colophon__inner {
  max-width: var(--sheet-max);
  margin: 0 auto;
  padding: 26px var(--gutter) 44px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 26px;
  font-size: 11px;
  color: var(--on-dark-3);
}

/* --------------------------------------------------------------------------
   Loading / error / stale
   -------------------------------------------------------------------------- */

.stale {
  max-width: var(--sheet-max);
  margin: 0 auto;
  padding: 14px clamp(16px, 2vw, 22px);
  border: 1px solid rgba(184, 57, 31, .45);
  border-left-width: 3px;
  border-radius: 4px;
  background: rgba(184, 57, 31, .1);
  color: var(--on-dark-soft);
  font-size: 12.5px;
  line-height: 1.5;
}
.stale strong { color: #ff8a6a; }
@media (min-width: 1px) {
  .sheet + .stale, .stale { margin-top: clamp(20px, 3vw, 34px); }
}

.state {
  max-width: var(--sheet-max);
  margin: 0 auto;
  padding: 90px var(--gutter);
  color: var(--on-dark-2);
  font-size: 14px;
}
.state--error { color: var(--pending); }
.state code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
  background: rgba(255, 255, 255, .06);
  padding: 2px 6px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .fitting { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .planwrap { grid-template-columns: minmax(0, 1fr); }
  .masthead { grid-template-columns: 1fr; }
  .masthead__crest { justify-self: start; }
}

@media (max-width: 560px) {
  .panels, .panels--wide, .details { grid-template-columns: minmax(0, 1fr); }
  .faces { grid-template-columns: repeat(2, 1fr); }
  .cell-size { white-space: normal; }
}

/* --------------------------------------------------------------------------
   Phones

   The pack is a wide technical document, so the small screen needs its own
   decisions rather than a squeeze: one crest not two, the drawing before the
   legend that explains it, and the two drawings kept at a legible size inside
   their own horizontal scroller instead of shrunk to fit.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  :root {
    --gutter: 18px;
    --row-h: 34px;
  }

  /* Masthead: the lockup already carries the crest, so drop the big one and
     let the title lead. Reclaims about 150px above the fold. */
  .masthead { padding-top: 24px; gap: 0; }
  .masthead__crest { display: none; }
  .lockup { gap: 11px; margin-bottom: 20px; }
  .lockup__onesign { width: 96px; }
  .lockup__crest { width: 28px; }
  .masthead__title { font-size: 26px; letter-spacing: -0.01em; }
  .masthead__sub { margin-top: 7px; font-size: 12.5px; }

  /* Nav: the inline tabs go, the bar and its panel do the navigating. */
  .sheetnav { margin-top: 22px; }
  .sheetnav__tabs { display: none; }
  .sheetnav__bar { gap: 0; }
  .sheetnav__toggle {
    width: 100%;
    justify-content: flex-start;
    border-right: 0;
    padding: 13px 0;
    margin: 0;
  }
  .sheetnav__toggle .sheetnav__chev { margin-left: auto; width: 12px; }
  .sheetnav__toggle-all { display: none; }
  .sheetnav__toggle-current { display: flex; }
  .sheetnav__panel { max-height: min(76vh, 560px); }
  .sheetmenu { grid-template-columns: minmax(0, 1fr); padding-bottom: 12px; }
  .sheetmenu__title { font-size: 12.5px; }

  .sheet { padding: 32px var(--gutter) 40px; }
  .sheet__head { margin-bottom: 22px; }
  .sheet__title { font-size: 22px; }
  .sheet__sub { font-size: 12.5px; }

  /* Sheet 1: plan first, legend under it. */
  .planwrap { gap: 18px; }
  .planfig { order: 1; }
  .key { order: 2; }
  .key__list { gap: 5px; }
  .key__item { font-size: 11px; grid-template-columns: 13px 1fr; gap: 9px; }
  .key__swatch { width: 13px; height: 9px; }

  /* The plan fits the screen. Its labels are far too small to read at this
     width, so the expand button is the way in rather than an extra. */
  .planfig { justify-items: stretch; }
  .plan { padding: 8px; }
  .plan__expand { justify-content: center; width: 100%; padding: 12px 14px; }
  .planview__stage svg { width: 1100px; }
  .planview__hint { display: none; }

  /* Same for the sheet 6 drawings. */
  .detail__figure { overflow-x: auto; justify-content: flex-start; }
  .detail__figure svg { min-width: 400px; max-height: none; }

  /* Panels: a touch more air in the rows. */
  .panel { padding: 16px 16px 14px; }
  .cell-code, .cell-size { font-size: 11.5px; }
  .cell-art { font-size: 11px; }
  .panel__foot { font-size: 10.5px; }
  .rows th { font-size: 9.5px; }
  .panel--wide .cell-code { width: 42%; }

  /* Sheet 5: stack each bar under its label instead of three tight columns. */
  .chart__row {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'label value' 'bar bar';
    row-gap: 7px;
    column-gap: 12px;
    padding: 10px 0;
  }
  .chart__label { grid-area: label; font-size: 12px; }
  .chart__value { grid-area: value; }
  .chart__track { grid-area: bar; }
  .chart__bar { height: 12px; }
  .chart__foot { grid-template-columns: 1fr auto; column-gap: 12px; }
  .chart__foot > :nth-child(2) { display: none; }

  .summary { padding: 18px 18px 20px; }
  .summary__stats { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .summary__stat { justify-content: space-between; }

  .card { padding: 18px 16px; }
  .specs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .callout { padding-left: 14px; }

  .colophon__inner { padding: 22px var(--gutter) 34px; gap: 6px; }
}

@media (max-width: 400px) {
  .faces { grid-template-columns: repeat(2, 1fr); }
  .masthead__title { font-size: 23px; }
}

/* --------------------------------------------------------------------------
   Print — A3 landscape, one sheet per page
   -------------------------------------------------------------------------- */

@page {
  size: A3 landscape;
  margin: 12mm;
}

@media print {
  :root { --gutter: 0; --sheet-max: none; }

  body { background: #fff; color: #0a1526; font-size: 8.5pt; }

  .sheetnav, .skip, .splash, .plan__expand, .planview { display: none !important; }
  .stale { border-color: #b8391f; background: #fff; color: #b8391f; }
  .plan { cursor: auto; }

  .masthead { padding: 0 0 6mm; break-after: avoid; }
  /* The Onesign mark is white artwork — invert it so it shows on paper. */
  .lockup__onesign { filter: invert(1); }
  .lockup__x { color: #6c7a8a; }
  .masthead__title { font-size: 26pt; }
  .masthead__sub { color: #6c7a8a; }

  .sheet {
    padding: 0;
    break-before: page;
    break-inside: avoid;
  }
  .sheet:first-of-type { break-before: avoid; }
  .sheet + .sheet { border-top: 0; }

  .sheet__title { font-size: 20pt; }
  .sheet__sub, .sheet__eyebrow { color: #6c7a8a; }
  .sheet__eyebrow::after { background: #e8ecf1; }

  .panel, .card {
    box-shadow: none;
    border: 1px solid #e8ecf1;
    break-inside: avoid;
    padding: 12px 14px 11px;
  }

  /* Match the printed sheets: four panel columns, three for the wide ones. */
  .panels { grid-template-columns: repeat(4, 1fr); gap: 5mm; }
  .panels--wide { grid-template-columns: repeat(3, 1fr); gap: 5mm; }
  .details { grid-template-columns: repeat(3, 1fr); gap: 5mm; }

  .rows td { height: 22px; }
  .cell-code, .cell-size { font-size: 8pt; }
  .cell-art { font-size: 7.6pt; }
  .panel__foot, .rows th { font-size: 6.6pt; }
  .panel__title { font-size: 9pt; }
  .panel__note { font-size: 7pt; }

  .plan { background: #fff; border-color: #e8ecf1; }

  .key__item, .notes li, .chart__label, .summary__label { color: #3a4652; }
  .key__swatch { box-shadow: inset 0 0 0 1px rgba(10, 21, 38, .18); }

  .summary, .card--dark { background: #f4f6f9; color: #0a1526; }
  .summary__title, .card--dark .card__title { color: #b8860b; }
  .summary__value, .card__sub, .chart__value { color: #0a1526; }
  .card__big { color: #b8860b; }
  .card__foot { color: #6c7a8a; }

  .chart__row, .chart__foot { border-color: #e8ecf1; }
  .chart__bar { box-shadow: inset 0 0 0 .4pt rgba(10, 21, 38, .25); }

  .callout__value { color: #b8860b; }
  .callout__label, .callout__note { color: #6c7a8a; }
  .callout { border-left-color: #b8860b; }

  .colophon { border-top: 1px solid #e8ecf1; }
  .colophon__inner { color: #6c7a8a; padding: 4mm 0 0; }
}