/* PoolLock base — reset, faces, elements. Spec §4.4.
 *
 * No colour literals in this file. Every value traces to tokens.css.
 */

/* ---------------------------------------------------------------- faces  */
/* Self-hosted, latin subset, woff2 only. No Google Fonts request is made in
 * production — the reference documents link to Google because they are design
 * documents, not the site.
 *
 * Archivo arrives instantiated at wdth 125 with a 500–800 weight axis, which
 * is why the descriptor below declares font-stretch: 125% and why .h1/.h2 ask
 * for that same value. The width contrast against Inter is what makes the
 * pairing work; a normal-width grotesque collapses the system. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 125%;
  font-display: swap;
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-mono-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plex-mono-500-latin.woff2") format("woff2");
}

/* ---------------------------------------------------------------- reset  */
*,
*::before,
*::after {
  box-sizing: border-box;
  /* Zero border radius. Everywhere. Asserted globally rather than per
   * component so a stray UA default or plugin style cannot reintroduce it. */
  border-radius: var(--radius);
}

/* Vertical rhythm belongs to the modules, not to the elements. */
* {
  margin: 0;
}

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

body {
  background: var(--c-surface);
  color: var(--c-text);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  /* The grid is felt through hairlines, never through a scrollbar. */
  overflow-x: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

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

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

table {
  border-collapse: collapse;
}

/* A table inside page prose — the cookie policy's is the one that matters —
 * gets the same treatment as a table inside an article: mono figures, a navy
 * header row, hairlines between rows. The wrapper scrolls rather than letting
 * a narrow phone push the whole page sideways, which is what an unstyled table
 * of cookie names and durations does. */
.prose table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin-block: var(--sp-4);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.84375rem;
  line-height: 1.5;
  white-space: nowrap;
}

.prose thead,
.prose tbody {
  display: table;
  width: 100%;
}

.prose th {
  background: var(--c-surface-inv);
  color: var(--pl-paper);
  text-align: left;
  padding: 11px 16px;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.prose td {
  padding: 11px 16px;
  border-bottom: var(--rule) solid var(--c-rule);
  vertical-align: top;
}

.prose tbody tr:last-child td {
  border-bottom: 0;
}

.prose td code {
  font-size: inherit;
}

::selection {
  background: var(--pl-sky);
  color: var(--pl-navy);
}

/* ------------------------------------------------------------ typography */
.h1,
.h2,
h1,
h2 {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.h1,
h1 {
  font-size: var(--step-4);
}

.h2,
h2 {
  font-size: var(--step-3);
}

.h3,
.h4,
h3,
h4 {
  font-family: var(--font-text);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: 0;
}

.h3,
h3 {
  font-size: var(--step-1);
}

.h4,
h4 {
  font-size: var(--step-0);
}

/* C3 in docs/content-gaps.md: the spec restricts Archivo to H1 and H2, but the
 * reference homepage sets the range-grid card headings in it. This modifier
 * exists so that module can match the brand file without loosening the rule
 * for every other H3 on the site. Do not use it anywhere else. */
.h3--display {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* The structural device. Uppercase micro-labels with wide tracking carry
 * information — the section they open, the field they name. They are never
 * ornament, and they are the reason this design needs no decorative icons. */
.label {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: var(--lh-head);
  color: var(--c-text-muted);
}

/* Numeric and technical data only: spec tables, dimensions, temperatures,
 * model codes, proof-bar figures, status readouts. Plex Mono in a heading,
 * label or body line is a defect. */
.data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Code and keyboard output are technical data by any reading, and left alone
 * they fall back to whatever monospace the browser happens to have — which is
 * the one place a fourth typeface can slip into the page unnoticed. */
code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Secondary text: captions, standfirsts, the quiet half of a pair. */
.pl-muted {
  color: var(--c-text-muted);
}

/* The only place raw editor output is styled. Everywhere else the markup is
 * ours and the modules own the spacing. */
.prose {
  max-width: var(--measure);
  text-wrap: pretty;
}

.prose > * + * {
  margin-top: var(--sp-2);
}

.prose h2,
.prose h3,
.prose h4 {
  margin-top: var(--sp-4);
}

.prose ul,
.prose ol {
  padding-left: var(--sp-3);
  list-style-position: outside;
}

.prose a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------- controls */
/* Focus is never removed and never amber. Amber signals a safety state; a
 * focus ring is not a safety state. */
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
}

a {
  color: inherit;
}

/* Primary — solid, one per screen.
 * Secondary — hairline outline, max two.
 * The 1px border on the secondary is absorbed by 14px of padding against the
 * primary's 15px, so both buttons sit at the same height on the same row. */
.btn,
.btn--secondary {
  display: inline-block;
  font-size: 0.9375rem;   /* 15px */
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
  /* 15px + 15px padding on an 18px line box clears the 44px touch target. */
  min-height: 44px;
}

.btn {
  background: var(--c-btn-bg);
  color: var(--c-btn-text);
  border: 0;
  padding: 15px 30px;
}

.btn:hover,
.btn:focus-visible {
  background: var(--c-btn-bg-hover);
}

.btn--secondary {
  background: transparent;
  color: var(--c-text);
  border: var(--rule) solid var(--c-text);
  padding: 14px 30px;
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--c-text);
  color: var(--c-surface);
}

/* Tertiary. Unlimited, but still a real touch target. */
.link {
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.link:hover {
  color: var(--c-text-muted);
}

/* Inputs share the button geometry so a form row reads as one object.
 *
 * The border is the text colour, not the hairline colour. Drawn in the generic
 * rule they came out slate — 6.5:1 — and a form of twelve slate rectangles
 * reads as a wireframe of a form rather than as the instrument itself. E8 draws
 * every field in navy, which is 15.5:1 and the same ink as the labels above
 * them. It is the cheapest colour on the page: no new hue, twelve elements.
 *
 * It resolves per theme rather than naming navy, so a field on a dark or water
 * ground still takes that ground's ink instead of disappearing into it. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: 13px 14px;
  background: var(--c-surface);
  color: var(--c-text);
  border: var(--rule) solid var(--c-text);
  min-height: 44px;
}

input::placeholder,
textarea::placeholder {
  color: var(--c-text-muted);
  opacity: 1;
}

label {
  display: block;
}

/* Skip link — visible the moment it takes focus, invisible otherwise.
 *
 * Paper on navy type, not the reverse: since DR-01 the masthead it lands on is
 * itself navy, and a navy panel on a navy bar is a control nobody can see. The
 * one element on the site that exists purely to be found must not depend on
 * what is behind it. */
.pl-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--pl-paper);
  color: var(--pl-navy);
  outline: 2px solid var(--pl-navy);
  outline-offset: -2px;
}

.pl-skip:focus {
  left: 0;
}

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

/* ---------------------------------------------------------------- icons  */
/* Stroke drawings that inherit the colour of the text they sit with, which is
 * the whole reason they are inlined rather than <img> — one file works on
 * white and on navy. They never carry a colour of their own, and never a fill.
 * DR-02 records why they exist at all. */
.pl-icon {
  display: block;
  width: var(--icon);
  height: auto;
  color: inherit;
}

/* ---------------------------------------------------------------- motion */
/* Reduced motion produces a static, complete page — not a broken one. The
 * hero's JavaScript reads the same query and forces the cover closed. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}