/* ==================================================================
   The Fluke Code™ Readiness Score
   Whale Tail Digital

   BRAND TOKENS — change colours here and nowhere else.
   ------------------------------------------------------------------
   Contrast rule, baked in: teal, pink, light pink, silver and white are
   used on navy only. Teal and pink never carry text on light backgrounds.
   Blue (#40799C) is decoration and borders only — it does not reach 4.5:1
   on navy, so it never carries body text.
   ================================================================== */

:root {
  /* Primary */
  --navy:        #00263A;
  --teal:        #58B5C0;
  --silver:      #EFF1F1;
  --white:       #FFFFFF;

  /* Secondary */
  --charcoal:    #1A1A1A;
  --blue:        #40799C;
  --pink:        #ECA3B2;
  --pink-light:  #FDEEF0;

  /* Derived surfaces (navy tinted lighter for depth) */
  --surface-1:   #04314A;
  --surface-2:   #0A3E5B;
  --line:        rgba(88, 181, 192, .28);
  --line-soft:   rgba(239, 241, 241, .14);

  /* Text on navy */
  --ink:         var(--silver);
  --ink-strong:  var(--white);
  --ink-muted:   rgba(239, 241, 241, .72);

  /* Status — always paired with a distinct glyph, never colour alone */
  --good:        var(--teal);
  --watch:       var(--silver);
  --flag:        var(--pink);
  --unknown:     rgba(239, 241, 241, .55);

  --radius:      14px;
  --radius-lg:   22px;
  --wrap:        1080px;
  --wrap-narrow: 640px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* ==================================================================
   Base
   ================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--ink-strong);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.015em;
}

h1 { font-size: clamp(2rem, 5.5vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1rem; }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--white); }

img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--teal); color: var(--navy);
  padding: .7rem 1.2rem; font-weight: 700; z-index: 50;
  border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }
.wrap--narrow { max-width: var(--wrap-narrow); }

/* ==================================================================
   Chrome
   ================================================================== */

.site-head { padding: 1.75rem 1.5rem; }
.site-head__brand { display: inline-block; }
.site-head__brand img { width: 150px; height: auto; }

.site-foot {
  border-top: 1px solid var(--line-soft);
  margin-top: 5rem; padding: 2.5rem 0 3.5rem;
  color: var(--ink-muted); font-size: .92rem;
}
.site-foot__mark { width: 44px; margin-bottom: .75rem; opacity: .9; }
.site-foot__fine { color: var(--unknown); font-size: .85rem; margin: 0; }

/* ==================================================================
   Stages
   ================================================================== */

main { display: block; }
main:focus { outline: none; }

.stage { padding: 2rem 0 3rem; }
.stage[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .stage.is-entering { animation: rise .45s ease both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

.eyebrow {
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .78rem; font-weight: 700; color: var(--teal);
  margin: 0 0 .6rem;
}
.eyebrow--pink { color: var(--pink); }

.lede { font-size: 1.1rem; color: var(--ink); max-width: 56ch; }
.lede--tight { color: var(--ink-muted); font-size: 1rem; }

.section-h {
  margin-top: 3.5rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--line-soft);
}

/* ==================================================================
   Buttons
   ================================================================== */

.btn {
  display: inline-block; border: 2px solid transparent;
  border-radius: 999px; padding: .82rem 1.6rem;
  font: inherit; font-weight: 700; font-size: 1rem;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform .12s ease, background-color .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn--primary { background: var(--teal); color: var(--navy); }
.btn--primary:hover:not([disabled]) { background: var(--white); color: var(--navy); }

.btn--secondary { background: var(--pink); color: var(--navy); }
.btn--secondary:hover { background: var(--pink-light); color: var(--navy); }

.btn--ghost { background: transparent; color: var(--silver); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--teal); color: var(--white); }

.btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }
.btn--sm { padding: .5rem 1.1rem; font-size: .9rem; }

/* ==================================================================
   Stage 1 — intro
   ================================================================== */

.url-form { margin: 2.25rem 0 1.25rem; }
.url-form__label { display: block; font-weight: 600; margin-bottom: .5rem; font-size: .95rem; }
.url-form__row { display: flex; gap: .6rem; flex-wrap: wrap; }

