/* Google Fonts is the framework's only hosted styling resource; CSS imports must precede rules. */
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600&display=swap');

:root {
    /* Client palette and semantic colour roles */
    --emerald: #0B3B2E;
    --gold: #D7B875;
    --ivory: #F6F4EB;
    --onyx: #0A0A0A;
    --stone: #C9C1B8;
    --surface: var(--ivory);
    --surface-deep: var(--emerald);
    --ink: var(--onyx);
    --ink-muted: var(--emerald);
    --accent: var(--gold);
    --line: var(--stone);
    --focus: var(--emerald);
    --qr-paper: #FFFFFF;

    /* Type: Bangla body, editorial Latin display */
    --body-font: 'Hind Siliguri', sans-serif;
    --display-font: 'Literata', 'Hind Siliguri', serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lead: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-title: 1.75rem;
    --text-h1: clamp(1.75rem, 4vw, 2.5rem);
    --text-h2: clamp(1.5rem, 3vw, 2rem);
    --text-hero: clamp(1.75rem, 4vw, 2.75rem);
    --text-score: 3.5rem;
    --text-label-size: var(--text-sm);
    --text-label-spacing: 0.1em;
    --text-label-weight: var(--weight-strong);
    --text-numeral: 2rem;
    --weight-body: 400;
    --weight-heading: 500;
    --weight-strong: 600;
    --weight-selected: 700;
    --leading-heading: 1.35;
    --leading-tight: 1.5;
    --leading-body: 1.7;
    --leading-reading: 1.85;

    /* Quarter-rem rhythm, borders and geometry; deliberately no shadows */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --rule: 1px;
    --stroke: 2px;
    --rule-strong: 3px;
    --radius: var(--space-1);
    --radius-round: 50%;
    --underline-offset: 0.25em;
    --control-size: 2.75rem;
    --check-size: 1.25rem;
    --avatar-size: 3.5rem;
    --score-size: 10rem;
    --qr-size: 120px;
    --textarea-height: 6rem;
    --footer-clearance: 7rem;
    --disabled-opacity: 0.6;

    /* Map instrument and the result's single reveal sequence */
    --pyramid-rule: var(--gold);
    --pyramid-band: var(--emerald);
    --pyramid-you: var(--gold);
    --pyramid-label-size: 14px;
    --pyramid-width: 25rem;
    --spectrum-track: var(--emerald);
    --spectrum-marker: var(--gold);
    --spectrum-height: var(--space-2);
    --reveal-duration: 480ms;
    --reveal-step: 120ms;
    --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* One layout system: reading measure and named container sizes */
    --measure: 70ch;
    --page-width: 58rem;
    --page-wide: 72rem;
    --flow-width: 48rem;
    --admin-width: 75rem;
    --auth-width: 26rem;
    --form-width: 32rem;
    --action-width: 12rem;
    --filter-width: 14rem;
    --media-height: 24rem;
    --scroll-height: 30rem;
    --table-width: 43.75rem;
    --table-summary-width: 26rem;
    --table-note-width: 14rem;
    color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--surface); color: var(--ink); font: var(--weight-body) var(--text-base)/var(--leading-body) var(--body-font); min-height: 100vh; overflow-wrap: anywhere; }
::selection { background: var(--emerald); color: var(--ivory); }
* { scrollbar-color: var(--emerald) var(--ivory); scrollbar-width: thin; }
::-webkit-scrollbar { width: var(--space-3); height: var(--space-3); }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--emerald); border: var(--rule-strong) solid var(--surface); border-radius: var(--radius); }
a { color: var(--emerald); text-underline-offset: var(--underline-offset); }
a:hover { text-decoration-thickness: var(--stroke); }
a, button, input, select, textarea, summary { -webkit-tap-highlight-color: var(--stone); touch-action: manipulation; }
:focus-visible { outline: var(--stroke) solid var(--focus); outline-offset: var(--space-1); }
input, textarea { caret-color: var(--emerald); }
img, video, iframe { max-width: 100%; }
img, video { height: auto; }
form, .container, .card, .grid-2 > *, .grid-3 > *, .split > *, .filters > *, .filterbar > *, .topbar > *, .lookup-head > *, .q-meta > *, .lead-head > * { min-width: 0; }
[hidden] { display: none !important; }

