/* ============================================================
 * eligibility-result.css — /eligibility-check-result
 *
 * A Medicare eligibility result, shown in full: the display reference
 * the App is redesigned from. Verdict colours and chip treatment per
 * canon/visual/colour-palette.md §"Eligibility verdicts"; concept→glyph
 * map per the brand bank's icons.html.
 *
 * Static HTML and CSS; expand/collapse is native <details>.
 * Muted text is Stone 60, never Stone 40 (fails the AA floor at these
 * sizes; the CI a11y gate catches it).
 * Tokens only — no raw hex beyond what brand.css defines.
 * ============================================================ */


/* ============================================================ */
/* 0 · VERDICT ALIASES                                            */
/* ============================================================ */
/* One place maps a verdict class to its hue, so every component below
   reads `var(--v)` instead of restating the branch. Values and rules:
   colour-palette.md §"Eligibility verdicts". */
.v-yes   { --v: var(--verdict-eligible); }          /* 5.8:1 on Paper */
.v-no    { --v: var(--verdict-not-eligible); }      /* 6.2:1 */
.v-maybe { --v: var(--verdict-cannot-determine); }  /* 6.1:1 */
/* No .v-idle on purpose: IsEligible only returns true / false / null;
   a fourth state here would imply the API can return one. */

/* Icons are monochrome via currentColor (iconography.md §Colour rule 1), so
   a glyph always matches the label it sits beside. Belt and braces alongside
   fill="currentColor" on each <symbol>. */
svg use { fill: currentColor; }


/* ============================================================ */
/* 1 · HERO                                                       */
/* ============================================================ */
.showcase-hero {
  padding-block: var(--space-section-generous);
  text-align: center;
}
.showcase-hero .label-s { display: block; color: var(--color-royal); margin-block-end: var(--space-20); }
/* Type comes from brand.css's .display-xl utility (the canonical page-hero
   style every other page uses) — only layout is set here. Restating
   font-size/line-height/tracking locally is how a page drifts off the
   scale. */
.showcase-hero h1 {
  margin: 0 auto var(--space-24);
  max-inline-size: 18ch;
}
.showcase-hero .lede {
  font-size: var(--type-body-l);
  line-height: 1.65;
  color: var(--color-stone-60);
  max-inline-size: 58ch;
  margin-inline: auto;
}


/* ============================================================ */
/* 2 · THE RESULT CARD                                            */
/* ============================================================ */
/* The card lives inside the hero section — one page title, then the
   artefact. It resets the hero's centred text. */
.showcase-hero .result { text-align: start; margin-block-start: var(--space-48); }

.result {
  display: block;
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-soft);
  padding: var(--space-32);
  /* The one shadow on the page: a single soft lift that separates the
     result from the page beneath it. Not decoration — it says "this is
     the artefact", and nothing else on the page carries one. */
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-midnight) 4%, transparent),
              0 12px 32px -12px color-mix(in srgb, var(--color-midnight) 10%, transparent);
}
@media (min-width: 48rem) {
  .result { padding: var(--space-48); }
}

/* --- who was checked --------------------------------------------------- */
.subject {
  display: grid;
  gap: var(--space-24);
  padding-block-end: var(--space-24);
  border-block-end: 1px solid var(--color-stone-20);
}
.subject-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--type-label-s);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-royal);
  margin-block-end: var(--space-8);
}
.subject-name {
  font-family: var(--font-display);
  font-size: var(--type-title-l);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-midnight);
  margin: 0;
}
.subject-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16) var(--space-32);
}
.fact { display: flex; flex-direction: column; gap: 2px; }
.fact-label {
  font-size: var(--type-label-s);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-stone-60);
}
.fact-value {
  font-size: var(--type-body-s);
  color: var(--color-midnight);
  font-variant-numeric: tabular-nums;
}
.fact-value.mono { font-family: var(--font-mono); letter-spacing: 0.01em; }
.fact-value.muted { color: var(--color-stone-60); }
.fact-value .irn { color: var(--color-stone-60); }

