/*
  EUROCUTPRECISION — knowledge, distribution and platform components (Sprint 2).

  Everything here is built from tokens.css. No new colour, spacing or type value
  is introduced; where a value looks new it is a token combination, not a literal.

  Three families live in this file:
    .platform-bar   the platform-status bar, present on every page
    .k-*            the Technical Center and product-knowledge system
    .map-* / .dist-* the Global Distribution page

  Layout rule observed throughout: no element may create horizontal page scroll.
  Wide content (tables, the map) scrolls inside its own container instead.
*/

/* ------------------------------------------------------------ platform bar */

.platform-bar {
  background: var(--color-neutral-950);
  color: var(--color-neutral-0);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.platform-bar[hidden] { display: none; }

.platform-bar__inner {
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: var(--space-3) var(--grid-gutter-mobile);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.platform-bar__mark {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent-300);
  flex: none;
}

.platform-bar__text {
  margin: 0;
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
  color: rgba(255, 255, 255, 0.82);
  flex: 1 1 320px;
  min-width: 0;
}

.platform-bar__text strong {
  color: var(--color-neutral-0);
  font-weight: 600;
}

.platform-bar__link {
  font-size: var(--type-small-size);
  color: var(--color-accent-300);
  text-decoration: none;
  border-bottom: 1px solid rgba(124, 156, 214, 0.5);
  padding-bottom: 1px;
  flex: none;
}

.platform-bar__link:hover,
.platform-bar__link:focus-visible { color: var(--color-neutral-0); border-bottom-color: var(--color-neutral-0); }

.platform-bar__dismiss {
  appearance: none;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.25rem;
  line-height: 1;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  flex: none;
}

.platform-bar__dismiss:hover,
.platform-bar__dismiss:focus-visible { color: var(--color-neutral-0); }

@media (min-width: 1024px) {
  .platform-bar__inner { padding-left: var(--grid-gutter-desktop); padding-right: var(--grid-gutter-desktop); }
}

/* --------------------------------------------------------- article system */

.k-article { padding: var(--space-10) 0 var(--space-16); }

.k-article__inner { max-width: 100%; }

.k-article__head { max-width: 68ch; }

.k-article__head h1 { margin: 0; }

.k-standfirst {
  margin-top: var(--space-4);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-neutral-700);
}

.k-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-500);
}

/* The provenance banner. Deliberately not an alert: it is a standing statement
   about the whole page, not a warning about one part of it. */
.k-provenance {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-accent-500);
  background: var(--color-accent-100);
  font-size: var(--type-small-size);
  line-height: 1.6;
  color: var(--color-neutral-900);
}

.k-provenance__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: var(--space-2);
}

/* Contents */
.k-toc {
  margin: var(--space-10) 0 0;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  max-width: 68ch;
}

.k-toc__title {
  font-size: var(--type-caption-size);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-neutral-500);
  margin: 0 0 var(--space-3);
}

.k-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: k-toc;
}

.k-toc li {
  counter-increment: k-toc;
  padding: var(--space-1) 0;
  font-size: var(--type-small-size);
}

.k-toc li::before {
  content: counter(k-toc, decimal-leading-zero);
  font-family: var(--font-mono);
  color: var(--color-neutral-300);
  margin-right: var(--space-3);
}

.k-section { margin-top: var(--space-12); max-width: 68ch; }

.k-section > h2 {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-neutral-300);
}

.k-section p { margin-top: var(--space-4); }

.k-list { margin: var(--space-4) 0 0; padding-left: var(--space-5); }
.k-list li { margin-top: var(--space-2); }
.k-list--ordered { padding-left: var(--space-6); }

/* Formula block */
.k-formula {
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--color-neutral-950);
  color: var(--color-neutral-0);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

.k-formula__expr {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  line-height: 1.6;
  white-space: nowrap;
}

.k-terms {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--type-small-size);
  white-space: normal;
}

