/* ============================================================================
   Force Multiplier Leadership Assessment — Stylesheet
   BDM Squared Professional Services
   ----------------------------------------------------------------------------
   Brand palette
     Bright teal        #07AACF
     Professional blue  #066BAD
     White              #FFFFFF
     Very light blue    #EBF7FA
     Pale blue          #A9D6E7
     Body text          dark navy / charcoal

   Design direction: professional consulting firm, credible, structured,
   generous white space, strong hierarchy, clean sans-serif, accessible,
   mobile-first. Results never rely on colour alone.
   ========================================================================== */

:root {
  --teal: #07AACF;
  --blue: #066BAD;
  --blue-dark: #04558A;
  --white: #FFFFFF;
  --lblue: #EBF7FA;
  --pale: #A9D6E7;

  --ink: #16232E;        /* near-navy body text */
  --ink-soft: #46586A;   /* secondary text */
  --ink-faint: #6C7E8F;
  --line: #D6E3EC;
  --line-strong: #B9CDDB;

  --ok: #1F7A4D;
  --warn: #A5540B;
  --stop: #A32A2A;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 2px rgba(16, 40, 60, .06), 0 1px 3px rgba(16, 40, 60, .05);
  --shadow-md: 0 4px 14px rgba(16, 40, 60, .09);
  --shadow-lg: 0 12px 34px rgba(16, 40, 60, .13);

  --wrap: 1080px;
  --wrap-narrow: 760px;
  --focus: 3px solid #05547F;
}

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

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

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.22; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.85rem); }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.3rem; }
li { margin-bottom: .45rem; }
a { color: var(--blue); text-underline-offset: 2px; }
a:hover { color: var(--blue-dark); }

/* Visible focus everywhere, for keyboard users. */
:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--blue); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

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

/* ------------------------------------------------------------ structure --- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--white);
  position: sticky; top: 0; z-index: 40;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 68px; padding-top: .5rem; padding-bottom: .5rem;
}
.brand-lockup { display: flex; align-items: center; gap: .8rem; min-width: 0; }

/* ---------------------------------------------------------------------------
   Logo mark
   The supplied PNG is genuinely transparent, so it sits directly on the light
   header with no container behind it.

   The artwork carries a large invisible margin: the file is 631x395 but the
   visible logo is only 502x232, i.e. ~41% of the file height is empty padding
   (82px top, 81px bottom, 64/65px sides). Displaying the raw file would make
   the header needlessly tall while rendering the "PROFESSIONAL SERVICES" line
   too small to read.

   The wrapper below therefore hides ONLY that empty padding by scaling the
   image up inside an overflow-hidden box sized to the visible artwork. No
   artwork pixel is cropped, stretched, recoloured or redrawn; the file's own
   proportions are preserved exactly.

   Geometry (all relative to the visible artwork width):
     image width      = 631 / 502 = 125.7%
     left offset      = -64 / 502 = -12.75%
     top offset       = -82 / 502 = -16.33%
   Percentage margins resolve against the containing block's width, which is
   why the vertical offset can be expressed as a percentage of artwork width.
   --------------------------------------------------------------------------- */
.logo-mark {
  display: block;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: 138px;                 /* rendered width of the visible artwork */
  aspect-ratio: 502 / 232;      /* visible artwork proportions */
}
.logo-mark img {
  display: block;
  position: absolute;
  top: auto;
  left: 0;
  width: 125.7%;
  max-width: none;
  height: auto;
  margin-left: -12.75%;
  margin-top: -16.33%;
}

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 3.5rem;
  padding: 1.6rem 0 2.4rem;
  background: var(--lblue);
  color: var(--ink-soft);
  font-size: .86rem;
}
.site-footer p { margin: 0 0 .4rem; }
.footer-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; margin-top: .7rem; color: var(--ink-faint); font-size: .78rem; }

main { display: block; }

.screen { padding: 2.2rem 0 1rem; }
.screen[hidden] { display: none !important; }

/* -------------------------------------------------------------- typography - */
.eyebrow {
  display: inline-block; font-size: .73rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); background: var(--lblue);
  border: 1px solid var(--pale); border-radius: 999px;
  padding: .3rem .75rem; margin: 0 0 .95rem;
}
.eyebrow--plain { background: transparent; border: 0; padding: 0; color: var(--blue); }
.lede { font-size: 1.06rem; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.small { font-size: .86rem; }
.tiny { font-size: .78rem; color: var(--ink-faint); }
.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.6rem; }

