/*
 * The quick start: /start, and the standalone copy built from the same markup.
 *
 * WHY IT CARRIES NO COLOURS OF ITS OWN
 * ------------------------------------
 * Every value here is a theme token. The page therefore follows the site into
 * dark mode with nothing to maintain, and tests/test-contrast.php already
 * measures every one of these inks -- which it could not do for a palette this
 * file invented.
 *
 * PRINTS AS WELL AS IT SCROLLS
 * ----------------------------
 * This is handed to people on their first morning, sometimes on paper. The
 * print block at the foot closes the gaps and stops a card, a step or a
 * comparison row straddling a fold.
 */

.am-qs {
  max-inline-size: 58rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
}

.am-qs p { margin: 0; text-wrap: pretty; }
.am-qs h1, .am-qs h2, .am-qs h3 { margin: 0; line-height: 1.15; text-wrap: balance; }

/* Running prose is held near 68 characters; the comparison and the card grid
   are allowed the full width because they are columns, not paragraphs. */
.am-qs-lede,
.am-qs-intro,
.am-qs-rule-body,
.am-qs-figure figcaption { max-inline-size: 68ch; }

/* --- Masthead ------------------------------------------------------------- */

.am-qs-head {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding-block-end: var(--am-gap-lg, 1.5rem);
  border-block-end: 3px solid var(--am-danger, #ED1C24);
}

.am-qs-eyebrow {
  font-size: var(--am-text-xs, .75rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--am-accent-ink, #272E7E);
}

.am-qs-title {
  font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
  font-weight: 800;
  letter-spacing: -.025em;
}

.am-qs-who {
  align-self: flex-start;
  padding: .25rem .7rem;
  font-size: var(--am-text-xs, .75rem);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--am-teal, #0F7A57);
  border: 1px solid currentColor;
  border-radius: var(--am-radius-pill, 999px);
}

.am-qs-lede {
  font-size: var(--am-text-lg, 1.125rem);
  color: var(--am-text-muted, #5E6673);
}

/* --- Sections ------------------------------------------------------------- */

.am-qs-part {
  display: flex;
  flex-direction: column;
  gap: var(--am-gap, 1rem);
}

.am-qs-sechead {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.am-qs-h {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -.018em;
}

/* A short brand rule rather than a number: these sections are not a sequence,
   and numbering them would say they were. */
.am-qs-h::before {
  content: "";
  flex: 0 0 auto;
  inline-size: .28rem;
  block-size: 1.1em;
  border-radius: 2px;
  background-color: var(--am-danger, #ED1C24);
}

.am-qs-intro { color: var(--am-text-muted, #5E6673); }

/* --- Capability cards ----------------------------------------------------- */

.am-qs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: .85rem;
}

.am-qs-card {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.05rem 1.1rem;
  background-color: var(--am-surface, #FFFFFF);
  border: 1px solid var(--am-border, #E2E5EA);
  border-radius: var(--am-radius, .5rem);
  break-inside: avoid;
}

.am-qs-chip {
  inline-size: 2rem;
  block-size: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--am-radius-sm, .375rem);
  background-color: color-mix(in srgb, var(--am-accent, #272E7E) 10%, transparent);
  color: var(--am-accent-ink, #272E7E);
}

.am-qs-card h3 { font-size: var(--am-text-md, 1rem); font-weight: 700; }
.am-qs-card p  { font-size: var(--am-text-sm, .875rem); color: var(--am-text-muted, #5E6673); }

/* --- Then and now --------------------------------------------------------- */

.am-qs-change {
  display: flex;
  flex-direction: column;
  background-color: var(--am-surface, #FFFFFF);
  border: 1px solid var(--am-border, #E2E5EA);
  border-radius: var(--am-radius, .5rem);
  overflow: hidden;
}

.am-qs-changehead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  padding: .6rem 1.1rem;
  background-color: var(--am-surface-sunk, #F7F8FA);
  border-block-end: 1px solid var(--am-border, #E2E5EA);
  font-size: var(--am-text-xs, .75rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.am-qs-changehead span:first-child { color: var(--am-text-subtle, #646D79); }
.am-qs-changehead span:last-child  { color: var(--am-teal, #0F7A57); }

.am-qs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  padding: .85rem 1.1rem;
  font-size: var(--am-text-sm, .875rem);
  break-inside: avoid;
}

.am-qs-row + .am-qs-row { border-block-start: 1px solid var(--am-border, #E2E5EA); }

/* The old way is set back deliberately, so the eye lands on the right column. */
.am-qs-was { color: var(--am-text-subtle, #646D79); }

.am-qs-now {
  padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--am-teal, #0F7A57);
}

/* One column on a phone, each half carrying the label the header row was
   holding for it. */
@media (max-width: 46rem) {
  .am-qs-changehead { display: none; }

  .am-qs-row {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .am-qs-was::before,
  .am-qs-now::before {
    display: block;
    margin-block-end: .15rem;
    font-size: var(--am-text-xs, .75rem);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .am-qs-was::before { content: "Until now";   color: var(--am-text-subtle, #646D79); }
  .am-qs-now::before { content: "From now on"; color: var(--am-teal, #0F7A57); }
}

/* --- The one rule --------------------------------------------------------- */

.am-qs-rule {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.15rem 1.25rem;
  background-color: color-mix(in srgb, var(--am-danger, #ED1C24) 6%, transparent);
  border: 1px solid var(--am-danger, #ED1C24);
  border-inline-start: 4px solid var(--am-danger, #ED1C24);
  border-radius: var(--am-radius, .5rem);
  break-inside: avoid;
}

.am-qs-rule-label {
  font-size: var(--am-text-xs, .75rem);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--am-danger-ink, #C0101D);
}

.am-qs-rule-text {
  font-size: var(--am-text-lg, 1.125rem);
  font-weight: 700;
  letter-spacing: -.01em;
}

.am-qs-rule-body {
  font-size: var(--am-text-sm, .875rem);
  color: var(--am-text-muted, #5E6673);
}

/* --- Steps ---------------------------------------------------------------- */

.am-qs-steps {
  counter-reset: am-qs-step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.am-qs-steps > li {
  counter-increment: am-qs-step;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: .85rem;
  align-items: start;
  break-inside: avoid;
}

.am-qs-steps > li::before {
  content: counter(am-qs-step);
  inline-size: 1.75rem;
  block-size: 1.75rem;
  display: grid;
  place-items: center;
  font-size: var(--am-text-xs, .75rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* White, not --am-surface, for the reason spelled out at the same marker in
     americon-help.css: the disc is filled accent in BOTH schemes, so the
     numeral is light-on-dark in both and must not flip with the surface. */
  color: #FFFFFF;
  background-color: var(--am-accent, #272E7E);
  border-radius: var(--am-radius-pill, 999px);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.am-qs-steps p { font-size: var(--am-text-sm, .875rem); color: var(--am-text-muted, #5E6673); }
.am-qs-steps b { color: var(--am-text, #1F2530); font-weight: 700; }

.am-qs-heed {
  padding: .8rem 1rem;
  font-size: var(--am-text-sm, .875rem);
  background-color: color-mix(in srgb, var(--am-amber, #F59E0B) 12%, transparent);
  border-inline-start: 3px solid var(--am-amber, #F59E0B);
  border-radius: var(--am-radius-sm, .375rem);
  break-inside: avoid;
}

/* --- Figures -------------------------------------------------------------- */

.am-qs-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  break-inside: avoid;
}

.am-qs-figure img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--am-border, #E2E5EA);
  border-radius: var(--am-radius, .5rem);
  /* The screens are a light interface. On the dark theme the shot keeps its
     own white ground rather than being dimmed -- dimming a screenshot hides
     the thing it was included to point at. */
  background-color: #FFFFFF;
}

.am-qs-figure figcaption {
  font-size: var(--am-text-sm, .875rem);
  color: var(--am-text-subtle, #646D79);
}

/* --- Badge legend --------------------------------------------------------- */

.am-qs-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: .9rem 1.5rem;
}

.am-qs-legendrow {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem;
  align-items: start;
  break-inside: avoid;
}

.am-qs-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .55rem;
  font-size: var(--am-text-xs, .75rem);
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  border: 1px solid currentColor;
  border-radius: var(--am-radius-pill, 999px);
}

.am-qs-badge--neutral { color: var(--am-text-subtle, #646D79); }
.am-qs-badge--accent  { color: var(--am-accent-ink, #272E7E); }
.am-qs-badge--teal    { color: var(--am-teal, #0F7A57); }
.am-qs-badge--warn    { color: var(--am-danger-ink, #C0101D); }

.am-qs-legendrow p { font-size: var(--am-text-sm, .875rem); color: var(--am-text-muted, #5E6673); }

/* --- Where next ----------------------------------------------------------- */

.am-qs-next {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .85rem;
}

.am-qs-nextcard {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1rem 1.05rem;
  background-color: var(--am-surface-sunk, #F7F8FA);
  border: 1px solid var(--am-border, #E2E5EA);
  border-radius: var(--am-radius, .5rem);
  break-inside: avoid;
}

.am-qs-nextcard h3 {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--am-text-md, 1rem);
  font-weight: 700;
  color: var(--am-accent-ink, #272E7E);
}

.am-qs-nextcard p { font-size: var(--am-text-sm, .875rem); color: var(--am-text-muted, #5E6673); }

/* --- Shared bits ---------------------------------------------------------- */

.am-qs-note {
  padding: .8rem 1rem;
  font-size: var(--am-text-sm, .875rem);
  background-color: var(--am-surface-sunk, #F7F8FA);
  border-inline-start: 3px solid var(--am-accent, #272E7E);
  border-radius: var(--am-radius-sm, .375rem);
  break-inside: avoid;
}

/* The pointer into the manual. Every panel carries one; they are the reason
   this document is allowed to be four screens instead of forty. */
.am-qs-more {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-block-start: .3rem;
  font-size: var(--am-text-xs, .75rem);
  font-weight: 600;
  text-decoration: none;
  color: var(--am-accent-ink, #272E7E);
}

.am-qs-more:hover,
.am-qs-more:focus-visible { text-decoration: underline; }

.am-qs-i {
  inline-size: 1em;
  block-size: 1em;
  flex: 0 0 auto;
  fill: currentColor;
  vertical-align: -.125em;
}

/* --- Print ---------------------------------------------------------------- */

@media print {
  .am-qs { max-inline-size: none; gap: 1.1rem; }

  .am-qs-head { padding-block-end: .5rem; border-block-end-width: 2px; }
  .am-qs-title { font-size: 20pt; }
  .am-qs-lede { font-size: 10pt; }

  .am-qs-h { font-size: 13pt; }
  .am-qs-part { gap: .6rem; }

  .am-qs-card,
  .am-qs-nextcard { padding: .55rem .65rem; }

  .am-qs-row { padding: .35rem .8rem; }
  .am-qs-rule { padding: .6rem .8rem; }
  .am-qs-rule-text { font-size: 11pt; }

  .am-qs-steps { gap: .35rem; }

  /* A URL after every pointer would cost a page, and the page names the manual
     in its own text already. */
  .am-qs-more { color: inherit; font-weight: 400; }

  .am-qs-figure img { max-block-size: 62mm; inline-size: auto; margin-inline: auto; }
}