/* =============================================================================
   IPCRG Competences — styles
   An evolution of the IPCRG homepage identity:
     · Poppins headings + Roboto body, on white
     · IPCRG Dark Blue #005d99, deep navy #003b56, bright cyan #02b9f5
     · pill buttons, deep-navy footer band
   Condition sub-brands (COPD Right Care blue, Asthma Right Care green) colour
   each section via the --cond-* custom properties set inline by app.js.
============================================================================= */

:root {
  /* IPCRG core (style guide + web) */
  --ipcrg-blue:   #005d99;   /* IPCRG Dark Blue — headings */
  --ipcrg-navy:   #003b56;   /* deep navy — footer, strong text */
  --ipcrg-action: #006a95;   /* interactive blue (homepage links/buttons) */
  --ipcrg-cyan:   #02b9f5;   /* bright accent */
  --ipcrg-red:    #ee343f;   /* IPCRG Red — sparing accent */

  --ink:      #212529;
  --muted:    #51606b;
  --faint:    #7a8791;
  --line:     #dbe6ee;
  --surface:  #ffffff;
  --tint:     #f1f7fb;   /* very light blue-grey section band */
  --tint-2:   #e7f1f8;

  /* self-assessment ratings */
  --gap:        #ee343f;   /* IPCRG red */
  --developing: #f5a623;   /* amber */
  --confident:  #2cb34a;   /* IPCRG green */

  /* per-condition brand, overridden inline by app.js */
  --cond-primary: var(--ipcrg-action);
  --cond-dark:    var(--ipcrg-navy);

  --radius:    14px;
  --radius-sm: 9px;
  --pill:      800px;
  --shadow:    0 1px 2px rgba(3,40,66,.06), 0 8px 24px rgba(3,40,66,.08);
  --shadow-sm: 0 1px 2px rgba(3,40,66,.08);
  --wrap:      1140px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 28px; }
a { color: var(--ipcrg-action); }

h1, h2, h3, .display {
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  color: var(--ipcrg-blue);
  font-weight: 600;
  line-height: 1.15;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ipcrg-action); color: #fff;
  padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; z-index: 30;
}
.skip:focus { left: 0; }

/* ---------- Top brand bar --------------------------------------------------- */
.brandbar { border-bottom: 1px solid var(--line); background: #fff; }
.brandbar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: 16px;
}
.brandbar__logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brandbar__logo img { height: 54px; width: auto; display: block; }
.brandbar__product {
  font-family: "Poppins", sans-serif; font-weight: 600; color: var(--ipcrg-navy);
  font-size: 1.02rem; letter-spacing: .01em; padding-left: 14px; border-left: 2px solid var(--line);
}
.brandbar__product span { display: block; font-weight: 400; font-size: .8rem; color: var(--faint); }
.brandbar__home {
  font-family: "Poppins", sans-serif; font-size: .86rem; font-weight: 500;
  color: var(--ipcrg-action); text-decoration: none; white-space: nowrap;
}
.brandbar__home:hover { text-decoration: underline; }
.brandbar__right { display: flex; align-items: center; gap: 18px; }
.brandbar__sub { height: 42px; width: auto; display: block; }
.brandbar__cta {
  font-family: "Poppins", sans-serif; font-size: .84rem; font-weight: 600; white-space: nowrap;
  color: #fff; background: var(--ipcrg-action); border: 1.5px solid var(--ipcrg-action);
  border-radius: var(--pill); padding: 8px 16px; text-decoration: none; transition: .15s ease;
}
.brandbar__cta:hover { background: var(--ipcrg-navy); border-color: var(--ipcrg-navy); }