.url-form__input {
  flex: 1 1 260px; min-width: 0;
  background: var(--surface-1); color: var(--ink-strong);
  border: 2px solid var(--line); border-radius: 999px;
  padding: .82rem 1.3rem; font: inherit; font-size: 1rem;
}
.url-form__input::placeholder { color: rgba(239,241,241,.45); }
.url-form__input:focus { border-color: var(--teal); }

.url-form__help { font-size: .88rem; color: var(--ink-muted); margin: .7rem 0 0; }

.form-error {
  margin: .8rem 0 0; padding: .7rem 1rem;
  background: rgba(236,163,178,.14); border-left: 3px solid var(--pink);
  border-radius: 0 8px 8px 0; color: var(--pink-light); font-size: .95rem;
}
.form-error[hidden] { display: none; }

.pillar-strip {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; padding: 0; margin: 2.5rem 0 0;
}
.pillar-strip li {
  font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-muted);
  border: 1px solid var(--line-soft); border-radius: 999px;
  padding: .35rem .85rem;
}

/* ==================================================================
   Stage 2 — questions + scan progress
   ================================================================== */

.scanbar { margin-bottom: 2.5rem; }
.scanbar__track {
  height: 6px; background: var(--surface-2);
  border-radius: 999px; overflow: hidden;
}
.scanbar__fill {
  height: 100%; width: 0%; background: var(--teal);
  border-radius: 999px; transition: width .6s ease;
}
.scanbar__fill.is-done { background: var(--pink); }
.scanbar__label { margin: .6rem 0 0; font-size: .9rem; color: var(--ink-muted); }
.scanbar__label strong { color: var(--teal); }

.qform__set { border: 0; padding: 0; margin: 0 0 1.75rem; }
.qform__set legend {
  padding: 0; font-weight: 700; color: var(--ink-strong);
  font-size: 1.02rem; margin-bottom: .4rem;
}

/* Plain-English note under each question. Silver rather than teal so it reads
   as supporting detail, and italic so it's clearly a note and not another
   thing to answer. Still clears 4.5:1 on navy. */
.qform__hint {
  margin: 0 0 .85rem;
  max-width: 58ch;
  font-size: .87rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-muted);
  border-left: 2px solid var(--line);
  padding-left: .8rem;
}
.qform__hint strong { color: var(--silver); font-style: normal; font-weight: 600; }

.qform__opts { display: flex; gap: .55rem; flex-wrap: wrap; }

.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt span {
  display: block; padding: .6rem 1.2rem;
  border: 2px solid var(--line-soft); border-radius: 999px;
  font-size: .95rem; transition: all .15s ease;
}
.opt input:checked + span {
  background: var(--teal); color: var(--navy);
  border-color: var(--teal); font-weight: 700;
}
.opt input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 3px; }
.opt:hover span { border-color: var(--teal); }

.qform__actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 2rem; }

/* ==================================================================
   The dial
   ================================================================== */

.dial, .results-head__dial {
  position: relative; width: 230px; height: 230px;
  margin: 2.5rem auto 1.5rem;
}
.results-head__dial { width: 165px; height: 165px; margin: 0; flex: 0 0 auto; }

.dial__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial__track {
  fill: none; stroke: var(--surface-2); stroke-width: 14;
}
.dial__value {
  fill: none; stroke: var(--teal); stroke-width: 14; stroke-linecap: round;
  stroke-dasharray: 540.35; stroke-dashoffset: 540.35;
}
@media (prefers-reduced-motion: no-preference) {
  .dial__value { transition: stroke-dashoffset 1.1s cubic-bezier(.22,.9,.3,1), stroke .4s ease; }
}

