/* Entheo: Trip without falling. Interface styles.
   Colour and component values follow the live entheo.org design system (brand.css, design-system.css). */

@font-face { font-family: 'Source Serif 4'; src: url('../assets/fonts/SourceSerif4-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('../assets/fonts/SourceSerif4-It.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('../assets/fonts/SourceSerif4-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('../assets/fonts/SourceSerif4-SemiboldIt.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Source Serif 4 Display'; src: url('../assets/fonts/SourceSerif4Display-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif 4 Display'; src: url('../assets/fonts/SourceSerif4Display-BlackIt.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  --ink: #010326;
  --blue: #070A40;
  --blue-soft: #161340;
  --blue-2: #232155;
  --orange: #EB5226;
  --orange-deep: #A83617;
  --orange-shadow: #9D3D22;
  --yellow: #E4E5DB;
  --paper: #E4E5DB;
  --paper-2: #EEEFE8;
  --white: #FFFFFF;
  --slate: #5E6380;
  --ocean: #0F528C;
  --line: rgba(1, 3, 38, .16);
  --line-strong: rgba(1, 3, 38, .32);
  --focus: #0F528C;
  --body-font: 'freight-micro-pro', 'Source Serif 4', Georgia, serif;
  --display-font: 'freight-text-pro', 'Source Serif 4 Display', 'Source Serif 4', Georgia, serif;
  --card-radius: 22px;
  --button-radius: 12px;
  --card-shadow: 5px 6px 0 var(--slate);
  --header-h: 72px;
  --sidebar-w: 316px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 640ms;
}
.reduce-motion { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; }
@media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--body-font); font-size: 18px; line-height: 1.6; font-synthesis: none; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--orange-deep); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--display-font); font-weight: 900; line-height: 1.12; margin: 0; letter-spacing: -.015em; color: var(--ink); }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--blue); color: var(--white); padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { top: 12px; color: var(--white); }
.noscript { padding: 24px; background: var(--paper); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; height: var(--header-h); background: var(--white); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 16px; padding: 0 20px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand img { width: 118px; height: auto; }
.brand-course { font-family: var(--body-font); font-style: italic; font-size: 17px; color: var(--slate); white-space: nowrap; padding-left: 14px; border-left: 1px solid var(--line); }
.header-spacer { flex: 1; }
.save-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--slate); white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: transparent; border: 0; }
.save-status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--slate); flex: none; transition: background var(--t-med); }
.save-status[data-state="ok"] .dot { background: #2E7D4F; }
.save-status[data-state="session"] .dot { background: var(--ocean); }
.save-status[data-state="error"] { color: var(--orange-deep); background: #FBE9E3; }
.save-status[data-state="error"] .dot { background: var(--orange); }
.save-status.pulse .dot { animation: pulse var(--t-slow) var(--ease); }
@keyframes pulse { 0% { transform: scale(1); } 40% { transform: scale(1.8); } 100% { transform: scale(1); } }
.header-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: var(--button-radius); border: 1.5px solid var(--blue); background: var(--white); color: var(--blue); font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; }
.header-btn:hover { background: var(--paper); color: var(--blue); }
.header-btn.help { border: 2px solid var(--orange); box-shadow: 0 4px 0 var(--orange); color: var(--ink); }
.header-btn.help:hover { background: #FDF0EB; }
.header-btn.help:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--orange); }
.header-btn svg { width: 18px; height: 18px; flex: none; }
.menu-btn { display: none; }

/* ---------- Layout ---------- */
.layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: calc(100dvh - var(--header-h)); }
.sidebar { position: sticky; top: var(--header-h); height: calc(100dvh - var(--header-h)); overflow-y: auto; background: var(--paper); border-right: 1px solid var(--line); padding: 22px 18px 40px; overscroll-behavior: contain; }
.main { min-width: 0; padding: 40px clamp(20px, 5vw, 72px) 96px; }
.stage { max-width: 780px; margin: 0 auto; }

