/* ==========================================================================
   Beck Legal design system: the page that shows it
   Steps 1 to 5. 29/09/2026. Local only.

   Every colour, size and space below is an Automatic CSS token from
   automatic-variables.css. Bare headings and paragraphs are styled by
   automatic-elements.css, as the framework styles them in the build, so
   an authored class here only states what differs. The rules the build
   itself carries are in build.css, not here. Authored classes are
   BEM. Native nesting
   throughout. Responsive rules are container queries on a named container
   set by the component itself; there is no media query in this file,
   because nothing here is a viewport-only concern.
   ========================================================================== */

/* Figures that belong to this page and not to the framework. */
:root {
  --swatch:     calc(var(--space-xl) * 2);
  --chip:       var(--space-xl);

  /* The red in the logo file, #ED1C24. Here for comparison only. It is not
     a token in the build: the logo is an image and carries its own red. */
  --logo-red:   oklch(0.6030 0.2347 26.99);

  /* The framework's small viewport, vp-min 360, for the phone frame. */
  --phone:      22.5rem;

  /* Light, the weight the display face is never set in. Here for
     comparison only. */
  --fw-refused: 300;

  /* Corners this system does not use. Here for comparison only: the
     framework's stock corner, and the soft corner of the set aside
     reference. */
  --radius-stock: 5px;
  --radius-soft:  20px;
}

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

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }

/* The framework's line height is a length built from the x-height, so it is
   worked out at each element's own size. Inherited, it would carry the body's
   figure into larger type and close the lines up. An element wearing a
   heading class is left alone, so it keeps the heading line height as it
   does in the build, where the heading rule comes after the paragraph rule. */
:where(p, li, dt, dd, span, code, div, a):where(:not(.h1, .h2, .h3, .h4, .h5, .h6)) { line-height: var(--text-line-height); }
ul, ol { padding: 0; list-style: none; }

code {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* The gutter belongs to the section, the page header and the page footer,
   as it does in the build. The shell only holds the content width. */
.shell {
  inline-size: 100%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
}

/* ---- Masthead ----------------------------------------------------------- */
.masthead {
  padding-block: var(--section-space-s) var(--section-space-xs);

  & .masthead__home { display: block; inline-size: fit-content; }
  & .masthead__logo { display: block; inline-size: calc(var(--space-xxl) * 2.4); }

  & .masthead__title { margin-block-start: var(--space-xl); }

  & .masthead__lede {
    margin-block-start: var(--space-s);
    font-size: var(--text-l);
    color: var(--text-dark-muted);
  }
}

/* ---- The six steps ------------------------------------------------------ */
.steps {
  :has(> &) { container: steps / inline-size; }

  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-m);
  border-block-start: var(--divider);

  /* 46rem: below this six columns cannot hold a label on one line. */
  @container steps (width < 46rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  & .steps__item {
    font-size: var(--text-s);
    color: var(--text-dark-muted);
  }

  & .steps__item--current {
    color: var(--text-dark);
    font-weight: var(--heading-font-weight);
  }

  & .steps__state { display: block; font-weight: var(--text-font-weight); }
}

/* ---- A section of the page ---------------------------------------------- */
.band {
  padding-block: var(--section-space-s);
  border-block-start: var(--divider);

  & .band__intro {
    margin-block-start: var(--space-s);
    color: var(--text-dark-muted);
  }

  & .band__body { margin-block-start: var(--space-xl); }
}

/* ---- Roles: one row per colour ------------------------------------------ */
.role {
  :has(> &) { container: roles / inline-size; }

  display: grid;
  grid-template-columns: var(--swatch) minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1.4fr);
  gap: var(--grid-gap);
  align-items: start;
  padding-block: var(--space-m);
  border-block-start: var(--divider);

  /* 60rem: below this five columns squeeze the sentences under 20 characters. */
  @container roles (width < 60rem) {
    grid-template-columns: var(--swatch) minmax(0, 1fr);

    & .role__cell { grid-column: 2; }
  }

  & .role__swatch {
    block-size: var(--swatch);
    border: var(--border);
  }

  & .role__slot {
    font-size: var(--text-l);
    font-weight: var(--heading-font-weight);
  }

  & .role__label {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-dark-muted);
  }

  & .role__cell { font-size: var(--text-s); }
}

