/* Use-case landing pages (use-cases/*.html, the Nov 2026 ad groups).
   Shared by all 21 pages. Tokens only, .pg-uc- prefix, one reason per rule.
   Link it after ../flat/flat.css. Reference pages: use-cases/payroll-agreement-checks.html
   (fact card, verdict table, approval card) and use-cases/production-report-gaps.html
   (coverage grid, detail lists).

   ---------------------------------------------------------------------------
   PAGE SHELL
   - Hero: .section.section--hero > .site.split.split--lead > [copy div] + [figure].
     Copy: .crumbs, .cluster.mt-4 > one hero chip (chip chip--teal chip--sm, or
     --blue on an Ask page, with an icon), h1.display.measure--h.mt-3,
     p.lead.measure.mt-5, .cluster.cluster--md.mt-6 > a.btn.btn--primary.btn--lg
     + a.link.btn--lg (arrow-right), p.meta.mt-4 (the note).
   - Bare copy section (the problem): .site > .kicker, h2.mt-2, p.measure.mt-4, p.measure.mt-3.
   - Two-column section: .site.split.split--lead.pg-uc-row > [copy div] + [figure].
     Copy is always first in the DOM, so a phone reads the heading before the figure.
     Add .pg-uc-row--flip to put the figure on the left from 801px.
     Alternate: the hero figure is right, so the next two-column row is flipped
     (figure left), the one after is not, and so on. Full-width figures don't count.
   - Wide table section: .site > kicker, h2, copy, then figure.mt-6 full width.
   - Final CTA: section.flat-ink.section--ink > .site > h2.h1, p.lead.measure.mt-3,
     .cluster.cluster--md.mt-5 > a.btn.btn--lg.btn--yellow + a.btn.btn--lg.btn--secondary,
     p.meta.mt-4 (the footnote).

   FIGURES (all patterns). A figure is
     <figure>
       <div class="tint tint--panel" role="group" aria-label="Example: ...">
         <div class="demo__head"><span class="answer__label">Figure title</span>
           <span class="chip chip--paper chip--sm"><i data-lucide="info" class="icon"></i>Example</span></div>
         ...pattern...
       </div>
       <figcaption class="caption mt-3">Caption from the copy file</figcaption>
     </figure>
   Cloud panel (.tint.tint--panel) everywhere except the hero, which takes the page
   hue (.tint.tint--teal.tint--panel). Nothing painted inside a panel: no .tint,
   no .tint--paper, rows are split by hairlines. Leave out the Example chip and
   the "Example" aria-label only on the two plain tables (pattern 9).

   CHIPS
   - Source:  <span class="chip chip--paper chip--sm"><i data-lucide="quote" class="icon"></i>Document · clause · page</span>
              (file-text instead of quote for an export, a row or a file). Paper,
              not a hue: a plain chip vanishes on a cloud panel and blue would add a hue.
   - Verdict: outside the rule chip--pink + alert-triangle (or x) · within the rule
              chip--green + check · no data, missing, needs review, waiting
              chip--yellow + circle-help or clock. Always chip--sm in tables.
   - A row of chips: <div class="pg-uc-chips mt-3">...</div> (long chips wrap).

   1. HERO FACT CARD (in the hero figure, teal panel)
      .demo__head (answer__label = the figure heading, Example chip)
      <p class="pg-uc-fact">Line with <b>bold figures</b>.</p>
      <div class="pg-uc-chips mt-4">[verdict chip][source chip(s)]</div>
      <p class="mt-3">Second line, if the copy has one.</p>
      figcaption beneath the panel.

   2. VERDICT TABLE (cloud panel)
      <table class="table table--stack pg-uc-table" aria-label="...">
        <thead><tr><th scope="col">Employee</th>...<th scope="col" class="num">Rate paid</th>...</tr></thead>
        <tbody><tr><th scope="row">E1042</th><td data-label="Rate paid" class="num">20.00</td>
          ...<td data-label="Verdict">[verdict chip]</td></tr></tbody></table>
      Then the source lines as pattern 3 (dl.pg-uc-fields.mt-5). Up to six columns
      stack cleanly below 700px; .num cells left-align when stacked.

   3. DETAIL LIST (label and value rows; also the source lines under a table)
      <h3 class="pg-uc-subhead">Detail for Morwell, week 42</h3>
      <dl class="pg-uc-fields mt-2">
        <div><dt>Report source</dt><dd>[source chip]</dd></div>
      </dl>
      Sentence rows with no label: use <ul class="pg-uc-fields"> with <li>Sentence.</li>
      (a lone child spans the row), or <li><span class="pg-uc-fields__label">Label</span><span>Value</span></li>.
      Two details side by side: .split.mt-6 > div + div inside the same panel.

   4. COVERAGE GRID (sites down, periods across)
      <div class="scroll-x"><table class="table pg-uc-grid" aria-label="...">
        <thead><tr><th scope="col">Plant</th>
          <th scope="col"><span class="pg-uc-grid__unit">Week </span>40</th>...</tr></thead>
        <tbody><tr><th scope="row">Morwell</th>
          <td><span class="chip chip--sm chip--green pg-uc-cell"><i data-lucide="check" class="icon"></i><span class="pg-uc-cell__text">Received</span></span></td>
          <td><span class="chip chip--sm chip--yellow pg-uc-cell is-hot">...No report...</span></td>
      </tr></tbody></table></div>
      <div class="pg-uc-chips pg-uc-legend mt-4">[one chip per state, full text]</div>
      Received/returned = green check · missing = yellow clock · outside threshold =
      pink alert-triangle. A cell may hold plain text (a reading such as 0.6) instead
      of a chip; a reading that needs a hue goes in a chip--sm without .pg-uc-cell.
      Mark the one cell the copy highlights with .is-hot (bronze ring, keeps its words).
      .pg-uc-grid--compact (hero size): icon-only cells and bare numbers in the header
      at every width; .is-hot keeps its words. Without --compact the grid shows words
      and goes compact below 700px. The legend shows only when cells are icon-only;
      on a compact grid add .pg-uc-legend--always.

   5. APPROVAL CARD (cloud panel; the fields are whatever the copy lists)
      .demo__head (answer__label "Proposed follow-up", Example chip)
      <dl class="pg-uc-fields">
        <div><dt>To</dt><dd>Morwell plant manager</dd></div>
        <div><dt>Draft</dt><dd class="pg-uc-fields__quote">"Quoted draft."</dd></div>
        <div><dt>Attached</dt><dd>the export rows, agreement page 146</dd></div>
      </dl>
      <div class="pg-uc-chips mt-5"><span class="chip chip--yellow chip--sm"><i data-lucide="clock" class="icon"></i>Waiting for approval · Role</span></div>

   6. DOCUMENT COMPARISON (two or three lines from different documents)
      <div class="pg-uc-compare">
        <div><p class="pg-uc-subhead">Invoice line 3</p>
          <p class="pg-uc-fields__quote mt-2">Senior technician · 6 days · $1,480</p>
          <div class="pg-uc-chips mt-3">[source chip]</div></div>
        ...one div per document...
      </div>
      Side by side from 601px (as many columns as there are documents), stacked below.
      Put a verdict chip under the comparison in .pg-uc-chips.

   7. CHAT EXCHANGE (static; flat.css .viz-chat is sized for the pillar card and
      its .viz-bubble--answer starts hidden for viz.js, so these pages don't use it)
      <div class="pg-uc-chat">
        <p class="pg-uc-chat__q">"Question?"</p>
        <div class="pg-uc-chat__a"><span class="answer__label">Answer</span>
          <p class="answer__text">Reply, with <b>bold figures</b>.</p>
          <div class="pg-uc-chips mt-3">[source chip]</div></div>
        ...more turns...
      </div>
      <div class="pg-uc-chips mt-4"><span class="chip chip--yellow chip--sm"><i data-lucide="user-round" class="icon"></i>Handed to member services · ...</span></div>
      The question bubble takes the panel's hue (--_hue): teal by default, add
      .hue--blue on the panel for an Ask page. The reply sits bare on the panel.

   8. TIMELINE (date, item, note): pattern 3 on an ordered list.
      <ol class="pg-uc-fields pg-uc-timeline">
        <li><time class="pg-uc-fields__label" datetime="2026-12-30">30 Dec 2026</time>
          <span><b>Unit 4, 22 Canal Street</b> · last day to give notice
          <span class="pg-uc-chips mt-2">[bronze chip]</span></span></li>
      </ol>

   9. DOCUMENTS TABLE AND SCOPE TABLE (plain two-column, no Example chip)
      <div class="tint tint--panel">
        <table class="table table--stack pg-uc-table pg-uc-table--keys" aria-labelledby="h2 id">
          <thead><tr><th scope="col">Document</th><th scope="col">What it supplies</th></tr></thead>
          <tbody><tr><th scope="row">Payroll export</th><td data-label="What it supplies">...</td></tr></tbody>
        </table></div>
      Put it in a .pg-uc-row beside its copy, so the sentence column stays at
      reading width. Never as a three-up grid.
   --------------------------------------------------------------------------- */