/* Layout, reading measure and typography */
.container { width: 100%; max-width: var(--page-width); margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-12); }
.card { width: 100%; padding: var(--space-6) 0; border-top: var(--rule) solid var(--line); }
.card + .card { margin-top: var(--space-6); }
h1, h2, h3 { color: var(--emerald); font-family: var(--display-font); font-weight: var(--weight-heading); line-height: var(--leading-heading); text-wrap: balance; scroll-margin-top: var(--space-4); }
h1 { font-size: var(--text-h1); margin: 0 0 var(--space-4); }
h2 { font-size: var(--text-h2); margin: var(--space-10) 0 var(--space-3); }
h3 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-3); }
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
.card > :first-child, .section > :first-child { margin-top: 0; }
.subtitle, .sub, .hint, .helper, .tiny, .mini, .field-help, .fine-note { color: var(--ink-muted); font-size: var(--text-base); font-weight: var(--weight-body); max-width: var(--measure); }
.subtitle { margin: 0 0 var(--space-6); }
.hint, .tiny, .mini, .field-help { font-size: var(--text-sm); margin: var(--space-2) 0; }
.fine-note { margin-top: var(--space-4); font-size: var(--text-sm); }
.split, .admin-topbar, .lead-head, .page-head, .topbar, .lookup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.form-grid, .grid-2, .grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }


.container-reading { max-width: calc(var(--measure) + var(--space-16)); }
.container-wide { max-width: var(--page-wide); }
.container-flow { max-width: var(--flow-width); }
.container-auth { max-width: var(--auth-width); min-height: 100vh; display: flex; align-items: center; }
.container.container-heading { padding-bottom: 0; }
.container-heading h1 { margin-bottom: var(--space-2); }
.container.container-fragment { padding: var(--space-4); }
.form-narrow { max-width: var(--form-width); }
.content-block, .form-layout { margin-top: var(--space-4); }
.field { min-width: 0; }
.field > :last-child { margin-bottom: 0; }
.form-grid { margin-bottom: var(--space-2); }
.page-head { align-items: center; }
.page-head h1, .lead-head h1 { margin-bottom: 0; }
.page-head .subtitle, .lead-head .subtitle { margin-top: var(--space-2); }
.control-row, .filter-actions, .check-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.filter-actions { align-items: flex-end; }
.check-field { min-height: var(--control-size); }
.check-field label, .toggle-row label { display: inline-flex; align-items: center; min-height: var(--control-size); margin: 0; }
.check-control { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-size); min-height: var(--control-size); margin: 0; cursor: pointer; }
.text-muted { color: var(--ink-muted); }
.text-center { text-align: center; }
.section-actions { margin-top: var(--space-8); text-align: center; }
.btn.btn-inline { width: auto; }
.form-layout > .btn-inline { margin-top: var(--space-3); }
.result-panel :focus-visible, .crm-nav :focus-visible { outline-color: var(--gold); }