/* ----------------------------------------------------------------- cards --- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.card--pad-lg { padding: 2rem; }
.card--muted { background: var(--lblue); border-color: var(--pale); }
.card + .card { margin-top: 1.1rem; }
.card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.section-title {
  font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 .6rem;
}

/* ---------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; font-size: 1rem;
  line-height: 1.2;
  padding: .85rem 1.6rem;
  min-height: 50px;               /* comfortable touch target */
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--blue-dark); color: #fff; }
.btn-secondary { background: var(--white); color: var(--blue); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--lblue); border-color: var(--blue); color: var(--blue-dark); }
.btn-teal { background: var(--teal); color: #04303D; }
.btn-teal:hover { background: #0696B6; color: #04303D; }
.btn-lg { padding: 1rem 2.1rem; font-size: 1.06rem; min-height: 56px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; box-shadow: none;
}
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.btn-row--split { justify-content: space-between; }

/* ---------------------------------------------------------------- forms ---- */
.field { margin-bottom: 1.15rem; }
.field label {
  display: block; font-weight: 600; font-size: .93rem;
  margin-bottom: .35rem; color: var(--ink);
}
.req { color: var(--stop); font-weight: 700; }
.field .hint { display: block; font-size: .81rem; color: var(--ink-faint); margin-bottom: .35rem; }
.field input[type="text"],
.field input[type="email"] {
  width: 100%; font: inherit; font-size: 1rem;
  padding: .8rem .9rem;
  min-height: 50px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink);
}
.field input:focus { border-color: var(--blue); outline: var(--focus); outline-offset: 1px; }
.field input[aria-invalid="true"] { border-color: var(--stop); background: #FFF7F7; }

.field-error {
  display: none; margin-top: .4rem;
  color: var(--stop); font-size: .87rem; font-weight: 600;
}
.field-error.is-visible { display: block; }
.field-error::before { content: "\26A0  "; font-weight: 700; }

.error-summary {
  display: none;
  border: 1.5px solid var(--stop);
  border-left-width: 6px;
  background: #FFF6F6;
  border-radius: var(--radius-sm);
  padding: .9rem 1.1rem;
  margin-bottom: 1.2rem;
  color: #7E2020;
}
.error-summary.is-visible { display: block; }
.error-summary h2 { font-size: 1rem; margin: 0 0 .4rem; color: #7E2020; }
.error-summary ul { margin: 0; }

/* consent row */
.consent { display: flex; gap: .7rem; align-items: flex-start; }
.consent input[type="checkbox"] { width: 20px; height: 20px; margin-top: .18rem; flex: 0 0 auto; accent-color: var(--blue); }
.consent label { font-weight: 500; font-size: .9rem; margin: 0; }
.placeholder-note {
  border: 1px dashed var(--pale);
  background: var(--lblue);
  border-radius: var(--radius-sm);
  padding: .7rem .85rem;
  font-size: .84rem;
  color: var(--ink-soft);
}
.placeholder-note strong { color: var(--blue); }

/* ------------------------------------------------------- progress / steps -- */
.progress-wrap { margin-bottom: 1.6rem; }
.progress-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem 1rem; margin-bottom: .55rem; flex-wrap: wrap;
}
.progress-count {
  font-weight: 700; font-size: 1.02rem; color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.progress-answered {
  font-size: .85rem; font-weight: 600; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  background: var(--lblue);
  border: 1px solid var(--pale);
  border-radius: 999px;
  padding: .18rem .6rem;
  white-space: nowrap;
}

.progress {
  height: 12px; width: 100%;
  background: var(--pale);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar {
  height: 100%; width: 0;
  background: var(--blue);
  border-radius: 999px;
  transition: width .28s ease;
}
/* Teal leading edge, using the brand pair without relying on colour alone —
   the numeric label above carries the actual meaning. */
.progress-bar { background-image: linear-gradient(90deg, var(--blue) 0%, var(--blue) 70%, var(--teal) 100%); }

/* ------------------------------------------------------------ question ----- */
.question-text {
  font-size: clamp(1.16rem, 1.05rem + .6vw, 1.42rem);
  font-weight: 650; line-height: 1.35;
  margin: 0 0 1.3rem;
  color: var(--ink);
}
.answers { border: 0; padding: 0; margin: 0 0 1.4rem; }
.answers legend { padding: 0; }
.answer-option {
  display: flex; align-items: flex-start; gap: .85rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: 1rem 1.05rem;
  margin-bottom: .7rem;
  cursor: pointer;
  min-height: 56px;               /* large, accessible target */
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.answer-option:hover { border-color: var(--blue); background: #F7FCFE; }
.answer-option input { width: 22px; height: 22px; margin: .12rem 0 0; flex: 0 0 auto; accent-color: var(--blue); }
.answer-option .answer-body { display: flex; gap: .7rem; align-items: flex-start; }
.answer-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--lblue);
  border: 1.5px solid var(--pale);
  color: var(--blue);
  font-weight: 700; font-size: .85rem;
  margin-top: .05rem;
}
.answer-text { font-size: 1rem; line-height: 1.5; }
.answer-option.is-selected {
  border-color: var(--blue);
  background: var(--lblue);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.answer-option.is-selected .answer-letter { background: var(--blue); border-color: var(--blue); color: #fff; }
.answer-option input:focus-visible { outline: var(--focus); outline-offset: 2px; }

.question-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: .9rem; flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 1.15rem;
}
.question-nav .nav-hint { font-size: .84rem; color: var(--warn); font-weight: 600; display: none; }
.question-nav .nav-hint.is-visible { display: block; }

/* ---------------------------------------------------------- results ------- */
.results-hero {
  background: linear-gradient(180deg, var(--lblue) 0%, #F7FCFE 100%);
  border: 1px solid var(--pale);
  border-radius: var(--radius);
  padding: 1.9rem;
}
.results-hero h1 { margin-bottom: .35rem; }

.type-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--blue); color: #fff;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  font-weight: 700; font-size: 1.02rem;
  letter-spacing: .01em;
}
.type-badge .badge-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--teal); color: #04303D; font-size: .72rem; font-weight: 800;
}

.score-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
}
.score-box {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.05rem 1.15rem;
  box-shadow: var(--shadow-sm);
}
.score-box .k {
  font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
  display: block; margin-bottom: .3rem;
}
.score-box .v {
  font-size: 1.85rem; font-weight: 700; color: var(--blue);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.score-box .v small { font-size: .95rem; font-weight: 600; color: var(--ink-soft); margin-left: .2rem; }
.score-box .sub { font-size: .82rem; color: var(--ink-faint); margin-top: .2rem; }

.status-line {
  display: inline-flex; align-items: center; gap: .55rem;
  border: 1.5px solid var(--pale);
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: .6rem .9rem;
  font-weight: 600; font-size: .95rem;
  color: var(--ink);
}
.status-line .status-mark {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 .3rem;
  border-radius: 4px; font-size: .72rem; font-weight: 800;
  background: var(--blue); color: #fff;
}
.status-line--override { border-color: #E8C88A; background: #FFFBF2; }
.status-line--override .status-mark { background: var(--warn); color: #fff; }

/* competency bars — label + value, never colour alone */
.comp-list { list-style: none; margin: 0; padding: 0; }
.comp-row {
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.comp-row:last-child { border-bottom: 0; }
.comp-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .4rem;
}
.comp-name { font-weight: 600; font-size: .97rem; }
.comp-value { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--blue); font-size: .95rem; }
.comp-track {
  position: relative; height: 14px; border-radius: 999px;
  background: var(--lblue); border: 1px solid var(--line); overflow: hidden;
}
.comp-fill { height: 100%; background: var(--blue); border-radius: 999px; }
.comp-row.is-primary .comp-fill { background: repeating-linear-gradient(45deg, var(--teal), var(--teal) 6px, #0696B6 6px, #0696B6 12px); }
.comp-row.is-secondary .comp-fill { background: var(--pale); }
.comp-row.is-strongest .comp-fill { background: var(--blue); }

/* text tags so meaning never depends on colour */
.comp-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .73rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
  padding: .2rem .55rem;
  border-radius: 4px;
  border: 1.5px solid var(--line-strong);
  background: var(--white);
  color: var(--ink-soft);
}
.tag--primary { background: var(--teal); border-color: var(--teal); color: #04303D; }
.tag--secondary { background: var(--pale); border-color: var(--pale); color: #123A4A; }
.tag--strongest { background: var(--blue); border-color: var(--blue); color: #fff; }

/* constraint / strength cards */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}
.focus-card {
  border: 1px solid var(--line);
  border-top: 4px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: 1.05rem 1.15rem;
  box-shadow: var(--shadow-sm);
}
.focus-card--primary { border-top-color: var(--teal); }
.focus-card--secondary { border-top-color: var(--pale); }
.focus-card--strongest { border-top-color: var(--blue); }
.focus-card .focus-label {
  font-size: .73rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
  display: block; margin-bottom: .4rem;
}
.focus-card .focus-name { font-size: 1.1rem; font-weight: 700; margin: 0 0 .4rem; }
.focus-card .focus-pct { font-size: 1.3rem; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.focus-card .focus-note { font-size: .89rem; color: var(--ink-soft); margin: .5rem 0 0; }

.action-list { list-style: none; margin: 0; padding: 0; counter-reset: act; }
.action-list li {
  counter-increment: act;
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.action-list li:last-child { border-bottom: 0; }
.action-list li::before {
  content: counter(act);
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--lblue); border: 1.5px solid var(--pale);
  color: var(--blue); font-weight: 700; font-size: .85rem;
}
.action-list .action-source { display: block; font-size: .78rem; color: var(--ink-faint); margin-top: .2rem; }

/* CTA band */
.cta-band {
  background: var(--blue);
  color: #fff;
  border-radius: var(--radius);
  padding: 2rem;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #E4F1F9; }
.cta-band ul { color: #E4F1F9; }
.cta-band .btn-primary { background: var(--teal); color: #04303D; }
.cta-band .btn-primary:hover { background: #0696B6; color: #04303D; }

/* notices */
.notice {
  border: 1.5px solid var(--line-strong);
  border-left-width: 6px;
  border-radius: var(--radius-sm);
  padding: .95rem 1.1rem;
  background: var(--lblue);
  font-size: .92rem;
  color: var(--ink);
}
.notice--info { border-left-color: var(--blue); }
.notice--warn { border-left-color: var(--warn); background: #FFFBF2; }
.notice--stop { border-left-color: var(--stop); background: #FFF6F6; }
.notice h2, .notice h3 { font-size: 1rem; margin: 0 0 .35rem; }
.notice p:last-child { margin-bottom: 0; }

.spinner {
  width: 30px; height: 30px;
  border: 3px solid var(--pale);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 0 auto 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
  * { transition-duration: .01ms !important; }
}

/* utility */
.stack > * + * { margin-top: 1rem; }
.divider { height: 1px; background: var(--line); border: 0; margin: 1.6rem 0; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .screen { padding: 1.5rem 0 .5rem; }
  .card, .card--pad-lg { padding: 1.25rem; }
  .results-hero, .cta-band { padding: 1.35rem; }
  .site-header .wrap { min-height: 62px; }
  .logo-mark { width: 104px; }
  .question-nav { flex-direction: column-reverse; align-items: stretch; }
  .question-nav .btn { width: 100%; }
  .btn-row--split { flex-direction: column-reverse; align-items: stretch; }
  .btn-row--split .btn { width: 100%; }
  .score-box .v { font-size: 1.6rem; }
}

@media (max-width: 420px) {
  .logo-mark { width: 96px; }
  .answer-option { padding: .9rem .9rem; }
}

/* Print: results should be readable on paper too. */
@media print {
  .site-header, .site-footer, .btn, .question-nav, .skip-link { display: none !important; }
  .screen[hidden] { display: none !important; }
  .card, .focus-card, .results-hero, .cta-band { box-shadow: none; break-inside: avoid; }
  .cta-band { background: #fff; color: var(--ink); border: 1px solid var(--line); }
  .cta-band h2, .cta-band p, .cta-band ul { color: var(--ink); }
  a[href]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* "Business Assessment — Coming Soon": shown until a destination URL is saved
   in Settings. Readable on the dark CTA band, but plainly not a live button. */
.cta-band .btn-cta-soon,
.cta-band .btn-cta-soon:disabled {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  border: 2px dashed rgba(255, 255, 255, 0.75);
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
}