/* ==========================================================================
   Design System — Component Styles

   SOURCE OF TRUTH: foundation/brand-id.md (rules) and foundation/tokens.css (values).
   This file holds no raw values. Every colour, font, size, spacing value, radius and
   border weight is a token from tokens.css. If a build needs a value that isn't there,
   add the token to tokens.css first.

   LOAD ORDER:   1. tokens.css   2. components.css   (fonts: see README.md)

   THE ONLY LITERALS in this file:
   - 48rem in the @media queries (custom properties can't be used in media queries).
   - Zero, 100%, auto, fr units, grid column counts, and CSS keywords.

   SURFACES: light is the default. Add .surface-dark (or use .section--dark,
   .site-footer, .card--dark) for dark surfaces. Colours that must change between
   light and dark are held in --ctx-* variables below, so the same component works on both.

   STATE PREVIEWS: .is-hover and .is-focus mirror :hover and :focus-visible so
   style-guide.html can show every state at once. Do not use them in a real build.
   ========================================================================== */


/* ==========================================================================
   0. Surface context
   ========================================================================== */

:root,
.surface-light,
.card,
.callout {
  --ctx-bg:         var(--color-background);
  --ctx-text:       var(--color-text);
  --ctx-link:       var(--color-link);          /* link colour on light surfaces. Dark surfaces use --color-link-inverse */
  --ctx-link-hover: var(--color-text);
  --ctx-rule:       var(--color-border);        /* decorative rules and dividers only */
  --ctx-strong:     var(--color-focus-ring);    /* focus ring, active-nav underline, hover borders */
  --ctx-counter:    var(--color-text-muted);    /* step counters. Large text only (needs 3:1) */
  --ctx-caption:    var(--color-text-caption);
}

.surface-dark,
.section--dark,
.site-footer,
.card--dark {
  --ctx-bg:         var(--color-primary-dark);
  --ctx-text:       var(--color-text-inverse);
  --ctx-link:       var(--color-link-inverse);  /* must reach 4.5:1 on the dark surface */
  --ctx-link-hover: var(--color-text-inverse);
  --ctx-rule:       var(--color-secondary);
  --ctx-strong:     var(--color-focus);         /* focus ring on dark surfaces */
  --ctx-counter:    var(--color-secondary);
  --ctx-caption:    var(--color-text-inverse);
}

.surface-light,
.surface-dark,
.section--dark,
.site-footer,
.card--dark {
  background-color: var(--ctx-bg);
  color: var(--ctx-text);
}


/* ==========================================================================
   1. Base
   ========================================================================== */

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

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

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

:focus-visible,
.is-focus {
  outline: var(--rule-accent-weight) solid var(--ctx-strong);
  outline-offset: var(--space-xs);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none;
  }
}


/* ==========================================================================
   2. Typography  (brand-id.md Section 4)
   ========================================================================== */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
  margin: 0 0 var(--space-md);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  overflow-wrap: break-word;
}

h1, .h1 {
  margin-bottom: var(--space-lg);
  font-size: var(--text-h1);
  font-weight: var(--weight-light);
  line-height: var(--line-height-hero);
}

h2, .h2 {
  margin-bottom: var(--space-lg);
  font-size: var(--text-h2);
  font-weight: var(--weight-light);
}

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

/* H4 and pull quote share a size and cut. The accent rule belongs to .pull-quote only. */
h4, .h4 {
  font-size: var(--text-h4);
  font-style: var(--h4-font-style);
}

/* Italic cuts for emphasis inside H1 and H2 */
h1 em, .h1 em,
h2 em, .h2 em {
  font-style: italic;
}

/* h5 and h6 are not in the type scale: body face, medium weight */
h5, h6 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-body);
}

p {
  max-width: var(--content-narrow-width);
  margin: 0 0 var(--space-md);
}

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

small {
  font-size: var(--text-caption);
}

:where(a) {
  color: var(--ctx-link);
  text-decoration: underline;
  text-decoration-thickness: var(--border-weight);
  text-underline-offset: var(--underline-offset);
  transition: color var(--transition);
}

:where(a:hover, a.is-hover) {
  color: var(--ctx-link-hover);
  text-decoration-thickness: var(--border-weight-strong);
}

ul, ol {
  max-width: var(--content-narrow-width);
  margin: 0 0 var(--space-md);
  padding-left: var(--space-lg);
}

li {
  margin-bottom: var(--space-sm);
}

hr {
  margin: var(--space-lg) 0;
  border: 0;
  border-top: var(--border-weight) solid var(--ctx-rule);
}

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-body);
}