/* Forms, controls and labels */
label { display: block; font-weight: var(--weight-strong); color: var(--emerald); margin: var(--space-3) 0 var(--space-2); }
input, select, textarea, button { font: inherit; }
input, select, textarea { width: 100%; min-height: var(--control-size); padding: var(--space-3); margin: 0 0 var(--space-4); color: var(--ink); background: var(--surface); border: var(--rule) solid var(--emerald); border-radius: var(--radius); }
textarea { resize: vertical; line-height: var(--leading-body); }
::placeholder { color: var(--emerald); opacity: 1; }
input[type='checkbox'], input[type='radio'] { width: var(--check-size); height: var(--check-size); min-height: 0; margin: 0; accent-color: var(--emerald); flex: 0 0 auto; }
input[type='hidden'] { display: none; }
/* Buttons and action groups (legacy names are shared aliases) */
.btn, .action-btn, .action-link, .book-buy-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-size); max-width: 100%; gap: var(--space-2); padding: var(--space-3) var(--space-5); border: var(--rule) solid var(--emerald); border-radius: var(--radius); background: var(--emerald); color: var(--ivory); text-decoration: none; text-align: center; font: var(--weight-strong) var(--text-base)/var(--leading-tight) var(--body-font); white-space: normal; cursor: pointer; }
.btn { width: 100%; }
.btn-outline, .action-btn, .action-link, .book-buy-btn { color: var(--emerald); background: var(--surface); }
.btn-secondary { background: var(--onyx); }
.btn:hover, .action-btn:hover, .action-link:hover, .book-buy-btn:hover { background: var(--onyx); border-color: var(--onyx); color: var(--ivory); }
.btn:disabled, button:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
.actions, .action-group, .top-actions, .rc-actions, .lookup-actions, .sticky-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.actions, .rc-actions, .lookup-actions, .sticky-actions { margin-top: var(--space-6); }
/* Pills, badges and alerts */
.pill, .mini-badge, .chip, .badge, .step-pill, .helper-chip { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; color: var(--emerald); font-size: var(--text-sm); line-height: var(--leading-tight); padding: var(--space-1) var(--space-2); border: var(--rule) solid var(--line); border-radius: var(--radius); font-weight: var(--weight-heading); }
.pill-muted { border-style: dashed; }
.alert, .field-error, .empty { margin-top: var(--space-4); padding: var(--space-4); border: var(--rule) solid var(--emerald); border-radius: var(--radius); color: var(--emerald); background: var(--surface); }
.alert-danger, .field-error { border-style: double; border-width: var(--rule-strong); color: var(--onyx); font-weight: var(--weight-strong); }
.field-error { display: none; margin: 0 0 var(--space-4); }
.is-invalid { border-style: dashed; border-width: var(--stroke); }
.is-valid { border-width: var(--stroke); }