.k-terms__row { display: flex; gap: var(--space-3); padding: var(--space-1) 0; }
.k-terms dt { font-family: var(--font-mono); color: var(--color-accent-300); min-width: 6.5rem; flex: none; margin: 0; }
.k-terms dd { margin: 0; color: rgba(255, 255, 255, 0.78); }

/* Worked example */
.k-worked {
  margin-top: var(--space-5);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.k-worked__title {
  margin: 0;
  padding: var(--space-3) var(--space-5);
  background: var(--color-neutral-100);
  font-size: var(--type-small-size);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-neutral-700);
}

.k-worked__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-neutral-100);
  font-size: var(--type-small-size);
}

.k-worked__label { color: var(--color-neutral-700); }
.k-worked__value { font-family: var(--font-mono); text-align: right; }

/* Tables */
.k-tablewrap { margin-top: var(--space-5); overflow-x: auto; }

.k-table { width: 100%; min-width: 34rem; }

.k-table caption {
  caption-side: top;
  text-align: left;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  color: var(--color-neutral-500);
  padding-bottom: var(--space-3);
}

.k-tablenote {
  margin-top: var(--space-3);
  font-size: var(--type-caption-size);
  line-height: 1.5;
  color: var(--color-neutral-500);
}

/* Notes */
.k-note {
  margin-top: var(--space-12);
  padding: var(--space-6);
  background: var(--color-neutral-100);
  border-radius: var(--radius-sm);
  max-width: 68ch;
}

.k-note__title { margin: 0; font-size: var(--type-h3-size); line-height: var(--type-h3-line); }
.k-note p { margin-top: var(--space-3); font-size: var(--type-small-size); line-height: 1.6; }

.k-note__list {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1) var(--space-4);
  font-size: var(--type-small-size);
}

.k-note__list li { padding-left: var(--space-4); position: relative; }
.k-note__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 1px;
  background: var(--color-accent-500);
}

.k-note__foot { color: var(--color-neutral-700); }

.k-inline-note {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-neutral-300);
  background: var(--color-neutral-100);
  font-size: var(--type-small-size);
  line-height: 1.6;
}

/* Cross-links */
.k-crosslinks {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-neutral-300);
  max-width: 68ch;
}

.k-crosslinks__title {
  font-size: var(--type-caption-size);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-neutral-500);
  margin: 0 0 var(--space-4);
}

.k-crosslinks ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }

@media (min-width: 640px) {
  .k-crosslinks ul { grid-template-columns: 1fr 1fr; }
  .k-note__list { grid-template-columns: 1fr 1fr; }
}

.k-crosslinks li a { font-weight: 600; }
.k-crosslinks li span { display: block; font-size: var(--type-small-size); color: var(--color-neutral-500); margin-top: var(--space-1); }

/* --------------------------------------------------------------- hub page */

.k-hubhead { padding-bottom: var(--space-8); }
.k-hubhead h1 { margin-top: var(--space-3); }
.k-hubhead__lead { max-width: 68ch; margin-top: var(--space-4); font-size: 1.0625rem; line-height: 1.7; color: var(--color-neutral-700); }
.k-hubhead__meta { max-width: 68ch; margin-top: var(--space-5); font-size: var(--type-caption-size); line-height: 1.6; color: var(--color-neutral-500); }

.k-search { margin-top: var(--space-6); max-width: 32rem; position: relative; }
.k-search input { width: 100%; }
.k-search__results { margin-top: var(--space-2); }
.k-search__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-sm); }
.k-search__list li { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-neutral-100); }
.k-search__list li:last-child { border-bottom: none; }
.k-search__list span { display: block; font-size: var(--type-caption-size); color: var(--color-neutral-500); margin-top: 2px; }

.k-hubgroup { padding-top: var(--space-8); padding-bottom: 0; }
.k-hubgroup__title { font-size: var(--type-h3-size); line-height: var(--type-h3-line); }
.k-hubgroup__lead { max-width: 68ch; margin-top: var(--space-2); font-size: var(--type-small-size); color: var(--color-neutral-500); }