/* Caption colour is --color-text-caption. It must reach 4.5:1 on the light surface at 13px. See README, Accessibility. */
.caption {
  color: var(--ctx-caption);
  font-size: var(--text-caption);
  line-height: var(--line-height-body);
}

/* Labels and nav: 11px, medium, caps, tracked */
.label {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-ui);
  letter-spacing: var(--tracking-nav);
  text-transform: var(--label-text-transform);
}

/* Section label: "— rule line · ALL CAPS LABEL". The rule is --ctx-rule (decorative).
   The text uses the body colour: a pale border colour usually fails contrast as text. */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0 0 var(--space-md);
  max-width: none;
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-ui);
  letter-spacing: var(--tracking-label);
  text-transform: var(--label-text-transform);
}

.section-label::before {
  content: "";
  flex: none;
  width: var(--rule-width);
  border-top: var(--border-weight) solid var(--ctx-rule);
}

/* Step counter: mono face, large, muted. Large text only (32px). */
.step-counter {
  font-family: var(--font-mono);
  font-size: var(--text-h3);
  font-weight: var(--weight-body);
  line-height: var(--line-height-ui);
  color: var(--ctx-counter);
}

/* Pull quote: heading face, accent left rule */
blockquote,
.pull-quote {
  margin: 0 0 var(--space-lg);
  padding-left: var(--space-md);
  border-left: var(--rule-accent-weight) solid var(--rule-accent-color);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-style: var(--quote-font-style);
  font-weight: var(--weight-heading);
  line-height: var(--line-height-heading);
}

blockquote p,
.pull-quote p {
  max-width: none;
  margin: 0;
}

blockquote cite,
.pull-quote cite {
  color: var(--ctx-caption);
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-style: normal;
  line-height: var(--line-height-body);
}

/* Stat callout: large light serif figure, then a caption */
.stat {
  margin: 0 0 var(--space-md);
}

.stat__value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-stat);
  font-weight: var(--weight-light);
  line-height: var(--line-height-hero);
}

.stat__caption {
  color: var(--ctx-caption);
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--text-caption);
  line-height: var(--line-height-body);
}


/* ==========================================================================
   3. Buttons  (brand-id.md Section 8)
   Use on light surfaces: .btn--primary, .btn--secondary, .btn--ghost
   Use on dark surfaces:  .btn--reversed, .btn--ghost
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--target-size);
  padding: var(--button-padding);
  border: var(--border-weight-strong) solid transparent;
  border-radius: var(--button-radius);
  background-color: transparent;
  font-family: var(--font-body);
  font-size: var(--text-button);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-ui);
  letter-spacing: var(--tracking-button);
  text-align: center;
  text-decoration: none;
  text-transform: var(--button-text-transform);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

/* Primary: dark fill, light text. Hover colours: --button-primary-hover-*. */
.btn--primary {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
}

.btn--primary:is(:hover, .is-hover) {
  background-color: var(--button-primary-hover-bg);
  color: var(--button-primary-hover-text);
}

/* Secondary: transparent, 1px border. Hover colours: --button-secondary-hover-*. */
.btn--secondary {
  border-color: var(--button-secondary-border);
  color: var(--button-secondary-text);
}

.btn--secondary:is(:hover, .is-hover) {
  background-color: var(--button-secondary-hover-bg);
  color: var(--button-secondary-hover-text);
}

/* Reversed (dark surfaces): transparent, light border at 40%, light text. Hover uses the primary hover colours. */
.btn--reversed {
  border-color: var(--color-border-inverse);
  color: var(--color-text-inverse);
}

.btn--reversed:is(:hover, .is-hover) {
  border-color: var(--button-primary-hover-bg);
  background-color: var(--button-primary-hover-bg);
  color: var(--button-primary-hover-text);
}

/* Ghost / link: no border, link colour, thin underline */
.btn--ghost {
  padding-inline: 0;
  color: var(--ctx-link);
  text-decoration: underline;
  text-decoration-thickness: var(--border-weight);
  text-underline-offset: var(--underline-offset);
}

.btn--ghost:is(:hover, .is-hover) {
  color: var(--ctx-link-hover);
  text-decoration-thickness: var(--border-weight-strong);
}

/* Disabled. Keep after the variants so it wins. Works on <button disabled> and <a aria-disabled="true"> */
.btn:is(:disabled, [aria-disabled="true"]) {
  border-color: transparent;
  background-color: var(--color-secondary);
  color: var(--color-text-muted);
  text-decoration: none;
  cursor: not-allowed;
}

.btn--reversed:is(:disabled, [aria-disabled="true"]) {
  border-color: var(--color-text-muted);
  background-color: transparent;
}

