/*
 * WC Program Scorecard styles.
 *
 * Every selector is scoped under .wcsc so the stylesheet can sit inside a WordPress page
 * without the theme reaching into it, and so it can be inlined verbatim into the PDF document
 * shell. Do not add unscoped selectors.
 *
 * Two accessibility corrections against the prototype:
 *   --wcsc-faint is darkened from #8a92a2 (about 3:1 on white) to meet WCAG AA on the small
 *   uppercase labels it is used for, and all motion is gated on prefers-reduced-motion.
 */

.wcsc {
  --wcsc-ink: #12141a;
  --wcsc-ink2: #1b1e26;
  --wcsc-pap: #f7f6f3;
  /* Sampled from the canonical logo's own corner pixel, so the bar and the JPEG ground match. */
  --wcsc-brandpaper: #fdfdfd;
  --wcsc-txt: #1a1d24;
  --wcsc-mut: #545c6b;
  --wcsc-faint: #6b7382;
  --wcsc-acc: #a04d18;
  --wcsc-acc2: #f0e2d6;
  --wcsc-line: #e6e3dc;
  --wcsc-good: #2c6e4a;
  --wcsc-goodbg: #e3f0e8;
  --wcsc-warn: #7a4f10;
  --wcsc-warnbg: #faf0dc;
  --wcsc-bad: #8e2a2a;
  --wcsc-badbg: #fbe9e7;
  --wcsc-blue: #1f4f7a;
  --wcsc-bluebg: #e6eff7;
  --wcsc-focus: #1f4f7a;

  background: var(--wcsc-pap);
  color: var(--wcsc-txt);
  font: 16px/1.6 "Inter", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

.wcsc-serif {
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

.wcsc-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ---------- visible focus, everywhere ---------- */

.wcsc :focus-visible {
  outline: 3px solid var(--wcsc-focus);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Older engines with no :focus-visible support still get a ring. */
.wcsc :focus:not(:focus-visible) { outline: none; }

.wcsc-skip {
  position: absolute; left: -9999px; top: 0;
  background: #fff; color: var(--wcsc-txt); padding: 12px 18px; z-index: 100;
}
.wcsc-skip:focus { left: 12px; top: 12px; }

/* ---------- chrome ---------- */

/**
 * The topbar carries the real Amaxx logo, and the logo is the constraint.
 *
 * The canonical asset is a JPEG on its own paper white ground with no transparency, and it is not
 * ours to alter. So the bar is set to the logo's own background colour rather than the logo being
 * knocked out, boxed in a white chip, or blend-moded onto the dark ink. The image then sits on the
 * bar with no visible seam and no edit to the file. Everything else in the bar is recoloured to
 * suit a light ground.
 */
.wcsc-topbar {
  background: var(--wcsc-brandpaper); color: var(--wcsc-ink); padding: 14px 0;
  border-bottom: 1px solid var(--wcsc-line);
  position: sticky; top: 0; z-index: 20;
}
.wcsc-topbar .wcsc-wrap {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.wcsc-brand { display: flex; align-items: center; }
/* Height, not width, so the wordmark keeps its own proportions at any container size. */
.wcsc-brand img { display: block; height: 34px; width: auto; }
.wcsc-prog { font-size: 12px; color: var(--wcsc-mut); font-variant-numeric: tabular-nums; }
.wcsc-pbar { height: 3px; background: var(--wcsc-line); }
.wcsc-pfill { height: 100%; background: var(--wcsc-acc); width: 0; transition: width .35s ease; }

/* ---------- screens ---------- */

.wcsc-screen { display: none; padding: 48px 0 80px; }
.wcsc-screen.wcsc-on { display: block; animation: wcsc-fade .3s ease; }
@keyframes wcsc-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.wcsc h1 {
  font-size: 36px; line-height: 1.15; letter-spacing: -.02em;
  margin: 0 0 12px; font-weight: 700;
}
.wcsc-dom {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wcsc-acc); font-weight: 800; margin: 0 0 22px;
}
.wcsc-sub { color: var(--wcsc-mut); font-size: 18px; margin: 0 0 32px; max-width: 600px; }

/* The optional marker on the financial screen. Stated before anything is asked, not after. */
.wcsc-optional {
  display: inline-block; margin: 0 0 18px; padding: 5px 12px; border-radius: 999px;
  background: var(--wcsc-acc2); color: var(--wcsc-acc);
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
}

/* ---------- questions ---------- */

.wcsc-q {
  margin: 0 0 30px; background: #fff; border: 1px solid var(--wcsc-line);
  border-radius: 8px; padding: 24px 26px;
}
/**
 * The per card question number. Quiet by design: orientation rather than a heading, so it sits above
 * the question without competing with it for attention.
 */
.wcsc-qnum {
  margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wcsc-faint);
}
.wcsc-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.wcsc-legend {
  display: block; padding: 0; margin: 0 0 4px;
  font-size: 19px; font-weight: 650; line-height: 1.4; letter-spacing: -.01em;
  color: var(--wcsc-txt);
}
.wcsc-qt { font-size: 19px; font-weight: 650; line-height: 1.4; margin: 0 0 4px; letter-spacing: -.01em; }
.wcsc-qs { font-size: 14px; color: var(--wcsc-mut); margin: 0 0 16px; }

/*
 * Real radio and checkbox inputs, in the tab order, wrapped by their own label. The prototype
 * removed both the tab order and the native keyboard behaviour; this restores them.
 */
.wcsc-opt {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--wcsc-line); border-radius: 6px; margin: 8px 0;
  cursor: pointer; background: #fff; transition: border-color .12s, background .12s;
  font-size: 15.5px;
}
.wcsc-opt:hover { border-color: #bdb8ad; background: #fdfcfa; }
.wcsc-opt input {
  margin: 3px 0 0; accent-color: var(--wcsc-acc); flex: none;
  width: 18px; height: 18px;
}
.wcsc-opt:has(input:checked) {
  border-color: var(--wcsc-acc); background: var(--wcsc-acc2);
  box-shadow: inset 0 0 0 1px var(--wcsc-acc);
}
/* Fallback for engines without :has(). form.js also sets this class. */
.wcsc-opt.wcsc-sel {
  border-color: var(--wcsc-acc); background: var(--wcsc-acc2);
  box-shadow: inset 0 0 0 1px var(--wcsc-acc);
}
.wcsc-opt:has(input:focus-visible) {
  outline: 3px solid var(--wcsc-focus); outline-offset: 2px;
}
.wcsc-opt input:disabled { cursor: not-allowed; }
.wcsc-opt:has(input:disabled) { opacity: .55; cursor: not-allowed; }

/* ---------- fields ---------- */

.wcsc-field { margin: 0 0 22px; }
.wcsc-field label { display: block; font-size: 14px; font-weight: 650; margin-bottom: 7px; }
.wcsc-field .wcsc-hint { font-size: 13px; color: var(--wcsc-mut); margin: -3px 0 8px; }
.wcsc-field input,
.wcsc-field select,
.wcsc-field textarea,
.wcsc-q textarea {
  width: 100%; padding: 12px 14px; border: 1px solid #b9b4aa;
  border-radius: 6px; font: inherit; font-size: 15.5px; background: #fff; color: var(--wcsc-txt);
}
.wcsc-field input[aria-invalid="true"],
.wcsc-field select[aria-invalid="true"] { border-color: var(--wcsc-bad); background: #fffafa; }
.wcsc-ferr { color: var(--wcsc-bad); font-size: 13px; font-weight: 650; margin: 6px 0 0; }
.wcsc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

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

/* ---------- conditional blocks in the money step ---------- *
 *
 * The money block is conditional on the risk financing answer, so hiding has to be real: this
 * rule takes a hidden block out of layout, which takes it out of the tab order and out of the
 * accessibility tree. form.js also disables every control inside a hidden block, so a theme that
 * overrode display could still not leave an unasked field reachable by keyboard. Do not weaken
 * either half.
 */
.wcsc [hidden] { display: none !important; }

.wcsc-blk {
  background: #fff; border: 1px solid var(--wcsc-line); border-radius: 8px;
  padding: 22px 24px; margin: 0 0 20px;
}
.wcsc-blk-t {
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--wcsc-faint); font-weight: 800; margin: 0 0 16px;
}
.wcsc-blk .wcsc-field:last-child { margin-bottom: 0; }
.wcsc-blk .wcsc-fieldset { margin: 0 0 4px; }
.wcsc-blk .wcsc-legend { font-size: 15px; font-weight: 650; margin-bottom: 2px; }
.wcsc-blk .wcsc-opt { font-size: 15px; padding: 10px 13px; }

/* M6 drives every block below it, so it reads as the question that sets up the rest. */
.wcsc-blk-driver { border-left: 3px solid var(--wcsc-acc); }
.wcsc-paynote {
  font-size: 13.5px; color: var(--wcsc-mut); margin: 12px 0 0; min-height: 1.2em;
}
.wcsc-paynote:empty { margin: 0; min-height: 0; }

.wcsc-consent {
  background: #fff; border: 1px solid var(--wcsc-line); border-radius: 8px;
  padding: 16px 20px; margin: 0 0 22px; font-size: 14px; color: var(--wcsc-mut);
}
.wcsc-consent a { color: var(--wcsc-blue); }

/* ---------- buttons ---------- */

.wcsc-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 34px; align-items: center; }

/**
 * A nav row whose forward action is a CHOICE rather than a single Next, used by the partner bridge.
 *
 * `align-items: center` on the row above matters here: without it the default `stretch` made Back grow to
 * the full height of the wrapped pair, so at 390px it rendered as a tall block beside two stacked buttons.
 *
 * Both column-reverse rules are deliberate. The accent button is LAST in the DOM so that tab order reaches
 * the safe option first, but it has to READ first once the pair stacks, or the secondary sits above the
 * primary and the hierarchy inverts on exactly the width where it matters most.
 */
.wcsc-choice-pair { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 560px) {
  .wcsc-nav-choice { flex-direction: column-reverse; align-items: stretch; }
  .wcsc-choice-pair { flex-direction: column-reverse; align-items: stretch; }
  .wcsc-choice-pair .wcsc-btn { width: 100%; }
}
/**
 * Buttons, and the anchors that have to look like them.
 *
 * The base rule was element scoped to `button`, so an `<a class="wcsc-btn">` picked up the colours from the
 * modifier below and none of the shape: no padding, no radius, and a browser default underline. Both places
 * that need a link styled as a button were working around that with inline styles. Named here instead, so
 * the workaround is not required a third time.
 */
.wcsc button,
.wcsc a.wcsc-btn {
  font: inherit; font-weight: 650; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent; padding: 13px 30px; font-size: 15.5px;
}
.wcsc a.wcsc-btn { display: inline-block; text-decoration: none; text-align: center; }
.wcsc-btn { background: var(--wcsc-ink); color: #fff; }
.wcsc-btn:hover { background: #000; }
.wcsc-btn:disabled { background: #c8c4bb; cursor: not-allowed; }
.wcsc-btn2 { background: #fff; color: var(--wcsc-mut); border-color: #b9b4aa; }
.wcsc-btn2:hover { color: var(--wcsc-txt); border-color: #8f8a80; }
.wcsc-btn-acc { background: var(--wcsc-acc); color: #fff; }
.wcsc-btn-acc:hover { background: #8a4114; }

/* ---------- notes and live feedback ---------- */

.wcsc-note {
  background: #fff; border-left: 3px solid var(--wcsc-acc); padding: 16px 20px;
  border-radius: 0 6px 6px 0; margin: 0 0 26px; font-size: 15px; color: #3c424e;
}
.wcsc-note b { color: var(--wcsc-txt); }
.wcsc-live { font-size: 14px; padding: 11px 16px; border-radius: 6px; margin-top: 6px; font-weight: 600; }
.wcsc-l0 { background: #efeee9; color: var(--wcsc-mut); }
.wcsc-l1 { background: var(--wcsc-warnbg); color: var(--wcsc-warn); }
.wcsc-l2 { background: var(--wcsc-goodbg); color: var(--wcsc-good); }
.wcsc-err { color: var(--wcsc-bad); font-size: 14px; font-weight: 650; margin-top: 12px; display: none; }
.wcsc-err.wcsc-on { display: block; }

/* ---------- result card ---------- */

.wcsc-rcard {
  background: #fff; border: 1px solid #ddd9d1; border-radius: 10px; overflow: hidden;
  box-shadow: 0 6px 28px rgba(0, 0, 0, .08); margin-bottom: 26px;
}
.wcsc-rhead { background: var(--wcsc-ink); color: #fff; padding: 26px 30px; }
.wcsc-co {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #9aa3b2;
}
.wcsc-rhead h3 { margin: 7px 0 0; font-size: 25px; font-weight: 650; letter-spacing: -.015em; }
.wcsc-rbody { padding: 28px 30px; }

.wcsc-srow {
  display: flex; gap: 30px; align-items: center; flex-wrap: wrap;
  padding-bottom: 24px; border-bottom: 1px solid #ecebe7; margin-bottom: 24px;
}
.wcsc-sbig { font-size: 70px; font-weight: 800; line-height: 1; letter-spacing: -.045em; }
.wcsc-sbig span { font-size: 22px; color: var(--wcsc-faint); font-weight: 600; }
.wcsc-sband {
  font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 800; margin-bottom: 7px;
}
.wcsc-ssay { font-size: 19px; font-weight: 600; max-width: 470px; line-height: 1.4; letter-spacing: -.01em; }

.wcsc-bignum {
  background: #faf8f4; border: 1px solid #eae6dd; border-radius: 8px;
  padding: 24px 26px; margin: 20px 0;
}
.wcsc-bignum-ok { border-color: #8fb39c; background: #f2f8f4; }
.wcsc-bignum-warn { border-color: #d9b48a; background: #fffaf3; }
.wcsc-lbl {
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--wcsc-mut); font-weight: 800; margin-bottom: 9px;
}
.wcsc-v { font-size: 46px; font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--wcsc-ink); }
.wcsc-v-sm { font-size: 25px; letter-spacing: -.01em; line-height: 1.35; }
.wcsc-r { font-size: 14px; color: var(--wcsc-mut); margin-top: 11px; line-height: 1.65; }
.wcsc-r b { color: var(--wcsc-txt); }

/*
 * The secondary tier of the financial block: the provenance badge, and the Maximum Theoretical figure
 * with its label and note.
 *
 * THESE FOUR CLASSES HAD NO RULES AT ALL, and had never had any. render.js has emitted .wcsc-prov,
 * .wcsc-lbl-sm, .wcsc-v-mid and .wcsc-r-sm since the block was written, so all four were falling back to
 * default body size. The effect was invisible in the tests, which read text, and obvious the moment a
 * real PDF page was looked at: the block the source calls "smaller than the headline and visually
 * subordinate to it" was rendering at the same size as body copy and LARGER than the proof line, which
 * inverted the tier it is supposed to sit in.
 *
 * It also cost about five lines of page one, which is what pushed the domain bars over the fold and took
 * the report to five pages with an almost empty second one. Fixing the hierarchy and fixing the
 * pagination are the same change here, which is why it is done this way round rather than by squeezing
 * margins elsewhere and leaving the cause in place.
 */
.wcsc-lbl-sm {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wcsc-mut); font-weight: 800; margin-bottom: 5px;
}
/* Secondary dollar figure: the theoretical maximum, and the headroom figure on the limited states. */
.wcsc-v-mid { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--wcsc-ink); }
.wcsc-r-sm { font-size: 12.5px; color: var(--wcsc-mut); margin-top: 7px; line-height: 1.6; }
/* Separated from the headline it qualifies, without a border: one more rule than the block needs. */
.wcsc-maxtheo { margin-top: 16px; }
/*
 * Provenance. A quiet line, not a headline: it says where the number came from, and it must never
 * compete with the number itself.
 */
.wcsc-prov {
  font-size: 11.5px; letter-spacing: .04em; color: var(--wcsc-mut);
  margin-top: 10px; font-weight: 700;
}

/*
 * The compact proof line: the inputs behind the figure above it.
 *
 * Supporting evidence, not a second headline, so it sits a step below .wcsc-r in size and weight. It is
 * NOT shrunk further to force one line: 13px is the floor for something a CFO is meant to actually read,
 * and the brief prefers honest wrapping to unreadable text. On a phone it wraps at the separators, which
 * is why they are spaced rather than tight, and tabular numerals keep the figures aligned when it does.
 */
.wcsc-proof {
  font-size: 13px; line-height: 1.6; margin-top: 10px;
  color: var(--wcsc-mut); font-variant-numeric: tabular-nums;
}

/* ---------- bars ---------- */

.wcsc-bar { display: flex; align-items: center; gap: 14px; margin: 10px 0; font-size: 13.5px; }
.wcsc-bn { width: 215px; flex: none; color: #3c424e; }
.wcsc-bt { flex: 1; height: 11px; background: #eceae5; border-radius: 6px; overflow: hidden; }
.wcsc-bf { display: block; height: 100%; border-radius: 6px; transition: width .6s ease; }
.wcsc-bv {
  width: 92px; flex: none; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--wcsc-mut); font-weight: 700;
}

/* ---------- finding blocks ---------- */

.wcsc-leak {
  border-left: 3px solid var(--wcsc-bad); background: var(--wcsc-badbg);
  padding: 20px 24px; border-radius: 0 8px 8px 0; margin: 24px 0;
}
.wcsc-leak .wcsc-t, .wcsc-cant .wcsc-t {
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--wcsc-bad); font-weight: 800; margin-bottom: 9px;
}
.wcsc-leak p { margin: 0 0 10px; font-size: 15.5px; }
.wcsc-leak p:last-child { margin-bottom: 0; }
.wcsc-leak-note { font-size: 13px !important; color: #6a4444; }

.wcsc-noleak {
  border-left: 3px solid var(--wcsc-good); background: var(--wcsc-goodbg);
  padding: 20px 24px; border-radius: 0 8px 8px 0; margin: 24px 0;
}
.wcsc-noleak .wcsc-t {
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--wcsc-good); font-weight: 800; margin-bottom: 9px;
}
.wcsc-noleak p { margin: 0; font-size: 15.5px; }

.wcsc-hs {
  border-left: 3px solid var(--wcsc-good); background: #f2f8f4;
  padding: 20px 24px; border-radius: 0 8px 8px 0; margin: 24px 0;
}
.wcsc-hs .wcsc-t {
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--wcsc-good); font-weight: 800; margin-bottom: 9px;
}
.wcsc-hs p { margin: 0 0 10px; font-size: 15.5px; }
.wcsc-hs p:last-child { margin-bottom: 0; }
.wcsc-hs-head { font-weight: 650; }

.wcsc-variance {
  background: var(--wcsc-ink); color: #fff; padding: 24px 26px; border-radius: 8px; margin: 24px 0;
}
.wcsc-variance .wcsc-t {
  font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: #e0a877; font-weight: 800; margin-bottom: 11px;
}
.wcsc-variance p { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }

.wcsc-cant { background: var(--wcsc-badbg); border-radius: 8px; padding: 20px 24px; margin: 24px 0; }
.wcsc-cant ul { margin: 0; padding-left: 20px; font-size: 15.5px; }
.wcsc-cant li { margin: 5px 0; }
.wcsc-cant p { margin: 13px 0 0; font-size: 14.5px; }

.wcsc-note-block {
  background: #fff; border: 1px solid var(--wcsc-line); border-left: 3px solid var(--wcsc-blue);
  border-radius: 0 8px 8px 0; padding: 20px 24px; margin: 24px 0;
}
.wcsc-note-block .wcsc-t {
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--wcsc-blue); font-weight: 800; margin-bottom: 9px;
}
.wcsc-note-block p { margin: 0; font-size: 15.5px; }

/*
 * Lowest scoring area. Deliberately quieter than the leak block, because it is a diagnostic sitting
 * below the cost ranked recommendations and must not compete with them for the eye. Same left rule
 * treatment as the note block, and no background fill, so it reads as an aside rather than a finding of
 * equal weight to the leak. It carries no page break rule either: it is meant to use leftover space on
 * the page it lands on rather than open one of its own.
 */
.wcsc-lowest {
  border-left: 3px solid var(--wcsc-line); padding: 2px 0 2px 20px; margin: 24px 0;
}
.wcsc-lowest .wcsc-t {
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--wcsc-faint); font-weight: 800; margin-bottom: 7px;
}
.wcsc-lowest-h { font-size: 15.5px; font-weight: 700; margin-bottom: 8px; }
.wcsc-lowest p { margin: 0; font-size: 14.5px; color: #454c59; line-height: 1.7; }

.wcsc-moves { margin: 24px 0; }
.wcsc-moves .wcsc-t {
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--wcsc-faint); font-weight: 800; margin-bottom: 12px;
}
.wcsc-moves ol { margin: 0; padding-left: 22px; font-size: 15.5px; }
.wcsc-moves li { margin: 9px 0; }

/*
 * Spec 7: the methodology block is the reason the result survives a forward to the CFO.
 * It is set at 13px deliberately. Do not shrink it into fine print.
 */
.wcsc-method {
  background: #f6f5f1; padding: 20px 24px; border-radius: 8px; margin: 24px 0;
  font-size: 13px; color: #454c59; line-height: 1.75;
}
.wcsc-method-tight { margin-top: -6px; }
.wcsc-method .wcsc-h {
  display: block; letter-spacing: .13em; text-transform: uppercase;
  font-size: 10.5px; color: var(--wcsc-faint); margin-bottom: 9px;
}

.wcsc-cta {
  border: 1px solid var(--wcsc-line); border-left: 3px solid var(--wcsc-ink2);
  border-radius: 0 8px 8px 0; padding: 24px 26px; margin: 24px 0; background: #fff;
}
.wcsc-big { font-size: 22px; font-weight: 650; letter-spacing: -.015em; margin: 0 0 11px; line-height: 1.35; }
.wcsc-cta p { margin: 0 0 10px; font-size: 15.5px; }
.wcsc-sig { font-weight: 700; margin-top: 14px !important; }

.wcsc-opentext { margin-top: 26px; }
.wcsc-saved { font-size: 13px; color: var(--wcsc-good); font-weight: 650; margin: 8px 0 0; min-height: 1.2em; }

/* ---------- narrow screens ---------- */

@media (max-width: 640px) {
  .wcsc-row2 { grid-template-columns: 1fr; }
  .wcsc h1 { font-size: 27px; }
  .wcsc-bn { width: 130px; font-size: 12.5px; }
  .wcsc-bv { width: 68px; }
  .wcsc-sbig { font-size: 54px; }
  .wcsc-rbody { padding: 22px 20px; }
  .wcsc-rhead { padding: 22px 20px; }
}

/* ---------- an option with a subordinate description ---------- *
 *
 * Q11 only. The canonical metric name is what the respondent scans for, so it keeps the option's
 * normal weight and the plain-language line sits under it, smaller and quieter. Making both lines
 * the same size turns a six item multi select into a wall of text.
 */

.wcsc-opt-txt { display: block; }
.wcsc-opt-lbl { display: block; }
.wcsc-opt-sub {
  display: block; margin-top: 2px;
  font-size: 13.5px; line-height: 1.45; color: var(--wcsc-mut); font-weight: 400;
}
.wcsc-opt.wcsc-sel .wcsc-opt-sub { color: var(--wcsc-txt); }

@media (max-width: 560px) {
  .wcsc-opt-sub { font-size: 13px; }
}

/* ---------- worksheet upload and confirmation ---------- *
 *
 * The file input is offscreen rather than display:none, because display:none takes it out of the
 * tab order and its own label becomes the only way to reach it, which is a mouse only control. It
 * stays focusable, and the label is styled as the button.
 */

.wcsc-ws-choose { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.wcsc-ws-file {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wcsc-ws-pick { display: inline-block; cursor: pointer; margin: 0; font-weight: 650; }
/* The focus ring has to follow focus on the input, which is the thing that actually receives it. */
.wcsc-ws-file:focus-visible + .wcsc-ws-pick,
.wcsc-ws-pick:focus-visible { outline: 3px solid var(--wcsc-focus); outline-offset: 2px; }

.wcsc-ws-link {
  background: none; border: none; padding: 0; font: inherit; font-size: 14px;
  color: var(--wcsc-mut); text-decoration: underline; cursor: pointer;
}
.wcsc-ws-link:hover { color: var(--wcsc-txt); }
.wcsc-ws-link:disabled { color: var(--wcsc-faint); text-decoration: none; cursor: default; }

.wcsc-ws-status {
  font-size: 14px; font-weight: 600; margin: 14px 0 0; padding: 11px 16px; border-radius: 6px;
  background: #efeee9; color: var(--wcsc-mut);
}
.wcsc-ws-status:empty { display: none; }
.wcsc-ws-busy { background: var(--wcsc-bluebg); color: var(--wcsc-blue); }
.wcsc-ws-ok { background: var(--wcsc-goodbg); color: var(--wcsc-good); }
.wcsc-ws-status.wcsc-ws-warn { background: var(--wcsc-warnbg); color: var(--wcsc-warn); }

.wcsc-ws-confirm {
  margin: 16px 0 0; padding: 20px 22px; border-radius: 8px;
  background: var(--wcsc-pap); border: 1px solid var(--wcsc-line);
  border-left: 3px solid var(--wcsc-blue);
}
.wcsc-ws-confirm:focus-visible { outline: 3px solid var(--wcsc-focus); outline-offset: 2px; }

/* Label and value in two columns, so a respondent can run their eye down the figures. */
.wcsc-ws-rows {
  display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 0 0 14px;
  font-size: 15.5px;
}
.wcsc-ws-rows dt { color: var(--wcsc-mut); }
.wcsc-ws-rows dd { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.wcsc-ws-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.wcsc-ws-page {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wcsc-faint); font-weight: 700;
}

.wcsc-ws-conflict {
  margin: 4px 0 16px; padding: 14px 16px; border-radius: 6px;
  background: var(--wcsc-warnbg);
}
.wcsc-ws-conflict .wcsc-ws-warn {
  margin: 0 0 12px; font-size: 14px; font-weight: 650; color: var(--wcsc-warn);
  background: none; padding: 0;
}

.wcsc-ws-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

@media (max-width: 560px) {
  .wcsc-ws-rows { grid-template-columns: 1fr; gap: 2px 0; }
  .wcsc-ws-rows dt { font-size: 13px; }
  .wcsc-ws-rows dd { margin-bottom: 10px; }
  .wcsc-ws-acts .wcsc-btn,
  .wcsc-ws-acts .wcsc-btn2 { width: 100%; text-align: center; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .wcsc-screen.wcsc-on { animation: none; }
  .wcsc-pfill,
  .wcsc-bf,
  .wcsc-opt { transition: none; }
}

/* ---------- print, used by the PDF pass ---------- */

@media print {
  .wcsc-topbar,
  .wcsc-pbar,
  .wcsc-opentext,
  .wcsc-nav,
  .wcsc-skip { display: none !important; }

  .wcsc { background: #fff; }
  .wcsc-rcard { box-shadow: none; border: none; margin: 0; }
  .wcsc-rbody { padding: 0; }

  /* Keep a finding and its explanation on one page. */
  .wcsc-leak,
  .wcsc-noleak,
  .wcsc-hs,
  .wcsc-variance,
  .wcsc-cant,
  .wcsc-note-block,
  .wcsc-method,
  .wcsc-cta,
  .wcsc-bignum,
  .wcsc-bar { break-inside: avoid; page-break-inside: avoid; }

  .wcsc-method { font-size: 12.5px; }
}