.k-cardgrid {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) { .k-cardgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .k-cardgrid { grid-template-columns: repeat(3, 1fr); } }

.k-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  background: var(--color-neutral-0);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--motion-base) var(--motion-easing), box-shadow var(--motion-base) var(--motion-easing);
}

.k-card:hover, .k-card:focus-visible {
  border-color: var(--color-accent-500);
  box-shadow: var(--shadow-md);
}

.k-card__kicker {
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-neutral-500);
}

.k-card__title { margin: 0; font-size: 1.0625rem; line-height: 1.4; }
.k-card__note { margin: 0; font-size: var(--type-small-size); color: var(--color-neutral-700); flex: 1; }
.k-card__cta { font-size: var(--type-small-size); font-weight: 600; color: var(--color-accent-500); }

.k-applyband { display: grid; gap: var(--space-6); }
.k-applyband p { margin-top: var(--space-3); max-width: 60ch; color: var(--color-neutral-700); }
.k-applyband__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }

@media (min-width: 1024px) {
  .k-applyband { grid-template-columns: 1.4fr 1fr; align-items: center; }
  .k-applyband__actions { justify-content: flex-end; }
}

/* FAQ */
.k-faq { margin-top: var(--space-8); max-width: 68ch; border-top: 1px solid var(--color-neutral-300); }

/* Status chips */
.k-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.k-status--pending { background: var(--color-warning-100); color: var(--color-warning-700); }
.k-status--confirmed { background: var(--color-success-100); color: var(--color-success-700); }
.k-status--required { background: var(--color-neutral-100); color: var(--color-neutral-700); }

/* --------------------------------------------- product knowledge sections */

.pk { margin-top: var(--space-12); }

.pk__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.pk__head h2 { margin: 0; }

.pk__intro { margin-top: var(--space-3); max-width: 68ch; color: var(--color-neutral-700); }

.pk__grid {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) { .pk__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pk__grid { grid-template-columns: repeat(3, 1fr); } }

/* Each block is a <details>, open by default — see scripts/lib/product-knowledge.mjs.
   On a wide screen it must look and behave exactly as the plain card it replaced: no
   marker, no pointer cursor, nothing to suggest it can be folded. The disclosure only
   becomes visible, and only becomes interactive, below 768px. */
.pk__block {
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}

.pk__block > summary { list-style: none; display: block; }
.pk__block > summary::-webkit-details-marker { display: none; }
.pk__block > summary::marker { content: ''; }

/* At desktop width the block is not collapsible, so its summary must not behave like a
   control either. Without this it stays clickable — a 24px-tall hit area, with no
   cursor, no marker and no hint that it does anything, that silently folds a section
   away when a reader happens to click its heading. */
@media (min-width: 1024px) {
  .pk__block > summary { pointer-events: none; }
}

