/*
 * Paid Search Readiness Worksheet: styles
 * CaseLoad Select brand system. Locked palette, three-face type,
 * square corners, symmetric borders, no gradients, no shadows, gold as accent only.
 */

:root {
  --navy: #1E2F58;
  --navy-deep: #0D1520; /* canonical: matches caseloadselect-website/src/app/styles/tokens.css and the app's (marketing) tokens.css */
  --gold: #C4B49A;
  --gold-deep: #7A6748; /* added for the doctrine button hover state; worksheet uses the same name/value */
  --parchment: #F4F3EF;
  --ink: #0D1520;
  --white: #FFFFFF;
  --border: rgba(30,47,88,.18);
  --panel: #FFFFFF;
  --sunk: rgba(30,47,88,.08);
  --muted: rgba(13,21,32,.64);
  --font-display: 'Oxanium', system-ui, sans-serif;
  --font-head: 'Manrope', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

#app { display: block; min-height: 100vh; }

/* ---------- header ---------- */
.ws-header {
  background: var(--navy-deep);
  border-bottom: 2px solid var(--gold);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ws-logo { height: 28px; width: auto; display: block; flex-shrink: 0; }
.ws-header-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- layout ---------- */
/* Width lives on the container, never on text elements; sized toward the 45-75ch body band. */
.ws-main {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 24px 56px;
}
.ws-main.brief { max-width: 740px; }

/* ---------- type ---------- */
.ws-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 14px;
}
.ws-h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(28px, 5.2vw, 40px);
  line-height: 1.08;
  color: var(--navy);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  outline: none;
}
.ws-lead {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.45;
  margin: 0 0 22px;
}
.ws-expect {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  border: 1px solid var(--border);
  background: var(--panel);
}
.ws-expect li {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.ws-expect li:last-child { border-bottom: 0; }

.ws-frame {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

/* ---------- progress ---------- */
.ws-progress {
  height: 4px;
  background: var(--sunk);
  margin-bottom: 12px;
}
.ws-progress-bar { display: block; height: 4px; background: var(--navy); transition: width 180ms linear; }
.ws-step {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 24px;
}
.ws-step-sub { color: var(--muted); margin-left: 8px; letter-spacing: 0.1em; }

/* ---------- fields ---------- */
.ws-field { margin: 0 0 8px; }
.ws-legend {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 25px);
  line-height: 1.24;
  color: var(--navy);
  margin: 0 0 12px;
  padding: 0;
  display: block;
  outline: none;
}
.ws-fieldset { border: 0; margin: 0; padding: 0; }
.ws-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  display: block;
  margin: 0 0 6px;
}
.ws-help {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 18px;
}
.ws-areanote {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.ws-reference {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--sunk);
}

.ws-input {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  width: 100%;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0;
}
.ws-input::placeholder { color: rgba(13, 21, 32, 0.62); }
.ws-numwrap { display: flex; align-items: stretch; gap: 0; max-width: 320px; }
.ws-num { max-width: 220px; }
.ws-unit {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-left: 0;
  background: var(--sunk);
}
.ws-error {
  font-size: 14px;
  color: var(--navy);
  font-weight: 500;
  margin: 8px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--navy);
  background: var(--sunk);
}
.ws-error::before { content: '! '; font-family: var(--font-display); }

/* ---------- choices ---------- */
.ws-choices { display: flex; flex-direction: column; gap: 10px; }
.ws-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  min-height: 44px;
  border: 1px solid var(--border);
  background: var(--white);
  cursor: pointer;
  font-size: 16px;
}
.ws-choice:hover { background: var(--panel); border-color: var(--navy); }
.ws-choice input[type="radio"], .ws-choice input[type="checkbox"] {
  margin: 2px 0 0;
  width: 18px;
  height: 18px;
  accent-color: var(--navy);
  flex-shrink: 0;
}
.ws-choice:has(input:checked) { border-color: var(--navy); background: var(--panel); }
.ws-choice-text { line-height: 1.4; }
.email-consent { margin-bottom: 14px; }

/* ---------- groups ---------- */
.ws-group { display: flex; flex-direction: column; gap: 16px; }
.ws-field-inline { margin: 0; }