.dial__centre {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.dial__grade {
  margin: 0; font-size: 3.4rem; font-weight: 800; line-height: 1;
  color: var(--ink-strong); letter-spacing: -.03em;
}
.results-head__dial .dial__grade { font-size: 2.4rem; }
.dial__score { margin: .2rem 0 0; font-size: 1.05rem; color: var(--ink-muted); font-weight: 600; }
.results-head__dial .dial__score { font-size: .9rem; }
.dial__outof { opacity: .6; }

/* Grade tinting — reinforcement only. The letter and number always carry the meaning. */
.grade-A .dial__value, .grade-B .dial__value { stroke: var(--teal); }
.grade-C .dial__value, .grade-D .dial__value { stroke: var(--silver); }
.grade-E .dial__value, .grade-F .dial__value { stroke: var(--pink); }

/* ==================================================================
   Stage 3 — reveal
   ================================================================== */

.stage--reveal { text-align: center; }
.stage--reveal .lede, .stage--reveal .pillar-strip { margin-inline: auto; }
.reveal__host { word-break: break-word; }
.reveal__headline {
  font-size: 1.22rem; color: var(--ink-strong); max-width: 44ch;
  margin: 0 auto 1.25rem; font-weight: 600;
}
.reveal__tagline {
  color: var(--ink-muted); font-style: italic; max-width: 40ch;
  margin: 0 auto 2.5rem;
}
.reveal__cta { margin-bottom: 3rem; }
.reveal__note { font-size: .9rem; color: var(--ink-muted); margin: .9rem 0 0; }

.share {
  border-top: 1px solid var(--line-soft); padding-top: 1.75rem;
}
.share__label { font-size: .9rem; color: var(--ink-muted); margin-bottom: .8rem; }
.share__row { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.share__done { font-size: .85rem; color: var(--teal); margin: .8rem 0 0; }

/* ==================================================================
   Stage 4 — gate
   ================================================================== */

.minisum {
  display: inline-flex; align-items: center; gap: .75rem;
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: 999px; padding: .5rem 1.2rem .5rem .6rem;
  margin-bottom: 2rem; font-size: .95rem;
}
.minisum__grade {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--teal); color: var(--navy);
  font-weight: 800; font-size: 1.1rem;
}
.minisum__text strong { color: var(--ink-strong); }

.gate-form { margin-top: 2rem; max-width: 460px; }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-weight: 600; margin-bottom: .4rem; font-size: .95rem; }
.field__opt { font-weight: 400; color: var(--ink-muted); }
.field input {
  width: 100%; background: var(--surface-1); color: var(--ink-strong);
  border: 2px solid var(--line); border-radius: var(--radius);
  padding: .78rem 1rem; font: inherit;
}
.field input:focus { border-color: var(--teal); }

.check {
  display: flex; gap: .7rem; align-items: flex-start;
  margin: 1.4rem 0 1.8rem; font-size: .92rem; color: var(--ink-muted);
  cursor: pointer;
}
.check input { margin-top: .25rem; accent-color: var(--teal); width: 18px; height: 18px; flex: 0 0 auto; }

