/* Thought Lab v2 — styles
   Colour tokens meet WCAG 2.2 AA contrast. Where the original brand teal or grey
   fell short for text, an accessible variant is used for text only; the original
   colours remain for borders and decoration. */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff') format('woff'); }
/* The 500 file also serves 600 (no SemiBold file is bundled; see README). */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500 600; font-display: swap; src: url('../fonts/poppins-500.woff') format('woff'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/inter-400-italic.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-500.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('../fonts/inter-600.woff') format('woff'); }

:root {
  --navy: #1a2a44;
  --teal: #2c88a9;          /* brand teal: borders, bars, decoration */
  --teal-on-dark: #5cb8d9;  /* teal text on navy (6.4:1) */
  --teal-ink: #00719f;      /* teal text and buttons on light backgrounds (5.1:1 on cream) */
  --teal-ink-hover: #005c82;
  --tl: #e8f4f8;
  --cream: #f8f7f5;
  --coral: #cc5742;         /* decoration */
  --coral-ink: #b14a37;     /* coral text (5.0:1 on cream) */
  --w: #ffffff;
  --bd: #e2e8f0;
  --tm: #4a5568;
  --tlt: #5f6b7d;           /* secondary text (5.0:1 on cream) */
  --on-dark-muted: rgba(255, 255, 255, 0.78);
  --font-head: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
html { background: var(--navy); }
body { font-family: var(--font-body); background: var(--navy); color: var(--tm); -webkit-text-size-adjust: 100%; overflow-wrap: anywhere; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

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

/* Visible focus on both dark and light backgrounds: white inner ring + teal outer ring */
:focus-visible { outline: 2px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 4px var(--teal-ink); }
[tabindex="-1"]:focus { outline: none; box-shadow: none; }

.outer { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; }
.shell { width: 100%; max-width: 560px; background: var(--navy); display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; min-height: 95vh; }
@media (max-width: 600px) { .outer { padding: 0; } .shell { border-radius: 0; min-height: 100vh; } }


.noscript { padding: 24px 28px; color: #fff; }

/* Header */
.hdr { padding: 15px 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; }
.logo { font-family: var(--font-head); color: #fff; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.li { width: 20px; height: 20px; background: var(--teal); border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ht { font-size: 10px; color: var(--on-dark-muted); letter-spacing: 0.1em; text-transform: uppercase; }

/* Progress */
.prog { display: flex; gap: 4px; padding: 14px 28px 0; background: var(--navy); flex-shrink: 0; }
.ps { height: 3px; flex: 1; background: rgba(255, 255, 255, 0.14); border-radius: 2px; }
.ps.d { background: var(--teal); }
.ps.a { background: rgba(44, 136, 169, 0.52); }

/* Screens */
.screen { display: flex; flex-direction: column; flex: 1; }
.ds { background: var(--navy); padding: 20px 28px; flex-shrink: 0; }
.ey { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-on-dark); font-weight: 500; margin-bottom: 8px; }
.dt { font-family: var(--font-head); font-size: 21px; font-weight: 700; color: #fff; line-height: 1.25; margin-bottom: 7px; }
.dt em { color: var(--teal-on-dark); font-style: normal; }
.dsb { font-size: 13px; color: #fff; line-height: 1.65; }
.ls { background: var(--cream); flex: 1; padding: 18px 28px; }

/* Welcome */
.welcome { background: var(--navy); flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 36px 32px; }
.welcome-eyebrow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-on-dark); font-weight: 500; margin-bottom: 14px; }
.welcome-title { font-family: var(--font-head); font-size: 28px; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 16px; }
.accent { color: var(--teal-on-dark); }
.welcome-rule { width: 36px; height: 2px; background: var(--teal); border-radius: 2px; margin: 0 auto 14px; }
.tagline { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; font-size: 13px; color: #fff; font-style: italic; letter-spacing: 0.05em; font-family: var(--font-head); }
.dot { width: 4px; height: 4px; background: var(--teal); border-radius: 50%; }
.welcome-lead { font-size: 15px; color: #fff; line-height: 1.8; margin-bottom: 13px; font-style: italic; max-width: 440px; }
.welcome-text { font-size: 14px; color: #fff; line-height: 1.8; margin-bottom: 13px; max-width: 440px; }
.welcome-text-last { margin-bottom: 24px; }
.welcome-cta { font-size: 15px; color: #fff; font-style: italic; font-family: var(--font-head); font-weight: 500; margin-bottom: 26px; }
.welcome-form { width: 100%; max-width: 360px; text-align: left; }
.flabel { display: block; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.9); margin-bottom: 4px; }
.optional { font-weight: 400; color: var(--on-dark-muted); font-size: 12px; }
.fhint { font-size: 12px; color: var(--on-dark-muted); margin-bottom: 9px; line-height: 1.5; }
.finput { width: 100%; padding: 12px 14px; border: 1.5px solid rgba(255, 255, 255, 0.45); border-radius: 8px; font-size: 16px; color: #fff; background: rgba(255, 255, 255, 0.08); margin-bottom: 14px; display: block; min-height: 48px; }
.finput::placeholder { color: rgba(255, 255, 255, 0.7); }

/* Buttons */
.btn { display: block; width: 100%; padding: 13px; background: var(--teal-ink); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; min-height: 48px; transition: background 0.2s; }
.btn:hover { background: var(--teal-ink-hover); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; background: var(--teal-ink); }
.bg { padding: 12px 20px; background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.5); color: #fff; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; min-height: 48px; flex-shrink: 0; }
.bg:hover { border-color: #fff; }
.bgd { padding: 12px 20px; background: transparent; border: 1.5px solid rgba(26, 42, 68, 0.5); color: var(--navy); border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; min-height: 48px; flex-shrink: 0; }
.bgd:hover { background: var(--navy); color: #fff; }
.bgd:disabled { opacity: 0.45; cursor: not-allowed; background: transparent; color: var(--navy); }
.btn-block { display: block; width: 100%; margin-top: 10px; }
.link-btn { background: none; border: none; padding: 2px 0; text-decoration: underline; cursor: pointer; font-size: inherit; color: var(--teal-ink); min-height: 24px; }
.link-btn.on-dark { color: #fff; }
.nav { display: flex; gap: 10px; padding: 14px 28px; flex-shrink: 0; }
.nav .btn { flex: 1; }
.nav-dark { background: var(--navy); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.nav-light { background: var(--cream); border-top: 1px solid var(--bd); }

/* Info cards */
.ic { background: var(--w); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; border: 1.5px solid var(--bd); }
.ic-accent { border-left: 3px solid var(--teal); border-radius: 0 10px 10px 0; margin-bottom: 16px; }
.it { font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 5px; }
.it-teal { color: var(--teal-ink); }
.ib { font-size: 13px; color: var(--tm); line-height: 1.75; }
.ib p + p { margin-top: 1.1em; }
.ib-lg { font-size: 14px; line-height: 1.9; color: var(--navy); }
.db { background: rgba(204, 87, 66, 0.07); border: 1.5px solid rgba(204, 87, 66, 0.3); border-radius: 10px; padding: 13px 15px; margin-top: 10px; }
.dbt { font-size: 11px; font-weight: 700; color: var(--coral-ink); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.dbb { font-size: 13px; color: var(--tm); line-height: 1.65; }
.dbb p + p { margin-top: 1em; }
.sdiv { height: 1px; background: var(--bd); margin: 16px 0; }
.lead-text { font-size: 14px; color: var(--tm); margin-bottom: 16px; }
.step-label { font-size: 11px; font-weight: 700; color: var(--teal-ink); text-transform: uppercase; letter-spacing: 0.08em; margin: 20px 0 10px; }
.how-to { list-style: none; }
.how-to li + li { margin-top: 2px; }

/* Stage selection (native radios styled as cards) */
fieldset { border: 0; min-width: 0; }
.sc { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.scd { display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: var(--w); border: 1.5px solid var(--bd); border-radius: 10px; cursor: pointer; min-height: 58px; position: relative; }
.scd:hover { border-color: var(--teal); background: var(--tl); }
.scd input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scd:has(input:checked) { border-color: var(--teal); background: var(--tl); }
.scd:has(input:checked) .sn { background: var(--teal-ink); color: #fff; }
.scd:has(input:focus-visible) { outline: 2px solid #fff; box-shadow: 0 0 0 4px var(--teal-ink); }
.sn { width: 30px; height: 30px; border-radius: 7px; background: var(--tl); color: var(--teal-ink); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-head); }
.snm { display: block; font-size: 14px; font-weight: 600; color: var(--navy); }
.sss { display: block; font-size: 12px; color: var(--tlt); }

/* Screen 4 */
.section-label { font-size: 11px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
.voice { border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.voice-core { background: rgba(44, 136, 169, 0.15); border: 1.5px solid rgba(44, 136, 169, 0.5); }
.voice-cj { background: rgba(255, 255, 255, 0.06); border: 1.5px solid rgba(255, 255, 255, 0.2); margin-bottom: 14px; }
.voice-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.voice-label { font-size: 10px; font-weight: 700; color: var(--teal-on-dark); letter-spacing: 0.08em; text-transform: uppercase; }
.voice-name { font-family: var(--font-head); font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.voice-text { font-size: 13px; color: #fff; line-height: 1.6; }
.voice-italic { font-style: italic; line-height: 1.5; }
.voice-note { font-size: 11px; color: #fff; margin-top: 8px; }
.info-btn { width: 28px; height: 28px; border-radius: 50%; border: none; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-btn.on-dark { background: rgba(255, 255, 255, 0.16); color: #fff; }
.info-btn.on-light { background: rgba(26, 42, 68, 0.1); color: var(--navy); }
.info-btn.on-light:hover { background: var(--teal-ink); color: #fff; }

.belief-legend { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 4px; font-family: var(--font-head); }
.belief-instructions-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.belief-instructions { font-size: 13px; color: #fff; line-height: 1.6; }
.belief-count { flex-shrink: 0; margin-left: 12px; font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--teal-on-dark); white-space: nowrap; }
.belief-count-max { font-size: 12px; color: var(--on-dark-muted); }
.belief-hint { font-size: 13px; color: #fff; line-height: 1.6; margin-bottom: 6px; }
.belief-hint-strong { color: var(--teal-on-dark); font-weight: 600; margin-bottom: 14px; }
.belief-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .belief-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .belief-grid { grid-template-columns: 1fr 1fr 1fr; gap: 12px; } }

/* A whole card opens its description (the Read more button stretches over the card);
   the Choose control sits above that layer so it can be pressed on its own. */
.bcard { background: var(--cream); border: 1.5px solid rgba(255, 255, 255, 0.15); border-radius: 10px; position: relative; padding: 14px 14px 12px; display: flex; flex-direction: column; cursor: pointer; }
.bcard:hover { background: #fff; }
.bcard:has(input:checked) { border-color: var(--teal); background: #fff; box-shadow: 0 0 0 2px var(--teal); }
.bname { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 6px; line-height: 1.3; }
.bthoughts-label { font-size: 11px; color: var(--tlt); margin-bottom: 4px; }
.bthoughts { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.bthoughts li { font-size: 13px; color: var(--navy); font-style: italic; line-height: 1.45; }
.bteams { font-size: 11px; color: var(--tm); line-height: 1.45; margin-bottom: 12px; }
.bteams-label { font-weight: 600; color: var(--coral-ink); }
.bcard-actions { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bcard-more { background: none; border: none; padding: 4px 0; font-size: 13px; font-weight: 600; color: var(--teal-ink); cursor: pointer; min-height: 32px; }
.bcard-hit { position: absolute; inset: 0; border-radius: 10px; cursor: pointer; z-index: 0; }
.bcard-more { position: relative; z-index: 1; }
.bcard-more:hover { text-decoration: underline; }
.bcard:has(input:disabled) .bcard-hit { cursor: not-allowed; }
.btick { position: absolute; top: 8px; right: 8px; z-index: 1; }
.btick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.btick label { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; cursor: pointer; }
.btick label::before { content: ''; width: 24px; height: 24px; border: 2px solid var(--teal-ink); border-radius: 6px; background: #fff; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; line-height: 1; }
.btick label:hover::before { background: var(--tl); }
.btick input:checked + label::before { content: '\2713'; background: var(--teal-ink); }
.btick input:focus-visible + label::before { outline: 2px solid #fff; box-shadow: 0 0 0 4px var(--teal-ink); }
.btick input:disabled + label { cursor: not-allowed; opacity: 0.4; }
.bname { padding-right: 34px; }
.bcard:has(input:disabled) .bthoughts, .bcard:has(input:disabled) .bname { opacity: 0.55; }

/* Screen 5 */
.review { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.pill { background: var(--w); border: 1.5px solid var(--bd); border-radius: 20px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--navy); }
.pill-note { font-weight: 400; color: var(--tlt); }
.empty-box { border: 1.5px dashed var(--bd); border-radius: 12px; padding: 16px; text-align: center; font-size: 13px; color: var(--tlt); line-height: 1.6; width: 100%; }
.fc2 { background: var(--w); border: 1.5px solid var(--bd); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.fch { background: var(--navy); padding: 14px 17px; }
.fcn { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.fcd { font-size: 13px; color: #fff; line-height: 1.65; }
.fch .link-btn { color: rgba(255, 255, 255, 0.85); font-size: 12px; margin-top: 8px; }
.fcb { padding: 14px 17px; }
.fcs { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tlt); font-weight: 700; margin-bottom: 7px; }
.response { width: 100%; padding: 10px 12px; border: 1.5px solid #9aa5b4; border-radius: 8px; font-size: 16px; color: var(--navy); resize: vertical; min-height: 76px; background: #fff; line-height: 1.5; }
.response:focus { border-color: var(--teal-ink); }
.response::placeholder { color: #6b7280; }
.counter { font-size: 12px; color: var(--tlt); text-align: right; margin-top: 4px; }
.counter.at-limit { color: var(--coral-ink); font-weight: 600; }
.toggle-link { background: none; border: none; padding: 4px 0; margin-top: 10px; font-size: 13px; color: var(--teal-ink); cursor: pointer; text-align: left; min-height: 28px; }
.toggle-link:hover .toggle-text { text-decoration: underline; }
.examples { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.examples li { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; background: var(--cream); border-radius: 8px; font-size: 13px; color: var(--tm); line-height: 1.55; }
.examples li::before { content: ''; width: 7px; height: 7px; background: var(--teal); border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.examples-heading { margin-top: 11px; }

/* Screen 6 card preview */
.wc { background: var(--navy); border-radius: 14px; padding: 22px; margin-bottom: 14px; }
.wce { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-on-dark); margin-bottom: 16px; font-weight: 600; }
.wcb { margin-bottom: 13px; padding-bottom: 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.wcb:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.wcn { font-family: var(--font-head); font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.wct { font-size: 13px; color: rgba(255, 255, 255, 0.86); line-height: 1.6; font-style: italic; overflow-wrap: anywhere; }
.wc-empty { font-size: 13px; color: rgba(255, 255, 255, 0.86); line-height: 1.6; }
.wcf { text-align: center; font-size: 11px; color: var(--on-dark-muted); margin-top: 16px; letter-spacing: 0.04em; }
.wc.is-print { background: #fff; border: 2px solid var(--navy); }
.wc.is-print .wce, .wc.is-print .wcf { color: var(--teal-ink); }
.wc.is-print .wcn { color: var(--navy); }
.wc.is-print .wct, .wc.is-print .wc-empty { color: #2d3748; }
.wc.is-print .wcb { border-bottom-color: #d5dbe3; }
.format-legend { font-size: 11px; font-weight: 700; color: var(--tlt); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
.fr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.fo { background: var(--w); border: 1.5px solid var(--bd); border-radius: 10px; padding: 14px; text-align: center; cursor: pointer; position: relative; display: block; }
.fo:hover { border-color: var(--teal); }
.fo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fo:has(input:checked) { border-color: var(--teal); background: var(--tl); }
.fo:has(input:focus-visible) { outline: 2px solid #fff; box-shadow: 0 0 0 4px var(--teal-ink); }
.foi { display: block; font-size: 22px; margin-bottom: 5px; }
.fol { display: block; font-size: 14px; font-weight: 500; color: var(--navy); }
.fos { display: block; font-size: 12px; color: var(--tlt); }
.status { font-size: 13px; color: var(--navy); line-height: 1.5; margin-top: 12px; min-height: 1px; }
.status.is-error { color: var(--coral-ink); font-weight: 500; }
.fallback { margin-top: 10px; }
.fallback-image { display: block; width: 60%; max-width: 260px; margin: 12px auto 0; border-radius: 12px; border: 1.5px solid var(--bd); }

/* Footer */
.app-footer { display: flex; justify-content: center; gap: 18px; padding: 10px 28px 14px; background: var(--navy); border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; }

/* Dialogs */
.modal { border: none; border-radius: 14px; max-width: 520px; width: calc(100% - 32px); max-height: 80vh; padding: 24px; margin: auto; color: var(--tm); }
.modal::backdrop { background: rgba(0, 0, 0, 0.6); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; gap: 12px; }
.modal-title { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--navy); }
.modal-close { background: none; border: none; font-size: 22px; color: var(--tlt); cursor: pointer; width: 32px; height: 32px; flex-shrink: 0; border-radius: 6px; }
.chip { display: inline-block; font-size: 11px; font-weight: 600; color: var(--teal-ink); background: var(--tl); padding: 3px 10px; border-radius: 20px; margin-bottom: 12px; }
.modal-body { font-size: 13px; color: var(--tm); line-height: 1.75; margin-bottom: 14px; }
.modal-label { font-size: 10px; font-weight: 700; color: var(--tlt); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.modal-thoughts { font-size: 13px; color: var(--navy); line-height: 1.8; font-style: italic; background: var(--cream); padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; }
.modal-thought-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.modal-lead { font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.6; margin-bottom: 8px; }
.modal-coalition { font-size: 12px; color: var(--coral-ink); font-style: italic; margin-bottom: 14px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Panels: every step screen is one beige panel on the navy page ----------
   Heading, content and buttons all sit inside the panel. Screen 1 stays navy as a cover. */
.screen:not(#s1) { background: var(--cream); }
.screen:not(#s1) .prog { background: transparent; padding-top: 18px; }
.screen:not(#s1) .ps { background: rgba(26, 42, 68, 0.12); }
.screen:not(#s1) .ps.d { background: var(--teal); }
.screen:not(#s1) .ps.a { background: rgba(44, 136, 169, 0.45); }
.screen:not(#s1) .ds { background: transparent; padding-bottom: 6px; }
.screen:not(#s1) .ey { color: var(--teal-ink); }
.screen:not(#s1) .dt { color: var(--navy); }
.screen:not(#s1) .dt em { color: var(--teal-ink); }
.screen:not(#s1) .dsb { color: var(--tm); }
.screen:not(#s1) .nav-light { border-top: 1px solid var(--bd); }

/* Screen 4 on beige: navy boxes for the two voices, white belief cards */
.ls-beliefs .section-label { color: var(--navy); }
.ls-beliefs .voice-core { background: var(--navy); border: 1.5px solid var(--teal); }
.ls-beliefs .voice-cj { background: var(--navy); border: 1.5px solid var(--navy); }
.ls-beliefs .belief-legend { color: var(--navy); }
.ls-beliefs .belief-instructions, .ls-beliefs .belief-hint { color: var(--tm); }
.instructions-box { margin: 4px 0 16px; }
.instructions-box .belief-instructions-row { margin-bottom: 6px; }
.instructions-box .it { margin-bottom: 0; font-size: 14px; }
.ls-beliefs .instructions-box .belief-instructions { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.instructions-box .belief-hint-strong { margin-bottom: 0; }
.ls-beliefs .belief-hint-strong { color: var(--teal-ink); }
.ls-beliefs .belief-count { color: var(--teal-ink); }
.ls-beliefs .belief-count-max { color: var(--tlt); }
.ls-beliefs .bcard { background: var(--w); border: 1.5px solid var(--bd); }
.ls-beliefs .bcard:hover { border-color: var(--teal); background: var(--w); }
.ls-beliefs .bcard:has(input:checked) { border-color: var(--teal); background: var(--tl); box-shadow: 0 0 0 1px var(--teal); }

/* Tablets and desktops: panels are centred cards with rounded corners. Reading screens
   are a comfortable width; Screen 4 is wider so it can show three cards per row. */
@media (min-width: 700px) {
  .shell { max-width: 1040px; }
  .hdr { padding-left: 32px; padding-right: 32px; }
  .screen:not(#s1) { width: 100%; max-width: 760px; margin: 8px auto 24px; border-radius: 14px; overflow: hidden; }
  .screen#s4:not(#s1) { max-width: 1040px; }
  .screen:not(#s1) .prog, .screen:not(#s1) .ds, .screen:not(#s1) .ls, .screen:not(#s1) .nav { padding-left: 40px; padding-right: 40px; }
  .app-footer { border-top: none; }
}

/* Print: the card preview only (fallback if the PDF download fails) */
@media print {
  body { background: #fff; }
  .outer { padding: 0; }
  .shell { box-shadow: none; border-radius: 0; max-width: 100%; background: #fff; }
  .hdr, .prog, .ds, .nav, .app-footer, .screen > .ls > :not(#card-preview) { display: none !important; }
  .screen:not(#s6) { display: none !important; }
  .ls { padding: 20px; background: #fff; }
  .wc { background: #fff !important; border: 2px solid #1a2a44; border-radius: 10px; padding: 20px; max-width: 3.5in; }
  .wce { color: #00719f !important; }
  .wcn { color: #1a2a44 !important; }
  .wct { color: #4a5568 !important; }
  .wcb { border-bottom: 1px solid #e2e8f0 !important; }
  .wcf { color: #5f6b7d !important; }
}