/* ===========================================================================
   readiness-check.css — page-scoped only, for /check/.

   Everything structural comes from /assets/tool-chassis.css and /assets/v4.css.
   This file adds the four things the chassis deliberately has no class for:
   the page frame around the tool, the emergency note above it, the checklist
   line with its next step travelling underneath, and the built gap list.

   RULES HELD HERE
   ---------------
   - No colour literal. Every colour resolves through a canon token declared in
     v4.css / tool-chassis.css :root (--pacific-900 … --coral-400) or through
     the chassis' derived --tc-* variables, which only exist inside .tc-tool.
   - No score, meter, badge, seal, star, dial or progress bar. There is no rule
     in this file that could render one, and none should be added. The readiness
     result is carried by words and by counts of the reader's own answers; if a
     bar appears here later, the page has started implying a judgement it did
     not earn.
   - Every interactive target clears 44px in its smaller dimension. The chassis
     sets that on .tc-select / .tc-text / .tc-btn; this file sets it on the page
     chrome links that sit outside .tc-tool.
   - The focus ring is the corrected one everywhere on this page, not only
     inside the tool. v4.css ships a site-wide 3px Aqua 400 outline, which is
     1.61:1 on the Foam page ground and fails; the rule below replaces it with
     the chassis ring — a Pacific 900 outline carrying the contrast, with an
     Aqua 400 halo so it still reads on the deep navy rail and footer.
   - prefers-reduced-motion keeps every word, state and boundary. The only
     motion this file adds is one transition, and it is removed, not swapped.
   =========================================================================== */

/* ==========================================================================
   0. FOCUS + TARGETS ON THE PAGE CHROME
   ========================================================================== */

/* Specificity (0,2,0) beats the site-wide (0,1,0) `:focus-visible` in v4.css
   whatever the load order is. Inside .tc-tool the chassis' own (0,2,0) rule
   already does this; the two are identical on purpose. */
.rc-page :focus-visible {
  outline: 3px solid var(--pacific-900);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px var(--aqua-400);
  border-radius: var(--radius-sm);
}

.rc-page :focus:not(:focus-visible) {
  outline: none;
}

.rc-page .primary-nav > a,
.rc-page .site-footer nav a,
.rc-page .site-footer a,
.rc-page .rc-related__list a,
.rc-page .rc-crumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* The footer column links needed their own rule, and this was measured in the
   browser rather than assumed: v4.css caps them at 34px through
   `.site-footer__grid > div:not(.site-footer__brand) a`, which is (0,2,2) and
   beats the (0,2,1) rule above no matter which file loads last. Repeating the
   selector under .rc-page makes it (0,3,2) and lands the target at 44px on
   this page. Nothing in v4.css is edited to achieve it. */
.rc-page .site-footer__grid > div:not(.site-footer__brand) a {
  min-height: 44px;
}

/* Inline links inside running prose stay inline — a 44px block link mid-
   sentence breaks the line it sits in. WCAG 2.2 Target Size (Minimum) has an
   explicit exception for a target "in a sentence or block of text", which is
   exactly what these are: every one of them is a phrase inside a paragraph,
   and every destination is also reachable from the full-size list at the foot
   of the page, where the same links are 44px. */
.rc-page .rc-item__next a,
.rc-page .rc-alert a,
.rc-page .rc-disclosure a {
  display: inline;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--pacific-900);
  font-weight: 600;
}

/* ==========================================================================
   1. PAGE FRAME
   ========================================================================== */

.rc-frame {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  padding: clamp(20px, 4vw, 48px) 0 clamp(40px, 6vw, 72px);
}

.rc-crumb {
  font-size: 14px;
  color: var(--pacific-700);
}

.rc-crumb a {
  color: var(--pacific-900);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rc-crumb span[aria-hidden] {
  padding: 0 4px;
  color: var(--ocean-600);
}

.rc-crumb [aria-current] {
  font-weight: 700;
  color: var(--pacific-900);
}

.rc-intro {
  display: grid;
  gap: 14px;
  max-width: 72ch;
}

.rc-intro h1 {
  margin: 0;
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--pacific-900);
  text-wrap: balance;
}

.rc-intro__lede {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--pacific-700);
  text-wrap: pretty;
}