/* ---------- Sidebar ---------- */
.toc-top { display: grid; gap: 12px; margin-bottom: 20px; }
.resume-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--orange); background: var(--white); box-shadow: 0 4px 0 var(--orange); color: var(--ink); font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.resume-btn small { display: block; font-weight: 400; color: var(--slate); font-size: 14px; }
.resume-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--orange); }
.overall { font-size: 14px; color: var(--slate); }
.overall-bar { height: 6px; border-radius: 99px; background: rgba(7,10,64,.12); overflow: hidden; margin-top: 6px; }
.overall-bar span { display: block; height: 100%; background: var(--blue); border-radius: inherit; transform-origin: left; transition: width var(--t-slow) var(--ease); }
.toc-label { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); margin: 18px 6px 8px; }
.toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.toc-section { border-radius: 14px; }
.toc-row { display: flex; align-items: center; gap: 4px; }
.toc-link { flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; text-decoration: none; color: var(--ink); min-height: 48px; min-width: 0; position: relative; }
.toc-link:hover { background: rgba(255,255,255,.6); color: var(--ink); }
.toc-section.current > .toc-row .toc-link { background: var(--white); box-shadow: inset 4px 0 0 var(--orange); }
.toc-num { position: relative; width: 34px; height: 34px; flex: none; display: grid; place-items: center; font-weight: 600; font-size: 14px; color: var(--blue); }
.toc-num svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.toc-num .ring-bg { stroke: rgba(7,10,64,.16); }
.toc-num .ring { stroke: var(--blue); transition: stroke-dashoffset var(--t-slow) var(--ease); }
.toc-section.done .toc-num .ring { stroke: #2E7D4F; }
.toc-num .check { display: none; }
.toc-num .check svg { width: 16px; height: 16px; }
.toc-section.done .toc-num .n { display: none; }
.toc-section.done .toc-num .check { display: block; color: #2E7D4F; }
.toc-text { min-width: 0; line-height: 1.25; }
.toc-title { display: block; font-weight: 600; font-size: 16px; }
.toc-meta { display: block; font-size: 13.5px; color: var(--slate); }
.tag { display: inline-block; font-size: 12px; letter-spacing: .04em; padding: 1px 8px; border-radius: 99px; background: var(--yellow); color: var(--ink); margin-left: 6px; vertical-align: 2px; font-weight: 600; }
.tag.optional { background: transparent; border: 1px solid var(--line-strong); font-weight: 400; }
.toc-toggle { width: 40px; height: 40px; border-radius: 10px; border: 0; background: transparent; display: grid; place-items: center; color: var(--blue); flex: none; }
.toc-toggle:hover { background: rgba(255,255,255,.6); }
.toc-toggle svg { transition: transform var(--t-med) var(--ease); }
.toc-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.toc-sub { list-style: none; margin: 2px 0 8px 24px; padding: 0 0 0 16px; border-left: 1px solid var(--line-strong); display: grid; gap: 1px; }
.toc-sub[hidden] { display: none; }
.toc-sub a { display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px; border-radius: 10px; text-decoration: none; color: var(--ink); font-size: 15px; line-height: 1.3; }
.toc-sub a:hover { background: rgba(255,255,255,.6); }
.toc-sub a[aria-current="page"] { background: var(--white); font-weight: 600; }
.vdot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--slate); flex: none; margin-top: 5px; transition: background var(--t-med); }
.visited .vdot { background: var(--blue); border-color: var(--blue); }
.toc-extra { display: grid; gap: 6px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.toc-extra a { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 15.5px; }
.toc-extra a:hover { background: rgba(255,255,255,.6); }
.toc-extra svg { width: 20px; height: 20px; color: var(--blue); flex: none; }
.path-note { font-size: 14px; color: var(--slate); padding: 0 6px; }
.path-note button { background: none; border: 0; padding: 0; color: var(--blue); text-decoration: underline; font-size: 14px; }

/* ---------- Screen ---------- */
.screen { animation: screenIn var(--t-med) var(--ease); }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14.5px; color: var(--slate); margin-bottom: 18px; }
.crumb .sec { color: var(--orange-deep); font-weight: 600; letter-spacing: .02em; }
.crumb .count { margin-left: auto; }
.screen-head { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: end; margin-bottom: 26px; }
.screen-head.with-visual { grid-template-columns: minmax(0, 1fr) 220px; }
.kicker { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); margin: 0 0 10px; }
.screen h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); letter-spacing: -.025em; }
.screen h1:focus { outline: none; }
.screen h1:focus-visible { outline: none; }
.lead { font-size: clamp(1.15rem, 2vw, 1.34rem); line-height: 1.5; margin: 18px 0 0; color: var(--ink); max-width: 44ch; }
.hero-visual img { width: 100%; height: auto; border-radius: 0; }
.hero-screen { background: var(--blue-soft) url('../assets/img/homepage-header.webp') center/cover; color: var(--white); border-radius: var(--card-radius); padding: clamp(28px, 5vw, 56px); margin-bottom: 30px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 28px; align-items: center; }
.hero-screen h1 { color: var(--white); font-size: clamp(2.6rem, 6vw, 4.4rem); }
.hero-screen h1 em { font-family: var(--body-font); font-weight: 600; color: var(--yellow); font-style: italic; letter-spacing: -.02em; display: block; }
.hero-screen .kicker { color: var(--paper); }
.hero-screen .lead { color: var(--white); }
.blocks > * + * { margin-top: 22px; }
.blocks > .text-block + .text-block { margin-top: 12px; }
.text-block { font-size: 18.5px; max-width: 64ch; }
.text-block p:last-child { margin-bottom: 0; }

/* Tailored note */
.tailor { display: flex; gap: 12px; align-items: flex-start; background: var(--white); border: 1px dashed var(--line-strong); border-radius: 16px; padding: 14px 16px; font-size: 16.5px; }
.tailor svg { flex: none; color: var(--ocean); margin-top: 3px; }

/* Callouts */
.callout { border-radius: 0 16px 16px 0; border-left: 5px solid var(--blue); background: var(--paper); padding: 18px 22px; }
.callout h2, .callout h3 { font-family: var(--body-font); font-weight: 600; font-size: 18.5px; letter-spacing: 0; margin: 0 0 6px; line-height: 1.35; display: flex; gap: 10px; align-items: center; }
.callout p { margin: 0; }
.callout ul { margin: 6px 0 0; padding-left: 20px; }
.callout li + li { margin-top: 4px; }
.callout .after { margin-top: 10px; font-weight: 600; }
.callout.safety { border-left-color: var(--orange); background: #FBEDE6; }
.callout.safety h2 svg, .callout.safety h3 svg { color: var(--orange-deep); }
.callout.valid { border-left-color: var(--yellow); background: var(--paper); }
.callout.note { border-left-color: var(--ocean); background: #EEF1F4; }
.callout svg { width: 20px; height: 20px; flex: none; }

/* Cards */
.cards { display: grid; gap: 16px; }
.cards.two, .cards.compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { background: var(--paper); border-radius: var(--card-radius); padding: 22px 22px 20px; border: 1px solid transparent; }
.card h3 { font-size: 21px; margin-bottom: 8px; }
.card p { margin: 0; font-size: 17px; }
.card ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 16.5px; }
.card li { position: relative; padding-left: 26px; }
.card li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 12px; height: 7px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
.card.orange { background: var(--white); border: 1.5px solid var(--line-strong); }
.card.orange li::before { width: 12px; height: 2px; border: 0; background: var(--orange-deep); transform: none; top: 12px; }
.card.one { background: var(--white); border: 1.5px solid var(--line-strong); box-shadow: var(--card-shadow); }

/* Lists */
.plain-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.plain-list li { position: relative; padding-left: 26px; font-size: 17.5px; }
.plain-list li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }
.list-title { font-family: var(--body-font); font-weight: 600; font-size: 18px; margin-bottom: 10px; }

