/* Blue Whale Technologies polish layer (Builder C). Loaded AFTER site.css and pages.css.
   Refines tokens, spacing, typography, responsive rules, components. No copy changes. */

/* ============ 1. Base refinements ============ */
:root{ --red:#ff4d5e; --red-hi:#ff8a5c; --red-ink:#ffb3c0; --focus:#7fe3ff; }
html{-webkit-text-size-adjust:100%}
body{text-rendering:optimizeLegibility}
img,svg,video{max-width:100%}
img{height:auto}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
a,button,input,select,textarea,summary{touch-action:manipulation}
input,select,textarea{font-size:16px} /* prevents iOS zoom on focus */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .card.hover:hover,.tier:hover,.btn:hover{transform:none!important}
}
@media (hover:none){.card.hover:hover{transform:none}}


/* ============ 1b. Component refinements (found in audit, Oct 27) ============ */
/* Tap targets: inline "more" links inside cards were 23px tall */
a.more{display:inline-flex;align-items:center;min-height:44px}
/* Small labels: lift decorative/secondary labels to 14px minimum (mockup used 12 to 13px) */
.card .n,.tier .tag,.tag,.badge,legend .num,.consent .opt,.opt{font-size:max(14px,1em)}
.small,small{font-size:max(16px,1em)}
.card .n,.tier .tag{letter-spacing:.12em}
.hero-visual .cap .pill{font-size:max(12px,.75rem)} /* decorative hero diagram labels; whole diagram is aria-hidden, see requests */
/* Section anchors clear the sticky header */
[id]{scroll-margin-top:84px}
@media (max-width:700px){[id]{scroll-margin-top:76px}}
/* Form controls: larger hit area for checkboxes/radios, clear keyboard focus on top of the glow */
input[type=checkbox],input[type=radio]{width:22px;height:22px}
.consent label,.checks label{min-height:44px;align-items:flex-start}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline-offset:3px}
input::placeholder,textarea::placeholder{color:#8fa4c2;opacity:1} /* 6.3:1 on field bg */
[aria-invalid=true]{box-shadow:0 0 0 4px rgba(255,122,122,.18)}
.field-err,.err{font-weight:500}
.field-err:not([hidden])::before,.err:not([hidden])::before{content:"\26A0\00a0";font-weight:700}
.form-success:focus{outline:none}
/* Long CTA text never clips; full width on phone */
.btn{white-space:normal;text-align:center}
@media (max-width:700px){.cta-row .btn,.tier .btn,.cta-band .btn{width:100%}}
/* Prevent long words / emails from forcing horizontal scroll on 390px */
main,footer{overflow-wrap:anywhere}
main h1,main h2,main h3{overflow-wrap:break-word}
/* Hover lift only for real hover devices */
@media (hover:none){.btn:hover{transform:none}}
/* Skip link visible on focus and above sticky header */
.skip:focus{z-index:100}
/* Keep the sticky mobile menu usable on short screens */
@media (max-width:920px){nav.main.open{max-height:calc(100vh - 72px);overflow-y:auto}}

/* ============ 2. PREVIEW-ONLY card accent variant ============
   Default (no attribute) = current blue outlines, nothing changes.
   Switch:  <html data-card-accent="red">   (set by the preview toggle in ux.js)
   Red hex: #ff4d5e (5.0:1 on card bg #0c1f40, 6.1:1 on page bg #040a15). Hover/open: warm orange-red #ff8a5c (7.1:1).
   Scope: card components only. Palette, buttons, links, icons, header, Level 1 amber card and plum card are untouched.
   To make red permanent after Chad picks it: move these token values into :root of site.css and delete this block. */
html[data-card-accent="red"] :is(.card,.band,.g-band,.stat,.callout,details,form,.f-cta,.policy-card,.tier.blue){
  --card-border:rgba(255,77,94,.72);
  --card-border-hi:#ff8a5c;
  --card-glow:0 30px 60px -30px rgba(255,77,94,.38),0 0 0 1px rgba(255,77,94,.22),0 0 50px -20px rgba(255,120,80,.28);
  --card-glow-hi:0 40px 80px -30px rgba(255,120,80,.5),0 0 0 1px rgba(255,138,92,.55),0 0 64px -12px rgba(255,77,94,.42);
}
html[data-card-accent="red"] .tier.blue{border-color:rgba(255,77,94,.8);box-shadow:0 40px 80px -30px rgba(255,77,94,.4),0 0 0 1px rgba(255,77,94,.4),0 0 60px -12px rgba(255,120,80,.3)}
html[data-card-accent="red"] .tier.blue:hover,
html[data-card-accent="red"] .tier.blue.complete{border-color:#ff8a5c;box-shadow:0 40px 80px -30px rgba(255,120,80,.5),0 0 0 1px rgba(255,138,92,.6),0 0 70px -8px rgba(255,77,94,.45)}
html[data-card-accent="red"] .pathway .card.now{border-color:#ff8a5c;box-shadow:var(--card-glow-hi)}
html[data-card-accent="red"] .card:focus-within,
html[data-card-accent="red"] form:focus-within{border-color:#ff8a5c}
/* keyboard focus ring stays cyan-white on every card: 3px, 11:1 or better against red-outlined cards */
html[data-card-accent="red"] :focus-visible{outline-color:#fff}

/* ============ 3. Preview-only toggle button (created by ux.js) ============ */
.ux-preview-toggle{position:fixed;left:14px;bottom:14px;z-index:60;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(127,227,255,.6);background:rgba(4,10,21,.94);color:#eef4ff;font:600 15px/1.2 "Poppins",system-ui,sans-serif;cursor:pointer;box-shadow:0 10px 30px -8px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ux-preview-toggle:hover{border-color:#fff}
.ux-preview-toggle .sw{width:14px;height:14px;border-radius:50%;background:#39d0ff;box-shadow:0 0 0 2px rgba(255,255,255,.3)}
html[data-card-accent="red"] .ux-preview-toggle .sw{background:#ff4d5e}
.ux-preview-toggle small{font-size:13px;font-weight:500;color:#b0c2da}
@media print{.ux-preview-toggle{display:none}}