.pk__block h3 { margin: 0; font-size: 1rem; line-height: 1.4; }
.pk__block__body { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.pk__block p { margin: 0; font-size: var(--type-small-size); line-height: 1.6; color: var(--color-neutral-700); }
.pk__block a { font-size: var(--type-small-size); }

.pk__block--pending { background: var(--color-neutral-100); border-style: dashed; }

@media (max-width: 1023px) {
  /* The phone and tablet treatment. The heading becomes the control, with a chevron that turns —
     and the whole row is the target, which is what makes it a comfortable tap.
     Padding comes in a step: twelve collapsed rows at twenty pixels of padding each is
     half a screen of nothing. */
  .pk__block { padding: var(--space-3) var(--space-4); }
  .pk__block[open] { padding-bottom: var(--space-5); }
  .pk__block > summary {
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 44px;
    margin: calc(var(--space-2) * -1) 0;
    padding: var(--space-2) 0;
  }
  .pk__block > summary::after {
    content: '';
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-right: 2px solid var(--color-neutral-500);
    border-bottom: 2px solid var(--color-neutral-500);
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform var(--motion-base) var(--motion-easing);
  }
  .pk__block[open] > summary::after { transform: rotate(-135deg); margin-top: 10px; }
  .pk__block > summary:focus-visible { outline: 2px solid var(--color-accent-500); outline-offset: 3px; }
  .pk__block__body { margin-top: var(--space-4); }
}

/* On paper every section is open, whatever the screen decided. */
@media print {
  .pk__block > summary::after { display: none; }
  .pk__block > .pk__block__body { display: flex !important; }
}

.pk__foot { margin-top: var(--space-5); font-size: var(--type-small-size); color: var(--color-neutral-500); max-width: 68ch; }

/* 3D viewer seat. Renders a status panel, never a stand-in model. */
.pk-viewer {
  margin-top: var(--space-6);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  background: var(--color-neutral-950);
  color: var(--color-neutral-0);
  padding: var(--space-10) var(--space-6);
  text-align: center;
}

.pk-viewer__title { margin: 0; font-size: var(--type-h3-size); line-height: var(--type-h3-line); }
.pk-viewer__note { margin: var(--space-3) auto 0; max-width: 62ch; font-size: var(--type-small-size); line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
/* A link inside this panel inherited the global `a { color: var(--color-accent-700) }`
   — #082C68 on a #12141A panel, a contrast ratio of 1.38:1. "Document availability" was
   present, underlined on hover, and effectively unreadable on all ten product pages. */
.pk-viewer a { color: var(--color-accent-300); }
.pk-viewer a:hover { color: var(--color-neutral-0); }
.pk-viewer__caps { margin: var(--space-5) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.pk-viewer__caps li {
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-full);
  padding: 2px var(--space-3);
}

/* Released model. The seat stops being a notice and becomes a surface: the poster fills
   it, the interactive canvas replaces the poster in the same box, and the provenance
   sits beneath on its own quiet ground so the measured values read as a record rather
   than as a second specification table. */
.pk-viewer--released { padding: 0; overflow: hidden; text-align: left; }

.pk-viewer__stage {
  position: relative;
  display: block;
  background: #f4f5f7;
  /* The poster is rendered 2:1 and the canvas is framed to match, so switching from one
     to the other does not move anything below it on the page. */
  aspect-ratio: 2 / 1;
}
@supports not (aspect-ratio: 2 / 1) { .pk-viewer__stage { min-height: 320px; } }

.pk-viewer__poster,
.pk-viewer__canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #f4f5f7;
}
.pk-viewer__canvas { touch-action: none; cursor: grab; }
.pk-viewer__canvas:active { cursor: grabbing; }
.pk-viewer__canvas:focus-visible { outline: 3px solid var(--color-accent-500); outline-offset: -3px; }

/* The activation strip over the poster.
   A gradient alone put white text over the pale end of its own fade: 1.09:1 where the
   sentence actually sits. The strip now carries a solid translucent ground WITH the
   gradient on top of it, so the text is always on a dark plate and the top edge still
   softens into the image. */
.pk-viewer__activate {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4) var(--space-4);
  background-color: rgba(18, 20, 26, 0.88);
  background-image: linear-gradient(to top, rgba(18, 20, 26, 0.35), rgba(18, 20, 26, 0) 70%);
}
.pk-viewer__hint {
  margin: 0;
  font-size: var(--type-caption-size);
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, 0.86);
}
/* The no-JavaScript state: the same strip, carrying the sentence instead of the button. */
.pk-viewer__stage > .pk-viewer__hint[data-model-activate] {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-8) var(--space-4) var(--space-4);
  background-color: rgba(18, 20, 26, 0.88);
  background-image: linear-gradient(to top, rgba(18, 20, 26, 0.35), rgba(18, 20, 26, 0) 70%);
}

/* Once the canvas is live the stage holds the controls and the hint beneath it, so the
   seat grows rather than covering the model with its own chrome. */