/* ---------- Hero ------------------------------------------------------------ */
.hero { background: linear-gradient(180deg, #fff 0%, var(--tint) 100%); border-bottom: 1px solid var(--line); }
.hero__inner { padding-block: 52px 40px; display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.hero__text { min-width: 0; }
.hero__media { display: none; }
.hero__media a { display: block; }
.hero__media img {
  width: 100%; height: auto; display: block; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.hero__media a:hover img { box-shadow: 0 4px 10px rgba(3,40,66,.14), 0 16px 40px rgba(3,40,66,.16); }
.hero__media-cap {
  display: block; text-align: center; margin-top: 12px; font-family: "Poppins", sans-serif;
  font-size: .82rem; font-weight: 600; color: var(--ipcrg-action);
}
@media (min-width: 940px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
  .hero__media { display: block; }
}
.eyebrow {
  margin: 0 0 14px; letter-spacing: .16em; text-transform: uppercase;
  font-size: .74rem; font-weight: 600; color: var(--ipcrg-action);
  font-family: "Poppins", sans-serif;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin: 0 0 12px; letter-spacing: -.01em; }
.lede { font-size: clamp(1.12rem, 2vw, 1.4rem); color: var(--ipcrg-navy); margin: 0 0 20px; max-width: 44ch; font-weight: 500; }
.intro { color: var(--muted); max-width: 70ch; margin: 0 0 30px; font-size: 1.02rem; }

/* ---------- Progress -------------------------------------------------------- */
.progress {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px 24px; max-width: 660px;
}
.progress__count { display: flex; align-items: baseline; gap: 10px; }
.progress__count #progress-done {
  font-family: "Poppins", sans-serif; font-size: 2.5rem; font-weight: 600; line-height: 1; color: var(--ipcrg-blue);
}
.progress__of { color: var(--muted); font-size: .96rem; }
.progress__bar {
  display: flex; height: 10px; margin: 16px 0 14px;
  background: var(--tint-2); border-radius: var(--pill); overflow: hidden; border: 1px solid var(--line);
}
.progress__fill { height: 100%; width: 0; transition: width .35s ease; }
.progress__legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0;
  font-size: .85rem; color: var(--muted);
}
.progress__legend b { color: var(--ink); font-weight: 600; margin-left: 2px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }

.honesty {
  margin: 26px 0 0; color: var(--muted); font-size: .92rem; max-width: 74ch;
  border-left: 3px solid var(--ipcrg-cyan); padding: 4px 0 4px 16px; background: var(--tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding-block: 12px; padding-right: 16px;
}

/* ---------- Toolbar / filters ---------------------------------------------- */
.toolbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.toolbar__inner { display: flex; align-items: center; gap: 16px; padding-block: 10px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  appearance: none; cursor: pointer; background: #fff; color: var(--ipcrg-navy);
  border: 1.5px solid var(--line); border-radius: var(--pill);
  padding: 8px 18px; font: inherit; font-size: .9rem; font-weight: 500; font-family: "Poppins", sans-serif;
  transition: .15s ease;
}
.chip:hover { border-color: var(--ipcrg-action); color: var(--ipcrg-action); }
.chip[aria-selected="true"] { background: var(--ipcrg-action); color: #fff; border-color: var(--ipcrg-action); }
.chip .chip__n { opacity: .7; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* "Reset my answers" was a nearly invisible text link — transparent
   background, faint grey text, a border that only appeared on hover — and
   people missed it (Luís, 8 Sept 2026). It is now a real button in a soft
   amber: light enough not to compete with the condition colours or the dark
   "View your badge" button next to it, but no longer something you have to
   hunt for. Fixed hex values, not the --developing amber of the rating
   scale, so the two never drift into each other. */
.reset {
  appearance: none; cursor: pointer; font: inherit;
  font-family: "Poppins", sans-serif; font-size: .86rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  color: #7c5310; background: #fdf1d5; border: 1.5px solid #edc55f;
  border-radius: var(--pill); padding: 9px 18px;
  box-shadow: var(--shadow-sm); transition: .15s ease;
}
.reset::before { content: "\21BA"; font-size: 1.05rem; line-height: 1; }
.reset:hover { background: #fbe4ab; border-color: #dda92c; color: #6a4409; }
.reset:focus-visible { outline: 2px solid #dda92c; outline-offset: 2px; }

/* ---------- Condition block ------------------------------------------------- */
.condition { padding: 46px 0 8px; }
.condition--tinted { background: var(--tint); border-block: 1px solid var(--line); }
.condition__head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 3px solid var(--cond-primary);
}
.condition__titles { display: flex; flex-direction: column; gap: 2px; }
.condition__title { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 0; color: var(--cond-dark); }
.condition__tagline { color: var(--muted); font-size: .95rem; }
.condition__brand { display: flex; align-items: center; gap: 18px; }
.condition__brand img { height: 58px; width: auto; display: block; }
.condition__link { color: var(--cond-dark); text-decoration: none; font-size: .9rem; font-weight: 600; white-space: nowrap; font-family: "Poppins", sans-serif; }
.condition__link:hover { text-decoration: underline; }

/* ---------- Stage ----------------------------------------------------------- */
.stage { margin-top: 48px; scroll-margin-top: 80px; }
.stage__bar { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; }
.stage__label {
  font-family: "Poppins", sans-serif; font-size: clamp(1.5rem, 3vw, 2.15rem);
  letter-spacing: -.01em; font-weight: 600; color: var(--cond-dark); margin: 0;
  padding-left: 16px; border-left: 6px solid var(--cond-primary); line-height: 1.1;
}
.stage__rule { flex: 1; height: 2px; background: color-mix(in srgb, var(--cond-primary) 35%, var(--line)); }
.stage__heading { color: var(--muted); margin: 0 0 22px; max-width: 82ch; font-size: 1.05rem; }

/* ---------- Grid + cards ---------------------------------------------------- */
/* align-items: start so a short card stops at its content instead of
   stretching to the row height and leaving a block of white space */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(345px, 100%), 1fr)); gap: 20px; align-items: start; }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 24px; display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden; transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: var(--shadow); }
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--rating-color, var(--cond-primary)); opacity: .95;
}