/* --- did Medicare know them ------------------------------------------- */
/* Same anatomy as an item card: 3px verdict edge, hairline border, flat
   tint. If the two components state a verdict, they must look like siblings.

   Flat tint, not the App's 135° gradient. A gradient that fades out by 60%
   of its axis lands differently depending on the card's height, so a short
   banner and a tall expanded item read as different strengths of the same
   state. A flat tint is identical at every size. (Brand canon allows
   single-hue gradients only where they separate structure or add measured
   lift — this one does neither.) */
.verification {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  margin-block-start: var(--space-24);
  padding: var(--space-16);
  border-radius: var(--radius-default);
  background: color-mix(in srgb, var(--v) 4%, var(--color-paper));
  border: 1px solid color-mix(in srgb, var(--v) 20%, var(--color-stone-20));
  border-inline-start: 3px solid var(--v);
}
/* A plain glyph in the verdict colour, not a knocked-out glyph on a filled
   disc: reversing out of a small circle drops the effective contrast and
   costs legibility for no gain. Same treatment the App uses. */
.verification-mark {
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  flex-shrink: 0;
  color: var(--v);
  margin-block-start: 1px;
}
.verification-mark svg { inline-size: 20px; block-size: 20px; }
/* list-checks = "eligibility check", the App's own header glyph. */
.subject-eyebrow svg { inline-size: 14px; block-size: 14px; flex-shrink: 0; }
.verification-text { min-inline-size: 0; }
.verification-title {
  font-size: var(--type-body-s);
  font-weight: 600;
  color: var(--v);
  margin: 0 0 2px;
}
.verification-reason {
  font-size: var(--type-body-s);
  line-height: 1.6;
  color: var(--color-stone-60);
  margin: 0;
}

/* Medicare's correction, offered as something to act on. */
.fixes { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-block-start: var(--space-12); }
.fix {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-12);
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-pill);
}
/* sparkle = "suggested correction", matching the App's corrections list. */
.fix-icon { inline-size: 12px; block-size: 12px; color: var(--v); flex-shrink: 0; align-self: center; }
.fix-label { font-size: var(--type-label-m); color: var(--color-stone-60); }
/* Entered value struck through, correct value beside it: the chip reads as
   a fix ready to apply, not a sentence to interpret. The App renders these
   same pairs with an Apply button; here nothing is clickable, so no
   button-shaped mock. */
.fix-old {
  font-family: var(--font-mono);
  font-size: var(--type-body-s);
  color: var(--color-stone-60);
  text-decoration: line-through;
}
.fix-value {
  font-family: var(--font-mono);
  font-size: var(--type-body-s);
  font-weight: 600;
  color: var(--color-midnight);
}
.fix-old + .fix-value::before {
  content: "→ " / "";
  color: var(--color-stone-60);
  font-weight: 400;
}

/* --- the headline outcome ---------------------------------------------- */
.outcome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  margin-block-start: var(--space-32);
  padding-block: var(--space-24);
  border-block: 1px solid var(--color-stone-20);
}
.outcome-counts { display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-24); }
.count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--type-body-s);
  color: var(--color-stone-60);
}
.count svg { inline-size: 13px; block-size: 13px; color: var(--v); flex-shrink: 0; }
.count b {
  font-size: var(--type-body-m);
  font-weight: 600;
  color: var(--v);
  font-variant-numeric: tabular-nums;
}
.outcome-total { text-align: end; margin-inline-start: auto; }
.outcome-total-label {
  display: block;
  font-size: var(--type-label-s);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-stone-60);
  margin-block-end: 2px;
}
/* The number people came for — the page's one big-number moment. */
.outcome-total-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--type-hero-num);
  line-height: 1;
  color: var(--color-midnight);
  font-variant-numeric: tabular-nums;
}

/* --- one item ---------------------------------------------------------- */
.rebate-list { list-style: none; margin: var(--space-24) 0 0; padding: 0; display: grid; gap: var(--space-16); }