.pk-viewer[data-model-state="live"] .pk-viewer__stage,
.pk-viewer[data-model-state="loading"] .pk-viewer__stage,
.pk-viewer[data-model-state="error"] .pk-viewer__stage { aspect-ratio: auto; }
.pk-viewer[data-model-state="live"] .pk-viewer__canvas { height: 420px; }
@media (max-width: 639px) { .pk-viewer[data-model-state="live"] .pk-viewer__canvas { height: 300px; } }

.pk-viewer__status {
  margin: 0;
  padding: var(--space-16) var(--space-6);
  text-align: center;
  color: var(--color-neutral-700);
  background: #f4f5f7;
}
.pk-viewer__status--error { color: var(--color-error-700); padding-bottom: var(--space-4); }
.pk-viewer[data-model-state="error"] .pk-viewer__stage { text-align: center; padding-bottom: var(--space-8); background: #f4f5f7; }

.pk-viewer__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-neutral-900);
}
.pk-viewer__control {
  font: inherit;
  font-size: var(--type-caption-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  min-height: 34px;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-easing), border-color var(--motion-fast) var(--motion-easing);
}
.pk-viewer__control:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.45); }
.pk-viewer__control[aria-pressed="true"] { background: var(--color-accent-500); border-color: var(--color-accent-500); color: #fff; }

.pk-viewer[data-model-state="live"] .pk-viewer__hint {
  position: static;
  color: var(--color-neutral-500);
  background: none;
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.pk-viewer__meta { padding: var(--space-5) var(--space-6) var(--space-6); background: var(--color-neutral-950); }
.pk-viewer__meta .pk-viewer__note { margin-inline: 0; max-width: 78ch; }
.pk-viewer__note--quiet { color: rgba(255, 255, 255, 0.5); }

.pk-viewer__verified {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2) var(--space-5);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.pk-viewer__verified li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: var(--space-2);
}
.pk-viewer__verified span {
  font-size: var(--type-caption-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.pk-viewer__verified strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-small-size);
  font-weight: 600;
  color: #fff;
}

/* Full screen: the canvas takes the viewport and the chrome stays reachable. */
.pk-viewer:fullscreen { display: flex; flex-direction: column; background: #f4f5f7; }
.pk-viewer:fullscreen .pk-viewer__stage { flex: 1 1 auto; display: flex; flex-direction: column; }
.pk-viewer:fullscreen .pk-viewer__canvas { flex: 1 1 auto; height: auto; }
.pk-viewer:fullscreen .pk-viewer__meta { display: none; }

/* ------------------------------------------------------- global distribution */

.dist-head { padding-bottom: var(--space-6); }
.dist-head h1 { margin-top: var(--space-3); }
.dist-head__lead { max-width: 68ch; margin-top: var(--space-4); font-size: 1.0625rem; line-height: 1.7; color: var(--color-neutral-700); }

.map-panel {
  background: var(--color-neutral-950);
  padding: var(--space-10) 0 var(--space-8);
}

.map-panel__inner { max-width: var(--grid-max-width); margin: 0 auto; padding: 0 var(--grid-gutter-mobile); }

@media (min-width: 1024px) { .map-panel__inner { padding: 0 var(--grid-gutter-desktop); } }

.map-panel__title { color: var(--color-neutral-0); margin: 0; font-size: var(--type-h2-size); line-height: var(--type-h2-line); }
.map-panel__lead { color: rgba(255, 255, 255, 0.7); max-width: 60ch; margin-top: var(--space-3); font-size: var(--type-small-size); line-height: 1.6; }

.map-figure { margin: var(--space-8) 0 0; }
.map-figure__scroll { overflow-x: auto; }
.map-figure svg { display: block; width: 100%; min-width: 40rem; height: auto; }

.map-land { fill: #1E2531; stroke: #2C3547; stroke-width: 0.6; }
.map-land--focus { fill: var(--color-accent-700); stroke: var(--color-accent-300); stroke-width: 0.8; }
.map-graticule { stroke: rgba(255, 255, 255, 0.06); stroke-width: 0.5; fill: none; }
.map-label { fill: rgba(255, 255, 255, 0.82); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.map-label--muted { fill: rgba(255, 255, 255, 0.45); }
.map-ring { fill: none; stroke: var(--color-accent-300); stroke-width: 1; opacity: 0.55; }
.map-lead { stroke: rgba(124, 156, 214, 0.45); stroke-width: 0.75; fill: none; }

.map-legend {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}

.map-legend li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-caption-size); color: rgba(255, 255, 255, 0.65); }
.map-legend__swatch { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.map-legend__swatch--focus { background: var(--color-accent-700); border: 1px solid var(--color-accent-300); }
.map-legend__swatch--other { background: #1E2531; border: 1px solid #2C3547; }

.map-caption { margin-top: var(--space-4); font-size: var(--type-caption-size); line-height: 1.6; color: rgba(255, 255, 255, 0.5); max-width: 72ch; }

.dist-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; margin-top: var(--space-6); }

/* Two at tablet, three at desktop. Going straight to three at 768px gave 221px columns
   and 172px paragraphs — about twenty characters a line, with no overflow to show for
   it. The same progression the knowledge grid uses. */
@media (min-width: 768px) { .dist-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dist-grid { grid-template-columns: repeat(3, 1fr); } }

.dist-region {
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dist-region--emphasis { border-color: var(--color-accent-500); border-top: 3px solid var(--color-accent-500); }

.dist-region__kicker {
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-500);
}

.dist-region h2, .dist-region h3 { margin: 0; font-size: var(--type-h3-size); line-height: var(--type-h3-line); }
.dist-region p { margin: 0; font-size: var(--type-small-size); line-height: 1.6; color: var(--color-neutral-700); }
.dist-region ul { margin: 0; padding-left: var(--space-5); font-size: var(--type-small-size); color: var(--color-neutral-700); }
.dist-region li { margin-top: var(--space-1); }

.dist-note {
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--color-accent-500);
  background: var(--color-accent-100);
  font-size: var(--type-small-size);
  line-height: 1.6;
  max-width: 72ch;
}

/* ------------------------------------------------------------ platform page */

.plat-timeline { margin-top: var(--space-8); padding: 0; list-style: none; max-width: 68ch; }

.plat-timeline li {
  position: relative;
  padding: 0 0 var(--space-6) var(--space-8);
  border-left: 1px solid var(--color-neutral-300);
}

.plat-timeline li:last-child { padding-bottom: 0; }

.plat-timeline li::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  background: var(--color-neutral-0);
  border: 2px solid var(--color-accent-500);
}

.plat-timeline li.is-live::before { background: var(--color-accent-500); }

.plat-timeline h3 { margin: 0; font-size: 1rem; line-height: 1.4; }
.plat-timeline p { margin-top: var(--space-2); font-size: var(--type-small-size); line-height: 1.6; color: var(--color-neutral-700); }

/* ------------------------------------------------------------- comparison */

.cmp-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.cmp-check { width: 24px; height: 24px; accent-color: var(--color-accent-500); }  /* 24px is the WCAG 2.2 minimum target size; 18px was below it. */

.cmp-tray {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-accent-500);
  border-radius: var(--radius-sm);
  background: var(--color-accent-100);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.cmp-tray[hidden] { display: none !important; }
.cmp-tray__count { margin: 0; font-size: var(--type-small-size); color: var(--color-neutral-900); }
.cmp-tray__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.cmp-panel {
  margin-top: var(--space-4);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  background: var(--color-neutral-0);
}

.cmp-panel[hidden] { display: none !important; }
.cmp-panel:focus-visible { outline: 2px solid var(--color-accent-500); outline-offset: 2px; }
.cmp-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.cmp-panel__head h3 { margin: 0; font-size: var(--type-h3-size); line-height: var(--type-h3-line); }
.cmp-panel__body { margin-top: var(--space-4); overflow-x: auto; }
.cmp-table { width: 100%; min-width: 30rem; }
.cmp-panel__note { margin-top: var(--space-3); font-size: var(--type-caption-size); color: var(--color-neutral-500); }

/* ------------------------------------------------------- quantity tiers */

.tier-preview {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--color-neutral-300);
  border: 1px solid var(--color-neutral-300);
}

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