/* ---- The red beside the logo -------------------------------------------- */
.reds {
  :has(> &) { container: reds / inline-size; }

  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: stretch;

  /* 50rem: below this the logo drops under a legible width. */
  @container reds (width < 50rem) { grid-template-columns: minmax(0, 1fr); }

  & .reds__logo {
    display: grid;
    place-items: center;
    padding: var(--space-xl);
    border: var(--border);
  }

  & .reds__panel {
    display: grid;
    align-content: space-between;
    gap: var(--space-l);
    padding: var(--space-l);
    color: var(--white);
    font-size: var(--text-s);
  }

  & .reds__panel--logo { background: var(--logo-red); }
  & .reds__panel--action { background: var(--primary); }

  & .reds__sample {
    font-size: var(--text-l);
    font-weight: var(--heading-font-weight);
  }
}

.ration {
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--space-xl);
  max-inline-size: var(--text-max-width);

  & .ration__item {
    padding-inline-start: var(--space-m);
    border-inline-start: calc(var(--border-width) * 2) var(--border-style) var(--tertiary);
  }
}

/* ---- Ramps -------------------------------------------------------------- */
.ramp {
  :has(> &) { container: ramp / inline-size; }

  padding-block: var(--space-l);
  border-block-start: var(--divider);

  & .ramp__name {
    font-size: var(--h4);
    text-transform: capitalize;
  }

  & .ramp__chips {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--space-xs);
    margin-block-start: var(--space-s);

    /* 56rem: below this eight chips cannot hold their values. */
    @container ramp (width < 56rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    @container ramp (width < 30rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}

.chip {
  font-size: var(--text-xs);

  & .chip__block {
    block-size: var(--chip);
    border: var(--border);
  }

  & .chip__name {
    display: block;
    margin-block-start: var(--space-xs);
    font-weight: var(--heading-font-weight);
  }

  & .chip__value,
  & .chip__measure { display: block; color: var(--text-dark-muted); }

  & .chip__job {
    display: block;
    margin-block-start: calc(var(--space-xs) / 2);
    color: var(--text-dark);
  }

  &.chip--idle .chip__name { font-weight: var(--text-font-weight); color: var(--text-dark-muted); }
}

/* ---- Grounds: the same content on every surface -------------------------
   The ground is the framework's own class, .bg--ultra-light or .bg--light.
   The content never names a ground, so moving it to another needs no edit. */
.ground {
  padding-block: var(--section-space-s);

  /* White sits between every pair of grounds, so no two tints touch and
     each is judged against the page and not against its neighbour. */
  & + & { margin-block-start: var(--section-space-xs); }
  &:last-of-type { margin-block-end: var(--section-space-xs); }

  & .ground__grid {
    :has(> &) { container: ground / inline-size; }

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--container-gap);
    align-items: start;

    /* 56rem: below this the specimen column falls under its measure. */
    @container ground (width < 56rem) { grid-template-columns: minmax(0, 1fr); }
  }

  & .ground__name { font-size: var(--h4); }

  & .ground__token,
  & .ground__status { display: block; font-size: var(--text-s); color: var(--text-dark-muted); }

  & .ground__measures {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: calc(var(--space-xs) / 2) var(--space-m);
    margin-block-start: var(--space-m);
    padding-block-start: var(--space-s);
    border-block-start: var(--divider-size) var(--divider-style) var(--divider-color-dark);
    font-size: var(--text-s);
    font-variant-numeric: tabular-nums;

    & dt { color: var(--text-dark-muted); }
    & dd { text-align: end; }
    & .is-short { font-weight: var(--heading-font-weight); text-decoration: underline; }
  }

  & .ground__text { margin-block-start: var(--space-m); }

  & .ground__muted {
    margin-block-start: var(--space-s);
    font-size: var(--text-s);
    color: var(--text-dark-muted);
  }

  & .ground__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-block-start: var(--space-l);
    padding-block-start: var(--space-l);
    border-block-start: var(--divider-size) var(--divider-style) var(--divider-color-dark);
  }

}