/* Expandable boxes */
.more { border: 1px solid var(--line-strong); border-radius: 16px; background: var(--white); overflow: hidden; }
.more + .more { margin-top: 10px !important; }
.more summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 18px; min-height: 52px; font-weight: 600; font-size: 17px; }
.more summary::-webkit-details-marker { display: none; }
.more summary .kind { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); font-weight: 400; }
.more summary .chev { margin-left: auto; transition: transform var(--t-med) var(--ease); color: var(--blue); flex: none; }
.more[open] summary .chev { transform: rotate(180deg); }
.more summary:hover { background: var(--paper-2); }
.more-body { padding: 4px 20px 18px; font-size: 17px; }
.more-body p { margin: 10px 0 0; }
.more[open] .more-body { animation: fadeDown var(--t-med) var(--ease); }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.refs { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); font-size: 15px; list-style: none; display: grid; gap: 6px; }
.refs li { padding-left: 0; }
.reviewed { font-size: 14px; color: var(--slate); margin-top: 12px; }
.more-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; flex: none; color: var(--blue); }
.more-icon svg { width: 16px; height: 16px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 11px 22px; border-radius: var(--button-radius); font-weight: 600; font-size: 17px; text-decoration: none; border: 2px solid var(--orange); background: var(--white); color: var(--ink); box-shadow: 0 5px 0 var(--orange); transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); line-height: 1.2; }
.btn:hover { background: #FDF0EB; color: var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--orange); }
.btn.primary { background: var(--orange); color: var(--ink); box-shadow: 0 5px 0 var(--orange-shadow); border-color: var(--orange); }
.btn.primary:hover { background: #F06A43; }
.btn.primary:active { box-shadow: 0 2px 0 var(--orange-shadow); }
.btn.quiet { border: 1.5px solid var(--line-strong); box-shadow: none; background: var(--white); font-weight: 500; }
.btn.quiet:hover { background: var(--paper-2); }
.btn.small { min-height: 40px; padding: 7px 14px; font-size: 15.5px; box-shadow: 0 3px 0 var(--orange); }
.btn.small.quiet { box-shadow: none; }
.btn.danger { border-color: var(--orange-deep); box-shadow: 0 4px 0 var(--orange-deep); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex: none; }
.link-btn { background: none; border: 0; padding: 0; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }

/* Pager */
.pager { display: flex; justify-content: space-between; align-items: stretch; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.pager a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.pager .next { margin-left: auto; text-align: right; align-items: flex-end; }
.pager .lbl { font-size: 14px; color: var(--slate); }
.pager .next .btn { max-width: 100%; }
.pager .back-link { flex-direction: row; align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 14px; border-radius: var(--button-radius); border: 1.5px solid var(--line-strong); color: var(--ink); background: var(--white); font-weight: 500; }
.pager .back-link:hover { background: var(--paper-2); color: var(--ink); }
.mobile-bar { display: none; }

/* ---------- Interactions: shared ---------- */
.ix { background: var(--white); border: 1.5px solid var(--line-strong); border-radius: var(--card-radius); padding: 22px; }
.ix-title { font-family: var(--body-font); font-weight: 600; font-size: 18px; margin: 0 0 12px; line-height: 1.35; letter-spacing: 0; }
.ix-hint { font-size: 15.5px; color: var(--slate); margin: -6px 0 12px; }
.ix-foot { font-size: 15px; color: var(--slate); margin-top: 12px; }

/* Checklist (select tasks) */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.check-item { display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left; background: var(--white); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; min-height: 52px; font-size: 17px; line-height: 1.4; transition: background var(--t-fast), border-color var(--t-fast); }
.check-item:hover { border-color: var(--line-strong); background: var(--paper-2); }
.check-item[aria-checked="true"], .check-item[aria-pressed="true"] { background: var(--paper); border-color: var(--blue); }
.box { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--blue); flex: none; display: grid; place-items: center; background: var(--white); margin-top: 1px; }
.box svg { width: 16px; height: 16px; color: var(--white); }
.box svg path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset var(--t-med) var(--ease); }
[aria-checked="true"] > .box, [aria-pressed="true"] > .box { background: var(--blue); }
[aria-checked="true"] > .box svg path, [aria-pressed="true"] > .box svg path { stroke-dashoffset: 0; }
.check-item .state { margin-left: auto; font-size: 13.5px; color: var(--slate); white-space: nowrap; padding-left: 8px; }
.list-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 15.5px; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 9px 16px; background: var(--white); font-size: 16px; min-height: 44px; text-align: left; line-height: 1.3; }
.chip:hover { background: var(--paper-2); }
.chip[aria-pressed="true"] { background: var(--blue); color: var(--white); border-color: var(--blue); }
.chip-note { margin-top: 14px; }