.tier-preview__item {
  background: var(--color-neutral-0);
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tier-preview__qty {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}

.tier-preview__state {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-neutral-900);
}

.tier-preview__note { font-size: var(--type-caption-size); color: var(--color-neutral-500); }

.tier-preview__policy {
  margin-top: var(--space-4);
  font-size: var(--type-small-size);
  line-height: 1.6;
  color: var(--color-neutral-700);
  max-width: 68ch;
}

/* ------------------------------------------------------------ RFQ journey */

.rfq-journey { margin: var(--space-6) 0 0; padding: 0; list-style: none; counter-reset: rfq-step; }

.rfq-journey li {
  counter-increment: rfq-step;
  position: relative;
  padding: 0 0 var(--space-5) var(--space-10);
  border-left: 1px solid var(--color-neutral-300);
}

.rfq-journey li:last-child { padding-bottom: 0; }

.rfq-journey li::before {
  content: counter(rfq-step, decimal-leading-zero);
  position: absolute;
  left: calc(-1 * var(--space-4));
  top: -2px;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-neutral-0);
  border: 1px solid var(--color-accent-500);
  color: var(--color-accent-700);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rfq-journey h3 { margin: 0; font-size: 1rem; line-height: 1.4; }
.rfq-journey p { margin-top: var(--space-1); font-size: var(--type-small-size); line-height: 1.6; color: var(--color-neutral-700); }