/* ---------- buttons ---------- */
.ws-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.ws-subactions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
.ws-actions-brief { margin-top: 36px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 0;
  cursor: pointer;
  background: none;
  transition: color 140ms, background 140ms, border-color 140ms;
  color: var(--navy);
  border-color: rgba(30,47,88,.45);
}
.btn:hover { color: var(--gold-deep); border-color: var(--gold-deep); background: none; }
.btn-primary { color: var(--white); background: var(--navy); border-color: var(--navy); }
.btn-primary:hover { color: var(--navy); background: transparent; border-color: var(--navy); }
.btn-quiet { color: var(--navy); border-color: rgba(30,47,88,.45); }
.btn-quiet:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
.btn-link {
  display: inline-block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(30,47,88,.45);
  transition: color 140ms;
  cursor: pointer;
}
.btn-link:hover { color: var(--gold-deep); }
.ws-skip { display: inline-block; margin-top: 12px; }

/* ---------- resume ---------- */
.ws-resume {
  width: 100%;
  margin-top: 28px;
  padding: 16px;
  border: 1px solid var(--border);
  background: var(--panel);
}
.ws-resume .ws-actions { margin-top: 0; }
.ws-resume p { margin: 0 0 12px; font-size: 15px; }

/* ---------- brief ---------- */
.brief-head { margin-bottom: 20px; }
.brief-title { margin-bottom: 8px; }
/* Sentence case: this line carries a full sentence, and body-length copy is never set in all caps. */
.brief-sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0;
  color: var(--muted);
  margin: 0;
}
.brief-position {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.85);
  padding: 24px 28px;
  margin: 0 0 32px;
}
.brief-position p { margin: 0; font-size: 16px; line-height: 1.5; }

.brief-section { padding: 24px 0; border-top: 1px solid var(--border); }
.brief-section:first-of-type { border-top: 0; }
.brief-h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  color: var(--navy);
  margin: 0 0 14px;
  line-height: 1.25;
}
.brief-list { margin: 0; padding-left: 20px; }
.brief-list li { margin: 0 0 9px; font-size: 15.5px; line-height: 1.45; }
.brief-list li:last-child { margin-bottom: 0; }
.brief-empty { margin: 0; color: var(--muted); font-size: 15px; }

.brief-economics {
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 22px 24px;
  margin-top: 8px;
}
.brief-illus-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 16px 0 8px;
}
.brief-note {
  font-size: 15px;
  line-height: 1.5;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--white);
}
.brief-missing li { color: var(--muted); }

.brief-closing p {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--navy);
  margin: 0;
  line-height: 1.5;
}
.brief-email { border-top: 1px solid var(--border); }
.email-done { margin: 14px 0 0; font-weight: 500; color: var(--navy); }

/* ---------- footer ---------- */
.ws-footer {
  max-width: 780px;
  margin: 0 auto;
  padding: 22px 24px 40px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

/* ---------- focus + a11y ---------- */
/* Navy ring: gold fails the 3:1 non-text contrast minimum on parchment and white (WCAG 1.4.11). */
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.ws-choice:focus-within { outline: 3px solid var(--navy); outline-offset: 2px; }
/* Headings take focus programmatically to announce each new screen to assistive tech.
   They are not tab-stops, so the visible ring is suppressed on them (interactive controls keep theirs). */
.ws-h1:focus, .ws-legend:focus, .brief-title:focus { outline: none; }
.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;
}
.ts { flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .ws-progress-bar { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 480px) {
  .ws-main { padding: 28px 18px 44px; }
  .ws-header { padding: 14px 18px; }
  .ws-actions { gap: 10px; }
  .btn { width: 100%; min-height: 44px; padding: 0 16px; font-size: 10px; justify-content: center; text-align: center; }
  .btn-link { width: auto; }
  .ws-numwrap { max-width: 100%; }
  .brief-position { padding: 20px; }
}

/* ---------- print ---------- */
@media print {
  html, body { background: var(--white); }
  /* Keep the navy header bar so the white-and-gold logo variant stays visible on paper. */
  .ws-header { background: var(--navy-deep); border-bottom: 2px solid var(--gold); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .no-print { display: none !important; }
  /* Keep a readable measure on paper instead of letting lines run the full sheet. */
  .ws-main, .ws-main.brief { max-width: 680px; margin: 0 auto; padding: 0 0 12px; }
  .brief-position { background: var(--white); color: var(--ink); border: 1px solid var(--navy); }
  .brief-section, .brief-economics { break-inside: avoid; page-break-inside: avoid; }
  .ws-footer { border-top: 1px solid var(--navy); }
  a[href]::after { content: ''; }
}