/* Editorial content: landing, proof, reviews and resources */
.hero-inner { border-top: var(--rule) solid var(--emerald); padding-top: var(--space-6); }
.hero-title { font-size: var(--text-hero); margin: 0 0 var(--space-6); }
.hero-sub { margin: 0 0 var(--space-2); font-size: var(--text-lead); }
.hero-cta { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-6); }
.hero-cta > .btn { align-self: flex-start; }
.hero-note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); }
.hero-note a { display: inline-flex; align-items: center; min-height: var(--control-size); }
.hero-composition, .map-composition { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.hero-composition > *, .map-composition > * { min-width: 0; }
/* Gold rules carry the section mark; emerald ink keeps small labels readable on ivory. */
.section-label { width: fit-content; color: var(--emerald); font: var(--text-label-weight) var(--text-label-size)/var(--leading-tight) var(--body-font); letter-spacing: var(--text-label-spacing); border-bottom: var(--rule) solid var(--gold); padding-bottom: var(--space-2); margin: 0 0 var(--space-8); }
.numeral-strip { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-6) 0; color: var(--emerald); }
.numeral-strip > :first-child { flex: 0 0 auto; font-size: var(--text-numeral); font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; line-height: var(--leading-tight); }
.numeral-strip > :last-child { max-width: 22ch; font-size: var(--text-sm); }
.sample-result.result-panel { width: 100%; max-width: var(--form-width); margin: 0; padding: var(--space-6); border: var(--rule) solid var(--gold); border-radius: 0; }
.sample-result figcaption { color: var(--gold); margin-bottom: var(--space-6); font-size: var(--text-sm); }
.sample-result h2 { font-size: var(--text-lg); }
.sample-result .score-val { margin-bottom: var(--space-6); }
.sample-result .score-line { margin-bottom: 0; }
.receive-list { margin: 0 0 var(--space-6); padding-left: var(--space-8); }
.receive-list li { padding: 0 0 var(--space-5) var(--space-3); }
.receive-list li + li { padding-top: var(--space-5); border-top: var(--rule) solid var(--line); }
.receive-list li::marker { color: var(--emerald); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.receive-list strong { color: var(--emerald); font-weight: var(--weight-strong); }
.receive-list p { margin: var(--space-2) 0 0; }
.hero-features { display: block; margin-top: var(--space-8); }
.feat { border-top: var(--rule) solid var(--line); padding: var(--space-6) 0; }
.feat b { display: block; margin-bottom: var(--space-2); color: var(--emerald); font-weight: var(--weight-strong); }
.feat span { display: block; max-width: var(--measure); }
.map-explanation h2 { margin-top: 0; }
.map-explanation .map-title { margin-top: var(--space-8); }
.map-composition { margin-bottom: var(--space-8); }
.pyramid { display: block; width: 100%; max-width: var(--pyramid-width); height: auto; margin: 0 auto var(--space-8); overflow: visible; }
.pyramid polygon { fill: var(--pyramid-band); stroke: var(--pyramid-rule); stroke-width: var(--rule); stroke-linejoin: round; }
.pyramid text { fill: var(--ivory); font: var(--weight-body) var(--pyramid-label-size) var(--body-font); }
.pyramid .pyramid-outside { fill: var(--emerald); }
.pyramid-leader { fill: none; stroke: var(--pyramid-rule); stroke-width: var(--rule); }
.pyramid-you polygon { fill: var(--pyramid-you); }
.pyramid-you text { fill: var(--emerald); font-weight: var(--weight-selected); }
.book-promo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); border-top: var(--rule) solid var(--line); margin-top: var(--space-8); padding-top: var(--space-6); }
.book-promo p { margin: 0; }
.ha-review-section { margin: var(--space-8) 0; border-top: var(--rule) solid var(--line); padding-top: var(--space-6); }
.ha-review-card { display: none; }
.ha-review-card.active { display: block; }
.ha-review-header { display: flex; gap: var(--space-4); align-items: center; margin-bottom: var(--space-4); }
.ha-review-header .ha-review-avatar { width: var(--avatar-size); height: var(--avatar-size); border-radius: var(--radius-round); background: var(--emerald); color: var(--ivory); display: inline-flex; align-items: center; justify-content: center; font-family: var(--display-font); font-size: var(--text-lg); flex: none; }
.ha-review-name { font-weight: var(--weight-strong); color: var(--emerald); }
.ha-review-meta { font-size: var(--text-sm); color: var(--ink-muted); }
.ha-review-text { font-family: var(--display-font); font-size: var(--text-lead); }
.ha-review-dots { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ha-review-dots button { min-width: var(--control-size); min-height: var(--control-size); padding: var(--space-2) var(--space-3); border: var(--rule) solid var(--line); background: var(--surface); color: var(--emerald); border-radius: var(--radius); cursor: pointer; }
.ha-review-dots button:hover { border-color: var(--emerald); text-decoration: underline; }
.ha-review-dots button.active { border: var(--stroke) solid var(--emerald); font-weight: var(--weight-selected); }

/* Intake: two-column reading/form composition */
.start-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.start-badge { color: var(--ink-muted); font-size: var(--text-sm); margin: 0 0 var(--space-6); }
.facts-row { color: var(--emerald); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.start-right { border-top: var(--rule) solid var(--line); padding-top: var(--space-6); }
.trust-title { font-family: var(--display-font); font-size: var(--text-lg); color: var(--emerald); }
.trust-item { padding: var(--space-3) 0; border-bottom: var(--rule) solid var(--line); }
.trust-txt { margin: 0; }
.trust-ic { display: none; }
.helper-row { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); margin: var(--space-2) 0 var(--space-6); }

/* Assessment: single question, native radio state, persistent mobile action */
.assessment-page .container { padding-bottom: calc(var(--footer-clearance) + env(safe-area-inset-bottom)); }
.assessment-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.assessment-top h1 { font-size: var(--text-title); margin-bottom: var(--space-2); }
.assessment-top .subtitle { margin-bottom: var(--space-3); }
.progress-wrap { margin: var(--space-6) 0; }
.progress-bar { height: var(--space-1); width: 100%; background: var(--line); border-radius: var(--radius); overflow: hidden; }
#progressBar, .progress-fill { height: 100%; width: 0; background: var(--emerald); }
#progressBar { width: 100%; transform: scaleX(0); transform-origin: left center; transition: transform var(--reveal-duration) var(--reveal-ease); }
.progress-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin: var(--space-3) 0 0; color: var(--emerald); font-variant-numeric: tabular-nums; }
.q-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.layer-badge { color: var(--emerald); font-weight: var(--weight-strong); }
.dimension-title { color: var(--ink-muted); }
.q-box { padding: 0; margin: 0; border: 0; min-width: 0; width: 100%; }
.q-text { display: block; width: 100%; max-width: var(--measure); padding: 0; font-size: var(--text-xl); line-height: var(--leading-reading); font-weight: var(--weight-heading); margin-bottom: var(--space-8); }
.q-slide { animation: question-advance var(--reveal-duration) var(--reveal-ease); }
.arrival { border-bottom: var(--stroke) solid var(--gold); font-weight: var(--weight-strong); animation: layer-arrival var(--reveal-duration) var(--reveal-ease); }
@keyframes question-advance { from { opacity: 0.5; transform: translateX(var(--space-2)); } to { opacity: 1; transform: translateX(0); } }
@keyframes layer-arrival { from { opacity: 0.4; transform: translateY(var(--space-1)); } to { opacity: 1; transform: translateY(0); } }
.option { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--space-12); padding: var(--space-3); margin: 0 0 var(--space-3); border: var(--rule) solid var(--line); border-radius: var(--radius); color: var(--ink); font-weight: var(--weight-body); cursor: pointer; }
.option input { margin-top: var(--space-1); }
.option:hover { border-color: var(--emerald); }
.option:has(input:checked) { border: var(--stroke) solid var(--emerald); padding: calc(var(--space-3) - var(--rule)); font-weight: var(--weight-strong); }
.option:focus-within { outline: var(--stroke) solid var(--emerald); outline-offset: var(--rule-strong); }
.assessment-footer { position: fixed; bottom: 0; left: var(--space-4); right: var(--space-4); z-index: 2; display: flex; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom)); border-top: var(--rule) solid var(--line); background: var(--surface); }
.assessment-page .option:last-child { margin-bottom: var(--space-4); }