/* Reflection field */
.reflect label, .field label { display: block; font-weight: 600; font-size: 17.5px; margin-bottom: 4px; line-height: 1.35; }
.reflect .hint, .field .hint { display: block; font-size: 15px; color: var(--slate); margin-bottom: 8px; font-weight: 400; }
textarea, input[type="text"], input[type="date"], input[type="tel"], select { width: 100%; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--white); padding: 12px 14px; font-size: 17px; line-height: 1.5; }
textarea { min-height: 96px; resize: vertical; }
textarea:focus, input:focus, select:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.starters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.starter { border: 1px dashed var(--line-strong); background: var(--paper-2); border-radius: 999px; padding: 6px 12px; font-size: 15px; min-height: 36px; }
.starter:hover { background: var(--paper); }
.privacy-line { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--slate); margin-top: 8px; flex-wrap: wrap; }
.privacy-line svg { width: 15px; height: 15px; flex: none; }
.fields { display: grid; gap: 16px; }

/* Flip cards */
.flip-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flip { position: relative; min-height: 190px; perspective: 1200px; border: 0; padding: 0; background: none; text-align: left; border-radius: var(--card-radius); }
.flip-inner { position: relative; width: 100%; height: 100%; min-height: 190px; transition: transform var(--t-slow) var(--ease); transform-style: preserve-3d; display: grid; }
.flip[aria-pressed="true"] .flip-inner { transform: rotateY(180deg); }
.flip-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--card-radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.flip-front { background: var(--blue); color: var(--white); }
.flip-front .q { font-family: var(--display-font); font-weight: 900; font-size: 22px; line-height: 1.2; }
.flip-front .turn { margin-top: auto; font-size: 14.5px; color: var(--paper); display: flex; gap: 8px; align-items: center; }
.flip-back { background: var(--paper); transform: rotateY(180deg); font-size: 16.5px; }
.flip-back .a { font-weight: 600; color: var(--orange-deep); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.reduce-motion .flip-inner, .no-3d .flip-inner { transform: none !important; }
.reduce-motion .flip .flip-back, .no-3d .flip .flip-back { transform: none; opacity: 0; transition: opacity var(--t-med); }
.reduce-motion .flip[aria-pressed="true"] .flip-back, .no-3d .flip[aria-pressed="true"] .flip-back { opacity: 1; }
.reduce-motion .flip[aria-pressed="true"] .flip-front, .no-3d .flip[aria-pressed="true"] .flip-front { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transform: none !important; }
  .flip .flip-back { transform: none; opacity: 0; }
  .flip[aria-pressed="true"] .flip-back { opacity: 1; }
  .flip[aria-pressed="true"] .flip-front { opacity: 0; }
}

/* Knowledge check and scenario */
.kc-options { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.opt { width: 100%; text-align: left; display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--line-strong); background: var(--white); border-radius: 14px; padding: 13px 16px; font-size: 17px; line-height: 1.4; min-height: 52px; }
.opt:hover { background: var(--paper-2); }
.opt .mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--blue); flex: none; margin-top: 1px; display: grid; place-items: center; }
.opt[aria-checked="true"] { border-color: var(--blue); background: var(--paper); }
.opt[aria-checked="true"] .mark::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.feedback { margin-top: 14px; border-radius: 14px; padding: 14px 16px; background: var(--paper); font-size: 16.5px; animation: fadeDown var(--t-med) var(--ease); }
.feedback strong { display: block; margin-bottom: 2px; }
.feedback.good { background: #E6EFE8; }
.feedback.consider { background: #FBEDE6; }
.kc + .kc { margin-top: 14px !important; }
.scenario-step { animation: fadeDown var(--t-med) var(--ease); }
.scenario-step + .scenario-step { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line-strong); }
.scene { font-size: 18px; font-weight: 600; margin: 0 0 12px; }
.step-label { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); margin-bottom: 6px; }

/* Tabs */
.tablist { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1.5px solid var(--line-strong); margin-bottom: 16px; }
.tab { border: 0; background: none; padding: 10px 16px; min-height: 46px; font-weight: 600; font-size: 16.5px; color: var(--slate); border-bottom: 3px solid transparent; margin-bottom: -1.5px; }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--orange); }
.tabpanel p { margin: 0 0 10px; font-size: 17px; }
.tabpanel { animation: fadeDown var(--t-med) var(--ease); }

/* Screen list */
.screen-group + .screen-group { margin-top: 16px; }
.screen-group h3 { font-family: var(--body-font); font-weight: 600; font-size: 17px; letter-spacing: .02em; color: var(--blue); margin: 0 0 8px; }
.group-kind { font-size: 14.5px; margin: -4px 0 10px; color: var(--slate); }
.group-kind.avoid { color: var(--orange-deep); font-weight: 600; }
.screen-item { display: flex; gap: 12px; align-items: flex-start; }
.screen-item .check-item { font-size: 16.5px; }
.screen-item .flag { font-size: 13px; color: var(--slate); }

/* Yes / no */
.yn-group + .yn-group { margin-top: 18px; }
.yn-group h3 { font-family: var(--body-font); font-weight: 600; font-size: 17px; margin: 0 0 8px; letter-spacing: 0; }
.yn-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.yn-row:first-of-type { border-top: 0; }
.seg { display: inline-flex; border: 1.5px solid var(--line-strong); border-radius: 12px; overflow: hidden; }
.seg button { border: 0; background: var(--white); padding: 8px 12px; min-height: 42px; min-width: 52px; font-size: 15px; border-left: 1px solid var(--line); }
.seg button:first-child { border-left: 0; }
.seg button[aria-checked="true"] { background: var(--blue); color: var(--white); }
.seg button:hover:not([aria-checked="true"]) { background: var(--paper-2); }