/* Figure on the left from 801px while copy stays first in the DOM for phones. */
@media (min-width: 801px) { .pg-uc-row--flip > :first-child { order: 2; } }

/* Hero fact line: larger than .answer__text so the one fact reads first. */
/* Margin resets sit in :where() so the .mt-* utilities still win. */
:where(.pg-uc-fact, .pg-uc-subhead, .pg-uc-chat__q, .pg-uc-fields, .pg-uc-fields dd) { margin: 0; }

.pg-uc-fact { font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--fg-1); }
/* Figures in a fact line or reply are the evidence: heaviest weight, aligned digits. */
.pg-uc-fact b, .pg-uc-chat b { font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }

/* A wrapping chip row; flat .chip is nowrap, which overflows a 480px panel. */
.pg-uc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.pg-uc-chips .chip, .pg-uc-fields .chip { white-space: normal; line-height: 1.35; }

/* A heading inside a figure: ink and semibold, quieter than the teal figure label. */
.pg-uc-subhead { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg-1); }

/* Label and value rows split by hairlines: flat.css has keys tables, not a list form. */
/* The list owns the columns and each row is a subgrid, so labels of any length line up. */
.pg-uc-fields { display: grid; grid-template-columns: fit-content(14rem) minmax(0, 1fr); column-gap: var(--sp-5); padding: 0; list-style: none; font-size: var(--fs-sm); }
.pg-uc-fields > * { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--sp-1); align-items: baseline; padding: 10px 0; color: var(--fg-2); }
.pg-uc-fields > * + * { border-top: 1px solid var(--line); }
.pg-uc-fields > :first-child { padding-top: 0; }
.pg-uc-fields > :last-child { padding-bottom: 0; }
/* A sentence row with no label runs the full width. */
.pg-uc-fields > * > :only-child { grid-column: 1 / -1; }
.pg-uc-fields dt, .pg-uc-fields__label { font-weight: var(--fw-semibold); color: var(--fg-1); }
/* A chip in a value cell sits on the text line rather than stretching. */
.pg-uc-fields dd > .chip { vertical-align: middle; }
/* Quoted draft text reads as the message itself, so it takes ink and the UI size. */
.pg-uc-fields__quote { font-size: var(--fs-ui); line-height: var(--lh-relaxed); color: var(--fg-1); }
/* Dates in a timeline line up as a column. */
.pg-uc-timeline time { font-variant-numeric: tabular-nums; }
/* Below 600px the label goes above its value; a 9rem column would squeeze the value. */
@media (max-width: 600px) { .pg-uc-fields { grid-template-columns: minmax(0, 1fr); } }