/* Result and profile: the sole ceremonial surface */
.result-panel { background: var(--surface-deep); color: var(--ivory); text-align: center; padding: var(--space-8) var(--space-4); border-radius: var(--radius); }
.result-panel h1, .result-panel h2 { color: var(--ivory); margin: 0 0 var(--space-4); }
.result-panel p { margin: 0 auto var(--space-3); }
.result-panel .completion-label { margin-bottom: var(--space-6); }
.score-circle { width: var(--score-size); height: var(--score-size); max-width: 100%; border: var(--rule) solid var(--gold); border-radius: var(--radius-round); display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 0 auto var(--space-6); }
.score-val { color: var(--gold); font-family: var(--display-font); font-size: var(--text-score); line-height: 1; font-variant-numeric: tabular-nums; }
.score-line { border-top: var(--rule) solid var(--accent); padding-top: var(--space-4); font-variant-numeric: tabular-nums; }
.result-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.result-actions .btn { flex: 1 1 var(--action-width); }
.spectrum { margin: var(--space-6) 0; padding: 0 var(--space-2); }
.spectrum-track { position: relative; height: var(--spectrum-height); background: var(--spectrum-track); }
.spectrum-marker { position: absolute; top: calc(-1 * var(--space-1)); bottom: calc(-1 * var(--space-1)); width: var(--space-3); transform: translateX(-50%); background: var(--spectrum-marker); border: var(--rule) solid var(--emerald); }
.spectrum-labels { display: flex; justify-content: space-between; padding-top: var(--space-2); color: var(--emerald); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.position-line { color: var(--emerald); font-size: var(--text-lead); }
.result-position, .result-meaning { margin-top: var(--space-10); }
.result-meaning h2 { margin-top: 0; }
.reveal > .reveal-layer { animation: result-reveal var(--reveal-duration) var(--reveal-ease) backwards; }
.reveal > .reveal-layer:nth-child(2) { animation-delay: var(--reveal-step); }
.reveal > .reveal-layer:nth-child(3) { animation-delay: calc(2 * var(--reveal-step)); }
.reveal > .reveal-layer:nth-child(4) { animation-delay: calc(3 * var(--reveal-step)); }
.reveal > .reveal-layer:nth-child(5) { animation-delay: calc(4 * var(--reveal-step)); }
@keyframes result-reveal { from { opacity: 0; transform: translateY(var(--space-3)); } to { opacity: 1; transform: translateY(0); } }
.reveal .cons-table tbody tr { color: var(--ink-muted); }
.reveal .cons-table .user-highlight { color: var(--onyx); }
.reveal .user-highlight td:first-child::before { content: none; }
#you { scroll-margin-top: var(--space-6); }
.share-profile { margin-top: var(--space-10); }
#qrcode { display: inline-block; padding: var(--space-4); background: var(--qr-paper); margin: 0 0 var(--space-4); }
#qrcode img { display: block; }
.link-box { width: 100%; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-container { margin-top: var(--space-10); padding-top: var(--space-6); border-top: var(--rule) solid var(--line); width: 100%; }
.map-title { font-family: var(--display-font); font-size: var(--text-xl); color: var(--emerald); margin: 0 0 var(--space-2); }
.map-subtitle { color: var(--ink-muted); font-size: var(--text-sm); margin-bottom: var(--space-6); }
.map-table-wrapper { width: 100%; overflow-x: auto; }
.cons-table, .demo-map { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.crm-table th, .cons-table th, .demo-map th { background: var(--emerald); color: var(--ivory); padding: var(--space-3); text-align: left; white-space: nowrap; font-weight: var(--weight-strong); }
.cons-table td, .demo-map td { padding: var(--space-2) var(--space-3); border-bottom: var(--rule) solid var(--line); white-space: nowrap; }
.cons-table tbody tr:nth-child(even), .demo-map tbody tr:nth-child(even) { background: var(--surface); }
.user-highlight { outline: var(--stroke) solid var(--emerald); outline-offset: calc(-1 * var(--stroke)); font-weight: var(--weight-selected); }
.user-highlight td:first-child::before { content: 'YOU'; display: inline-block; font: var(--weight-strong) var(--text-xs)/var(--leading-tight) var(--body-font); padding: 0 var(--space-1); border-bottom: var(--rule) solid var(--gold); margin-right: var(--space-2); }
.cat-drop { margin: var(--space-4) 0; border-top: var(--rule) solid var(--line); }
.cat-drop > summary, .qa-drop > summary { cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 0; list-style: none; min-height: var(--control-size); }
summary::-webkit-details-marker { display: none; }
.cat-title, .qa-sum-left { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.cat-name { font-weight: var(--weight-strong); color: var(--emerald); }
.cat-body { padding: 0 0 var(--space-4); }
.chev { width: var(--check-size); height: var(--check-size); flex: 0 0 auto; margin-top: var(--space-1); }
details[open] > summary .chev { transform: rotate(180deg); }
.qa-drop { margin: var(--space-3) 0; border-bottom: var(--rule) solid var(--line); }
.qa-qtext { font-weight: var(--weight-heading); }
.qno, .qa-body { color: var(--ink-muted); }
.qa-body { padding: 0 0 var(--space-4); }

/* Lookup records, suggestion sections and media */
.lookup-head { padding-bottom: var(--space-6); border-bottom: var(--rule) solid var(--line); }
.lookup-title { margin: 0 0 var(--space-3); }
.lookup-subtitle { max-width: var(--measure); }
.lookup-body { padding-top: var(--space-6); }
.results-grid { margin-top: var(--space-6); }
.result-card { padding: var(--space-6) 0; border-top: var(--rule) solid var(--line); }
.rc-top, .rc-badges, .who, .sg-pills { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.rc-name { font-size: var(--text-lg); color: var(--emerald); font-weight: var(--weight-strong); }
.rc-date { font-size: var(--text-sm); color: var(--ink-muted); }
.rc-badges, .who { margin-top: var(--space-3); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-6) 0; }
.stat, .mini-card { padding: var(--space-4) 0; border-top: var(--rule) solid var(--line); }
.k, .mini-title { color: var(--ink-muted); font-size: var(--text-sm); }
.v, .mini-value { color: var(--emerald); font-weight: var(--weight-strong); margin-top: var(--space-2); font-variant-numeric: tabular-nums; }
.section-title { color: var(--emerald); font-weight: var(--weight-strong); font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-3); }
.sg { margin-top: var(--space-8); border-top: var(--rule) solid var(--line); }
.sg-h { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-6) 0 var(--space-4); }
.sg-title { margin: 0; }
.sg-text { max-width: var(--measure); line-height: var(--leading-reading); }
.media-options { margin-top: var(--space-3); }
.media-item { margin-bottom: var(--space-2); }
.media-link { padding: var(--space-2); border: var(--rule) solid var(--line); border-radius: var(--radius); color: var(--ink-muted); font-weight: var(--weight-strong); }
.media-link, .media-link-text { overflow-wrap: anywhere; }
.media, .preview { margin-top: var(--space-4); }
.media img, .media video, .preview img, .preview video { width: 100%; max-height: var(--media-height); object-fit: contain; display: block; }
.media iframe, .preview iframe { width: 100%; height: auto; aspect-ratio: 16/9; border: var(--rule) solid var(--line); display: block; }
.preview { display: none; }

/* Header, admin navigation and operational density */
.crm-nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); background: var(--surface-deep); color: var(--ivory); padding: var(--space-4); }
.nav-left { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); min-width: 0; }
.brand { font-weight: var(--weight-strong); }
.nav-links, .admin-nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.nav-link, .logout-btn, .admin-nav-links a { display: inline-flex; align-items: center; min-height: var(--control-size); padding: var(--space-2); color: var(--ivory); text-decoration: none; border-bottom: var(--rule) solid transparent; }
button.logout-btn { background: transparent; border: 0; border-bottom: var(--rule) solid transparent; cursor: pointer; }
.nav-link:hover, .logout-btn:hover { border-color: var(--gold); }
.nav-link.is-active { border-color: var(--gold); text-decoration: underline; text-decoration-thickness: var(--stroke); text-underline-offset: var(--space-2); }
/* The protected header emits icon-font glyphs; its visible text already labels every link. */
.crm-nav i, .action-btn i { display: none; }
/* shortcut: protected helpers.php emits fixed inline sizing; remove overrides when that header joins the framework. */
.crm-nav + .container { max-width: var(--admin-width) !important; margin-top: 0 !important; padding-top: var(--space-6); }
.crm-nav ~ .container .btn, .crm-nav ~ .container .action-btn { padding: var(--space-2) var(--space-4); }
.crm-nav ~ .container h1 { font-family: var(--body-font); font-weight: var(--weight-strong); font-size: var(--text-title); }
.crm-nav ~ .container h2, .crm-nav ~ .container h3 { font-family: var(--body-font); font-weight: var(--weight-strong); }
.admin-topbar { margin-bottom: var(--space-4); align-items: center; }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.filters input, .filters select { flex: 1 1 var(--filter-width); width: auto; margin: 0; }
.filters .btn { width: auto; }
.filterbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: var(--space-4) 0; }
.filterbar input, .filterbar select { margin-bottom: 0; }
.section { padding: var(--space-4) 0; border-top: var(--rule) solid var(--line); }
.section .section-title { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: 0; }
.field-label { color: var(--emerald); font-weight: var(--weight-strong); margin: var(--space-3) 0 var(--space-2); }
.toggle-row, .radio-row, .radio-pill { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.toggle-row { margin-bottom: var(--space-6); }
.radio-pill { min-height: var(--control-size); padding: var(--space-2) var(--space-3); border: var(--rule) solid var(--line); border-radius: var(--radius); margin: 0; }
.radio-pill:has(input:checked) { outline: var(--rule) solid var(--emerald); font-weight: var(--weight-selected); }
.custom-wrap { display: none; margin-top: var(--space-3); }
/* Tables, metadata and overflow (CRM, consciousness map and popup) */
.table-meta { color: var(--ink-muted); font-size: var(--text-sm); }
.table-title { color: var(--emerald); font-weight: var(--weight-strong); }
.table-summary { max-width: var(--table-summary-width); }
.table-note { max-width: var(--table-note-width); color: var(--ink-muted); font-size: var(--text-sm); }
.table-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.inline-form { display: inline; }
.scroll-panel { max-height: var(--scroll-height); overflow: auto; }
.table-wrapper { width: 100%; overflow-x: auto; }
.crm-table { width: 100%; min-width: var(--table-width); border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--text-base); }
.crm-table td { padding: var(--space-3); border-bottom: var(--rule) solid var(--line); vertical-align: top; }
.crm-table .action-btn { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); }
.crm-table input[type='checkbox'] { cursor: pointer; }
.sms-msg { max-width: var(--form-width); }
.lead-form textarea { min-height: var(--textarea-height); }
.answer-row { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: var(--rule) solid var(--line); }
.answer-q, .answer-a { flex: 1 1 var(--action-width); min-width: 0; }
.answer-s { font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; }
.session-popup { max-width: 100%; }
.session-popup h3 { margin: 0 0 var(--space-4); font-family: var(--body-font); }
.session-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.session-table th { width: 35%; text-align: left; color: var(--emerald); font-weight: var(--weight-strong); }
.session-table th, .session-table td { padding: var(--space-3) var(--space-2); border-bottom: var(--rule) solid var(--line); vertical-align: top; }