.rfq-special { margin-top: var(--space-4); }
.rfq-special__grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .rfq-special__grid { grid-template-columns: 1fr 1fr; } }
.rfq-special__note { font-size: var(--type-caption-size); color: var(--color-neutral-500); margin-top: var(--space-2); }

/* ------------------------------------------------- release-status notices */

.release-note {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-neutral-300);
  border-left: 3px solid var(--color-accent-500);
  border-radius: var(--radius-sm);
  background: var(--color-neutral-0);
  max-width: 72ch;
}

.release-note__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-700);
}

.release-note p { margin: var(--space-2) 0 0; font-size: var(--type-small-size); line-height: 1.6; color: var(--color-neutral-700); }

/* Sprint 3 — comparison controls.
   Four tools and fourteen possible rows is a wall of numbers; the toggle hides the
   rows on which the selection agrees, and the per-column × removes a tool without
   scrolling back to the table to find its checkbox. */
.cmp-panel__controls { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cmp-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--type-small-size); color: var(--color-neutral-700);
  min-height: 44px; cursor: pointer;
}
.cmp-toggle input { width: 18px; height: 18px; accent-color: var(--color-accent-500); }
.cmp-drop {
  font: inherit; line-height: 1; margin-left: var(--space-2);
  min-width: 32px; min-height: 32px; padding: 0;
  border: 1px solid var(--color-neutral-300); border-radius: 4px;
  background: var(--color-neutral-0); color: var(--color-neutral-500); cursor: pointer;
}
.cmp-drop:hover, .cmp-drop:focus-visible { border-color: var(--color-accent-500); color: var(--color-accent-500); }
.cmp-row--differs th { color: var(--color-neutral-900); font-weight: 600; }
@media (max-width: 639px) {
  .cmp-panel__head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .cmp-table { min-width: 22rem; }
}

/* See the touch-target note in components.css: the comparison remove button is
   sized for a mouse and grows for a thumb. */
@media (pointer: coarse) {
  .cmp-drop { min-height: 44px; min-width: 44px; }
}