/* ---- Transparency ------------------------------------------------------- */
.alpha {
  :has(> &) { container: alpha / inline-size; }

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);

  /* 50rem: below this the code lines wrap past three rows. */
  @container alpha (width < 50rem) { grid-template-columns: minmax(0, 1fr); }

  & .alpha__item { font-size: var(--text-s); }

  & .alpha__demo {
    display: grid;
    place-items: center;
    block-size: var(--swatch);
    margin-block-end: var(--space-s);
    background: var(--secondary);
  }

  & .alpha__demo--rule  { border-block-end: var(--divider-size) solid oklch(from var(--base) l c h / 0.2); background: var(--white); }
  & .alpha__demo--wash  { background: oklch(from var(--base) l c h / 0.06); }
  & .alpha__demo--blend { background: color-mix(in oklab, var(--primary) 12%, var(--white)); }

  & .alpha__name { display: block; font-weight: var(--heading-font-weight); }
  & .alpha__code { display: block; color: var(--text-dark-muted); }
}

/* ---- Faces: one row per face -------------------------------------------- */
.face {
  :has(> &) { container: faces / inline-size; }

  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: start;
  padding-block: var(--space-l);
  border-block-start: var(--divider);

  /* 60rem: below this the three columns of notes fall under 20 characters. */
  @container faces (width < 60rem) { grid-template-columns: minmax(0, 1fr); }

  & .face__name {
    margin-block-end: var(--space-m);
    font-size: var(--text-s);
    color: var(--text-dark-muted);
  }

  & .face__sample + .face__sample { margin-block-start: var(--space-s); }

  & .face__cell { font-size: var(--text-s); }

  & .face__label {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-dark-muted);
  }
}

/* ---- The ladder: one row per rung --------------------------------------- */
.ladder + .ladder { margin-block-start: var(--space-xl); }

.ladder__name { font-size: var(--h4); }

.rung {
  :has(> &) { container: rungs / inline-size; }

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: var(--grid-gap);
  align-items: baseline;
  padding-block: var(--space-m);
  border-block-start: var(--divider);

  &:first-of-type { margin-block-start: var(--space-s); }

  /* 56rem: below this the sample column cannot hold a heading's measure. */
  @container rungs (width < 56rem) { grid-template-columns: minmax(0, 1fr); }

  & .rung__meta {
    font-size: var(--text-s);
    font-variant-numeric: tabular-nums;
  }

  & .rung__token { font-weight: var(--heading-font-weight); }

  & .rung__job { display: block; }

  & .rung__figures {
    display: block;
    color: var(--text-dark-muted);
  }

  &.rung--idle {
    & .rung__token { font-weight: var(--text-font-weight); }
    & .rung__token,
    & .rung__job,
    & .rung__sample { color: var(--text-dark-muted); }
  }
}

/* ---- The specimen: a page read from top to bottom ------------------------
   Bare elements, styled by the framework's own rules. The gaps between
   them are the framework's smart spacing, from the class on the wrapper. */
.flow {
  max-inline-size: calc(var(--h2) * 15);

  & ul { list-style: disc; }

  & .flow__numbers { font-variant-numeric: tabular-nums; }

  & .flow__small { color: var(--text-dark-muted); }
}

.specimen {
  :has(> &) { container: specimen / inline-size; }

  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--phone);
  gap: var(--container-gap);
  align-items: start;

  /* 64rem: below this the two cannot sit side by side. The phone frame
     goes, because at that width the page itself is the small specimen. */
  @container specimen (width < 64rem) {
    grid-template-columns: minmax(0, 1fr);

    & .specimen__side--phone { display: none; }
  }

  & .specimen__label {
    margin-block-end: var(--space-l);
    padding-block-end: var(--space-xs);
    border-block-end: var(--divider);
    font-size: var(--text-s);
    color: var(--text-dark-muted);
  }

  & .specimen__frame {
    display: block;
    inline-size: 100%;
    border: var(--border);
  }

  & .specimen__measures {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: calc(var(--space-xs) / 2) var(--space-m);
    margin-block-start: var(--space-l);
    padding-block-start: var(--space-s);
    border-block-start: var(--divider);
    font-size: var(--text-s);
    font-variant-numeric: tabular-nums;

    & dt { color: var(--text-dark-muted); }
    & dd { text-align: end; }
  }
}

/* The document inside the phone frame. */
.phone { padding: var(--section-space-xs) var(--gutter); }

/* ---- Proof: the two refusals -------------------------------------------- */
.proof {
  :has(> &) { container: proof / inline-size; }

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l) var(--container-gap);
  align-items: end;

  /* 50rem: below this a title sized sample cannot hold its words. */
  @container proof (width < 50rem) { grid-template-columns: minmax(0, 1fr); }

  & .proof__item {
    padding-block-start: var(--space-m);
    border-block-start: var(--divider);
  }

  & .proof__verdict {
    display: block;
    margin-block-end: var(--space-s);
    font-size: var(--text-s);
    color: var(--text-dark-muted);
  }

  & .proof__item--kept .proof__verdict {
    color: var(--text-dark);
    font-weight: var(--heading-font-weight);
  }

  & .proof__sample--small-serif {
    font-family: var(--h1-font-family);
    font-weight: var(--h1-font-weight);
  }

  & .proof__sample--light { font-weight: var(--fw-refused); }
}

