/* ===================================================================== *
 * faq.css, the "The usual questions" band.
 *
 * One section from the front page redesign, built from the Figma frame
 * "Panel / The usual questions". Loaded after app.css and only by
 * index.html.
 *
 * Two columns that answer the same worry from opposite ends. On the left,
 * where the answers come from and when they were last read. On the right,
 * the four questions people actually arrive with. The sources sit beside
 * the questions rather than under them because the provenance is the
 * answer to most of them.
 *
 * The disclosure is native <details>, the same element the findings rows
 * use, so open and closed state is the browser's to announce and there is
 * no JavaScript holding it. The exclusive behaviour comes from the `name`
 * attribute rather than a script.
 *
 * EVERY class here is namespaced `faq__`, for the reason know.css gives at
 * length: the app owns the short names.
 *
 * It slots into the existing `components` layer rather than sitting
 * unlayered on top. Unlayered rules beat every layer, which would silently
 * outrank the whole stylesheet.
 * ===================================================================== */

@layer tokens {
  :root {
    /* Light leans on the fill: cream on white is only 1.09:1, but the shape,
       the words and the blue sign carry the row, and that is what the frame
       asks for. Dark cannot lean on the same trick, because --bg is 1.05:1
       against --surface there and two near-blacks are not two surfaces. A
       hairline does the job the fill does in light. Declared in both so the
       rule below never branches. */
    --faq-edge: transparent;

    /* The source pill's outline. --border is #26262a in dark, which measures
       1.26:1 on the band: no edge at all, and the pills come apart into loose
       words. The same argument know.css makes for --panel-edge. */
    --faq-pill-edge: var(--border);

    /* How long a question takes to grow. Short on purpose: this one answers a
       click, unlike the law band's arrival, which answers a scroll. Past about
       400ms a disclosure stops reading as opening and starts reading as the
       page thinking about it. */
    --faq-open: 320ms;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --faq-edge: rgb(255 255 255 / 0.10);
      --faq-pill-edge: rgb(255 255 255 / 0.16);
    }
  }
}

@layer components {

  /* -- the band ------------------------------------------------------- *
     Colour runs the full width of the window, words stay inside the 1440
     column. Same structure as .topbar, .footer, .know and .law.

     The frame insets this 72 top and bottom. It takes 96 over 48 instead,
     which is what .know and .law already use: a third band on the same page
     keeping its own rhythm reads as a section that arrived from somewhere
     else. The footer's own top border closes it off underneath. */
  .faq {
    background: var(--surface);
    padding-block: var(--space-9) var(--space-7);
  }

  @media (max-width: 48rem) {
    .faq { padding-block: var(--space-7) var(--space-6); }
  }

  /* Stacked until there is room for two columns, at the same width the know
     panel splits. Sources first in the source order, so a phone gets the
     heading and the provenance before the questions. */
  .faq__grid {
    display: grid;
    gap: var(--space-7);
  }

  @media (min-width: 64rem) {
    .faq__grid { grid-template-columns: 1fr 1fr; }
  }

  /* Matches .know__title and .law__title step for step. Three section
     headings on one page that break at different widths read as three
     different pages. */
  .faq__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.06;
    color: var(--text);
  }

  @media (min-width: 48rem) {
    .faq__title { font-size: var(--text-3xl); }
  }

  @media (min-width: 64rem) {
    .faq__title { font-size: 3.25rem; }  /* 52, per the frame */
  }

  /* -- the sources ---------------------------------------------------- *
     Named rather than counted. "Nine sources" is a claim; nine names you
     recognise is the evidence for it, and the two lines below say when they
     were last read. */
  .faq__sources {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding: 0;
    list-style: none;
  }

  /* Not .pill: that component is the engine's levels, and a source is not a
     level. Same shape, different job, so it gets its own name rather than
     borrowing one that means something. */
  .faq__source {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--faq-pill-edge);
    border-radius: var(--radius-full);
    background: var(--bg);
    color: var(--text-muted);
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  .faq__note {
    margin-top: var(--space-4);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-subtle);
    text-wrap: pretty;
  }

  /* -- the questions -------------------------------------------------- */
  .faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* The frame draws these at 20. The radius scale is 4-based and runs
     4/8/12/16/24, and one section is not a reason to put a step between the
     last two, so it takes the 16. */
  .faq__item {
    border: 1px solid var(--faq-edge);
    border-radius: var(--radius-lg);
    background: var(--bg);
  }

  /* The marker has to go from both engines before the row can lay itself
     out, and the two disagree about which property does it. */
  .faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    list-style: none;
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.5;
    color: var(--text);
  }

  .faq__q::-webkit-details-marker { display: none; }

  /* The sign is generated rather than written into the markup because it is
     a picture of the state, and the state is already on the <details> for
     anything that is listening. Nothing here is the only way to know whether
     a question is open. */
  .faq__q::after {
    content: '+';
    flex: none;
    font-size: var(--text-xl);
    font-weight: 400;
    line-height: 1;
    color: var(--accent);
  }

  .faq__item[open] > .faq__q::after { content: '\2212'; }  /* true minus, not a hyphen */

  .faq__q:hover { color: var(--accent); }

  .faq__q:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
    border-radius: var(--radius-lg);
  }

  /* Top padding comes from the summary's own bottom padding being absent
     here, so the answer sits under its question at the same rhythm as the
     gap between two closed rows. */
  .faq__a {
    padding: 0 var(--space-5) var(--space-5);
    font-size: var(--text-base);
    line-height: 1.625;
    color: var(--text-muted);
    text-wrap: pretty;
  }

  .faq__a a { color: var(--accent); text-underline-offset: 3px; }

  /* -- growing open ---------------------------------------------------- *
     A <details> has always snapped, because there was no box to animate: the
     answer was a sibling of the summary and height had nothing to go from.
     ::details-content is that box, so the row can grow into its answer.

     Three things have to line up and all three are needed:

     `interpolate-size: allow-keywords` is what makes `auto` a value a
     transition can reach. It is set here rather than on :root because it is
     inherited and page-wide it would quietly opt every auto-sized transition
     on the site into animating.

     `content-visibility` has to transition too, with `allow-discrete`, or the
     answer is dropped from rendering the instant you close and the collapse
     plays against an empty box.

     `overflow: hidden` stops the answer spilling out of the row on the way.

     A browser without ::details-content ignores the whole block and the
     question opens the way it does today. Nothing here is load bearing. */
  @media (prefers-reduced-motion: no-preference) {
    .faq__item { interpolate-size: allow-keywords; }

    .faq__item::details-content {
      block-size: 0;
      opacity: 0;
      overflow: hidden;
      transition:
        block-size var(--faq-open) var(--ease),
        opacity var(--faq-open) var(--ease),
        content-visibility var(--faq-open) allow-discrete;
    }

    .faq__item[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
  }
}