.btn--ghost:is(:disabled, [aria-disabled="true"]) {
  background-color: transparent;
}


/* ==========================================================================
   4. Cards
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--card-padding);
  border: var(--border-weight) solid var(--ctx-rule);
  border-radius: var(--card-radius);
  background-color: var(--card-bg);
  color: var(--ctx-text);
}

.card--dark {
  background-color: var(--ctx-bg);
}

.card > :last-child {
  margin-bottom: 0;
}

.card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-heading);
  line-height: var(--line-height-heading);
}

.card__body > :last-child {
  margin-bottom: 0;
}

.card__footer {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: var(--border-weight) solid var(--ctx-rule);
}

/* Whole card is a link */
a.card {
  text-decoration: none;
  transition: border-color var(--transition);
}

a.card:is(:hover, .is-hover) {
  border-color: var(--ctx-strong);
}


/* ==========================================================================
   5. Forms
   Markup: .field > label.label + .input + .field__hint + .field__error
   ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

fieldset {
  min-width: 0;
  margin: 0 0 var(--space-md);
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
  margin-bottom: var(--space-sm);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-ui);
  letter-spacing: var(--tracking-nav);
  text-transform: var(--label-text-transform);
}

.field__hint {
  color: var(--ctx-caption);
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--line-height-body);
}

/* Error text must reach 4.5:1 on the light surface. Light surfaces only: it usually fails on dark. */
.field__error {
  margin: 0;
  color: var(--color-error);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-body);
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-height: var(--target-size);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-weight-strong) solid var(--color-control-border);
  border-radius: var(--input-radius);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--line-height-ui);
  transition: border-color var(--transition);
}

.textarea {
  min-height: calc(var(--target-size) * 3);
  resize: vertical;
}

/* Placeholder keeps the body colour, in italic: a muted colour is usually below 4.5:1 */
.input::placeholder,
.textarea::placeholder {
  color: var(--color-text);
  font-style: italic;
}

.input:is(:hover, .is-hover):not(:disabled),
.select:is(:hover, .is-hover):not(:disabled),
.textarea:is(:hover, .is-hover):not(:disabled) {
  border-color: var(--color-text);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  border-color: var(--color-secondary);
  background-color: var(--color-secondary);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Error state. Colour is never the only signal: a thicker left edge (the brand's rule motif)
   plus a .field__error message that states the problem in words. */
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--color-error);
  border-left-width: var(--rule-accent-weight);
  padding-left: calc(var(--space-md) - (var(--rule-accent-weight) - var(--border-weight-strong)));
}

/* Checkbox. Markup: label.checkbox > input[type=checkbox] + span */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  cursor: pointer;
}

.checkbox input {
  appearance: none;
  display: grid;
  place-content: center;
  flex: none;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  margin: calc((1lh - var(--checkbox-size)) / 2) 0 0;
  border: var(--border-weight-strong) solid var(--color-control-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--transition);
}

.checkbox input::before {
  content: "";
  display: none;
  width: var(--space-sm);
  height: var(--space-sm);
  background-color: var(--color-primary-dark);
}

.checkbox input:checked::before {
  display: block;
}

.checkbox input:is(:hover, .is-hover):not(:disabled),
.checkbox input:checked {
  border-color: var(--color-text);
}

.checkbox input:disabled {
  border-color: var(--color-secondary);
  background-color: var(--color-secondary);
  cursor: not-allowed;
}

.checkbox input:disabled::before {
  background-color: var(--color-text-muted);
}

.checkbox input[aria-invalid="true"] {
  border-color: var(--color-error);
}

@media (forced-colors: active) {
  .checkbox input::before {
    background-color: CanvasText;
  }
}


/* ==========================================================================
   6. Tags  (brand-id.md Section 8)
   ========================================================================== */

.tag {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--tag-radius);
  background-color: var(--tag-bg);
  color: var(--tag-text);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-ui);
  letter-spacing: var(--tracking-nav);
  text-transform: var(--tag-text-transform);
}

/* Quieter tag for secondary categories: --color-secondary fill */
.tag--muted {
  background-color: var(--color-secondary);
}


/* ==========================================================================
   7. Navigation, wordmark and footer
   ========================================================================== */

.wordmark {
  display: inline-block;
  color: inherit;
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-heading);
  line-height: var(--line-height-ui);
  letter-spacing: var(--tracking-wordmark);
  text-decoration: none;
}

/* Icon / avatar: a single "S" in a thin square */
.logo-mark {
  display: inline-grid;
  place-items: center;
  width: var(--target-size);
  height: var(--target-size);
  border: var(--border-weight-mark) solid currentColor;
  border-radius: var(--logo-mark-radius);
  color: inherit;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-heading);
  line-height: var(--line-height-hero);
  text-decoration: none;
}