/* Decision map */
.dm-q { padding: 12px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.dm-q:first-child { border-top: 0; }
.dm-map { margin-top: 22px; }
.dm-svg { width: 100%; height: 70px; display: block; }
.dm-svg path { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 4 6; transition: stroke var(--t-med); }
.dm-svg path.on { stroke: var(--blue); stroke-dasharray: none; stroke-width: 2.5; animation: drawline var(--t-slow) var(--ease); }
@keyframes drawline { from { stroke-dasharray: 0 400; } to { stroke-dasharray: 400 0; } }
.dm-svg circle { fill: var(--blue); }
.dm-outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dm-outcome { text-align: left; border: 1.5px solid var(--line-strong); border-radius: 18px; background: var(--white); padding: 16px; display: flex; flex-direction: column; gap: 6px; min-height: 150px; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-med) var(--ease); }
.dm-outcome:hover { background: var(--paper-2); }
.dm-outcome strong { font-family: var(--display-font); font-weight: 900; font-size: 19px; line-height: 1.15; }
.dm-outcome span { font-size: 15.5px; }
.dm-outcome .pick { margin-top: auto; font-size: 13.5px; color: var(--slate); }
.dm-outcome[aria-checked="true"] { background: var(--paper); border-color: var(--blue); border-width: 2px; transform: translateY(-3px); }
.dm-outcome[aria-checked="true"] .pick { color: var(--blue); font-weight: 600; }
.dm-resolve { margin-top: 16px; background: var(--paper-2); border-radius: 16px; padding: 14px 18px; font-size: 16px; }
.dm-resolve ul { margin: 6px 0 0; padding-left: 20px; }

/* Breath pacer */
.breath { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; }
.breath-visual { width: 200px; height: 200px; display: grid; place-items: center; position: relative; }
.breath-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--line-strong); }
.breath-circle { width: 90px; height: 90px; border-radius: 50%; background: var(--paper); border: 2px solid var(--blue); transform: scale(1); transition-property: transform; transition-timing-function: ease-in-out; }
.breath-label { position: absolute; text-align: center; font-weight: 600; font-size: 17px; line-height: 1.2; }
.breath-label small { display: block; font-weight: 400; font-size: 26px; font-family: var(--display-font); }
.breath-controls { display: grid; gap: 12px; }
.breath-controls .seg { justify-self: start; }
.breath-controls .seg button { min-width: 0; }

/* Room planner */
.room { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.room-svg { width: 100%; height: auto; background: var(--paper); border-radius: 18px; }
.room-svg .item { opacity: 0; transform: translateY(6px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); transform-box: fill-box; }
.room-svg .item.on { opacity: 1; transform: none; }
.room .checklist .check-item { padding: 9px 12px; min-height: 44px; font-size: 16px; }

/* Timeline */
.timeline { position: relative; }
.tl-track { position: absolute; left: 16%; right: 16%; top: 52px; height: 3px; background: var(--line); border-radius: 3px; }
.tl-fill { height: 100%; width: 0; background: var(--orange); border-radius: 3px; transition: width var(--t-slow) var(--ease); }
.tl-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.tl-step button { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 0 4px; text-align: center; }
.tl-dot { width: 60px; height: 60px; border-radius: 50%; background: var(--white); border: 2px solid var(--line-strong); display: grid; place-items: center; transition: background var(--t-med), border-color var(--t-med), transform var(--t-med) var(--ease); }
.tl-dot img { width: 34px; height: 34px; }
.tl-step button[aria-expanded="true"] .tl-dot, .tl-step.passed .tl-dot { border-color: var(--orange); background: var(--paper); }
.tl-step button[aria-expanded="true"] .tl-dot { transform: scale(1.08); }
.tl-name { font-weight: 600; font-size: 17px; }
.tl-detail { margin-top: 18px; background: var(--paper); border-radius: 16px; padding: 16px 18px; font-size: 17px; animation: fadeDown var(--t-med) var(--ease); }
.tl-detail strong { display: block; font-family: var(--display-font); font-weight: 900; font-size: 20px; margin-bottom: 4px; }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; background: var(--paper); border-radius: 18px; padding: 16px 18px; counter-increment: step; }
.steps li::before { content: counter(step); width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: var(--white); display: grid; place-items: center; font-weight: 600; }
.steps.tiers li:nth-child(1) { background: #FBEDE6; }
.steps.tiers li:nth-child(1)::before { background: var(--orange-deep); }
.steps.tiers li:nth-child(2)::before { background: var(--ocean); }
.steps.tiers li:nth-child(3)::before { background: var(--slate); }
.steps strong { display: block; font-size: 18px; margin-bottom: 2px; }
.steps p { margin: 0; font-size: 16.5px; }
.steps.animate li { animation: riseIn var(--t-slow) var(--ease) both; }
.steps.animate li:nth-child(2) { animation-delay: 90ms; }
.steps.animate li:nth-child(3) { animation-delay: 180ms; }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Match */
.match-item { padding: 16px 0; border-top: 1px solid var(--line); }
.match-item:first-child { border-top: 0; padding-top: 0; }
.match-text { font-weight: 600; font-size: 17.5px; margin: 0 0 10px; }
.match-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.match-opts .chip { font-size: 15px; }
.match-opts .chip[aria-checked="true"] { background: var(--blue); color: var(--white); border-color: var(--blue); }

/* Path choice + storage choice (radio cards) */
.radio-cards { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.radio-card { text-align: left; border: 1.5px solid var(--line-strong); border-radius: 18px; background: var(--white); padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start; min-height: 72px; font-size: 17px; line-height: 1.35; transition: background var(--t-fast), border-color var(--t-fast); }
.radio-card:hover { background: var(--paper-2); }
.radio-card .mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--blue); flex: none; margin-top: 2px; display: grid; place-items: center; }
.radio-card[aria-checked="true"] { border-color: var(--blue); border-width: 2px; background: var(--paper); }
.radio-card[aria-checked="true"] .mark::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.radio-card strong { display: block; font-weight: 600; }
.radio-card small { display: block; font-size: 15px; color: var(--slate); margin-top: 3px; }
.radio-card[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.suggest { margin-top: 16px; background: var(--blue); color: var(--white); border-radius: var(--card-radius); padding: 20px 22px; animation: fadeDown var(--t-med) var(--ease); }
.suggest p { margin: 0 0 14px; }
.suggest .btn { box-shadow: 0 5px 0 var(--orange-shadow); }
.suggest ul { margin: 0 0 14px; padding-left: 20px; }
.suggest a { color: var(--white); }

/* Domains */
.domains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.domain { text-align: left; border: 1.5px solid var(--line-strong); background: var(--white); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 170px; position: relative; transition: background var(--t-fast), border-color var(--t-fast); }
.domain:hover { background: var(--paper-2); }
.domain img { width: 42px; height: 42px; }
.domain strong { font-size: 17px; line-height: 1.25; }
.domain span { font-size: 15px; color: var(--slate); }
.domain[aria-pressed="true"] { background: var(--paper); border-color: var(--blue); border-width: 2px; }
.domain .tick { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); display: none; place-items: center; color: var(--white); }
.domain[aria-pressed="true"] .tick { display: grid; animation: pop var(--t-med) var(--ease); }
@keyframes pop { from { transform: scale(.4); } to { transform: scale(1); } }