/* The verdict edge is a real border, not an absolutely-positioned sliver.
   A 3px element carrying a 12px corner radius pinches into a teardrop;
   as a border the browser mitres it into the adjacent corners cleanly. */
.rebate {
  padding: var(--space-24);
  border: 1px solid color-mix(in srgb, var(--v) 20%, var(--color-stone-20));
  border-inline-start: 3px solid var(--v);
  border-radius: var(--radius-default);
  background: color-mix(in srgb, var(--v) 4%, var(--color-paper));
}

.rebate-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  justify-content: space-between;
}
.rebate-item {
  font-family: var(--font-mono);
  font-size: var(--type-title-s);
  font-weight: 600;
  color: var(--color-midnight);
  letter-spacing: -0.01em;
}
.rebate-item-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--type-label-s);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-stone-60);
  margin-block-end: 2px;
}

/* Tinted chip — light same-hue fill, no border, label and icon in the
   verdict 600 (canon treatment; solid reads as a button, outline as an
   input). Mixed over Paper so it lifts off the card's 4% tint. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-12);
  font-size: var(--type-label-m);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--v);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--v) 12%, var(--color-paper));
  white-space: nowrap;
}
.pill svg { inline-size: 12px; block-size: 12px; flex-shrink: 0; }

.rebate-figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-32);
  margin-block-start: var(--space-20);
}
.figure { display: flex; flex-direction: column; gap: 2px; }
.figure-label {
  font-size: var(--type-label-s);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-stone-60);
}
.figure-value {
  font-family: var(--font-mono);
  font-size: var(--type-title-m);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-midnight);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.figure-value.muted { font-size: var(--type-title-s); font-weight: 400; color: var(--color-stone-60); }

/* Reason — verbatim, in ink. Services Australia requires its messages
   reach the end user exactly as supplied. */
.rebate-reason {
  font-size: var(--type-body-s);
  line-height: 1.65;
  color: var(--color-stone-90);
  margin: var(--space-20) 0 0;
  max-inline-size: 72ch;
}


/* --- the checks -------------------------------------------------------- */
.checks { margin-block-start: var(--space-20); }
.checks > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  list-style: none;
  font-size: var(--type-body-s);
  font-weight: 600;
  color: var(--color-royal);
  padding: var(--space-4) 0;
}
.checks > summary::-webkit-details-marker { display: none; }
.checks > summary::before {
  content: "";
  inline-size: 0; block-size: 0;
  border-inline-start: 5px solid currentColor;
  border-block: 4px solid transparent;
  transition: transform var(--duration-instant) var(--ease-standard);
  flex-shrink: 0;
}
.checks[open] > summary::before { transform: rotate(90deg); }
.checks > summary:hover { color: var(--color-navy); }
.checks > summary:focus-visible { outline: 2px solid var(--color-royal); outline-offset: 3px; border-radius: var(--radius-xs); }

.checks .check-list {
  list-style: none;
  margin: var(--space-16) 0 0;
  padding: var(--space-20);
  display: grid;
  gap: var(--space-16);
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
}

/* The count of checks that had a finding — the bit worth reading first. */
.checks-flag {
  display: inline-block;
  margin-inline-start: var(--space-4);
  padding: 1px var(--space-8);
  font-size: var(--type-label-s);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--v);
  background: color-mix(in srgb, var(--v) 10%, transparent);
  border-radius: var(--radius-pill);
}


/* Mark · name · finding. At wide widths the name gets its own column so
   the checks scan vertically; at narrow it stacks under the mark. */
/* Placement is explicit, not implicit: with three children and two columns,
   auto-flow drops the finding into the 18px mark column and it wraps one
   word per line. Narrow = name over finding beside the mark; wide = all
   three in a row. */
.check-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-4) var(--space-12);
  align-items: start;
  font-size: var(--type-body-s);
}
.check-row .check-mark    { grid-column: 1; grid-row: 1; }
.check-row .check-name    { grid-column: 2; grid-row: 1; }
.check-row .check-finding { grid-column: 2; grid-row: 2; }

