/* ==========================================================================
   Beck Legal: the styles entered in Etch

   Everything else in the system is a setting in the Automatic CSS
   dashboard. These few rules are what the dashboard cannot hold. In the
   build they are Etch styles, entered in Etch's Style Manager. No
   stylesheet of our own is loaded. This file is the written source for
   them, and it styles the design system's pages.

   Every token is one Automatic CSS writes. None is invented here. Where a
   figure is not a token it is a calc() off one, written where it is used.
   The one literal is the 48rem in the container query, because a query
   cannot read a token.

   Native nesting. Container queries on a named container set with the
   has-me selector.
   ========================================================================== */

/* ---- A column of running copy stops at fifteen times the section heading --
   It is 40rem at its widest. It keeps a quote in copy quiet: see the quote
   below. Put this on any wrapper that holds copy from the content library. */
.copy { max-inline-size: calc(var(--h2) * 15); }

/* The framework has no token for strong text. It takes the weight of the
   small headings, so a page holds two weights of Switzer and no third. */
strong { font-weight: var(--heading-font-weight); }

/* ---- The quote lifts where it has room ------------------------------------
   The dashboard holds the quiet quote, so a quote nobody thought about is
   quiet. Where the box it sits in is wide, the quote takes the serif at the
   size of a section heading, by setting the framework's own quote tokens.

   Container query, because the rule is about the room the quote has and
   not about the screen: the same quote is quiet in a narrow column on a
   wide screen. The box the quote sits in is made the container by the
   quote itself. */
blockquote {
  :has(> &) { container: quote-area / inline-size; }

  /* 48rem: a column of running copy stops at fifteen times --h2, which is 40rem
     at its widest, so a quote in copy never reaches this. A section's full
     width does. On a phone nothing does, which also keeps the serif above
     its floor of 32. */
  @container quote-area (width >= 48rem) {
    --blockquote-text-font-family: var(--h2-font-family);
    --blockquote-text-font-size: var(--h2);
    --blockquote-text-font-weight: var(--h2-font-weight);
    --blockquote-text-line-height: var(--heading-line-height);
    --blockquote-max-inline-size: calc(var(--h2) * 20);
    --blockquote-padding: 0 0 0 var(--space-l);

    & p { letter-spacing: var(--heading-letter-spacing); }
  }

  /* The signature keeps its gap. After a list, a figure or another quote
     the framework sets --paragraph-spacing to 0 on the quote, the signature
     inherits it and closes up against the words. Declared on the signature
     itself, so nothing inherited can undo it. */
  & > footer,
  figure:has(> &) > figcaption { --paragraph-spacing: var(--space-s); }
}

/* Blush is half strength: the framework's ultra-light rung of the primary
   mixed half and half with white in oklab, #FFF3F1. It is a dashboard
   setting, bg-light, entered on 30/09/2026 through wp acss and written by
   the framework itself, so no rule is needed here. Not yet typed into the
   dashboard's own field, whose client-side check may refuse a color-mix:
   if it does, this is where the rule returns. */

/* ---- The quiet button stands on white where the ground is tinted ---------
   On White it is Sand. On Sand it would vanish, and on Blush it would
   muddy, so on a tinted ground it takes the page's white. Set on the
   ground, so a button moved from one section to another needs no edit. */
.bg--ultra-light .btn--secondary {
  --btn-background: var(--white);
  --btn-background-hover: var(--secondary-light);
}

.bg--light .btn--secondary {
  --btn-background: var(--white);
  --btn-background-hover: var(--secondary);
}

/* ---- An answer is lighter than its question --------------------------------
   WS Form gives every label one style, so the options under a question
   come out as heavy as the question. An option is an answer: it takes the
   size and weight of text. */
.wsf-form :is([data-row-radio], [data-row-checkbox]) label.wsf-label {
  font-size: var(--text-m);
  font-weight: var(--text-font-weight);
}