.site-header {
  background-color: var(--ctx-bg);
  color: var(--ctx-text);
  border-bottom: var(--border-weight) solid var(--ctx-rule);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  padding-block: var(--space-md);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: inherit;
  text-decoration: none;
}

.nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-lg);
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__links li {
  margin: 0;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-size);
  border-bottom: var(--rule-accent-weight) solid transparent;
  color: inherit;
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-ui);
  letter-spacing: var(--tracking-nav);
  text-decoration: none;
  text-transform: var(--label-text-transform);
  transition: border-color var(--transition);
}

.nav__link:is(:hover, .is-hover) {
  border-bottom-color: var(--ctx-link);
}

/* Current page: --ctx-strong underline (focus-ring colour on light, --color-focus on dark). An accent colour alone on a light surface usually fails 3:1. */
.nav__link[aria-current="page"] {
  border-bottom-color: var(--ctx-strong);
}

/* Nav menu and mobile toggle.
   Markup: .nav > .nav__brand + button.nav__toggle[hidden] + .nav__menu#id > ul.nav__links (+ an optional header .btn)
   nav.js adds .nav--collapsible and shows the toggle. Below 48rem the menu then folds behind it.
   Without script the toggle stays hidden and the menu stays open, wrapping under the brand. */
.nav__menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
}

.nav__toggle[hidden] {
  display: none;
}

.nav--collapsible .nav__menu {
  flex-basis: 100%;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: var(--space-md);
}

.nav--collapsible .nav__menu:not(.is-open) {
  display: none;
}

.nav--collapsible .nav__links {
  flex-direction: column;
}

@media (min-width: 48rem) {
  .nav .nav__toggle {
    display: none;
  }

  .nav--collapsible .nav__menu,
  .nav--collapsible .nav__menu:not(.is-open) {
    display: flex;
    flex-basis: auto;
    flex-direction: row;
    align-items: center;
    padding-bottom: 0;
  }

  .nav--collapsible .nav__links {
    flex-direction: row;
  }
}

.site-footer {
  padding-block: var(--space-xl);
}

.site-footer ul {
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__legal {
  color: var(--ctx-caption);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--border-weight) solid var(--ctx-rule);
  font-size: var(--text-caption);
}

.site-footer__legal > :last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   8. Callouts
   Use role="status" for success and notes, role="alert" for errors.
   Colour is never the only signal: start the title with a word ("Saved", "Error").
   Light surfaces only: error and success text usually fail on dark.
   ========================================================================== */

.callout {
  margin-bottom: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: var(--border-weight) solid var(--ctx-rule);
  border-left: var(--rule-accent-weight) solid var(--rule-accent-color);
  border-radius: var(--card-radius);
  background-color: var(--card-bg);
  color: var(--ctx-text);
}

.callout--success {
  border-left-color: var(--color-success);
}

.callout--error {
  border-left-color: var(--color-error);
}

.callout__title {
  margin: 0 0 var(--space-xs);
  font-weight: var(--weight-bold);
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout--success .callout__title {
  color: var(--color-success);
}

.callout--error .callout__title {
  color: var(--color-error);
}


/* ==========================================================================
   9. Layout helpers  (brand-id.md Section 7)
   Mobile first: one column and a 24px margin. From 48rem: 12 columns and an 80px margin.
   ========================================================================== */

.container {
  --container-margin: var(--page-margin-mobile);
  width: 100%;
  max-width: calc(var(--content-max-width) + 2 * var(--container-margin));
  margin-inline: auto;
  padding-inline: var(--container-margin);
}

.container--narrow {
  max-width: calc(var(--content-narrow-width) + 2 * var(--container-margin));
}

.section {
  padding-block: var(--section-padding);
}

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.visually-hidden {
  position: absolute;
  width: var(--border-weight-strong);
  height: var(--border-weight-strong);
  margin: calc(var(--border-weight-strong) * -1);
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

@media (min-width: 48rem) {
  .container {
    --container-margin: var(--page-margin);
  }

  .section--hero {
    padding-block: var(--section-padding-hero);
  }

  .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .grid > * {
    grid-column: span 12;
  }

  .grid--2 > * { grid-column: span 6; }
  .grid--3 > * { grid-column: span 4; }
  .grid--4 > * { grid-column: span 3; }

  .col-3  { grid-column: span 3; }
  .col-4  { grid-column: span 4; }
  .col-6  { grid-column: span 6; }
  .col-8  { grid-column: span 8; }
  .col-9  { grid-column: span 9; }
  .col-12 { grid-column: span 12; }
}