@media (min-width: 40rem) {
  .check-row {
    grid-template-columns: 18px minmax(10rem, 13rem) minmax(0, 1fr);
    align-items: baseline;
  }
  .check-row .check-finding { grid-column: 3; grid-row: 1; }
}
.check-mark {
  display: grid;
  place-items: center;
  inline-size: 16px;
  block-size: 16px;
  color: var(--v);
  align-self: start;
}
.check-mark svg { inline-size: 14px; block-size: 14px; }
.check-name { font-weight: 600; color: var(--color-midnight); line-height: 1.5; }
.check-finding { color: var(--color-stone-60); line-height: 1.6; }
/* Spelled out so the verdict never rests on colour (WCAG 1.4.1). The three
   glyphs already differ by shape, so a cleared check doesn't need the word
   on screen too — repeated down a list of seven it is pure noise. It stays
   in the accessibility tree, and shows visually on the checks that carry
   something the reader must act on. */
.check-state {
  display: inline-block;
  margin-inline-start: var(--space-8);
  font-size: var(--type-label-s);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--v);
  white-space: nowrap;
}
.check-row.v-yes .check-state {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Provenance — where the answers came from. Small print, deliberately the
   quietest line on the card. */
.result-foot {
  margin: var(--space-24) 0 0;
  padding-block-start: var(--space-16);
  border-block-start: 1px solid var(--color-stone-20);
  font-size: var(--type-label-m);
  color: var(--color-stone-60);
}


/* ============================================================ */
/* 3 · SECTION HEADS — shared by the sections below              */
/* ============================================================ */
.idea-head { max-inline-size: 60ch; margin-block-end: var(--space-48); }
.idea-head .label-s { display: block; color: var(--color-royal); margin-block-end: var(--space-16); }
.idea-head h2 { color: var(--color-midnight); line-height: 1.12; margin: 0; }
.idea-head .lede {
  font-size: var(--type-body-l);
  line-height: 1.65;
  color: var(--color-stone-60);
  margin-block-start: var(--space-20);
}



/* ============================================================ */
/* 4 · PATIENT VERIFICATION — the same component, four outcomes   */
/* ============================================================ */
.showcase-states { padding-block: var(--space-section-generous); }

/* A component gallery, not four whole results: the only thing that varies
   between these is the verification banner, so that is all we show. */
.vcase-stack { display: grid; gap: var(--space-32); }
.vcase {
  display: grid;
  gap: var(--space-16);
  align-items: start;
  padding-block-start: var(--space-32);
  border-block-start: 1px solid var(--color-stone-20);
}
.vcase:first-child { padding-block-start: 0; border-block-start: 0; }
@media (min-width: 56rem) {
  .vcase { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: var(--space-32); }
}
.vcase-label h3 {
  font-family: var(--font-sans);
  font-size: var(--type-body-m);
  font-weight: 600;
  color: var(--color-midnight);
  margin: 0 0 var(--space-4);
}
.vcase-label p {
  font-size: var(--type-body-s);
  line-height: 1.6;
  color: var(--color-stone-60);
  margin: 0;
}
/* Inside the gallery the banner is the subject, so it loses the top margin
   it carries when it sits under a patient header. */
.vcase .verification { margin-block-start: 0; }


/* ============================================================ */
/* 5 · DEVELOPER SPEC                                             */
/* ============================================================ */
.showcase-spec {
  padding-block: var(--space-section-generous);
  background: var(--color-paper-dark);
  border-block: 1px solid var(--color-stone-20);
}
.spec-h {
  font-family: var(--font-sans);
  font-size: var(--type-title-s);
  font-weight: 600;
  color: var(--color-midnight);
  margin: var(--space-48) 0 var(--space-16);
}
.spec-h:first-of-type { margin-block-start: 0; }

/* --- the response itself ------------------------------------------------ */
/* The one code block on the site. 13px mono matches the inline-code size
   integrations.html established; the block sits on Paper so it reads as a
   sibling of the spec table beside it. Long Reason strings stay on one
   line — code scrolls in its own container rather than wrapping into
   something that no longer looks like JSON. */
.spec-sample { margin: 0 0 var(--space-24); }
.spec-sample pre {
  margin: 0;
  padding: var(--space-24);
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
  overflow-x: auto;
}
.spec-sample code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-midnight);
}
/* Two tones only: property names in Navy, values in ink. A full syntax
   rainbow would put more accent colours on one surface than the canon
   allows, and the names are what the rules below refer back to. */