.card__title { font-size: 1.02rem; line-height: 1.42; margin: 0; color: var(--ink); font-weight: 600; }

.section-label {
  font-family: "Poppins", sans-serif; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--cond-dark); margin: 2px 0 -4px;
}

.competences { margin: 0; padding-left: 18px; color: var(--ink); font-size: .92rem; display: grid; gap: 7px; }
.competences li::marker { color: var(--cond-primary); }
.competences--sub {
  margin: 6px 0 0; padding-left: 16px; font-size: .88rem; color: var(--muted); gap: 5px;
}
.competences--sub li::marker { color: color-mix(in srgb, var(--cond-primary) 55%, #fff); }

/* collapsible "Clinicians should be competent to" dropdown */
.drop {
  border: 1.5px solid color-mix(in srgb, var(--cond-primary) 40%, var(--line));
  border-radius: var(--radius-sm); overflow: hidden; background: #fff;
}
.drop__summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; font-family: "Poppins", sans-serif; font-weight: 600;
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cond-dark);
  background: color-mix(in srgb, var(--cond-primary) 9%, #fff); transition: background .15s ease;
}
.drop__summary::-webkit-details-marker { display: none; }   /* hide default triangle */
.drop__summary::marker { content: ""; }
.drop__summary:hover { background: color-mix(in srgb, var(--cond-primary) 16%, #fff); }
.drop__summary:focus-visible { outline: 2px solid var(--cond-primary); outline-offset: 2px; }
.drop__meta { display: flex; align-items: center; gap: 9px; flex: none; }
.drop__count {
  font-size: .72rem; font-weight: 700; color: #fff; background: var(--cond-primary);
  border-radius: var(--pill); min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0;
}
.drop__chevron { display: inline-block; color: var(--cond-primary); font-size: .7rem; line-height: 1; }
/* Drive content visibility explicitly (not all engines hide closed <details>) */
.drop > .competences,
.drop > .resources { display: none; padding: 4px 14px 14px; }
.drop[open] > .competences { display: grid; }
.drop[open] > .resources { display: flex; }
.drop[open] .drop__summary { border-bottom: 1px solid color-mix(in srgb, var(--cond-primary) 22%, var(--line)); }

.resources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.resource {
  display: flex; align-items: center; gap: 9px; color: var(--ipcrg-navy); text-decoration: none; font-size: .9rem;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; transition: .15s ease;
}
a.resource { color: var(--ipcrg-action); }
a.resource:hover { text-decoration: underline; }
.resource:hover { border-color: var(--cond-primary); background: color-mix(in srgb, var(--cond-primary) 7%, #fff); }
.resource__ico { flex: none; width: 1.2em; text-align: center; }
.resource__label { flex: 1; }
.resource__arrow { color: var(--cond-primary); font-weight: 700; }
.resource--pending { cursor: default; color: var(--faint); background: var(--tint); }
.resource--pending:hover { border-color: var(--line); background: var(--tint); }
.resource--pending .resource__arrow { color: var(--faint); font-weight: 400; font-size: .74rem; font-style: italic; }

/* .methods / .method: teaching methods are still held in data.js but are no
   longer rendered on the cards, so their styles are retired with them. */

/* rating control */
.rate {
  border: 1.5px solid color-mix(in srgb, var(--cond-primary) 30%, var(--line));
  background: color-mix(in srgb, var(--cond-primary) 5%, #fff);
  border-radius: var(--radius-sm); padding: 12px 14px 13px;
}
.rate__label {
  font-family: "Poppins", sans-serif; font-size: .84rem; font-weight: 600;
  color: var(--cond-dark); line-height: 1.35; margin: 0 0 9px;
}
.rate__btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.rate__btn {
  appearance: none; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 500; font-family: "Poppins", sans-serif;
  background: #fff; color: var(--muted); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 6px; transition: .12s ease; text-align: center;
}
.rate__btn:hover { border-color: var(--cond-primary); color: var(--cond-dark); }
.rate__btn[aria-pressed="true"] { color: #fff; font-weight: 600; }

/* placeholder card */
.card--placeholder {
  border-style: dashed; background: var(--tint); box-shadow: none;
  align-items: flex-start; justify-content: center; text-align: left; min-height: 150px;
}
.card--placeholder::before { opacity: .4; }
.card--placeholder .card__title { color: var(--muted); font-size: 1.05rem; }
.card--placeholder .pending-note { color: var(--faint); font-size: .88rem; margin: 0; }

/* ---------- Condition hero -------------------------------------------------- */
.hero--condition {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cond-primary) 12%, #fff) 0%, #fff 78%);
  border-bottom: 3px solid var(--cond-primary);
}
.hero--condition h1 { color: var(--cond-dark); }
.hero--condition .eyebrow { color: var(--cond-dark); }
.hero--condition .lede { color: var(--cond-dark); }
.hero--condition .honesty { border-left-color: var(--cond-primary); }
.hero--condition .progress__count #progress-done { color: var(--cond-dark); }

/* ---------- Home: a centred choice, then the explanation -------------------- */
/* Google-style landing (Hugo, 29 Sept 2026, via a three-member design
   committee): a light brand bar, then the two condition cards centred in
   whatever height is left, with the title above them the way a logo sits above
   a search box. All explanatory text sits below the fold. Every rule is scoped
   to body.home or to classes only the home page uses (.home-*, .banner*), so
   copd.html and asthma.html cannot be affected. */
/* The brand bar matches the condition pages exactly (same logo size and
   height), so nothing jumps when a card is clicked. Its height is pinned to that
   natural height so the stage below can subtract it precisely. */
.home { --home-bar: 86px; }
.home .brandbar__inner { height: var(--home-bar); padding-block: 0; flex-wrap: nowrap; }
.home .brandbar__right { flex: 0 0 auto; }

.home-stage {
  display: flex; align-items: center;
  min-height: calc(100vh - var(--home-bar) - 1px);
  min-height: calc(100svh - var(--home-bar) - 1px);
  /* a little more room below than above: the block sits just above the
     optical centre, as it does on google.com */
  padding-block: clamp(24px, 5vh, 56px) clamp(32px, 10vh, 104px);
}
.home-stage__inner { width: 100%; text-align: center; }
.home-title { font-size: clamp(1.75rem, 3vw, 2.625rem); letter-spacing: -.01em; margin: 0 0 10px; text-wrap: balance; }
.home-lede {
  text-wrap: balance;
  font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.5; color: var(--muted);
  max-width: 44ch; margin: 0 auto 40px;
}

/* the two cards: equal, capped, centred */
.banners { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; gap: 24px; }
.banner {
  --cond-primary: var(--ipcrg-action); --cond-dark: var(--ipcrg-navy);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  text-decoration: none; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(3,40,66,.06);
  padding: 32px 28px 0;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.banner::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--cond-primary); }
.banner:hover {
  border-color: var(--cond-primary); transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(3,40,66,.06), 0 8px 24px rgba(3,40,66,.10);
}
/* the light brand colours fail as a focus ring (2.7:1); the dark ones pass */
.banner:focus-visible { outline: 3px solid var(--cond-dark); outline-offset: 3px; }
.banner__body { display: flex; flex-direction: column; align-items: center; width: 100%; padding-bottom: 24px; }
.banner__head { margin-bottom: 20px; }
.banner__logo { height: 48px; width: auto; display: block; }
.banner__title { font-size: 1.75rem; margin: 0; color: var(--cond-dark); }
/* progress appears only once something has been answered (app.js) */
.banner__progress { width: 100%; margin-top: 14px; }
.banner__bar { display: flex; max-width: 200px; margin-inline: auto; height: 6px; background: var(--tint-2); border-radius: var(--pill); overflow: hidden; }
.banner__seg { height: 100%; width: 0; }
.banner__count { font-size: .875rem; color: var(--muted); margin: 8px 0 0; }
.banner__cta {
  align-self: stretch; margin-top: auto; padding: 16px 0 18px; border-top: 1px solid var(--line);
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: .9375rem; color: var(--cond-dark);
}
.banner__arrow { display: inline-block; margin-left: 8px; color: var(--cond-primary); transition: transform .2s ease; }
.banner:hover .banner__arrow { transform: translateX(4px); }

/* ---------- Home: faint background decoration ----------------------------
   Hugo, 29 Sept 2026: beautify the white space around the cards with graphics
   at low opacity, "as long as it is not distracting". He chose the rings over
   a faint IPCRG-mark watermark: thin arcs radiating from two corners like a
   breath, COPD blue from the bottom-left and Asthma green from the top-right,
   masked so they fade out well before the title. Pure CSS on the stage's
   pseudo-elements: no markup, never intercepts a click, and it sits behind the
   opaque white cards so nothing is drawn over content. */
.home-stage { position: relative; overflow: hidden; }
.home-stage__inner { position: relative; z-index: 1; }
.home-stage::before, .home-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.home-stage::before {
  background: repeating-radial-gradient(circle at 0% 100%, transparent 0 40px, rgba(67,167,216,.30) 40px 42px);
  -webkit-mask-image: radial-gradient(circle at 0% 100%, #000 0 8%, transparent 30%);
          mask-image: radial-gradient(circle at 0% 100%, #000 0 8%, transparent 30%);
}
.home-stage::after {
  background: repeating-radial-gradient(circle at 100% 0%, transparent 0 40px, rgba(44,179,74,.26) 40px 42px);
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0 8%, transparent 30%);
          mask-image: radial-gradient(circle at 100% 0%, #000 0 8%, transparent 30%);
}

/* below the fold: the explanation as a quiet reading column */
.home-about { background: var(--tint); border-top: 1px solid var(--line); padding-block: 64px; }
.home-about__col { max-width: 680px; margin-inline: auto; }
.home-about .intro-doc { max-width: none; margin: 0; }
.home-about .intro-doc p { color: var(--ink); font-size: 1.0625rem; line-height: 1.65; margin: 0 0 16px; }
.home-about .intro-doc p:last-child { margin-bottom: 0; }
.home-note { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--muted); }
.home .site-footer { margin-top: 0; }

@media (max-width: 860px) {
  .home { --home-bar: 78px; }   /* the shared rules drop the logo to 46px here */
}
@media (max-width: 720px) {
  .banners { grid-template-columns: minmax(0, 440px); gap: 12px; }
}
@media (max-width: 620px) {
  .home { --home-bar: 68px; }   /* 44px logo + 12px above and below */
  /* undo the phone-width wrapping the condition pages need for their busier bar */
  .home .brandbar__inner { flex-wrap: nowrap; padding-block: 0; row-gap: 0; }
  .home .brandbar__right { flex: 0 0 auto; }
  /* designer, second pass: on a phone, centring left a large empty band above
     the title and hid the section below. Top-align instead; both cards still
     fit, and the tinted band peeks up as a cue to scroll. */
  .home-stage { min-height: auto; align-items: flex-start; padding-block: 24px 32px; }
  .home-lede { margin-bottom: 24px; }
  .banner { padding: 22px 18px 0; }
  .banner__head { margin-bottom: 12px; }
  .banner__logo { height: 36px; }
  .banner__title { font-size: 1.375rem; }
  .banner__body { padding-bottom: 16px; }
  .banner__cta { padding: 12px 0 14px; }
  .home-about { padding-block: 40px; }
}
/* short windows (landscape phones, small laptops zoomed in): drop the card
   logos so both cards still fit; no text is lost */
@media (max-height: 560px) and (min-width: 621px) {
  .home-stage { padding-block: 16px 20px; }
  .home-lede { margin-bottom: 20px; }
  .banner { padding-top: 22px; }
  .banner__head { display: none; }
  .banner__body { padding-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .banner:hover, .banner:hover .banner__arrow { transform: none; }
}

/* stage jump chips act as links */
.filters a.chip { text-decoration: none; }

/* multi-bullet "deserve" + to-do note */
.card__deserve-more {
  margin: -4px 0 0; padding-left: 18px; color: var(--ink); font-size: .95rem; display: grid; gap: 5px;
}
.card__deserve-more li::marker { color: var(--cond-primary); }
.todo-note {
  margin: 0; font-size: .88rem; color: var(--muted); font-style: italic;
  background: var(--tint); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 8px 12px;
}

.stages { padding-top: 8px; }

/* ---------- Footer ---------------------------------------------------------- */
.site-footer { margin-top: 56px; background: var(--ipcrg-navy); color: #cfe0ec; }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-block: 34px; }
.site-footer img { height: 46px; width: auto; }
.site-footer p { color: #cfe0ec; font-size: .86rem; margin: 0; max-width: 62ch; }
.site-footer a { color: #fff; }

/* ---------- Introduction (the source document's own intro) ------------------
   This IS the page intro: the opening paragraph always reads, the rest expands
   on demand. Visibility is driven by an explicit class, not <details>, because
   the in-app preview pane does not hide closed <details> natively. */
.intro-doc { max-width: 70ch; margin: 0 0 28px; }
.intro-doc p { color: var(--muted); font-size: 1.02rem; margin: 0 0 14px; }
.intro-doc p:last-child { margin-bottom: 0; }
.intro-doc__more { display: none; }
.intro-doc__more.is-open { display: block; padding-top: 2px; }
.intro-doc__toggle {
  appearance: none; cursor: pointer; font: inherit; font-family: "Poppins", sans-serif;
  font-size: .88rem; font-weight: 600; color: var(--cond-dark);
  background: none; border: 0; padding: 6px 0 0; margin-top: 4px;
}
.intro-doc__toggle:hover { text-decoration: underline; }
.intro-doc__toggle:focus-visible { outline: 2px solid var(--cond-primary); outline-offset: 3px; }

/* ---------- Toolbar actions + version switch -------------------------------- */
/* Action row. It used to sit inside the sticky toolbar, where on a phone it
   helped push that bar to 40% of the viewport. It is one-time UI, not
   navigation, so it lives in the hero and scrolls away. */
.pagetools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }

/* ---------- Completion badge ----------------------------------------------- */
/* Offered once every statement on the page is answered: a button in the
   progress block, and a pop-up with the badge drawn on a canvas (app.js). */
.progress__badge {
  appearance: none; cursor: pointer; margin-top: 16px; font: inherit;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: .88rem; color: #fff;
  background: var(--cond-dark); border: 1.5px solid var(--cond-dark); border-radius: var(--pill);
  padding: 9px 18px; transition: .15s ease;
}
.progress__badge:hover { background: var(--cond-primary); border-color: var(--cond-primary); }
.progress__badge:focus-visible { outline: 2px solid var(--cond-primary); outline-offset: 2px; }

body.has-modal { overflow: hidden; }
.badge-modal {
  position: fixed; inset: 0; z-index: 50; background: rgba(0,59,86,.62);
  display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto;
}
.badge-modal__dialog {
  background: #fff; border-radius: var(--radius); border-top: 6px solid var(--cond-primary);
  box-shadow: 0 24px 64px rgba(3,40,66,.35); width: min(700px, 100%); max-height: 100%;
  overflow-y: auto; padding: 18px 22px 16px;
}
.badge-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.badge-modal__title { font-size: 1.2rem; margin: 0 0 3px; color: var(--cond-dark); }
.badge-modal__sub { margin: 0; color: var(--muted); font-size: .95rem; }
.badge-modal__close {
  appearance: none; cursor: pointer; flex: none; border: 0; background: var(--tint); color: var(--ipcrg-navy);
  width: 36px; height: 36px; border-radius: 50%; font-size: 1.5rem; line-height: 1; padding: 0;
}
.badge-modal__close:hover { background: var(--tint-2); }
.badge-modal__close:focus-visible { outline: 2px solid var(--cond-primary); outline-offset: 2px; }
.badge-modal__figure {
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--tint);
  aspect-ratio: 1200 / 630; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: .9rem;
}
.badge-modal__img { display: block; width: 100%; height: auto; }
.badge-modal__name {
  display: flex; flex-direction: column; gap: 5px; margin-top: 12px;
  font-family: "Poppins", sans-serif; font-size: .86rem; font-weight: 500; color: var(--ipcrg-navy);
}
.badge-modal__name input {
  font: inherit; font-family: "Roboto", sans-serif; font-size: 1rem; color: var(--ink);
  padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); max-width: 360px;
}
.badge-modal__name input:focus { outline: 2px solid var(--cond-primary); outline-offset: 1px; border-color: var(--cond-primary); }
.badge-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.btn {
  appearance: none; cursor: pointer; font: inherit; font-family: "Poppins", sans-serif; font-weight: 600;
  font-size: .88rem; border-radius: var(--pill); padding: 9px 18px; transition: .15s ease; text-decoration: none;
}
.btn--primary { color: #fff; background: var(--cond-dark); border: 1.5px solid var(--cond-dark); }
.btn--primary:hover { background: var(--cond-primary); border-color: var(--cond-primary); }
.btn--ghost { color: var(--cond-dark); background: #fff; border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--cond-primary); background: color-mix(in srgb, var(--cond-primary) 7%, #fff); }
.btn:focus-visible { outline: 2px solid var(--cond-primary); outline-offset: 2px; }
.badge-modal__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; font-size: .86rem; }
.badge-modal__links-label { color: var(--muted); margin-right: 4px; }
.share-link {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 10px;
  border: 1.5px solid var(--line); border-radius: var(--pill); background: #fff;
  color: var(--ipcrg-navy); font-family: "Poppins", sans-serif; font-weight: 500; text-decoration: none;
  transition: .15s ease;
}
.share-link__icon { width: 15px; height: 15px; fill: currentColor; flex: none; }
.share-link:hover { color: #fff; }
.share-link--linkedin:hover { background: #0a66c2; border-color: #0a66c2; }
.share-link--x:hover { background: #111; border-color: #111; }
.share-link--email:hover { background: var(--ipcrg-action); border-color: var(--ipcrg-action); }
.share-link:focus-visible { outline: 2px solid var(--cond-primary); outline-offset: 2px; }
.badge-modal__status { margin: 10px 0 0; font-size: .84rem; color: var(--cond-dark); }
.badge-modal__status:empty { display: none; }
.badge-modal__note { margin: 10px 0 0; font-size: .8rem; color: var(--faint); }
@media (max-width: 620px) {
  .badge-modal { padding: 12px; align-items: flex-start; }
  .badge-modal__dialog { padding: 18px 16px 16px; }
  .btn { width: 100%; text-align: center; }
}
/* "Save as PDF" = print with nothing on the page but the badge */
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body.has-modal > :not(.badge-modal) { display: none !important; }
  .badge-modal { position: static; background: none; padding: 0; display: block; }
  .badge-modal__dialog { box-shadow: none; border: 0; padding: 0; width: 100%; max-height: none; overflow: visible; }
  .badge-modal__figure { border: 0; background: none; border-radius: 0; }
  .badge-modal__head, .badge-modal__name, .badge-modal__actions, .badge-modal__links, .badge-modal__note { display: none !important; }
}

/* ---------- Response collection (rendered only when switched on) ---------- */
.role-field { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 16px; }
.role-field__label { font-family: "Poppins", sans-serif; font-weight: 600; font-size: .92rem; color: var(--cond-dark); }
.role-field__select {
  font: inherit; font-size: .95rem; color: var(--ink); background: #fff;
  padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  min-width: min(260px, 100%); max-width: 100%;
}
.role-field__select:focus-visible { outline: 2px solid var(--cond-dark); outline-offset: 2px; }

.note { margin-top: 10px; }
.note__toggle {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-family: "Poppins", sans-serif; font-size: .8rem; font-weight: 600; color: var(--cond-dark);
  text-decoration: underline; text-underline-offset: 3px;
}
.note__toggle:focus-visible { outline: 2px solid var(--cond-dark); outline-offset: 2px; }
.note__body { margin-top: 8px; }
.note__label { display: block; font-size: .82rem; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.note__input {
  width: 100%; font: inherit; font-size: .9rem; color: var(--ink); background: #fff;
  padding: 8px 10px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); resize: vertical;
}
.note__input:focus { outline: 2px solid var(--cond-dark); outline-offset: 1px; }
.note__warn { margin: 6px 0 0; font-size: .76rem; color: var(--muted); }

/* on each answered card: send just that answer */
.answer-send { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.answer-send__btn { padding: 6px 14px; font-size: .8rem; }
.answer-send__btn[disabled] { opacity: .55; cursor: default; }
.answer-send__status { font-size: .8rem; color: var(--cond-dark); }
.answer-send__status:empty { display: none; }
.answer-send .send__payload { flex-basis: 100%; }
/* under the role question: its send button, then what sending means */
.role-field .role-send { margin-top: 0; }
.role-field .send__intro { flex-basis: 100%; margin: 0; font-size: .8rem; color: var(--muted); max-width: 72ch; }
.send__payload {
  margin: 10px 0 0; max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-size: .72rem; line-height: 1.4; background: var(--tint); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px;
}
.preview-flag {
  position: fixed; left: 12px; bottom: 12px; z-index: 60;
  font: 600 .74rem "Poppins", sans-serif; color: #7c5310; background: #fdf1d5;
  border: 1px solid #edc55f; border-radius: var(--pill); padding: 6px 12px;
}
@media print { .preview-flag, .answer-send { display: none !important; } }

/* ---------- Responsive ------------------------------------------------------ */
/* Between the mobile breakpoint and ~800px the brand bar (logo + sub-brand
   logo + two links) is wider than the viewport and forces a horizontal
   scrollbar. Shed the product label and tighten the spacing first. */
@media (max-width: 860px) {
  .brandbar__product { display: none; }
  .brandbar__right { gap: 12px; }
  .brandbar__logo img { height: 46px; }
  .brandbar__sub { height: 36px; }
  .brandbar__cta { padding: 7px 12px; }
}
@media (max-width: 620px) {
  .cards { grid-template-columns: 1fr; }
  .brandbar__product { display: none; }
  .brandbar__logo img { height: 44px; }
  /* on phones the two links cannot share a row with the logos: let the bar
     wrap so the right-hand group takes a line of its own */
  .brandbar__inner { flex-wrap: wrap; row-gap: 10px; padding-block: 12px; }
  .brandbar__right { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
  .brandbar__cta, .brandbar__home { font-size: .8rem; }
  /* one line only: the chips scroll sideways rather than wrapping, so the
     sticky bar stays ~55px instead of stacking to 265px */
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .filters::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .toolbar__inner { padding-block: 8px; }
  .pagetools { justify-content: space-between; }
  .condition__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .wrap { padding-inline: 18px; }
  .rate__btns { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }