/* Safety Scorecard (Agents > Safety Framework > Scorecard) -- fully static interactive tool,
   ported from the design mock almost verbatim. Content (7 properties, 4 verdict bands) is
   fixed like the whitepaper, so it's hardcoded in flex-safety-scorecard.js rather than modeled
   as CMS fields -- same rationale as Why Sprocket's coverage-widget bar chart.
   Class names are namespaced (.flex-scorecard__*) since the mock's own names (.page, .dash,
   .prop, .note...) are far too generic for a stylesheet loaded across the whole site. */

.flex-scorecard-wrap {
  background: var(--slate-100);
  padding: var(--spacing-2xl) 0;
}
.flex-scorecard__print-letterhead,
.flex-scorecard__print-pagefooter,
.flex-scorecard__print-only,
.flex-scorecard__print-summary,
.flex-scorecard__print-field-value { display: none; } /* print-only, see @media print below */
.flex-scorecard {
  max-width: 1400px;
  margin: 0 auto;
  background: var(--color-white);
  overflow: hidden;
  box-shadow: 0 4px 28px rgba(var(--navy-brand-rgb), 0.13);
}

.flex-scorecard__setup {
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--slate-100);
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-end;
  flex-wrap: wrap;
}
.flex-scorecard__field { flex: 1; min-width: 200px; }
.flex-scorecard__field label {
  display: block;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-base);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: var(--spacing-xs);
}
.flex-scorecard__field input {
  width: 100%;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--navy-brand);
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--slate-200);
  background: var(--color-white);
}
.flex-scorecard__field input:focus {
  /* Sitewide focus convention (see flex-blocks.css's controls) is an outline ring, not a
     box-shadow ring -- matching it instead of the mock's own focus treatment. */
  outline: 2px solid var(--cyan-400);
  outline-offset: 2px;
  border-color: var(--cyan-400);
}

/* Live score bar -- sticky while scrolling the assessment */
.flex-scorecard__dash {
  position: sticky;
  /* Docks under the sitewide fixed header (90px tall, per _index.twig's own
     data-bs-offset="90" scroll-spy convention) instead of pinning to the literal
     viewport top and outranking it -- was z-index: 20 vs. the header's 10, which
     rendered this bar over the nav while scrolling. */
  top: 90px;
  z-index: 5;
  background: var(--navy-brand);
  color: var(--color-white);
  padding: var(--spacing-md) var(--spacing-xl);
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  border-bottom: 2px solid var(--cyan-400);
}
.flex-scorecard__dash-score { font-size: var(--font-size-xl); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.flex-scorecard__dash-score span { font-size: var(--font-size-md); font-weight: 400; color: var(--navy-100); }
.flex-scorecard__dash-label {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-base);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--navy-100);
  margin-bottom: 5px;
}
.flex-scorecard__dash-band { flex: 1; min-width: 220px; }
.flex-scorecard__bandv { font-size: var(--font-size-lg); font-weight: 800; line-height: var(--line-height-sm); }
.flex-scorecard__bandd { font-size: var(--font-size-base); color: var(--navy-100); margin-top: 3px; line-height: var(--line-height-lg); }
.flex-scorecard__track { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.14); overflow: hidden; margin-top: var(--spacing-xs); }
.flex-scorecard__fill { height: 100%; width: 0; background: var(--cyan-400); border-radius: 5px; transition: width 0.35s ease, background 0.35s ease; }
.flex-scorecard__bottom-actions { display: flex; align-items: center; justify-content: center; gap: var(--spacing-md); margin-top: var(--spacing-lg); }
/* Plain text link, not the mono/uppercase/tracked kicker treatment -- that's a distinct
   component meaning "section eyebrow" everywhere else on the site; borrowing it for a
   clickable nav link was a mismatch. */
.flex-scorecard__back-to-top { color: var(--slate-500); text-decoration: underline; }
.flex-scorecard__back-to-top:hover { color: var(--red-500); }

.flex-scorecard__section { padding: var(--spacing-xl) var(--spacing-xl); border-bottom: 1px solid var(--slate-200); }
.flex-scorecard__section--alt { background: var(--slate-100); }
.flex-scorecard__kicker { font-family: var(--font-family-mono); font-size: var(--font-size-base); letter-spacing: 2px; text-transform: uppercase; color: var(--red-500); }
.flex-scorecard__h2 { font-size: var(--font-size-2xl); font-weight: 800; line-height: var(--line-height-tight); letter-spacing: -0.02em; margin: 12px 0 0; color: var(--slate-700); }
.flex-scorecard__deck { font-size: var(--font-size-lg); color: var(--slate-700); margin: 14px 0 0; max-width: 82ch; }

/* Property card */
.flex-scorecard__prop { border: 1px solid var(--slate-200); margin-top: var(--spacing-md); overflow: hidden; background: var(--color-white); }
.flex-scorecard__prop--done { border-color: var(--cyan-400); }
.flex-scorecard__phead { display: flex; gap: var(--spacing-md); align-items: flex-start; padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm); background: var(--slate-100); border-bottom: 1px solid var(--slate-200); }
.flex-scorecard__pn {
  flex: none; width: 34px; height: 34px;
  background: var(--navy-brand); color: var(--color-white);
  font-family: var(--font-family-mono); font-size: var(--font-size-base); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.flex-scorecard__prop--done .flex-scorecard__pn { background: var(--color-white); color: var(--navy-brand); }
.flex-scorecard__pt { flex: 1; }
.flex-scorecard__pt h3 { font-size: var(--font-size-md); font-weight: 800; letter-spacing: -0.01em; line-height: var(--line-height-sm); color: var(--slate-700); }
.flex-scorecard__pdef { font-size: var(--font-size-base); color: var(--slate-700); margin-top: var(--spacing-xs); line-height: var(--line-height-relaxed); max-width: 76ch; }
.flex-scorecard__pfail { margin: var(--spacing-md) var(--spacing-md) 0; padding: var(--spacing-sm); background: var(--red-bg); border-left: 3px solid var(--red-500); font-size: var(--font-size-base); line-height: var(--line-height-lg); color: var(--slate-700); }
.flex-scorecard__pfail b { display: block; font-family: var(--font-family-mono); font-size: var(--font-size-base); letter-spacing: 2px; text-transform: uppercase; color: var(--red-500); margin-bottom: var(--spacing-xs); }
.flex-scorecard__pask { margin: var(--spacing-sm) var(--spacing-md) 0; padding: var(--spacing-sm); background: var(--cyan-50); border-left: 3px solid var(--cyan-400); font-size: var(--font-size-base); line-height: var(--line-height-lg); color: var(--slate-700); }
.flex-scorecard__pask b { display: block; font-family: var(--font-family-mono); font-size: var(--font-size-base); letter-spacing: 2px; text-transform: uppercase; color: var(--cyan-700); margin-bottom: var(--spacing-xs); }

.flex-scorecard__levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md) var(--spacing-xs); }
.flex-scorecard__lvl { position: relative; }
.flex-scorecard__lvl input { position: absolute; opacity: 0; width: 0; height: 0; }
.flex-scorecard__lvl label { display: block; height: 100%; border: 1px solid var(--slate-200); border-radius: 10px; padding: var(--spacing-sm); cursor: pointer; transition: all 0.2s ease; background: var(--color-white); }
.flex-scorecard__lvl label:hover { border-color: var(--slate-400); background: var(--slate-100); }
.flex-scorecard__lvl input:checked + label { border-color: var(--navy-brand); background: var(--navy-brand); color: var(--color-white); box-shadow: 0 4px 14px rgba(var(--navy-brand-rgb), 0.2); }
.flex-scorecard__ln { font-family: var(--font-family-mono); font-size: var(--font-size-base); letter-spacing: 2px; text-transform: uppercase; color: var(--slate-500); }
.flex-scorecard__lvl input:checked + label .flex-scorecard__ln { color: var(--cyan-400); }
.flex-scorecard__lt { font-size: var(--font-size-xlg); font-weight: 800; margin-top: 5px; line-height: var(--line-height-sm); color: var(--slate-700); }
.flex-scorecard__lvl input:checked + label .flex-scorecard__lt { color: var(--color-white); }
.flex-scorecard__ld { font-size: var(--font-size-base); line-height: var(--line-height-lg); color: var(--slate-700); margin-top: var(--spacing-xs); }
.flex-scorecard__lvl input:checked + label .flex-scorecard__ld { color: var(--navy-100); }
.flex-scorecard__lvl--l0 input:checked + label { border-color: var(--red-500); background: var(--red-bg); color: var(--navy-brand); }
.flex-scorecard__lvl--l0 input:checked + label .flex-scorecard__ln { color: var(--red-500); }
.flex-scorecard__lvl--l0 input:checked + label .flex-scorecard__lt,
.flex-scorecard__lvl--l0 input:checked + label .flex-scorecard__ld { color: var(--slate-700); }

.flex-scorecard__eviw { padding: var(--spacing-xs) var(--spacing-md) var(--spacing-md); }
.flex-scorecard__eviw label { display: block; font-family: var(--font-family-mono); font-size: var(--font-size-base); letter-spacing: 2px; text-transform: uppercase; color: var(--slate-500); margin-bottom: var(--spacing-xs); }
.flex-scorecard__eviw textarea {
  width: 100%; font-family: var(--font-family-primary); font-size: var(--font-size-base); color: var(--navy-brand);
  padding: var(--spacing-xs) var(--spacing-sm); border: 1px solid var(--slate-200); border-radius: 8px; resize: vertical; min-height: 52px; line-height: var(--line-height-relaxed);
}
.flex-scorecard__eviw textarea:focus { outline: 2px solid var(--cyan-400); outline-offset: 2px; border-color: var(--cyan-400); }

/* Results */
.flex-scorecard__res { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; margin-top: var(--spacing-lg); }
.flex-scorecard__rc { border: 1px solid var(--slate-200); padding: var(--spacing-sm) var(--spacing-xs); text-align: center; background: var(--color-white); }
.flex-scorecard__rn { font-family: var(--font-family-mono); font-size: var(--font-size-base); letter-spacing: 2px; text-transform: uppercase; color: var(--slate-500); min-height: 26px; line-height: var(--line-height-sm); }
.flex-scorecard__rv { font-size: var(--font-size-2xl); font-weight: 800; margin-top: 7px; line-height: 1; color: var(--slate-400); }
.flex-scorecard__rc--s1 { border-color: #f0c9c6; background: var(--red-bg); }
.flex-scorecard__rc--s1 .flex-scorecard__rv { color: var(--red-500); }
.flex-scorecard__rc--s2 { border-color: #f0d9a8; background: var(--amber-bg); }
.flex-scorecard__rc--s2 .flex-scorecard__rv { color: var(--amber-500); }
.flex-scorecard__rc--s3 { border-color: #b3e0c6; background: var(--green-bg); }
.flex-scorecard__rc--s3 .flex-scorecard__rv { color: var(--green-500); }

.flex-scorecard__flags { margin-top: var(--spacing-lg); }
.flex-scorecard__flag { display: flex; gap: 13px; padding: var(--spacing-sm) 0; border-top: 1px solid var(--slate-200); font-size: var(--font-size-base); line-height: var(--line-height-relaxed); }
.flex-scorecard__flag:last-child { border-bottom: 1px solid var(--slate-200); }
.flex-scorecard__fi { flex: none; width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-family: var(--font-family-mono); font-size: var(--font-size-base); font-weight: 700; color: var(--color-white); margin-top: 1px; }
.flex-scorecard__flag--bad .flex-scorecard__fi { background: var(--red-500); }
.flex-scorecard__flag--warn .flex-scorecard__fi { background: var(--amber-500); }
.flex-scorecard__flag--good .flex-scorecard__fi { background: var(--green-500); }
.flex-scorecard__flag b { font-weight: 800; }

.flex-scorecard__note { margin-top: var(--spacing-lg); border: 1px solid var(--slate-200); border-left: 4px solid var(--cyan-400); background: var(--cyan-50); padding: var(--spacing-sm) var(--spacing-md); }
.flex-scorecard__nk { font-family: var(--font-family-mono); font-size: var(--font-size-base); letter-spacing: 2px; text-transform: uppercase; color: var(--cyan-700); margin-bottom: var(--spacing-xs); }
.flex-scorecard__note p { font-size: var(--font-size-base); line-height: var(--line-height-relaxed); color: var(--slate-700); margin: 0; }
.flex-scorecard__note p + p { margin-top: var(--spacing-xs); }

.flex-scorecard__footer { background: var(--gray-900); color: var(--navy-100); padding: var(--spacing-lg) var(--spacing-xl) 28px; }
.flex-scorecard__footer h4 { font-family: var(--font-family-mono); font-weight: 400; font-size: var(--font-size-base); letter-spacing: 2px; text-transform: uppercase; color: var(--slate-400); margin: 0 0 var(--spacing-xs); }
.flex-scorecard__footer p { font-size: var(--font-size-base); line-height: var(--line-height-relaxed); margin: 0; }
.flex-scorecard__footer a { color: var(--cyan-400); text-decoration: underline; }
.flex-scorecard__footer a:hover { text-decoration: none; }
.flex-scorecard__footer p + p { margin-top: var(--spacing-xs); }
.flex-scorecard__footer .flex-scorecard__ver { margin-top: var(--spacing-md); font-family: var(--font-family-mono); font-size: var(--font-size-base); letter-spacing: 2px; text-transform: uppercase; color: var(--navy-100); }

@media (max-width: 860px) {
  .flex-scorecard__section,
  .flex-scorecard__setup,
  .flex-scorecard__dash,
  .flex-scorecard__footer { padding-left: 22px; padding-right: 22px; }
  .flex-scorecard__levels { grid-template-columns: 1fr; }
  .flex-scorecard__res { grid-template-columns: repeat(4, 1fr); }
}

@media print {
  /* Clears both Letter and A4 with margin to spare -- printed as a vendor report, so both
     paper sizes need to fit, not just Letter. */
  @page { margin: 0.6in 0.5in; }

  /* Drop all marketing chrome (nav, hero, cookie UI, footer) and anything after the tool --
     this is a report someone prints/saves as a PDF. Hero heading is restated in the
     letterhead below. */
  .site-header,
  .hero-section__container,
  .prefooter-signup,
  #footer,
  #cookie-banner,
  #cookie-settings,
  .flex-scorecard__footer,
  .flex-scorecard-wrap ~ * { display: none !important; }

  /* Sitewide red border/navy fill are a screen brand frame -- on paper they'd print as a
     stray rule and a colour block behind a page meant to be plain white. */
  body { border: none !important; background: var(--color-white) !important; }

  /* #content's inline margin-top offsets the now-hidden fixed header -- left alone it prints
     as blank space. Needs !important to beat the inline style. */
  #content { margin-top: 0 !important; }

  .flex-scorecard-wrap { background: var(--color-white); padding: 0; }
  .flex-scorecard-wrap .redesign-container { max-width: none; padding: 0; margin: 0; }
  .flex-scorecard { max-width: none; box-shadow: none; border-radius: 0; }

  /* @page margin already provides the breathing room screen padding gives -- cut to a small
     inset (just enough that borders don't run flush to the edge), since Letter/A4 width is
     tight. Vertical cut harder to help fit one page. */
  .flex-scorecard__print-letterhead,
  .flex-scorecard__section,
  .flex-scorecard__setup,
  .flex-scorecard__dash { padding-left: 10px; padding-right: 10px; }
  .flex-scorecard__section { padding-top: 8px; padding-bottom: 8px; }
  .flex-scorecard__setup { padding-top: 6px; padding-bottom: 6px; }
  .flex-scorecard__dash { padding-top: 8px; padding-bottom: 8px; }
  .flex-scorecard__res { margin-top: 10px; }
  .flex-scorecard__flags { margin-top: 10px; }
  .flex-scorecard__flag:last-child { border-bottom: none; }

  /* Letterhead: real content (company name + entry title), not CSS-generated text, so it
     can't drift from what's actually on the page. Sits where the hidden hero used to be. */
  .flex-scorecard__print-letterhead {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 10px 6px;
    margin-bottom: 6px;
    border-bottom: 2px solid var(--navy-brand);
  }
  .flex-scorecard__print-logo {
    height: 36px; /* native 99x113 -- fixed height keeps it from stretching */
    width: auto;
  }
  .flex-scorecard__print-brand {
    font-family: var(--font-family-mono);
    font-weight: 700;
    font-size: var(--font-size-base);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--red-500);
  }
  .flex-scorecard__print-title {
    /* xl (32px) reliably wrapped the full title to 2 lines at Letter/A4's usable width --
       lg keeps it to one in the common case and still reads as a document title. */
    font-size: var(--font-size-lg);
    font-weight: 800;
    color: var(--navy-brand);
    margin-top: 2px;
    line-height: 1.2;
  }

  /* position: fixed repeats on every page in Chrome's print engine; an in-flow element
     would only land on whichever page it happened to fall on. */
  .flex-scorecard__print-pagefooter {
    display: block;
    position: fixed;
    bottom: 0.15in;
    right: 0;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-base); /* this page's floor -- nothing here goes smaller */
    color: var(--slate-500);
  }

  /* No background colour on print -- the dash now drops its navy fill like everything else
     here, using a border + dark text instead. Its light-on-dark sub-text colours (navy-100,
     meant for the navy fill) switch to dark gray to match. */
  .flex-scorecard__dash {
    background: none;
    color: var(--navy-brand);
    border: 2px solid var(--navy-brand);
  }
  .flex-scorecard__dash-score span,
  .flex-scorecard__dash-label,
  .flex-scorecard__bandd { color: var(--slate-600); }
  .flex-scorecard__setup,
  .flex-scorecard__section--alt,
  .flex-scorecard__rc,
  .flex-scorecard__rc--s1,
  .flex-scorecard__rc--s2,
  .flex-scorecard__rc--s3 { background: none; }
  .flex-scorecard__flag--bad .flex-scorecard__fi { background: none; color: var(--red-500); }
  .flex-scorecard__flag--warn .flex-scorecard__fi { background: none; color: var(--amber-500); }
  .flex-scorecard__flag--good .flex-scorecard__fi { background: none; color: var(--green-500); }

  .flex-scorecard__dash { position: static; }
  .flex-scorecard__dash .btn { display: none; }
  .flex-scorecard__track { display: none; }

  /* Input hidden -- it can't wrap, so a long value just clips -- in favour of a wrapping
     mirror div (buildPrintSummary() in flex-safety-scorecard.js) styled to match. */
  .flex-scorecard__setup { border-bottom: 1px solid var(--slate-200); }
  .flex-scorecard__field input { display: none; }
  .flex-scorecard__print-field-value {
    display: block; font-weight: 700; color: var(--navy-brand);
    border-bottom: 1px solid var(--slate-400); padding: 4px 2px;
  }

  /* Interactive explainer, full property cards, and non-assessment footer paragraphs are
     screen-only; print-only is the reverse. */
  .flex-scorecard__no-print { display: none !important; }
  .flex-scorecard__print-only,
  .flex-scorecard__print-summary { display: block; }

  /* Section headings are sized for a marketing page (40px); a report reads fine considerably
     smaller, and three of them add up fast against a one-page budget. */
  .flex-scorecard__h2 { font-size: var(--font-size-lg); margin-top: 2px; }

  /* Compact stand-in for the property cards (one line per property, not one card) -- what
     keeps this to roughly a page. Evidence sits full-width below the name/level; as a third
     column it left blank space beside long notes. */
  .flex-scorecard__print-row { padding: 4px 0; border-bottom: 1px solid var(--slate-200); }
  .flex-scorecard__print-row-head { display: flex; align-items: baseline; gap: var(--spacing-sm); }
  .flex-scorecard__print-row-name { flex: 0 0 180px; font-weight: 700; color: var(--slate-700); }
  .flex-scorecard__print-row-level { color: var(--slate-500); }
  .flex-scorecard__print-row-level--1 { color: var(--red-500); font-weight: 700; }
  .flex-scorecard__print-row-level--2 { color: var(--amber-500); font-weight: 700; }
  .flex-scorecard__print-row-level--3 { color: var(--green-500); font-weight: 700; }
  .flex-scorecard__print-row-evidence { margin-top: 3px; color: var(--slate-700); }

  .flex-scorecard__prop,
  .flex-scorecard__flag,
  .flex-scorecard__print-row,
  .flex-scorecard__section { break-inside: avoid; page-break-inside: avoid; }
  .flex-scorecard__h2,
  .flex-scorecard__kicker { break-after: avoid; page-break-after: avoid; }

  /* A little tighter than screen so all 7 result cards stay comfortably inside the
     narrower of the two paper widths (A4) without wrapping to a second row. */
  .flex-scorecard__res { gap: 6px; }
  .flex-scorecard__rc { padding: 8px 4px; }
}