/* Action builder */
.action-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.action-preview { margin-top: 18px; background: var(--blue); color: var(--white); border-radius: 18px; padding: 18px 20px; font-size: 18.5px; line-height: 1.45; }
.action-preview .muted { color: var(--paper); font-size: 15px; display: block; margin-top: 6px; }

/* Prompts */
.prompt-list { display: grid; gap: 10px; }
.prompt-toggle { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--white); padding: 12px 16px; font-size: 17px; min-height: 52px; }
.prompt-toggle:hover { background: var(--paper-2); }
.prompt-toggle[aria-expanded="true"] { border-color: var(--blue); background: var(--paper); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.prompt-toggle .plus { margin-left: auto; transition: transform var(--t-med); color: var(--blue); flex: none; }
.prompt-toggle[aria-expanded="true"] .plus { transform: rotate(45deg); }
.prompt-toggle .has { font-size: 13px; color: var(--slate); }
.prompt-body { border: 1.5px solid var(--blue); border-top: 0; border-radius: 0 0 14px 14px; padding: 12px; background: var(--paper); margin-top: -10px; }

/* List builder */
.lb-row { display: flex; gap: 10px; }
.lb-row input { flex: 1; }
.lb-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.lb-list li { display: flex; gap: 10px; align-items: flex-start; background: var(--paper); border-radius: 12px; padding: 10px 12px; font-size: 16.5px; animation: fadeDown var(--t-med) var(--ease); }
.lb-list li span { flex: 1; white-space: pre-wrap; overflow-wrap: anywhere; }
.icon-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--white); display: grid; place-items: center; flex: none; }
.icon-btn:hover { background: var(--paper-2); }
.icon-btn svg { width: 16px; height: 16px; }

/* Help country */
.help-country select { max-width: 320px; }
.contacts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; background: var(--paper); border-radius: 14px; padding: 12px 14px; }
.contact.emergency { background: #FBEDE6; }
.contact .cname { font-weight: 600; font-size: 16.5px; }
.contact .cnote { grid-column: 1 / -1; font-size: 14.5px; color: var(--slate); }
.contact a.call { font-weight: 600; white-space: nowrap; font-size: 17px; }
.contact .kind { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); display: block; }

/* Plan summary */
.plan-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.plan-col { background: var(--paper); border-radius: 18px; padding: 18px; }
.plan-col h2 { font-size: 21px; margin-bottom: 4px; }
.plan-col .sub { font-size: 14px; color: var(--slate); margin-bottom: 12px; }
.plan-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 15.5px; }
.plan-col .task-group { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-top: 6px; }
.plan-col .empty { font-size: 15px; color: var(--slate); }
.plan-col .done-toggle { display: flex; gap: 10px; align-items: flex-start; border: 0; background: none; padding: 2px 0; text-align: left; font-size: 15.5px; line-height: 1.35; }
.plan-col .done-toggle .box { width: 20px; height: 20px; border-radius: 6px; }
.plan-col .done-toggle[aria-checked="true"] span.t { text-decoration: line-through; color: var(--slate); }
.plan-col .sec-row { display: flex; justify-content: space-between; gap: 10px; }
.plan-col .sec-row a { text-decoration: none; }
.mini-bar { height: 5px; border-radius: 9px; background: rgba(7,10,64,.12); margin-top: 4px; overflow: hidden; }
.mini-bar span { display: block; height: 100%; background: var(--blue); }
.plan-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat { background: var(--paper); border-radius: 18px; padding: 16px; }
.stat b { display: block; font-family: var(--display-font); font-size: 34px; line-height: 1; }
.stat span { font-size: 15px; }