/* Responsive layout: preserve the mobile table transform and map proportions.
   Media conditions require literal breakpoints; custom properties cannot be used here. */
@media (max-width: 768px) {
    .crm-table { min-width: 0; }
    .crm-table thead { display: none; }
    .crm-table, .crm-table tbody, .crm-table tr, .crm-table td { display: block; width: 100%; }
    .crm-table tr { margin-bottom: var(--space-4); border: var(--rule) solid var(--line); border-radius: var(--radius); padding: var(--space-4); }
    .crm-table td { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; text-align: right; max-width: 100% !important; }
    .crm-table td:last-child { border-bottom: none; padding-top: var(--space-3); }
    .crm-table td::before { content: attr(data-label); font-weight: var(--weight-strong); color: var(--emerald); font-size: var(--text-sm); text-align: left; flex: 0 0 28%; }
    .action-group { width: 100%; justify-content: flex-end; }
    .action-btn { flex-grow: 1; }
    .cons-table, .demo-map { font-size: var(--text-xs); table-layout: fixed; }
    .cons-table th, .cons-table td, .demo-map th, .demo-map td { white-space: normal; padding: var(--space-2) var(--space-1); text-align: center; vertical-align: middle; }
    .cons-table th:nth-child(1), .cons-table td:nth-child(1), .demo-map th:nth-child(1), .demo-map td:nth-child(1) { width: 30%; text-align: left; }
    .cons-table th:nth-child(2), .cons-table td:nth-child(2), .demo-map th:nth-child(2), .demo-map td:nth-child(2) { width: 20%; }
    .cons-table th:nth-child(3), .cons-table td:nth-child(3), .demo-map th:nth-child(3), .demo-map td:nth-child(3) { width: 25%; }
    .cons-table th:nth-child(4), .cons-table td:nth-child(4), .demo-map th:nth-child(4), .demo-map td:nth-child(4) { width: 25%; }
    .user-highlight td:first-child::before { display: block; width: fit-content; margin: 0 0 var(--space-1); }
}
@media (min-width: 769px) {
    .container { padding: var(--space-12) var(--space-8) var(--space-16); }
    .card { padding: var(--space-8) 0; }
    .hero-cta > .btn { width: auto; }
    .hero-composition { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-12); }
    .map-composition { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); }
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .start-wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-12); }
    .start-right { border-top: 0; border-left: var(--rule) solid var(--line); padding: 0 0 0 var(--space-8); }
    .assessment-footer { position: static; justify-content: flex-end; }
    .assessment-page .container { padding-bottom: var(--space-12); }
    .assessment-footer .btn { width: auto; min-width: var(--action-width); }
    .result-panel { padding: var(--space-12) var(--space-8); }
    .crm-nav { padding: var(--space-4) var(--space-8); }
    .filterbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.assessment-page .option { scroll-margin-bottom: var(--footer-clearance); }
.lead-count { margin: 0; }