/* ---- Steps of space: one row per step ----------------------------------- */
.pace {
  :has(> &) { container: paces / inline-size; }

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: var(--grid-gap);
  align-items: center;
  padding-block: var(--space-s);
  border-block-start: var(--divider);

  &:first-of-type { margin-block-start: var(--space-s); }

  /* 56rem: below this the longest bar cannot sit beside its notes. */
  @container paces (width < 56rem) { grid-template-columns: minmax(0, 1fr); }

  & .pace__meta {
    font-size: var(--text-s);
    font-variant-numeric: tabular-nums;
  }

  & .pace__token { font-weight: var(--heading-font-weight); }

  & .pace__job { display: block; }

  & .pace__figures {
    display: block;
    color: var(--text-dark-muted);
  }

  /* The bar is as long as the step, read from the token itself. */
  & .pace__bar {
    inline-size: var(--pace);
    max-inline-size: 100%;
    block-size: var(--space-xs);
    background: var(--tertiary);
  }

  &.pace--idle {
    & .pace__token { font-weight: var(--text-font-weight); }
    & .pace__token,
    & .pace__job { color: var(--text-dark-muted); }
    & .pace__bar { background: var(--divider-color-dark); }
  }
}

/* ---- Rooms: real sections at the framework's own padding -----------------
   A room states its ground and nothing else. Its padding and its gutter
   come from the framework's section rule and size classes. */
.room {
  & .room__grid {
    :has(> &) { container: room / inline-size; }

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--container-gap);
    align-items: start;

    /* 56rem: below this the specimen column falls under its measure. */
    @container room (width < 56rem) { grid-template-columns: minmax(0, 1fr); }
  }

  & .room__name { font-size: var(--h4); }

  & .room__note {
    display: block;
    font-size: var(--text-s);
    color: var(--text-dark-muted);
  }

  & .room__measures {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: calc(var(--space-xs) / 2) var(--space-m);
    margin-block-start: var(--space-m);
    padding-block-start: var(--space-s);
    border-block-start: var(--divider);
    font-size: var(--text-s);
    font-variant-numeric: tabular-nums;

    & dt { color: var(--text-dark-muted); }
    & dd { text-align: end; }
  }
}

/* ---- The three gaps inside a section ------------------------------------ */
.gaps {
  :has(> &) { container: gaps / inline-size; }

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--container-gap);
  align-items: start;

  /* 56rem: below this the tiles fall under a readable width. */
  @container gaps (width < 56rem) { grid-template-columns: minmax(0, 1fr); }

  & .gaps__lead {
    display: grid;
    gap: var(--content-gap);
  }

  & .gaps__tiles {
    :has(> &) { container: tiles / inline-size; }

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap);

    /* 30rem: below this two tiles cannot hold a title each. */
    @container tiles (width < 30rem) { grid-template-columns: minmax(0, 1fr); }
  }

  & .gaps__tile {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-m);
    border: var(--border);
  }

  & .gaps__meta {
    font-size: var(--text-s);
    color: var(--text-dark-muted);
  }
}

.key {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--space-xs) / 2) var(--space-m);
  max-inline-size: var(--text-max-width);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-s);
  border-block-start: var(--divider);
  font-size: var(--text-s);
  font-variant-numeric: tabular-nums;

  & dt { color: var(--text-dark-muted); }
  & dd { text-align: end; }
}

/* ---- Corners: the same three things at three corners -------------------- */
.trial {
  :has(> &) { container: trial / inline-size; }

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--container-gap);
  align-items: start;

  /* 56rem: below this three tiles cannot hold their titles. */
  @container trial (width < 56rem) { grid-template-columns: minmax(0, 1fr); }

  & .trial__item {
    --corner: var(--radius);
    --btn-border-radius: var(--corner);

    display: grid;
    gap: var(--grid-gap);
    padding-block-start: var(--space-m);
    border-block-start: var(--divider);
  }

  & .trial__item--stock { --corner: var(--radius-stock); }
  & .trial__item--soft  { --corner: var(--radius-soft); }

  & .trial__verdict {
    font-size: var(--text-s);
    color: var(--text-dark-muted);
  }

  & .trial__item--kept .trial__verdict {
    color: var(--text-dark);
    font-weight: var(--heading-font-weight);
  }

  & .trial__picture {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--corner);
  }

  & .trial__tile {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-m);
    border: var(--border);
    border-radius: var(--corner);
  }

  & .trial__meta {
    font-size: var(--text-s);
    color: var(--text-dark-muted);
  }

  & .trial__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
  }
}