/* Downloads */
.doc-list { display: grid; gap: 14px; }
.doc-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; background: var(--white); border: 1.5px solid var(--line-strong); border-radius: var(--card-radius); padding: 18px; }
.doc-card.featured { border-color: var(--blue); box-shadow: var(--card-shadow); }
.doc-icon { width: 64px; height: 80px; border-radius: 8px; background: var(--paper); display: grid; place-items: center; position: relative; overflow: hidden; }
.doc-icon::after { content: ''; position: absolute; top: 0; right: 0; width: 16px; height: 16px; background: var(--white); clip-path: polygon(0 0, 100% 100%, 100% 0); }
.doc-icon img { width: 30px; }
.doc-card h3 { font-size: 21px; margin-bottom: 4px; }
.doc-card p { margin: 0 0 12px; font-size: 16px; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; }

/* Data controls */
.data-grid { display: grid; gap: 16px; }
.status-line { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.file-label { position: relative; }
.file-label input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.switch { position: relative; width: 56px; height: 34px; border-radius: 99px; background: var(--line-strong); border: 0; flex: none; transition: background var(--t-fast); }
.switch::after { content: ''; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--white); transition: transform var(--t-fast); }
.switch[aria-checked="true"] { background: var(--blue); }
.switch[aria-checked="true"]::after { transform: translateX(22px); }

/* Route link card */
.route-card { display: flex; align-items: center; gap: 18px; text-decoration: none; color: var(--white); background: var(--blue); border-radius: var(--card-radius); padding: 20px 22px; }
.route-card:hover { color: var(--white); background: var(--blue-2); }
.route-card h3 { color: var(--white); font-size: 22px; margin-bottom: 2px; }
.route-card p { margin: 0; color: var(--paper); font-size: 16px; }
.route-card .arrow { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; flex: none; color: var(--ink); transition: transform var(--t-med) var(--ease); }
.route-card:hover .arrow { transform: translateX(4px); }

/* Set and setting diagram */
.diagram { width: 100%; max-width: 260px; }
.diagram .c1, .diagram .c2 { transition: transform var(--t-slow) var(--ease); }
.diagram.enter .c1 { transform: translateX(14px); }
.diagram.enter .c2 { transform: translateX(-14px); }