.rc-intro__lede em {
  font-style: normal;
  font-weight: 700;
  color: var(--pacific-900);
}

/* ==========================================================================
   2. THE EMERGENCY NOTE
   Sand ground, one coral marker bar. Coral is capped at 2% of the page and is
   decoration here: the heading says "wrong page" in words, so the colour is
   never carrying the meaning on its own.
   ========================================================================== */

.rc-alert {
  max-width: 78ch;
  padding: 16px 20px;
  background: var(--sand-200);
  border: 1px solid var(--ocean-600);
  border-left: 4px solid var(--coral-400);
  border-radius: var(--radius-md);
  color: var(--pacific-900);
}

.rc-alert__title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.rc-alert p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ==========================================================================
   3. THE CHECKLIST
   ========================================================================== */

.rc-list {
  display: grid;
  gap: 14px;
}

.rc-group__title {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tc-ink-soft);
}

.rc-group__note {
  margin: 0;
  max-width: 72ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tc-ink);
  text-wrap: pretty;
}

.rc-group {
  display: grid;
  gap: 14px;
}

/* One line of the checklist gets the same box a fact gets, because working
   down these lines IS the tool — it is not a form to get past on the way to
   a result screen. */
.rc-item {
  gap: 8px;
  padding: 14px 16px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-edge);
  border-radius: var(--tc-radius-md);
}

.rc-item .tc-hint {
  max-width: 74ch;
}

.rc-item__nextlabel {
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tc-ink-soft);
}

/* The next step travels with the line it belongs to, and is printed whether
   scripts run or not. With JavaScript off this paragraph is the entire output
   of the tool, so it is never dimmed, shortened or collapsed. */
.rc-item__next {
  margin: 0;
  max-width: 74ch;
  padding: 10px 12px;
  background: var(--foam-100);
  border-radius: var(--tc-radius-sm);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tc-ink);
  text-wrap: pretty;
}

.rc-priv {
  margin: 4px 0 0;
  max-width: 74ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--tc-ink-soft);
}

/* ==========================================================================
   4. THE RESULT
   ========================================================================== */

.rc-result__hint {
  font-weight: 600;
}

.rc-band {
  margin: 6px 0 0;
  max-width: 70ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tc-ink);
  text-wrap: pretty;
}

.rc-gaps {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
}

.rc-gaps__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--tc-ink);
}

.rc-gaps__count {
  margin: 0;
  max-width: 72ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tc-ink);
  text-wrap: pretty;
}

.rc-gaps__list {
  display: grid;
  gap: 12px;
  margin: 4px 0 0;
  padding: 0 0 0 22px;
}

.rc-gaps__list li {
  padding-left: 4px;
}

.rc-gap__label {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--tc-ink);
}

.rc-gaps__list .rc-item__next {
  margin: 6px 0 0;
}

.rc-copy {
  display: grid;
  gap: 8px;
  margin: 20px 0 0;
  padding: 16px;
  background: var(--foam-50);
  border: 1px solid var(--tc-edge);
  border-radius: var(--tc-radius-md);
}

.rc-copy__text {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
}

/* ==========================================================================
   5. RELATED + DISCLOSURE
   ========================================================================== */

.rc-related {
  padding: 22px 24px;
  background: var(--foam-100);
  border: 1px solid var(--sky-400);
  border-radius: var(--radius-lg);
}

.rc-related__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--pacific-900);
}

.rc-related__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.55;
  color: var(--pacific-900);
}

.rc-related__list a {
  color: var(--pacific-900);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}

.rc-disclosure {
  max-width: 88ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--pacific-700);
}

.rc-disclosure p {
  margin: 0;
}

/* ==========================================================================
   6. NARROW SCREENS
   ========================================================================== */

@media (max-width: 640px) {
  .rc-item {
    padding: 14px 12px;
  }

  .rc-related {
    padding: 18px 16px;
  }

  .rc-gaps__list {
    padding-left: 18px;
  }
}

/* ==========================================================================
   7. REDUCED MOTION
   Nothing on this page carries meaning through movement, so removing motion
   removes nothing at all. Every word, state, border and count stays.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .rc-page *,
  .rc-page *::before,
  .rc-page *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}