/* ==========================================================================
   G R SITES — base.css
   Reset, element defaults, global primitives.

   DISCIPLINE (CLAUDE.md): never mix element and class selectors for the same
   property. Enforced here by a hard split —
     · ELEMENT selectors zero all margin and padding and never set them again.
       They own inherited typography only (family, size, weight, leading,
       colour) and structural display.
     · CLASS selectors (components.css) own every spacing value on the site.
   Where a class needs to change a size an element selector owns, it sets a
   custom property the element reads — it does not override the property.
   e.g.  h1 { font-size: var(--h1-size, var(--fs-title)); }
         .pagehead--index { --h1-size: var(--fs-masthead); }

   No raw hex, no raw px in this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto;
  /* anchored clauses and TOC jumps must clear the sticky masthead */
  scroll-padding-block-start: calc(var(--masthead-h) + var(--sp-1));
}

body {
  min-block-size: 100vh;
  background-color: var(--ground);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--weight-body);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

/* Landmarks carry no spacing of their own. .band owns section padding —
   this line is the whole defence against the cancelled-out-padding failure. */
main,
header,
footer,
nav,
aside,
section,
article,
figure,
address {
  display: block;
}

address {
  font-style: normal;
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY — element level. Sizes are overridable ONLY via custom
      property, never by a competing font-size declaration.
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--fg);
  text-wrap: balance;
}

h1 {
  font-size: var(--h1-size, var(--fs-title));
  line-height: var(--h1-leading, var(--leading-title));
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--h2-size, var(--fs-head));
  line-height: var(--leading-head);
}

h3 {
  font-size: var(--h3-size, var(--fs-sub));
  line-height: var(--leading-sub);
}

h4,
h5,
h6 {
  font-size: var(--fs-lede);
  line-height: var(--leading-lede);
}

p,
li,
dd,
dt,
figcaption {
  text-wrap: pretty;
}

strong,
b {
  font-weight: var(--weight-bold);
}

small {
  font-size: var(--fs-fine);
}

/* Numerals align down a column everywhere they can. */
table,
time,
data,
output,
pre,
code,
samp {
  font-variant-numeric: tabular-nums;
}

pre,
code,
samp,
kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-fine);
}

ul,
ol {
  list-style-position: outside;
}

/* --------------------------------------------------------------------------
   3. LINKS
   -------------------------------------------------------------------------- */

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: var(--hair);
  text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: no-preference) {
  a {
    transition: text-decoration-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
  }
}

a:hover {
  text-decoration-thickness: var(--rule-section);
}

/* --------------------------------------------------------------------------
   4. TABLES — structure only. .ledger owns all spacing and rules.
   -------------------------------------------------------------------------- */

table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  text-align: start;
  vertical-align: baseline;
}

th {
  font-weight: var(--weight-bold);
}

caption {
  text-align: start;
}

/* --------------------------------------------------------------------------
   5. MEDIA
      There is no photography, illustration or icon set on this site. The
      logo mark is the one image; these rules exist for it and for safety.
   -------------------------------------------------------------------------- */

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

hr {
  border: 0;
}

/* --------------------------------------------------------------------------
   6. FORM ELEMENTS — inherit type, carry no chrome. .control skins them.
   -------------------------------------------------------------------------- */

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--radius);
}

button {
  cursor: pointer;
  text-align: inherit;
}

textarea {
  resize: vertical;
}

select {
  cursor: pointer;
}

/* Native number spinners are 20px targets and unlabelled — .stepper
   supplies real 44px buttons instead. */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

fieldset {
  border: 0;
  min-inline-size: 0;
}

legend {
  display: block;
}

::placeholder {
  color: var(--fg-mute);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   7. FOCUS — never removed, never replaced by a colour change alone.
      2px --teal on light grounds, 2px --cyan inside ink bands (via --focus-c).
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: var(--rule-section) solid var(--focus-c);
  outline-offset: var(--rule-section);
}

:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background-color: var(--teal);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   8. GLOBAL PRIMITIVES
   -------------------------------------------------------------------------- */

.skip {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: calc(var(--z-masthead) + 1);
  transform: translateY(-110%);
  padding: var(--sp-h) var(--sp-1);
  background-color: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-display);
  font-weight: var(--weight-caps);
  font-size: var(--fs-fine);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  text-decoration: none;
}

.skip:focus-visible {
  transform: translateY(0);
  outline-color: var(--cyan);
}

.visually-hidden {
  position: absolute;
  inline-size: var(--hair);
  block-size: var(--hair);
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Progressive enhancement. `.no-js` ships ON <html> and JS REMOVES it, so
   the JS-off path is the default rendering, never an afterthought.
   Both utilities only ever HIDE. An earlier draft hid .js-only by default
   and restored it with `display: revert`, which reverts to the UA value and
   silently discarded any display a component had set for itself. */
.no-js .js-only {
  display: none;
}

html:not(.no-js) .no-js-only {
  display: none;
}

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   9. REDUCED MOTION — honoured on every transition, site-wide.
   -------------------------------------------------------------------------- */

@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;
  }
}

/* --------------------------------------------------------------------------
   10. PRINT — the policy pages must survive being printed and quoted.
   -------------------------------------------------------------------------- */

@media print {
  :root {
    --ground: var(--white);
    --fg: var(--ink);
    --rule: var(--line);
  }

  body {
    background: none;
  }

  .masthead,
  .nav,
  .cart,
  .cart-tab,
  .config,
  .chipset,
  .filterbar,
  .copybtn,
  .btn {
    display: none !important;
  }

  .band,
  .band--ink,
  .band--surface {
    background: none !important;
    color: var(--ink) !important;
    padding-block: var(--sp-1) !important;
  }

  .prose,
  .clause {
    max-inline-size: none;
  }

  a[href^="http"]::after {
    content: " <" attr(href) ">";
    font-size: var(--fs-micro);
    word-break: break-all;
  }

  .clause,
  .ledger__row {
    break-inside: avoid;
  }
}