/* ---- Lines and focus, on each ground ------------------------------------ */
.strip {
  :has(> &) { container: strip / inline-size; }

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  /* 56rem: below this a ground cannot hold a line and its figure. */
  @container strip (width < 56rem) { grid-template-columns: minmax(0, 1fr); }

  & .strip__ground {
    display: grid;
    gap: var(--space-l);
    align-content: start;
    padding: var(--space-l);
    border: var(--border);
  }

  & .strip__ground + .strip__ground { border-inline-start: 0; }

  @container strip (width < 56rem) {
    & .strip__ground + .strip__ground {
      border-inline-start: var(--border);
      border-block-start: 0;
    }
  }

  & .strip__name { font-size: var(--h4); }

  & .strip__row {
    display: grid;
    gap: var(--space-xs);
    font-size: var(--text-s);
  }

  & .strip__label { color: var(--text-dark-muted); }

  & .strip__figure { font-variant-numeric: tabular-nums; }

  & .strip__line { block-size: 0; }
  & .strip__line--hairline { border-block-start: var(--divider); }
  & .strip__line--edge     { border-block-start: var(--border-width) var(--border-style) oklch(from var(--text-dark) l c h / 0.5); }
  & .strip__line--mark     { border-block-start: calc(var(--border-width) * 2) var(--border-style) var(--tertiary); }

  & .strip__focus {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-m);
    padding: var(--focus-offset);
  }
}

/* ---- The quote in rooms of different width ------------------------------ */
.berth {
  padding-block-start: var(--space-m);
  border-block-start: var(--divider);

  :is(.pair, &) + & { margin-block-start: var(--space-xl); }
}

.berth__verdict {
  display: block;
  font-size: var(--text-s);
  color: var(--text-dark-muted);

  &.berth__verdict--kept {
    color: var(--text-dark);
    font-weight: var(--heading-font-weight);
  }
}

.berth__figure {
  display: block;
  margin-block-end: var(--space-l);
  font-size: var(--text-s);
  font-variant-numeric: tabular-nums;
  color: var(--text-dark-muted);
}

/* ---- The quote, stock and proposed -------------------------------------- */
.pair {
  :has(> &) { container: pair / inline-size; }

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--container-gap);
  align-items: start;

  /* 56rem: below this the quote falls under four words a line. */
  @container pair (width < 56rem) { grid-template-columns: minmax(0, 1fr); }

  & .pair__item {
    padding-block-start: var(--space-m);
    border-block-start: var(--divider);
  }

  /* The framework's own figures for a quote, before any setting is changed.
     Here for comparison only. */
  & .pair__stock {
    --blockquote-padding: var(--space-m);
    --blockquote-gap: 1em;
    --blockquote-border-width: 0 0 0 3px;
    --blockquote-border-color: var(--primary);
    --blockquote-border-radius: var(--radius-stock);
    --blockquote-background: var(--neutral-ultra-light);
    --blockquote-max-inline-size: none;
    --blockquote-text-color: var(--text-dark);
    /* The stock family and line height are the keyword inherit. Written on
       a custom property that keyword inherits the property itself, so the
       text tokens are named here to get the result the build gives. */
    --blockquote-text-font-family: var(--text-font-family);
    --blockquote-text-font-size: var(--text-l);
    --blockquote-text-font-weight: var(--text-font-weight);
    --blockquote-text-line-height: var(--text-line-height);
    --blockquote-footer-margin-block: 1em 0;
    --blockquote-footer-color: currentColor;
  }
}

/* ---- States held on, so they can be judged --------------------------------
   A page cannot hover or focus five things at once. These classes repeat
   the framework's own declarations for a state, from the same tokens. */
.is-ringed {
  outline-style: solid;
  outline-color: var(--focus-color);
  outline-width: var(--focus-width);
  outline-offset: var(--focus-offset);
}