.j-k { color: var(--color-navy); }
/* Margin notes tie a line to the rendered component above. Sans, muted,
   arrow drawn in CSS like every other arrow on the site. The arrow is
   decorative, so it's silenced for screen readers. */
.j-note {
  font-family: var(--font-sans);
  font-size: var(--type-label-m);
  color: var(--color-stone-60);
  margin-inline-start: var(--space-16);
}
.j-note::before { content: "→ " / ""; }
/* Elisions — honest trims, styled as annotation rather than code so the
   payload never appears to contain "…" literals. */
.j-ell {
  font-family: var(--font-sans);
  font-size: var(--type-label-m);
  color: var(--color-stone-60);
}
.spec-sample-cap {
  margin-block-start: var(--space-12);
  font-size: var(--type-body-s);
  line-height: 1.6;
  color: var(--color-stone-60);
}
/* In-text link, so it carries an underline (WCAG link-in-text-block). */
.spec-sample-cap a {
  color: var(--color-royal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.spec-sample-cap a:hover { color: var(--color-navy); }

.spec-table {
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
  background: var(--color-paper);
  overflow: hidden;
}
.spec-row {
  display: grid;
  gap: var(--space-4) var(--space-16);
  padding: var(--space-16);
  font-size: var(--type-body-s);
  line-height: 1.6;
  border-block-start: 1px solid var(--color-stone-20);
}
.spec-row:first-child { border-block-start: 0; }
@media (min-width: 46rem) {
  .spec-row { grid-template-columns: minmax(0,3fr) minmax(0,3fr) minmax(0,6fr); align-items: baseline; }
}
.spec-head {
  background: var(--color-stone-05);
  font-size: var(--type-label-s);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-stone-60);
}
.spec-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-weight: 600;
  color: var(--v);
}
.spec-state svg { inline-size: 14px; block-size: 14px; flex-shrink: 0; }
.spec-row > span:last-child { color: var(--color-stone-60); }
.spec-row code, .spec-rules code, .idea-head code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-navy);
  background: var(--color-mist);
  border-radius: var(--radius-xs);
  padding: 0 0.3em;
}

.spec-rules {
  margin: 0;
  padding-inline-start: var(--space-24);
  display: grid;
  gap: var(--space-12);
}
.spec-rules li { font-size: var(--type-body-s); line-height: 1.65; color: var(--color-stone-60); }
.spec-rules li::marker { color: var(--color-stone-60); }
.spec-rules b { color: var(--color-midnight); font-weight: 600; }

.spec-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16) var(--space-32);
  margin: var(--space-32) 0 0;
}



/* ============================================================ */
/* 6 · CLOSE                                                      */
/* ============================================================ */
.showcase-close { padding-block: var(--space-section-generous); text-align: center; }
.showcase-close h2 { color: var(--color-midnight); margin: 0 0 var(--space-20); }
.showcase-close .lede {
  font-size: var(--type-body-l);
  line-height: 1.65;
  color: var(--color-stone-60);
  max-inline-size: 58ch;
  margin: 0 auto var(--space-32);
}
/* .cta-options (the closing triad) comes from brand.css. */


/* ============================================================ */
/* 7 · MEDIA-FEATURE RESPONSES                                    */
/* ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .checks > summary::before { transition: none; }
}
@media print {
  .result { box-shadow: none; }
  .checks[open] > summary::before { transform: none; }
}