/* ---------- Help panel and modals ---------- */
.overlay { position: fixed; inset: 0; background: rgba(1, 3, 38, .45); z-index: 60; animation: fade var(--t-med) var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--white); z-index: 61; overflow-y: auto; padding: 22px 22px 40px; box-shadow: -8px 0 32px rgba(1,3,38,.2); animation: slideIn var(--t-med) var(--ease); }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel h2 { font-size: 30px; }
.panel h3 { font-family: var(--body-font); font-weight: 600; font-size: 18px; margin: 20px 0 8px; letter-spacing: 0; }
.close-btn { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--white); display: grid; place-items: center; }
.close-btn:hover { background: var(--paper-2); }
.modal { position: fixed; z-index: 61; inset: 0; display: grid; place-items: center; padding: 16px; pointer-events: none; }
.modal-box { pointer-events: auto; background: var(--white); border-radius: var(--card-radius); width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 26px; box-shadow: 0 20px 60px rgba(1,3,38,.3); animation: riseIn var(--t-med) var(--ease); }
.modal-box.wide { width: min(1100px, 100%); padding: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); overflow: hidden; height: calc(100dvh - 32px); }
.modal-box h2 { font-size: 28px; margin-bottom: 10px; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.preview-side { background: var(--paper); padding: 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.preview-side h2 { font-size: 24px; }
.preview-side fieldset { border: 0; padding: 0; margin: 0; }
.preview-side legend { font-weight: 600; margin-bottom: 8px; }
.inc-list { display: grid; gap: 6px; }
.inc { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.35; cursor: pointer; }
.inc input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--blue); }
.preview-main { overflow-y: auto; background: #C9CBC0; padding: 24px; }
.preview-actions { display: grid; gap: 10px; margin-top: auto; }
.preview-note { font-size: 14px; color: var(--slate); }

/* Paper preview of documents (also used for printing) */
.paper { background: var(--white); max-width: 800px; margin: 0 auto; padding: 56px 60px; box-shadow: 0 4px 18px rgba(1,3,38,.18); font-size: 15px; line-height: 1.5; color: var(--ink); }
.paper + .paper { margin-top: 20px; }
.doc-logo { width: 110px; margin-bottom: 26px; }
.doc-title { font-family: var(--display-font); font-weight: 900; font-size: 32px; line-height: 1.1; margin: 0 0 6px; }
.doc-sub { color: var(--slate); font-style: italic; margin: 0 0 18px; }
.doc-h2 { font-family: var(--display-font); font-weight: 900; font-size: 21px; margin: 26px 0 8px; padding-top: 12px; border-top: 2px solid var(--blue); break-after: avoid; page-break-after: avoid; }
.doc-h3 { font-weight: 600; font-size: 16px; margin: 14px 0 4px; break-after: avoid; }
.doc-p { margin: 0 0 8px; }
.doc-p.muted { color: var(--slate); font-size: 14px; }
.doc-check { display: flex; gap: 10px; align-items: flex-start; margin: 5px 0; break-inside: avoid; }
.doc-check .b { width: 14px; height: 14px; border: 1.5px solid var(--blue); border-radius: 3px; flex: none; margin-top: 3px; position: relative; }
.doc-check .b.on::after { content: ''; position: absolute; left: 3px; top: 0; width: 5px; height: 9px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(40deg); }
.doc-answer { margin: 6px 0 12px; break-inside: avoid; }
.doc-answer .l { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.doc-answer .v { border-left: 3px solid var(--paper); padding: 2px 0 2px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.doc-lines { margin: 4px 0 12px; }
.doc-lines .l { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.doc-lines .ln { height: 26px; border-bottom: 1px solid #B9BBC4; }
.doc-callout { border-left: 4px solid var(--orange); background: #FBEDE6; padding: 10px 14px; margin: 12px 0; break-inside: avoid; }
.doc-callout.blue { border-left-color: var(--blue); background: var(--paper); }
.doc-callout b { display: block; margin-bottom: 4px; }
.doc-callout ul { margin: 0; padding-left: 18px; }
.doc-yn { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 14px; }
.doc-yn th, .doc-yn td { border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: left; vertical-align: top; }
.doc-yn th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); font-weight: 400; }
.doc-yn td.c { width: 58px; text-align: center; }
.doc-yn .b { display: inline-block; width: 13px; height: 13px; border: 1.5px solid var(--blue); border-radius: 3px; position: relative; vertical-align: -2px; }
.doc-yn .b.on { background: var(--blue); }
.doc-kv { margin: 6px 0 12px; }
.doc-kv div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.doc-kv .k { color: var(--slate); font-size: 13.5px; }
.doc-kv .v { white-space: pre-wrap; overflow-wrap: anywhere; }
.doc-kv .v.blank { border-bottom: 1px solid #B9BBC4; min-height: 22px; }
.doc-link { color: var(--ocean); }
.doc-break { break-after: page; page-break-after: always; height: 0; }
.doc-foot { margin-top: 26px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--slate); }
.doc-cover { text-align: left; padding: 40px 0; }
.print-root { display: none; }

/* Toast / live */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--blue); color: var(--white); padding: 12px 18px; border-radius: 14px; z-index: 80; font-size: 16px; box-shadow: 0 10px 30px rgba(1,3,38,.3); animation: riseIn var(--t-med) var(--ease); max-width: calc(100% - 32px); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  :root { --sidebar-w: 280px; }
  .brand-course { display: none; }
}
@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .site-header { padding: 0 12px; gap: 8px; }
  .brand img { width: 96px; }
  .menu-btn { display: inline-flex; }
  .header-btn.plan-link .lbl { display: none; }
  .save-status { min-width: 44px; min-height: 44px; justify-content: center; }
  .save-status .txt { display: none; }
  .save-status[data-state="error"] .txt { display: inline; font-size: 12.5px; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(360px, 88vw); height: 100dvh; z-index: 62; transform: translateX(-104%); transition: transform var(--t-med) var(--ease); box-shadow: 8px 0 32px rgba(1,3,38,.25); padding-top: 16px; visibility: hidden; }
  .sidebar.open { transform: none; visibility: visible; }
  .sidebar-head { display: flex !important; }
  .main { padding: 24px 16px 120px; }
  .screen-head.with-visual { grid-template-columns: minmax(0, 1fr) 110px; }
  .hero-screen { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; }
  .hero-screen .hero-visual { display: none; }
  .pager { display: none; }
  .mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--white); border-top: 1px solid var(--line); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 10px; align-items: center; }
  .mobile-bar .btn { min-height: 48px; padding: 8px 14px; }
  .mobile-bar .mid { flex: 1; text-align: center; font-size: 14px; color: var(--slate); line-height: 1.2; background: none; border: 0; min-height: 48px; }
  .mobile-bar .mid b { display: block; color: var(--ink); font-size: 15px; }
  .modal-box.wide { grid-template-columns: minmax(0, 1fr); height: auto; max-height: calc(100dvh - 32px); overflow-y: auto; }
  .preview-main { padding: 12px; overflow: visible; }
  .paper { padding: 28px 22px; }
  .doc-kv div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .cards.two, .cards.compare, .cards.grid, .flip-grid, .radio-cards, .action-grid, .plan-cols, .plan-mini { grid-template-columns: minmax(0, 1fr); }
  .domains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-outcomes { grid-template-columns: minmax(0, 1fr); }
  .dm-svg { display: none; }
  .dm-q, .yn-row { grid-template-columns: minmax(0, 1fr); }
  .breath { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .room { grid-template-columns: minmax(0, 1fr); }
  .tl-track { left: 45px; right: auto; top: 30px; bottom: 90px; width: 3px; height: auto; }
  .tl-fill { width: 100% !important; height: 0; transition: height var(--t-slow) var(--ease); }
  .tl-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tl-step button { flex-direction: row; text-align: left; gap: 14px; }
  .ix { padding: 16px; }
  .screen-head.with-visual { grid-template-columns: minmax(0, 1fr); }
  .screen-head .hero-visual { display: none; }
  .header-btn { padding: 8px 10px; }
  .header-btn.help .lbl-long { display: none; }
  .doc-card { grid-template-columns: minmax(0, 1fr); }
  .doc-icon { display: none; }
  .crumb .count { margin-left: 0; }
}
@media (min-width: 641px) { .header-btn.help .lbl-short { display: none; } }
.sidebar-head { display: none; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sidebar-head strong { font-family: var(--display-font); font-weight: 900; font-size: 22px; }

/* Forced colours */
@media (forced-colors: active) {
  .check-item[aria-pressed="true"], .chip[aria-pressed="true"], .radio-card[aria-checked="true"], .domain[aria-pressed="true"] { outline: 3px solid Highlight; }
  .box, .mark { forced-color-adjust: none; }
}