[class*="btn--"].is-touched {
  background: var(--btn-background-hover);
  color: var(--btn-text-color-hover);
  border-color: var(--btn-border-color-hover);
}

a.is-touched:where(:not([class*="btn--"])) { color: var(--link-color-hover); }

.wsf-form input.wsf-field.is-touched {
  background-color: var(--wsf-field-color-background-hover);
  border-color: var(--wsf-field-border-color-hover);
}

.wsf-form input.wsf-field.is-focused {
  background-color: var(--wsf-field-color-background-focus);
  border-color: var(--wsf-field-border-color-focus);
  box-shadow: var(--wsf-field-box-shadow);
}

/* ---- The two buttons ---------------------------------------------------- */
.duo {
  :has(> &) { container: duo / inline-size; }

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--container-gap);
  align-items: start;

  /* 50rem: below this the notes beside a button fall under 20 characters. */
  @container duo (width < 50rem) { grid-template-columns: minmax(0, 1fr); }

  & .duo__item {
    display: grid;
    gap: var(--content-gap);
    justify-items: start;
    padding-block-start: var(--space-m);
    border-block-start: var(--divider);
  }

  & .duo__name { font-size: var(--h4); }

  & .duo__notes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: calc(var(--space-xs) / 2) var(--space-m);
    inline-size: 100%;
    padding-block-start: var(--space-s);
    border-block-start: var(--divider);
    font-size: var(--text-s);
    font-variant-numeric: tabular-nums;

    & dt { color: var(--text-dark-muted); }
    & dd { text-align: end; }
  }
}

/* ---- States in rows, inside a ground of the strip ------------------------ */
.states {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-s) var(--space-m);
  align-items: center;
  padding: var(--focus-offset);
  font-size: var(--text-s);

  & .states__label { color: var(--text-dark-muted); }

  & .states__figure {
    grid-column: 1 / -1;
    font-variant-numeric: tabular-nums;
  }
}

/* ---- The form beside its notes ------------------------------------------ */
.desk {
  :has(> &) { container: desk / inline-size; }

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--container-gap);
  align-items: start;

  /* 56rem: below this a field falls under 30 characters wide. */
  @container desk (width < 56rem) { grid-template-columns: minmax(0, 1fr); }

  & .desk__form { max-inline-size: calc(var(--h2) * 15); }

  & .desk__name { font-size: var(--h4); }

  & .desk__notes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: calc(var(--space-xs) / 2) var(--space-m);
    margin-block-start: var(--space-m);
    padding-block-start: var(--space-s);
    border-block-start: var(--divider);
    font-size: var(--text-s);
    font-variant-numeric: tabular-nums;

    & dt { color: var(--text-dark-muted); }
    & dd { text-align: end; }
  }

  & .desk__states {
    display: grid;
    gap: var(--space-s);
    margin-block-start: var(--space-l);
  }

  & .desk__label {
    display: block;
    margin-block-end: calc(var(--space-xs) / 2);
    font-size: var(--text-s);
    color: var(--text-dark-muted);
  }
}

/* ---- The dashboard sheet ------------------------------------------------ */
.sheet {
  :has(> &) { container: sheet / inline-size; }

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--container-gap);
  font-size: var(--text-s);

  /* 50rem: below this two columns of id and value collide. */
  @container sheet (width < 50rem) { grid-template-columns: minmax(0, 1fr); }

  & .sheet__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: var(--space-m);
    padding-block: var(--space-xs);
    border-block-end: var(--divider);
  }

  & .sheet__id { color: var(--text-dark-muted); }
  & .sheet__value { font-weight: var(--heading-font-weight); }
}

/* ---- Questions ---------------------------------------------------------- */
.asks {
  display: grid;
  gap: var(--space-m);
  max-inline-size: var(--text-max-width);
  counter-reset: ask;

  /* The numeral hangs in the item's own padding, so a figure printed inside
     the sentence stays in the sentence. */
  & .asks__item {
    position: relative;
    padding-inline-start: var(--space-l);
    counter-increment: ask;

    &::before {
      content: counter(ask);
      position: absolute;
      inset-inline-start: 0;
      font-weight: var(--heading-font-weight);
      font-variant-numeric: tabular-nums;
    }
  }
}

.foot {
  padding-block: var(--section-space-xs);
  border-block-start: var(--divider);
  font-size: var(--text-s);
  color: var(--text-dark-muted);
}