.gate-form__fine { font-size: .82rem; color: var(--unknown); margin-top: 1rem; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==================================================================
   Stage 5 — results
   ================================================================== */

.results-head {
  display: flex; gap: 2rem; align-items: center; flex-wrap: wrap;
  padding-bottom: 2rem; border-bottom: 1px solid var(--line-soft);
}
.results-head__text { flex: 1 1 300px; }
.results-head__text h2 { word-break: break-word; margin-bottom: .4rem; }
.results-head__line { font-size: 1.1rem; color: var(--ink); margin-bottom: .5rem; }
.results-head__meta { font-size: .85rem; color: var(--unknown); margin: 0; }

.notice {
  margin: 1.5rem 0 0; padding: .9rem 1.2rem;
  background: var(--surface-1); border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .93rem; color: var(--ink-muted);
}
.notice[hidden] { display: none; }

/* --- pillar cards --- */

.pillars { display: grid; gap: 1.1rem; margin-top: 1.75rem; }

.pillar {
  background: var(--surface-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem;
}

.pillar__head {
  display: flex; gap: 1rem; align-items: baseline;
  flex-wrap: wrap; margin-bottom: .35rem;
}
.pillar__name { margin: 0; flex: 1 1 auto; font-size: 1.25rem; }
.pillar__score {
  font-weight: 800; font-size: 1.4rem; color: var(--ink-strong);
  white-space: nowrap; letter-spacing: -.02em;
}
.pillar__score span { font-size: .85rem; font-weight: 600; color: var(--ink-muted); }
.pillar__grade {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-weight: 800; font-size: 1rem; flex: 0 0 auto;
  background: var(--surface-2); color: var(--ink-strong);
  border: 2px solid var(--line-soft);
}
.pillar--good .pillar__grade { background: var(--teal); color: var(--navy); border-color: var(--teal); }
.pillar--mid  .pillar__grade { background: var(--silver); color: var(--navy); border-color: var(--silver); }
.pillar--low  .pillar__grade { background: var(--pink); color: var(--navy); border-color: var(--pink); }

.pillar__blurb { color: var(--ink-muted); font-size: .95rem; margin-bottom: 1.1rem; }

.pillar__bar {
  height: 5px; background: var(--surface-2); border-radius: 999px;
  overflow: hidden; margin-bottom: 1.2rem;
}
.pillar__bar i { display: block; height: 100%; border-radius: 999px; background: var(--teal); }
.pillar--mid .pillar__bar i { background: var(--silver); }
.pillar--low .pillar__bar i { background: var(--pink); }

.findings { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.finding { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; line-height: 1.55; }
.finding__icon {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: .18rem;
  display: grid; place-items: center; border-radius: 50%;
  font-size: .72rem; font-weight: 800; line-height: 1;
}
.finding--good .finding__icon   { background: var(--good);    color: var(--navy); }
.finding--watch .finding__icon  { background: var(--watch);   color: var(--navy); }
.finding--flag .finding__icon   { background: var(--flag);    color: var(--navy); }
.finding--unknown .finding__icon{ background: transparent; color: var(--unknown); border: 2px solid var(--unknown); }
.finding--unknown { color: var(--ink-muted); }

.pillar__caveat, .pillar__gap {
  margin: 1.1rem 0 0; padding-top: .9rem;
  border-top: 1px dashed var(--line-soft);
  font-size: .87rem; color: var(--ink-muted);
}
.pillar__gap { color: var(--pink-light); }

/* --- quick win --- */

.quickwin {
  margin-top: 3.5rem; padding: 2rem 2rem 2.2rem;
  background: linear-gradient(135deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.quickwin[hidden] { display: none; }
.quickwin h3 { font-size: 1.5rem; }
.quickwin p { color: var(--ink); margin: 0; max-width: 68ch; }

/* --- CTA --- */

.cta__grid { display: grid; gap: 1.1rem; margin-top: 1.75rem; }
@media (min-width: 720px) { .cta__grid { grid-template-columns: 1fr 1fr; } }

.cta__card {
  background: var(--surface-1); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: 1.75rem;
  display: flex; flex-direction: column;
}
.cta__card--alt { border-color: rgba(236,163,178,.32); }
.cta__card p { font-size: .96rem; }
.cta__for {
  font-size: .87rem; color: var(--ink-muted); font-style: italic;
  margin-top: auto; margin-bottom: 1.2rem;
}
.cta__card .btn { align-self: flex-start; }

/* --- downloads / rerun / method --- */

.downloads, .rerun { margin-top: 3rem; }
.downloads p, .rerun p { max-width: 60ch; color: var(--ink-muted); font-size: .96rem; }
.downloads__status { font-size: .88rem; color: var(--teal); margin-top: .8rem; }
.downloads__status[hidden] { display: none; }

.method {
  margin-top: 3.5rem; padding: 1.2rem 1.5rem;
  background: var(--surface-1); border-radius: var(--radius);
  border: 1px solid var(--line-soft); font-size: .93rem;
}
.method summary {
  cursor: pointer; font-weight: 700; color: var(--ink-strong);
  list-style-position: outside;
}
.method__body { padding-top: 1rem; color: var(--ink-muted); }
.method__body ul { padding-left: 1.2rem; }
.method__body li { margin-bottom: .5rem; }
.method__body strong { color: var(--ink); }
.method__caveat { border-top: 1px dashed var(--line-soft); padding-top: .9rem; margin-bottom: 0; }

/* ==================================================================
   Print — a serviceable fallback if someone prints instead of
   downloading the PDF.
   ================================================================== */

@media print {
  body { background: #fff; color: #000; }
  .site-head, .site-foot, .share, .cta, .downloads, .rerun, .skip { display: none !important; }
  .pillar, .quickwin { border: 1px solid #999; background: none; page-break-inside: avoid; }
  h1, h2, h3, h4, .dial__grade, .pillar__score { color: #000; }
}