/* Stacked rows show numbers under their label, so right alignment would split the pair. */
@media (max-width: 700px) { .table--stack.pg-uc-table .num { text-align: left; } }
/* Row labels in a two-column table keep a steady width so the sentence column lines up. */
.pg-uc-table--keys tbody th { width: 36%; }
@media (max-width: 700px) { .pg-uc-table--keys tbody th { width: auto; } }

/* Coverage grid: centred cells and tighter padding, so five or more periods fit a phone. */
.pg-uc-grid th, .pg-uc-grid td { padding: 8px 6px; text-align: center; white-space: nowrap; }
.pg-uc-grid th:first-child { text-align: left; padding-left: 0; }
.pg-uc-grid thead th { color: var(--fg-2); }
/* flat.css drops the last row's rule on td only; the row label needs it too. */
.pg-uc-grid tbody tr:last-child th { border-bottom: 0; }
.pg-uc-grid tbody th { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--fg-1); }
/* Icon-only cell: a fixed square so every state lines up in its column. */
.pg-uc-grid--compact .pg-uc-cell:not(.is-hot) { width: 28px; height: 28px; padding: 0; justify-content: center; }
.pg-uc-grid--compact .pg-uc-cell:not(.is-hot) .pg-uc-cell__text,
.pg-uc-grid--compact .pg-uc-grid__unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The highlighted cell: a bronze ring, the flat stand-in for a glow (DESIGN.md diagrams). */
.pg-uc-cell.is-hot { outline: 2px solid var(--yellow); outline-offset: 2px; }
/* Between 801 and 1100px the hero column is too narrow for the hot cell's words; the ring and legend carry it. */
@media (min-width: 801px) and (max-width: 1100px) {
  .pg-uc-grid--compact .pg-uc-cell.is-hot { width: 28px; height: 28px; padding: 0; justify-content: center; }
  .pg-uc-grid--compact .pg-uc-cell.is-hot .pg-uc-cell__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* The legend names the icons; it is needed only when the cells drop their words. */
.pg-uc-legend { display: none; }
.pg-uc-legend--always { display: flex; }
@media (max-width: 700px) {
  .pg-uc-grid .pg-uc-cell:not(.is-hot) { width: 28px; height: 28px; padding: 0; justify-content: center; }
  .pg-uc-grid .pg-uc-cell:not(.is-hot) .pg-uc-cell__text,
  .pg-uc-grid .pg-uc-grid__unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pg-uc-legend { display: flex; }
}

/* Document comparison: one column per document, a hairline over each like a table rule. */
.pg-uc-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--sp-5); }
.pg-uc-compare > * { min-width: 0; padding-top: var(--sp-3); border-top: 1px solid var(--line); }

/* Chat exchange: a question bubble in the panel's hue, the reply bare on the panel. */
.pg-uc-chat { display: flex; flex-direction: column; gap: var(--sp-4); }
.pg-uc-chat__q { align-self: flex-end; max-width: 85%; padding: 10px 14px; border-radius: var(--r-card); background: var(--_hue, var(--teal)); color: var(--on-solid); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.pg-uc-chat__a { max-width: 92%; }

/* Figure titles and "Answer" labels follow the page hue on Ask (blue) pages; flat.css fixes them teal. */
:is(.hue--blue, .tint--blue) .answer__label { color: var(--blue-text); }