/**
 * Section: Confirmed and to confirm (checklist-pair)
 *
 * Ported from `_mockups/aftersales.html` `.as-split` / `.as-cov` / `.as-conf`,
 * which docs/pasia-section-inventory.md names as the source of truth. It also
 * covers `accreditations.html` `.ac-mem`, whose dashed rows are the same device
 * at full width with a --line border rather than a --gold one; the inventory
 * records that as drift, so it takes `.as-conf`'s treatment here.
 *
 * THE CLASS NAMES ARE THE MOCK-UP'S ON PURPOSE. components.css names `.as-conf`
 * twice in prose it owns: once to record that its dashed list is a single
 * consumer's and belongs in this file, and once in the list of components whose
 * translucent fill makes their contrast a property of the band. Renaming them
 * would leave both of those pointing at nothing. Everything is scoped under
 * `.checklist-pair` so nothing can leak out of this section.
 *
 * WHAT IS NOT HERE, ON PURPOSE:
 *   - the ticked list. `.pasia-ticklist` is in components.css, shared by four
 *     sections, and this file adds nothing to it but the margin reset that
 *     comes of sitting inside a card rather than under a heading.
 *   - the settled card's ground, hairline, radius and shadow, which are
 *     `.card`.
 *   - the badge. `.ph-badge` pins its own ground on both sides and is never
 *     re-coloured from a section stylesheet.
 *
 * NO `animation` AND NO `transition` ANYWHERE IN THIS FILE. Both panels carry
 * `.reveal`, which base.css now runs as an `animation` rather than a
 * `transition`, precisely so that a section declaring its own `transition`
 * shorthand can no longer replace the property list and make the panel snap in
 * rather than fade. `animation` is the one property that would still collide
 * with the new form, so a section stylesheet must not put its own on a
 * `.reveal` element. Neither arises here: nothing in the mock-up hovers, so
 * this file needs no motion of its own at all.
 *
 * No `.reveal-dN` in the markup either. Inventory §0 carries an erratum on it:
 * the four delay steps were invented on top of the signed-off design, appear in
 * none of the 27 mock-ups, and have been deleted from base.css.
 *
 * CONTRAST, measured numerically AND AS COMPOSITED, because the to-confirm
 * panel is a translucent fill and its real contrast is a property of the band
 * under it rather than of the token. The band is `tint`, so --paper, and the
 * panel is --gold-tint-10 over it, which composites to #f9f3e9:
 *
 *   on --paper #ffffff, the settled card
 *     --ink       #14231f   16.28:1   the list heading
 *     --ink-soft  #45524d    8.18:1   the items
 *     --gold-deep #7e622e    5.72:1   the tick, from components.css
 *   on the composited panel #f9f3e9
 *     --ink       #14231f   14.72:1   the list heading
 *     --ink-soft  #45524d    7.40:1   the items and the notes
 *     --ink-faint #5f6b66    5.02:1   not used; recorded so nothing quietens
 *                                     a row to it later without re-measuring
 *     --gold-deep #7e622e    5.17:1   the badge's text, over the badge's own
 *                                     pinned --paper ground and its worst
 *                                     --gold-tint-10 stripe
 *   on --paper, the section head
 *     --gold-deep #7e622e    5.72:1   the eyebrow, from tokens.css
 *
 * Every one clears WCAG AA for normal text. The dashed --gold outline is
 * 2.32:1 against the panel it encloses: it is a boundary, carries no text and
 * is nothing's only affordance, so 1.4.11 does not reach it. The row hairline
 * is --line and is the same case.
 *
 * The bare pixel values are hairline widths, the practice components.css
 * already follows for its own 1px and 1.5px borders. No font-size literal in
 * this file.
 */

/* ---------------------------------------------------------------------------
 * The pair.
 *
 * `minmax(0, 1fr)` rather than a bare `1fr`, and that is the defence against
 * horizontal overflow at 320px rather than a formality. A `1fr` track is
 * `minmax(auto, 1fr)`, and its auto minimum is the min-content size of the
 * GRID ITEM, so a `min-width: 0` on something inside the panel never reaches
 * it. `overflow-wrap: anywhere` closes the other half, a single unbreakable
 * word, and `anywhere` rather than `break-word` because only `anywhere` is
 * taken into account when the min-content size is computed.
 * ------------------------------------------------------------------------ */
.checklist-pair .as-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-4);
  align-items: stretch;
  overflow-wrap: anywhere;
}

/* One list filled runs the full width. Derived from the content in the
   renderer, never chosen from a picker. This is accreditations.html's
   memberships list. */
.checklist-pair .as-split.is-solo {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 860px) {
  .checklist-pair .as-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
 * Both panels.
 * ------------------------------------------------------------------------ */
.checklist-pair .as-cov,
.checklist-pair .as-conf {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  border-radius: var(--r-lg);
}

.checklist-pair .as-list-title {
  font-size: var(--text-xl);
  margin-bottom: var(--s-3);
}

/* ---------------------------------------------------------------------------
 * The settled list. `.card` supplies the paper ground, the hairline, the radius
 * and the resting shadow; `.pasia-ticklist` supplies the ticks.
 *
 * The one line this file owns on the shared list is the margin. The component
 * carries `margin: var(--s-4) 0 0`, which is the spacing under a heading in
 * open page flow; inside a card, under a title that already sets its own gap,
 * that reads as a double space. aftersales.html:72 zeroes it for exactly this
 * reason, and components.css says a consumer that genuinely needs it zeroed
 * sets that one line itself.
 * ------------------------------------------------------------------------ */
.checklist-pair .as-cov-list {
  margin-top: 0;
  gap: .7em;
}

/* ---------------------------------------------------------------------------
 * The to-confirm list.
 *
 * The dashed gold outline is the whole point: it says "not settled yet" before
 * a word is read, which is worth more on this site than a plausible number
 * would be.
 * ------------------------------------------------------------------------ */
.checklist-pair .as-conf {
  background: var(--gold-tint-10);
  border: 1.5px dashed var(--gold);
}

.checklist-pair .as-conf-list {
  display: grid;
}

/* Item on the left, note or badge on the right, wrapping to two lines rather
   than overflowing when the row is narrow. */
.checklist-pair .as-conf-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5em 1em;
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}

.checklist-pair .as-conf-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Lets the item shrink inside the flex row so a long entry wraps instead of
   pushing the badge out of the panel. The track minimum is answered on
   `.as-split` above; this is the flex item, and neither substitutes for the
   other. */
.checklist-pair .as-conf-item {
  min-width: 0;
}

.checklist-pair .as-conf-note {
  color: var(--ink);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * The closing line. `.note` in components.css supplies --text-sm and
 * --ink-soft; this only places it.
 * ------------------------------------------------------------------------ */
.checklist-pair .as-closing {
  margin-top: var(--s-4);
  text-align: center;
}