/**
 * Awe Experience Assessment — "Dawn / Threshold"
 * Warm, luminous, hopeful. Awe as the edge of the familiar, first light.
 *
 * Signature: a dawn glow rising behind the content, a full-bleed media slot
 * (falls back to pure CSS), Fraunces display + Hanken Grotesk body +
 * Space Mono for instrument-style labels.
 */

/* ============================================================================
   Design tokens
   ========================================================================= */

:root {
    /* Warm neutrals */
    --ink: #2a1e26;            /* primary text (warm near-black) */
    --ink-soft: #5b4a52;       /* secondary text */
    --stone: #8c7a74;          /* muted labels */
    --mist: #f6ebe3;           /* calm warm background */
    --parchment: #fcf7f2;      /* solid card */
    --parchment-veil: rgba(252, 247, 242, 0.88);  /* translucent card over media */

    /* Dawn accents — the horizon at first light */
    --plum: #3e2a47;           /* retreating night */
    --rose: #d46a78;           /* horizon rose */
    --ember: #e07b43;          /* the light — primary accent */
    --ember-deep: #c25e2c;     /* pressed/hover */
    --gold: #f0c27a;           /* highlight */

    /* Lines & shadows (warm-tinted, never grey) */
    --line: rgba(62, 42, 71, 0.14);
    --line-strong: rgba(62, 42, 71, 0.26);
    --shadow-sm: 0 2px 10px rgba(62, 42, 71, 0.10);
    --shadow-md: 0 10px 30px rgba(62, 42, 71, 0.14);
    --shadow-lg: 0 24px 60px rgba(62, 42, 71, 0.20);
    --glow-ember: 0 8px 30px rgba(224, 123, 67, 0.35);

    /* Type */
    --font-display: 'Fraunces', 'Georgia', serif;
    --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Space Mono', 'Courier New', monospace;

    /* Rhythm */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 5rem;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    --measure: 62ch;
}

/* ============================================================================
   Reset & base
   ========================================================================= */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* scroll-padding keeps an anchored target clear of the sticky header. */
html { scroll-behavior: smooth; scroll-padding-top: 76px; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--mist);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    min-height: 100vh;
}

/* Ambient dawn layer (fixed). Media, when supplied, sits inside .ambient. */
.ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--mist);
}

.ambient__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.92;
}

/* Light veil: darkens only the very top so the header text reads, lets the
   footage show through the body, lifts a touch at the bottom for the footer.
   When no video is present this same veil sits over the mist background.
   (Legibility of body text is carried by the translucent parchment cards.) */
.ambient__wash {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(43, 26, 48, 0.78) 0%,
            rgba(43, 26, 48, 0.32) 11%,
            rgba(246, 235, 227, 0.12) 24%,
            rgba(246, 235, 227, 0.12) 76%,
            rgba(246, 235, 227, 0.42) 100%
        );
}

/* Very slow ambient drift so the dawn feels alive without any media. */
.ambient__wash::after {
    content: '';
    position: absolute;
    inset: -20%;
    background: radial-gradient(40% 30% at 30% 18%, rgba(240, 194, 122, 0.16), transparent 70%);
    animation: dawn-drift 26s ease-in-out infinite alternate;
}

@keyframes dawn-drift {
    from { transform: translate3d(-4%, 0, 0) scale(1); opacity: 0.8; }
    to   { transform: translate3d(6%, 2%, 0) scale(1.08); opacity: 1; }
}

/* ============================================================================
   Typography
   ========================================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    line-height: 1.15;
    color: var(--ink);
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-sm);
    text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.6rem); }
h4 { font-size: 1.2rem; }

p { margin-bottom: var(--space-sm); max-width: var(--measure); }

a { color: var(--ember-deep); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--ember); }

strong { font-weight: 600; }

/* Instrument-style eyebrow/label helper (used via Space Mono elements) */
.eyebrow, .site-subtitle {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--stone);
}

/* ============================================================================
   Layout
   ========================================================================= */

.container {
    max-width: 920px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md) var(--space-2xl);
    position: relative;
    z-index: 1;
}

/* A sticky bar on the dark dawn band: wordmark one side, menu the other, and
   nothing else. Everything that used to crowd the header — account, Experiences,
   Admin, About, Privacy, log out — lives in the drawer, which is the convention
   a phone expects and keeps the participant flow clear of chrome. Full width,
   so the bar's own background spans the screen; the inner div keeps the
   contents aligned with the page. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: linear-gradient(180deg, rgba(43, 26, 48, 0.92), rgba(43, 26, 48, 0.62));
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    border-bottom: 1px solid rgba(247, 220, 160, 0.14);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    max-width: 920px;
    min-height: 58px;
    margin: 0 auto;
    padding: 0.4rem var(--space-md);
}

.nav-toggle {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(247, 220, 160, 0.28);
    border-radius: var(--radius-pill);
    cursor: pointer;
}
.nav-toggle:hover { border-color: var(--gold); }
.nav-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.nav-toggle__bars { position: relative; display: block; }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    width: 18px; height: 2px;
    border-radius: 2px;
    background: #fbeee6;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

/* Drawer */
.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(26, 15, 30, 0.55);
    backdrop-filter: blur(2px);
}
.nav-scrim[hidden] { display: none; }

/* Stop the page behind the drawer scrolling under the finger. */
body.nav-open { overflow: hidden; }

.nav-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 61;
    width: min(320px, 86vw);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-md) var(--space-lg);
    background: linear-gradient(160deg, #3a2542, #2b1a30);
    color: #f7ede6;
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    animation: drawer-in 0.22s ease;
}
.nav-drawer[hidden] { display: none; }

@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }

.nav-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(247, 220, 160, 0.18);
}
.nav-drawer__who {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    overflow-wrap: anywhere;
}
.nav-drawer__close {
    flex-shrink: 0;
    width: 40px; height: 40px;
    background: none;
    border: none;
    border-radius: var(--radius-pill);
    color: #f7ede6;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}
.nav-drawer__close:hover { color: var(--gold); }
.nav-drawer__close:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.nav-list { list-style: none; }
.nav-list a {
    display: block;
    padding: 0.7rem 0.2rem;
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: #f7ede6;
    border-bottom: 1px solid rgba(247, 220, 160, 0.10);
}
.nav-list a:hover { color: var(--gold); }
.nav-list--minor a {
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: rgba(247, 237, 230, 0.78);
}

.nav-drawer__foot {
    margin-top: auto;
    padding-top: var(--space-md);
    border-top: 1px solid rgba(247, 220, 160, 0.18);
}
.nav-drawer__foot a {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}
.nav-drawer__foot a:hover { color: #fff; }
/* Build stamp: staff only, and quiet enough not to compete with Log out. */
.nav-drawer__build {
    display: block;
    margin-top: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: rgba(247, 237, 230, 0.45);
}

.site-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 400;
    color: #fbeee6;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 24px rgba(62, 42, 71, 0.5);
}

.site-subtitle {
    margin-top: var(--space-xs);
    color: var(--gold);
}

.experimental-banner {
    max-width: 640px;
    margin: 0 auto var(--space-lg);
    padding: var(--space-xs) var(--space-md);
    background: rgba(62, 42, 71, 0.5);
    border: 1px solid rgba(240, 194, 122, 0.4);
    border-radius: var(--radius-pill);
    color: #fbeee6;
    font-size: 0.82rem;
    text-align: center;
    backdrop-filter: blur(6px);
}

.experimental-icon { margin-right: 0.4em; }

.main-content { min-height: 50vh; }

/* Footer */
.site-footer {
    margin-top: var(--space-2xl);
    padding: var(--space-lg) var(--space-md) 0;
    text-align: center;
    border-top: 1px solid var(--line);
    color: var(--stone);
}

.citation { font-size: 0.82rem; line-height: 1.5; margin: 0 auto var(--space-sm); color: var(--ink-soft); }
.photo-credit { font-family: var(--font-mono); font-size: 0.68rem; color: var(--stone); }
.photo-credit a { color: var(--stone); text-decoration: underline; }
/* max-width:none — the global `p { max-width: 62ch }` rule was constraining these
   without auto margins, so text-align:center only centred within a left-sitting box. */
.copyright { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; margin-top: var(--space-sm); color: var(--stone); max-width: none; }

/* About and Privacy now sit in the drawer as well as the footer — two obvious
   places rather than a strip floating mid-page. */

.login-callout { text-align: center; margin-top: var(--space-xl); }
.login-callout p { max-width: none; margin-bottom: var(--space-sm); color: var(--ink-soft); font-size: 0.95rem; }

/* ============================================================================
   Cards — warm parchment, translucent so the dawn glows at the edges
   ========================================================================= */

.intro-page,
.demographics-page,
.recall-page,
.rate-page,
.emotions-page,
.results-page,
.form-section,
.error-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--parchment-veil);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: clamp(var(--space-lg), 5vw, var(--space-2xl));
}

/* Embers, not a watermark. The aura silhouette — the same shape as the wordmark
   and the favicon — drifts upward, swells and goes out, then catches again
   somewhere else. Two per card, different sizes, opposite corners, and cycles
   long enough and prime enough (29s and 37s, one offset) that they never beat in
   time with each other; the effect should be noticed twice and then forgotten.
   A soft blur takes the crisp edge off, which is what made a single static copy
   read as a stain rather than a light. Only opacity and transform animate, so it
   stays on the compositor. --brand-shape is set per page in base.html from the
   one path in app.py; z-index -1 puts them under the text but above the card's
   own background, which works because the card makes its own stacking context. */
.intro-page::before, .intro-page::after,
.demographics-page::before, .demographics-page::after,
.recall-page::before, .recall-page::after,
.rate-page::before, .rate-page::after,
.emotions-page::before, .emotions-page::after,
.results-page::before, .results-page::after,
.form-section::before, .form-section::after,
.error-page::before, .error-page::after {
    content: '';
    position: absolute;
    z-index: -1;
    aspect-ratio: 1 / 1;
    background: var(--brand-shape) center / contain no-repeat;
    filter: blur(5px);
    opacity: 0;
    pointer-events: none;
}

.intro-page::before,
.demographics-page::before,
.recall-page::before,
.rate-page::before,
.emotions-page::before,
.results-page::before,
.form-section::before,
.error-page::before {
    top: 2%;
    right: -14%;
    width: min(68%, 380px);
    animation: ember-catch 29s ease-in-out infinite;
}

/* The second sits low and opposite, and starts two-thirds through its own cycle,
   so the first thing you see on load is one already fading rather than two
   lighting together. */
.intro-page::after,
.demographics-page::after,
.recall-page::after,
.rate-page::after,
.emotions-page::after,
.results-page::after,
.form-section::after,
.error-page::after {
    bottom: 4%;
    left: -12%;
    width: min(46%, 250px);
    animation: ember-catch 37s ease-in-out infinite -24s;
}

@keyframes ember-catch {
    0%   { opacity: 0;     transform: translate3d(0, 10%, 0) scale(0.68) rotate(-8deg); }
    14%  { opacity: 0.085; transform: translate3d(-2%, 4%, 0) scale(0.86) rotate(-3deg); }
    46%  { opacity: 0.05;  transform: translate3d(-8%, -8%, 0) scale(1.04) rotate(4deg); }
    72%  { opacity: 0;     transform: translate3d(-14%, -20%, 0) scale(1.24) rotate(11deg); }
    100% { opacity: 0;     transform: translate3d(0, 10%, 0) scale(0.68) rotate(-8deg); }
}

/* Nested form-section inside a page wrapper shouldn't double up as a card */
.demographics-page .form-section,
.recall-page .form-section,
.rate-page .form-section,
.emotions-page .form-section {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 0;
    overflow: visible;
}
.demographics-page .form-section::before, .demographics-page .form-section::after,
.recall-page .form-section::before, .recall-page .form-section::after,
.rate-page .form-section::before, .rate-page .form-section::after,
.emotions-page .form-section::before, .emotions-page .form-section::after { content: none; }

/* ============================================================================
   Buttons
   ========================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.9rem 1.9rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn-primary {
    background: linear-gradient(135deg, var(--ember) 0%, var(--rose) 100%);
    color: #fff;
    box-shadow: var(--glow-ember);
}

.btn-primary:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(224, 123, 67, 0.5);
}

.btn-secondary {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--line-strong);
}

.btn-secondary:hover { border-color: var(--ember); color: var(--ember-deep); }

.btn-large { padding: 1.1rem 2.6rem; font-size: 1.1rem; }

.btn:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; }

/* ============================================================================
   Progress — a slim "threshold" line with instrument labels
   ========================================================================= */

.progress-indicator {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-xl);
    padding: 0;
    list-style: none;
}

.progress-step {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--stone);
    padding-top: 0.8rem;
    border-top: 3px solid var(--line);
    text-align: left;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.progress-step.active { color: var(--ember-deep); border-top-color: var(--ember); }
.progress-step.completed { color: var(--ink-soft); border-top-color: var(--rose); }
.progress-step.completed::before { content: ''; }

/* ============================================================================
   Forms
   ========================================================================= */

.form-description { color: var(--ink-soft); margin-bottom: var(--space-lg); }

/* Highlights: the one or two dimensions that stood out from the person's own
   average. Deliberately quieter than the verdict and louder than the six
   read-backs below, because that is its place in the reading order. */
.highlight-list { list-style: none; margin: 0; padding: 0; }
.highlight {
    position: relative;
    padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
    font-size: 1.05rem;
    line-height: 1.5;
}
.highlight::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.1em;
    width: 0.7rem;
    height: 2px;
    border-radius: 2px;
    background: var(--ember, #e07b43);
}
/* A dimension that stood out by being low is still a finding, but it is not the
   same finding — the mark reads as receding rather than reaching. */
.highlight.is-low::before { opacity: 0.45; width: 0.4rem; }
.highlight-flat { font-size: 1.05rem; line-height: 1.5; color: var(--ink-soft); }

/* Valence composition. Colours here echo the aura palettes so the strip and the
   shape are obviously about the same thing, but this is a bar and not an aura:
   a population's mix must never be drawn as one person's colour (D-41). */
.valence-mix { margin: var(--space-md) 0; }
.valence-mix__heading { margin: 0 0 var(--space-sm); font-size: 0.95rem; }
.valence-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(62, 42, 71, 0.08);
}
.valence-bar__seg { display: block; height: 100%; }
.valence-bar__seg.is-warm,
.valence-key__dot.is-warm { background: #e07b43; }
.valence-bar__seg.is-unsettling,
.valence-key__dot.is-unsettling { background: #6a7ba8; }
/* Warm at the heart, cold at the rim — the same idea the "both" aura uses. */
.valence-bar__seg.is-both,
.valence-key__dot.is-both { background: linear-gradient(90deg, #e0a06a, #b07a9a, #6a7ba8); }

.valence-key {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    margin: var(--space-sm) 0 0;
    padding: 0;
    font-size: 0.9rem;
}
.valence-key li { display: flex; align-items: center; gap: 0.35rem; margin: 0; }
.valence-key__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block; }
.valence-key__pct { color: var(--ink-soft); }
.valence-mix__note { margin: var(--space-sm) 0 0; font-size: 0.85rem; color: var(--ink-soft); }

.changelog { list-style: none; margin: 0 0 var(--space-lg); padding: 0; }
.changelog li {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid rgba(62, 42, 71, 0.1);
    line-height: 1.5;
}
.changelog li:last-child { border-bottom: 0; }
.changelog__date {
    display: inline-block;
    min-width: 6.5em;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.form-group { margin-bottom: var(--space-lg); }

.form-group label {
    display: block;
    margin-bottom: var(--space-xs);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.form-control {
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--ember);
    box-shadow: 0 0 0 4px rgba(224, 123, 67, 0.15);
}

.form-textarea { resize: vertical; min-height: 220px; line-height: 1.7; }

.form-help { display: block; margin-top: var(--space-xs); font-size: 0.85rem; color: var(--stone); }

.form-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-xl); flex-wrap: wrap; }

/* Alerts */
.alert {
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-md);
    border-left: 4px solid;
}
.alert-error { background: #fbe4dd; border-color: var(--ember-deep); color: #8a2f18; }
.alert-success { background: #e6f0e2; border-color: #5c8a3a; color: #33521f; }

/* ============================================================================
   Intro / hero — the threshold
   ========================================================================= */

.intro-hero { text-align: center; margin-bottom: var(--space-2xl); }

.intro-hero .eyebrow { display: block; margin-bottom: var(--space-md); }

.intro-hero h2 {
    font-size: clamp(3rem, 11vw, 6rem);
    font-weight: 300;
    line-height: 0.98;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-sm);
}

.intro-hero .hero-sub {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.3rem, 3.5vw, 2rem);
    color: var(--ember-deep);
    font-weight: 400;
    margin-bottom: var(--space-lg);
}

.lead {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--ink-soft);
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
}

.intro-description h3 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.intro-description p { color: var(--ink-soft); }

.factor-list { list-style: none; margin: var(--space-md) 0; }

.factor-list li {
    padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
    border-left: 3px solid transparent;
    border-image: linear-gradient(180deg, var(--ember), var(--rose)) 1;
    margin-bottom: var(--space-xs);
}

.intro-description ol { margin: var(--space-sm) 0 var(--space-sm) var(--space-lg); }
.intro-description ol li { margin-bottom: var(--space-xs); color: var(--ink-soft); }

.privacy-note {
    background: rgba(240, 194, 122, 0.16);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-top: var(--space-lg);
    font-size: 0.95rem;
    max-width: none;
}

.cta-container { text-align: center; margin-top: var(--space-2xl); }

/* ============================================================================
   Recall
   ========================================================================= */

.recall-prompt {
    background: rgba(212, 106, 120, 0.08);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}
.prompt-text { font-size: 1.05rem; line-height: 1.7; }
.prompt-examples { list-style: none; margin: var(--space-sm) 0; }
.prompt-examples li { padding: 0.3rem 0 0.3rem var(--space-md); position: relative; color: var(--ink-soft); }
.prompt-examples li::before { content: '·'; position: absolute; left: 0; color: var(--ember); font-weight: 700; }
.prompt-instruction { font-weight: 600; margin-top: var(--space-md); }
#char-count { font-family: var(--font-mono); font-weight: 700; }

/* ============================================================================
   Likert scale (shared by rate + emotions)
   ========================================================================= */

.rating-instructions, .emotion-instructions {
    background: rgba(240, 194, 122, 0.14);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-xl);
}

.scale-legend {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-top: var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-soft);
}

/* Warm-tinted rather than flat white — a wash of the dawn palette, so a column
   of these does not read as a stack of forms. */
.rating-item, .emotion-item {
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.72), rgba(240, 194, 122, 0.12));
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.rating-item:hover, .emotion-item:hover { box-shadow: var(--shadow-sm); border-color: var(--line-strong); }

.item-header, .emotion-header { display: flex; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-md); }

.item-number {
    flex-shrink: 0;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--ember), var(--rose));
    color: #fff;
    border-radius: 50%;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8rem;
}

.item-text { flex: 1; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.35; color: var(--ink); padding-top: 3px; max-width: none; }

.emotion-name { margin: 0; font-size: 1.25rem; }
.emotion-description { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

.likert-scale { display: flex; gap: 6px; flex-wrap: nowrap; }

.likert-option { flex: 1 1 0; min-width: 0; cursor: pointer; }
.likert-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.likert-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0.7rem 0.25rem;
    min-height: 68px;
    background: #fff;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    transition: all 0.18s ease;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink-soft);
}

.likert-label small { font-family: var(--font-body); font-size: 0.6rem; font-weight: 500; color: var(--stone); text-align: center; line-height: 1.15; }

.likert-option:hover .likert-label { border-color: var(--ember); }

.likert-option input[type="radio"]:checked + .likert-label {
    background: linear-gradient(135deg, var(--ember), var(--rose));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--glow-ember);
    transform: translateY(-2px);
}
.likert-option input[type="radio"]:checked + .likert-label small { color: rgba(255, 255, 255, 0.92); }
.likert-option input[type="radio"]:focus-visible + .likert-label { outline: 3px solid var(--ember); outline-offset: 2px; }

/* Valence — one item, three answers, no neutral (OD-12). Wider targets than the
   1-7 rows above, because these labels are words rather than numbers. Each
   selected state previews the palette the aura will be drawn in. */
.valence-choice { display: flex; gap: 8px; flex-wrap: wrap; }

.valence-option { flex: 1 1 0; min-width: 96px; cursor: pointer; }
.valence-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.valence-label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.85rem 0.5rem;
    min-height: 56px;
    background: #fff;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    transition: all 0.18s ease;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.valence-option:hover .valence-label { border-color: var(--ember); }
.valence-option input[type="radio"]:focus-visible + .valence-label { outline: 3px solid var(--ember); outline-offset: 2px; }

.valence-option input[type="radio"]:checked + .valence-label {
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.valence-option input[value="warm"]:checked + .valence-label {
    background: linear-gradient(135deg, #e07b43, #d46a78);
}
.valence-option input[value="unsettling"]:checked + .valence-label {
    background: linear-gradient(135deg, #6a7ba8, #454a72);
}
.valence-option input[value="both"]:checked + .valence-label {
    background: linear-gradient(135deg, #e07b43, #b07a9a 55%, #5b6ea8);
}

.valence-read { margin-top: var(--space-sm); font-family: var(--font-mono); font-size: 0.82rem; opacity: 0.92; }

.progress-counter {
    text-align: center;
    padding: var(--space-md);
    font-family: var(--font-mono);
    background: rgba(240, 194, 122, 0.14);
    border-radius: var(--radius-md);
    margin-top: var(--space-lg);
}

/* ============================================================================
   Results
   ========================================================================= */

.results-header { text-align: center; margin-bottom: var(--space-xl); }
.results-subtitle { font-size: 1.1rem; color: var(--ink-soft); max-width: 40ch; margin: 0 auto; }

.results-summary { margin-bottom: var(--space-xl); }

.total-score {
    background: linear-gradient(150deg, var(--plum) 0%, var(--rose) 55%, var(--ember) 100%);
    color: #fff;
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.total-score::after {
    content: '';
    position: absolute;
    width: 60%; height: 160%;
    top: -30%; right: -10%;
    background: radial-gradient(circle, rgba(240, 194, 122, 0.5), transparent 60%);
}
.total-score h3 { color: #fff; position: relative; }
.total-score .score-description, .total-score .comparison, .total-score .valence-read { position: relative; }
.score-display { font-family: var(--font-display); font-weight: 300; margin: var(--space-sm) 0; position: relative; }
.score-value { font-size: clamp(3.5rem, 12vw, 5rem); }
.score-range { font-size: 1.8rem; opacity: 0.7; }
.comparison { margin-top: var(--space-sm); font-family: var(--font-mono); font-size: 0.82rem; opacity: 0.92; }

.results-takeaways { margin-bottom: var(--space-xl); }
.takeaway-list { list-style: none; margin: var(--space-md) 0; }
.takeaway-list li {
    padding: var(--space-md);
    padding-left: var(--space-lg);
    margin-bottom: var(--space-sm);
    background: rgba(255, 255, 255, 0.55);
    border-left: 3px solid var(--ember);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.takeaway-actions { margin-top: var(--space-md); }

.results-chart {
    background: rgba(255, 255, 255, 0.5);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
    border: 1px solid var(--line);
}
.chart-description { color: var(--ink-soft); font-size: 0.95rem; }
.chart-container {
    position: relative;
    height: 400px;
    margin-top: var(--space-md);
    background: #fff;
    border-radius: var(--radius-md);
    padding: var(--space-md);
}
.no-triggers-message, .no-data-message { color: var(--ink-soft); font-style: italic; padding: var(--space-md); }

/* Aura — signature dimension visualisation (a pocket of night where light gathers) */
.results-aura {
    background: radial-gradient(120% 90% at 50% 32%, #4a2f52 0%, #2b1a30 72%);
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
    text-align: center;
    color: #f7ede6;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.results-aura h3 { color: #fbeee6; }
.results-aura .chart-description { color: rgba(247, 237, 230, 0.72); max-width: 44ch; margin: 0 auto var(--space-md); }
.aura-stage { display: flex; justify-content: center; }
.aura-svg { width: 100%; max-width: 460px; height: auto; overflow: visible; }
.aura-shape { transform-box: view-box; transform-origin: 160px 160px; animation: aura-breathe 7s ease-in-out infinite; }
#auraGlow { animation: aura-pulse 7s ease-in-out infinite; }
@keyframes aura-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes aura-pulse { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.7; } }
.aura-label__name { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; fill: rgba(247, 237, 230, 0.72); }
.aura-label__score { font-family: var(--font-display); font-size: 21px; fill: #f7dca0; }
.aura-legend { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: rgba(247, 237, 230, 0.7); margin-top: var(--space-sm); }
.aura-legend__you, .aura-legend__avg { display: inline-block; width: 22px; height: 0; vertical-align: middle; margin-right: 6px; }
.aura-legend__you { border-top: 3px solid #f7dca0; }
.aura-legend__avg { border-top: 2px dashed rgba(247, 237, 230, 0.6); }

.results-factors { margin-bottom: var(--space-xl); }
.factor-card {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.74), rgba(212, 106, 120, 0.10));
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    border-left: 4px solid transparent;
    border-image: linear-gradient(180deg, var(--ember), var(--rose)) 1;
}
.factor-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-xs); gap: var(--space-sm); }
.factor-header h4 { margin: 0; font-size: 1.35rem; }
.factor-score { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; }
.factor-score .score { color: var(--ember-deep); }
.factor-score .max-score { color: var(--stone); font-size: 1rem; }
.factor-description { font-style: italic; color: var(--ink-soft); margin-bottom: var(--space-xs); }
.factor-interpretation { margin-bottom: var(--space-xs); }
.factor-comparison { color: var(--stone); font-family: var(--font-mono); font-size: 0.78rem; }

/* --- Sharing, on a person's own profile --- */
.share-row { text-align: right; }
.share-form { margin: 0; }
.share-chip {
    display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px;
    border: 1px solid var(--line-strong); background: transparent;
    color: var(--stone); font-family: var(--font-mono); font-size: 0.7rem;
    letter-spacing: 0.04em; line-height: 1.6;
}
.share-chip.is-on { background: var(--ember-deep); border-color: var(--ember-deep); color: var(--parchment); }
/* Only a chip inside a form is a control; the rest are read-outs. */
button.share-chip { cursor: pointer; }
button.share-chip:hover { border-color: var(--ember-deep); }

.share-note { margin-top: var(--space-lg); }
.share-note h4 { margin: 0 0 var(--space-xs); font-size: 1rem; }
/* Full width of the section — the global `p` measure would set it in a narrow
   column, which reads as a stray caption rather than a note about the stack. */
.share-note p { color: var(--ink-soft); font-size: 0.9rem; max-width: none; }

.results-disclaimer {
    background: rgba(62, 42, 71, 0.05);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-xl);
}
.results-disclaimer h4 { color: var(--ink-soft); }

.results-reflection { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--line); }
.reflection-form textarea {
    width: 100%; min-height: 140px;
    padding: var(--space-md);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-md);
    font-family: var(--font-body); font-size: 1rem; line-height: 1.6;
    resize: vertical;
}
.reflection-form textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 4px rgba(224, 123, 67, 0.15); }
.reflection-form .char-counter { text-align: right; font-family: var(--font-mono); font-size: 0.78rem; color: var(--stone); margin-top: var(--space-xs); }
.reflection-form .form-actions { justify-content: flex-end; }

.results-collection {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background: rgba(212, 106, 120, 0.07);
    border-radius: var(--radius-md);
}
.collection-experience .experience-text,
.experience-text { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.8; white-space: pre-wrap; }

.results-actions { display: flex; gap: var(--space-sm); justify-content: center; margin: var(--space-xl) 0 var(--space-md); flex-wrap: wrap; }
.response-id { text-align: center; color: var(--stone); font-family: var(--font-mono); font-size: 0.72rem; }

/* Error pages */
.error-page { text-align: center; }
.error-page h2 { color: var(--ember-deep); }
.error-actions { margin-top: var(--space-xl); }

/* ============================================================================
   Responsive
   ========================================================================= */

@media (max-width: 768px) {
    body { font-size: 1rem; }
    .container { padding: var(--space-md) var(--space-sm) var(--space-2xl); }

    .intro-page, .demographics-page, .recall-page, .rate-page,
    .emotions-page, .results-page, .form-section, .error-page {
        padding: var(--space-lg) var(--space-md);
    }

    .progress-indicator { gap: 4px; }
    .progress-step { font-size: 0; padding-top: 0.6rem; border-top-width: 4px; }
    .progress-step.active, .progress-step.completed { font-size: 0; }

    .form-actions { flex-direction: column; }
    .form-actions .btn { width: 100%; }

    .scale-legend { flex-direction: column; align-items: flex-start; gap: 0.25rem; }

    /* Likert: let the 7 options wrap into a comfortable grid on small screens */
    .likert-scale { flex-wrap: wrap; gap: 6px; }
    .likert-option { flex: 1 1 calc(25% - 6px); min-width: 62px; }
    .likert-label { min-height: 60px; font-size: 0.95rem; }

    .factor-header { flex-direction: row; }
    .results-actions { flex-direction: column; }
    .results-actions .btn { width: 100%; }
}

/* ============================================================================
   Accessibility & print
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ambient__wash::after,
    .aura-shape,
    .nav-drawer,
    #auraGlow { animation: none !important; }
    *, *::before, *::after { transition: none !important; }

    /* The embers stop drifting, but do not vanish — they animate from opacity 0,
       so switching the animation off alone would leave the cards bare. One
       stays, lit, where it would have caught. */
    .intro-page::before, .demographics-page::before, .recall-page::before,
    .rate-page::before, .emotions-page::before, .results-page::before,
    .form-section::before, .error-page::before {
        animation: none !important;
        opacity: 0.06;
        transform: none;
    }
    .intro-page::after, .demographics-page::after, .recall-page::after,
    .rate-page::after, .emotions-page::after, .results-page::after,
    .form-section::after, .error-page::after { animation: none !important; }
}

@media print {
    .ambient { display: none; }
    body { background: #fff; }
    .site-header, .nav-drawer, .nav-scrim, .progress-indicator, .results-actions, .results-reflection, .experimental-banner { display: none; }
    .intro-page, .results-page, .form-section { box-shadow: none; border: none; backdrop-filter: none; background: #fff; }
    /* No embers on paper — they are light, and print would render them as the
       grey smudge the screen version was redesigned to stop looking like. */
    .intro-page::before, .intro-page::after,
    .results-page::before, .results-page::after,
    .form-section::before, .form-section::after,
    .error-page::before, .error-page::after { display: none; }
    .factor-card, .takeaway-list li { page-break-inside: avoid; }
    .site-footer .photo-credit { display: none; }
}

/* ============================================================================
   Embers additions
   ========================================================================= */

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3.4vw, 1.6rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #fbeee6;
    text-shadow: 0 2px 20px rgba(62, 42, 71, 0.5);
}
.wordmark:hover { color: #fff; }
.wordmark:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-sm); }
.wordmark__mark {
    width: 28px; height: 28px; flex-shrink: 0;
    filter: drop-shadow(0 2px 8px rgba(224, 123, 67, 0.5));
}

/* Doors (landing) */
.door-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-xl); }
.door {
    display: flex; flex-direction: column; gap: 0.4rem; justify-content: center;
    min-height: 120px; padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--line); border-radius: var(--radius-md);
    color: var(--ink);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.door:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--ember); color: var(--ink); }
.door__label { font-family: var(--font-display); font-size: 1.3rem; }
.door__hint { font-size: 0.9rem; color: var(--ink-soft); }
.door-note { text-align: center; color: var(--ink-soft); font-size: 0.9rem; margin: var(--space-lg) auto 0; max-width: 46ch; }

/* Wonder chips + grids */
.wonder-chip {
    display: inline-block; font-family: var(--font-mono);
    font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0.3rem 0.8rem; border-radius: var(--radius-pill);
    background: var(--wc, var(--ember)); color: #fff; margin-bottom: var(--space-md);
}
.wonder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-sm); margin-top: var(--space-md); }
.wonder-card {
    display: flex; flex-direction: column; gap: 0.35rem; padding: var(--space-md);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--line); border-left: 4px solid var(--wc, var(--ember));
    border-radius: var(--radius-md); color: var(--ink);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.wonder-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--ink); }
.wonder-card__name { font-family: var(--font-display); font-size: 1.2rem; }
.wonder-card__blurb { font-size: 0.88rem; color: var(--ink-soft); }

/* Image gallery */
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-sm); margin-top: var(--space-md); }
.image-card {
    display: block; position: relative; overflow: hidden;
    border-radius: var(--radius-md); aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.image-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.image-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-card__name {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 0.5rem 0.7rem;
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: #fff; background: linear-gradient(to top, rgba(43, 26, 48, 0.8), transparent);
}

/* CTA / profile */
.results-cta { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--line); }
.cta-form { margin-top: var(--space-md); }
.consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: var(--space-sm); }
.consent input { margin-top: 0.2rem; flex-shrink: 0; }
.progress-line { font-size: 1.05rem; }
/* max-width divided by the font-size ratio: `ch` scales with the element's own
   font-size, so 62ch at 0.82rem would render ~18% narrower than body copy. */
.small-note { font-size: 0.82rem; color: var(--stone); margin-top: var(--space-md); max-width: calc(var(--measure) / 0.82); }

.prose h3 { margin-top: var(--space-lg); }
.prose ul { margin: var(--space-sm) 0 var(--space-sm) var(--space-lg); }
.prose li { margin-bottom: var(--space-xs); }

/* Small button + cookie note */
.btn-small { padding: 0.5rem 1.1rem; font-size: 0.9rem; }
.cookie-note {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 50;
    max-width: 640px; width: calc(100% - 2rem);
    display: flex; align-items: center; gap: var(--space-md); padding: 0.8rem 1.1rem;
    background: rgba(43, 26, 48, 0.94); color: #f6ebe3;
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg); backdrop-filter: blur(8px);
}
.cookie-note p { margin: 0; font-size: 0.85rem; max-width: none; }

/* Reserve space at the foot of the page while the cookie note is shown,
   so the fixed banner never covers content (e.g. the second door on landing). */
body.cookie-open { padding-bottom: 5.5rem; }

@media (max-width: 600px) {
    .door-grid { grid-template-columns: 1fr; }
    .cookie-note { flex-direction: column; align-items: stretch; text-align: center; }
    body.cookie-open { padding-bottom: 9rem; }
}

/* --- Fixes & feature styles (cookie dismiss, intensity band, account) --- */

/* The hidden attribute must beat .cookie-note's display:flex, or "Got it" can't dismiss it. */
.cookie-note[hidden] { display: none; }

/* Intensity band + meter (result page) — a labelled scale, not a blunt number */
.band-label {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 5vw, 2.5rem);
    font-weight: 300;
    margin: 0.2rem 0 0.7rem;
    position: relative;
    color: #fff;
}
.intensity-meter {
    position: relative; height: 10px; max-width: 320px;
    margin: 0.3rem auto 0.7rem; border-radius: 999px;
    background: rgba(255, 255, 255, 0.25); overflow: hidden;
}
.intensity-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #f0c27a, #ffffff);
    border-radius: 999px;
}

/* Returning-user banner + login link (landing) */
.welcome-back {
    background: rgba(240, 194, 122, 0.18);
    border: 1px solid rgba(224, 123, 67, 0.3);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-lg);
    text-align: center;
}
.welcome-back p { margin: 0; max-width: none; font-size: 0.95rem; }
.login-line { text-align: center; font-size: 0.9rem; color: var(--ink-soft); margin-top: var(--space-lg); }

/* --- Mini auras, 'others', ambient example --- */
.mini-aura { width: 96px; height: 96px; flex-shrink: 0; overflow: visible; }

.others { margin-top: var(--space-lg); border-top: 1px solid var(--line); padding-top: var(--space-md); }
.others > summary {
    cursor: pointer; font-family: var(--font-mono); font-size: 0.78rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-deep);
}
.others-list { margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-md); }
.other-story { display: flex; gap: var(--space-md); align-items: center; }
.other-story .experience-text { font-size: 1rem; margin: 0; }

.ambient-example {
    display: flex; align-items: center; gap: var(--space-lg);
    margin-top: var(--space-xl); padding-top: var(--space-lg);
    border-top: 1px solid var(--line);
}
.ambient-example .experience-text { flex: 1; font-size: 1.05rem; color: var(--ink-soft); margin: 0; }
.ambient-example .mini-aura { width: 110px; height: 110px; }

@media (max-width: 600px) {
    .other-story { flex-direction: column; align-items: flex-start; }
    .ambient-example { flex-direction: column-reverse; align-items: center; text-align: center; gap: var(--space-md); }
}

/* Wonder card thumbnails (begin / more) */
.wonder-card__img { width: 100%; height: 88px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 0.4rem; }

/* --- Logout page/footer, quotes, admin --- */

/* Others' words read as quotes, visually distinct from CTAs and body copy */
.ambient-example {
    background: rgba(212, 106, 120, 0.07);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-top: var(--space-xl);
}
.ambient-example .experience-text,
.other-story .experience-text {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--ink-soft);
    border-left: 3px solid var(--rose);
    padding-left: 1rem;
}

/* Footer account + nav */
.footer-account { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: var(--space-xs); }
.footer-nav {
    display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
    text-transform: uppercase; margin-bottom: var(--space-xs);
}

/* Admin */
.admin-table { width: 100%; border-collapse: collapse; margin: var(--space-md) 0 var(--space-xl); font-size: 0.9rem; }
.admin-table th, .admin-table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); }
.admin-table th { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stone); }
.admin-figures { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: var(--space-md) 0 var(--space-lg); font-size: 0.9rem; color: var(--ink-soft); }
.admin-figures strong { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); }
/* --- admin messages + inline row forms --- */
.form-success, .form-error { padding: 0.6rem 0.9rem; border-radius: var(--radius-md); font-size: 0.9rem; margin: var(--space-md) 0; max-width: none; }
.form-success { background: rgba(45, 138, 126, 0.14); color: var(--ink); border: 1px solid rgba(45, 138, 126, 0.35); }
.form-error { background: rgba(190, 70, 45, 0.12); color: var(--ink); border: 1px solid rgba(190, 70, 45, 0.35); }
.inline-form { display: flex; gap: 0.35rem; align-items: center; }
.inline-form select, .inline-form input[type="password"] { padding: 0.3rem 0.45rem; font-size: 0.82rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,0.6); color: var(--ink); max-width: 130px; }

/* --- experience editor --- */
.admin-crumb { font-size: 0.85rem; margin-bottom: var(--space-sm); }
.admin-qr img { display: block; background: #fff; padding: 3px; border-radius: 4px; }
/* Long QR URLs and a no-wrap action column were pushing the table past the
   card. Let both wrap, cap the URL cell, and keep a scroll container as a
   fallback on very narrow screens. */
.admin-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.admin-table { table-layout: auto; }
.admin-table code { word-break: break-all; font-size: 0.7rem; display: inline-block; max-width: 22ch; }
.admin-actions a, .admin-actions form { display: inline-block; margin: 0 0.5rem 0.2rem 0; font-size: 0.85rem; }
.admin-linkish { background: none; border: none; padding: 0; font: inherit; font-size: 0.85rem; color: var(--ember-deep); cursor: pointer; text-decoration: underline; }
.editor-form { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: flex-end; margin: var(--space-md) 0 var(--space-xl); }
.editor-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--ink-soft); }
.editor-form select, .editor-form input[type="text"] { padding: 0.5rem 0.7rem; font-size: 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,0.6); color: var(--ink); min-width: 180px; }
.field-hint { font-size: 0.75rem; color: var(--stone); }
/* Editor-uploaded experience image */
.experience-image-preview {
    display: block; width: 100%; max-width: 420px; height: auto;
    border-radius: var(--radius-md); margin-bottom: var(--space-md);
    box-shadow: var(--shadow-sm);
}
.experience-image-empty { color: var(--stone); font-style: italic; margin-bottom: var(--space-md); }

/* The editor's own .image-grid / .image-card rules used to sit here and, sharing
   the class names, silently overrode the participant image gallery on /choose —
   its cards were being given a parchment background and padding meant for the
   editor. Both they and the entry-point card grid are gone: each code now has
   its own page (.entry-row / .entry-block below), and /choose gets back the
   full-bleed photo cards it was written for. */

/* A stacked variant of .editor-form: fields run full width and the textarea gets
   the same treatment a participant's own moment does, rather than a cramped box. */
.editor-form--stacked { flex-direction: column; align-items: stretch; max-width: 46rem; }
.editor-field--wide { width: 100%; }
.editor-form--stacked .form-control { min-width: 0; background: #fff; }
.editor-form--stacked button { align-self: flex-start; }

/* Printed QR card */
.print-image {
    display: block; width: 100%; max-width: 320px; aspect-ratio: 16 / 10; object-fit: cover;
    border-radius: var(--radius-md); margin: 0 auto var(--space-md);
}

/* Small-multiple auras — one per entry point, same axes and scale so a curator
   can read them side by side. Static SVG, no shared ids (see scoring.aura_path). */
.aura-grid {
    list-style: none; display: grid; gap: var(--space-md); margin: var(--space-md) 0 var(--space-xl);
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.aura-card {
    background: var(--parchment); border: 1px solid var(--line);
    border-radius: var(--radius-md); padding: var(--space-sm);
    text-align: center; box-shadow: var(--shadow-sm);
}
.aura-mini { width: 100%; height: auto; display: block; margin-bottom: var(--space-xs); }
.aura-card__name {
    font-family: var(--font-display); font-size: 1rem; line-height: 1.25;
    color: var(--ink); margin: 0 0 0.15rem; overflow-wrap: anywhere;
}
.aura-card__meta {
    font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--stone); margin: 0;
}

.editor-stories { list-style: none; }
.editor-stories li { border-left: 2px solid var(--ember); padding-left: var(--space-md); margin-bottom: var(--space-lg); }
.editor-story { margin-bottom: 0.25rem; }
.editor-story-meta { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--stone); }

/* --- printable QR card --- */
.print-inner { text-align: center; padding: var(--space-lg) 0; }
.print-kicker { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--stone); }
.print-title { margin: 0.2rem 0 0.6rem; }
.print-prompt { font-size: 1.05rem; margin-bottom: var(--space-lg); }
.print-qr { width: 240px; height: 240px; background: #fff; padding: 10px; border-radius: 6px; }
.print-url { font-family: var(--font-mono); font-size: 0.7rem; color: var(--stone); word-break: break-all; margin-top: var(--space-md); max-width: none; }
.print-foot { font-size: 0.8rem; color: var(--stone); margin-top: var(--space-md); }
@media print {
    .no-print, .site-header, .site-footer, video, .bg-video { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .form-section { background: none !important; box-shadow: none !important; border: none !important; backdrop-filter: none !important; }
    .print-url, .print-kicker, .print-foot { color: #444 !important; }
}

/* One scrolling strip rather than two or three wrapped rows: a wrapping tab bar
   turned a narrow window into a wall of chips before anyone reached the data. */
.admin-tabs {
    display: flex; gap: 0.25rem; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--line); margin: var(--space-md) 0 var(--space-lg);
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab { flex: 0 0 auto; white-space: nowrap; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0.55rem 0.9rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--stone); }
.admin-tab:hover { color: var(--ember-deep); }
.admin-tab.is-active { color: var(--ember-deep); border-bottom-color: var(--ember); }
.admin-tab:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.admin-panel { display: none; }
.admin-panel.is-active { display: block; }
.admin-story { color: var(--ink-soft); }
.admin-search { display: flex; gap: 0.5rem; align-items: center; margin: var(--space-md) 0; flex-wrap: wrap; }
.admin-search input[type="search"] { flex: 1; min-width: 200px; max-width: 340px; padding: 0.5rem 0.7rem; font-size: 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,0.6); color: var(--ink); }
.admin-clear { font-size: 0.85rem; color: var(--stone); }
.admin-pager { display: flex; gap: 1rem; align-items: baseline; margin: 0 0 var(--space-xl); font-size: 0.9rem; }
.admin-pager span { color: var(--stone); font-family: var(--font-mono); font-size: 0.78rem; }
.admin-group { margin-bottom: var(--space-md); }
.admin-group h4 { font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ember-deep); }
.admin-links { list-style: none; }
.admin-links li { padding: 0.3rem 0; display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.admin-links code { font-size: 0.72rem; color: var(--stone); word-break: break-all; }

/* --- Moderation queue (admin only) --- */
.admin-badge {
    display: inline-block; min-width: 1.35em; padding: 0.05rem 0.35rem; margin-left: 0.3rem;
    border-radius: 999px; background: var(--line-strong); color: var(--parchment);
    font-size: 0.68rem; line-height: 1.5; text-align: center;
}
.admin-badge.is-flagged { background: var(--ember-deep); }

.moderation-queue { list-style: none; margin: var(--space-md) 0 var(--space-xl); }
.moderation-item {
    background: var(--parchment); border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: var(--radius-md); padding: var(--space-md);
    margin-bottom: var(--space-md); box-shadow: var(--shadow-sm);
}
.moderation-item.is-distress { border-left-color: var(--ember-deep); }

.moderation-meta {
    display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline;
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--stone); margin-bottom: var(--space-sm);
}
.moderation-flag {
    padding: 0.1rem 0.45rem; border-radius: var(--radius-md);
    background: rgba(62, 42, 71, 0.08); color: var(--ink-soft);
}
.moderation-flag--distress { background: rgba(194, 94, 44, 0.16); color: var(--ember-deep); }

.moderation-story {
    font-family: var(--font-display); font-size: 1.05rem; line-height: 1.5;
    color: var(--ink); max-width: 60ch; margin: 0 0 var(--space-md);
    padding-left: var(--space-sm); border-left: 2px solid var(--line);
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.moderation-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.moderation-actions form { margin: 0; }

/* Two doors with an 'or' between them (landing) */
.door-choice { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); }
.door-choice .door { flex: 1; }
.or-divider {
    flex-shrink: 0; font-family: var(--font-mono); font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.14em; color: var(--stone);
}
@media (max-width: 600px) {
    .door-choice { flex-direction: column; }
    .door-choice .door { width: 100%; }
}

/* --- Annotate hero image, group blurb, classify lens, group CTA --- */
.hero-image { width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius-md); margin-bottom: var(--space-md); }
.group-blurb { font-style: italic; color: var(--ink-soft); }
/* The card's own words, quoted back on the phone (B-38). Set apart from the
   question beneath it: this is what the person is holding, not what we ask. */
.card-text {
    border-left: 2px solid var(--ember);
    padding-left: var(--space-md);
    margin-bottom: var(--space-md);
    color: var(--ink-soft);
    line-height: 1.7;
}
.lens-note { margin-top: var(--space-sm); font-style: italic; color: var(--ember-deep); }

.group-cta {
    background: linear-gradient(150deg, #2b1a30, #4a2f52);
    color: #f7ede6;
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-lg);
}
.group-cta h3 { color: #fbeee6; }
.group-cta p { color: rgba(247, 237, 230, 0.85); max-width: 52ch; }
.cta-links { list-style: none; margin-top: var(--space-md); display: flex; flex-direction: column; gap: 0.5rem; }
.cta-links a { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--gold); }
.cta-links a:hover { color: #fff; }

/* ============================================================================
   Editor — one entry point at a time
   ========================================================================= */

/* A tappable row per code, replacing the card grid. The grid put seven things
   on a phone screen at once and none of them legibly; a row is 56px tall, shows
   the picture, and leads somewhere. */
.entry-list { list-style: none; margin: var(--space-md) 0 var(--space-lg); }
.entry-row {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 0.55rem 0.7rem; margin-bottom: 0.5rem;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.72), rgba(240, 194, 122, 0.12));
    border: 1px solid var(--line); border-radius: var(--radius-md);
    color: var(--ink);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.entry-row:hover { color: var(--ink); border-color: var(--ember); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.entry-row:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.entry-row__thumb { width: 56px; height: 56px; flex-shrink: 0; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.entry-row__thumb--empty {
    border: 1px dashed var(--line-strong);
    background: repeating-linear-gradient(45deg, rgba(62, 42, 71, 0.05) 0 6px, transparent 6px 12px);
}
.entry-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.entry-row__name { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.2; overflow-wrap: anywhere; }
.entry-row__meta { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--stone); }
.entry-row__go { flex-shrink: 0; color: var(--ember-deep); font-size: 1.1rem; }

/* --- ONS4 wellbeing (B-105) ---------------------------------------------
   Its own control, deliberately not the classify one: that is built for 1-7
   and ONS4 is 0-10, and a scale that quietly rescales is the one way to make
   these answers worthless. Eleven stops wrap on a narrow phone rather than
   shrinking to untappable. */
.research-ask {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--line, rgba(0, 0, 0, 0.08));
    color: var(--ink-soft);
    font-size: 0.92rem;
}
.wellbeing-item { border: 0; padding: 0; margin: 0 0 var(--space-xl); }
.wellbeing-item legend { padding: 0; margin-bottom: var(--space-sm); font-weight: 600; }
.wellbeing-scale { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.wellbeing-stop { flex: 1 1 2.1rem; }
.wellbeing-stop input { position: absolute; opacity: 0; pointer-events: none; }
.wellbeing-stop span {
    display: block;
    padding: 0.55rem 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    border: 1px solid var(--line, rgba(0, 0, 0, 0.15));
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.wellbeing-stop input:checked + span {
    background: var(--ember);
    border-color: var(--ember);
    color: #fff;
}
.wellbeing-stop input:focus-visible + span { outline: 2px solid var(--ember-deep); outline-offset: 2px; }
.wellbeing-anchors {
    display: flex;
    justify-content: space-between;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: var(--stone);
}
/* "New since your last visit" (B-56). Same weight as the admin badge it sits
   alongside, so a count means the same thing on both surfaces. */
.entry-row__new {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ember-deep);
    background: rgba(224, 123, 67, 0.12);
    border-radius: var(--radius-sm);
    padding: 0.15rem 0.4rem;
}

.retired-entries { margin-bottom: var(--space-lg); }
.retired-entries > summary {
    cursor: pointer; font-family: var(--font-mono); font-size: 0.72rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone);
}

/* Entry point detail page */
.entry-block { margin-top: var(--space-lg); }
.entry-block + .entry-block { padding-top: var(--space-lg); border-top: 1px solid var(--line); }
.entry-block--last { border-top: 1px solid var(--line); padding-top: var(--space-lg); }

.entry-signature { display: flex; gap: var(--space-lg); align-items: center; flex-wrap: wrap; }
.aura-mini--large { max-width: 200px; }
.entry-dims { list-style: none; flex: 1 1 220px; min-width: 0; }
.entry-dims li { display: flex; justify-content: space-between; gap: var(--space-sm); padding: 0.3rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.entry-dims span { color: var(--ink-soft); }
.entry-dims strong { font-family: var(--font-mono); color: var(--ember-deep); }

.entry-code { display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap; }
.entry-code img { flex-shrink: 0; background: #fff; padding: 6px; border-radius: 6px; }
.entry-code code { display: block; font-size: 0.7rem; color: var(--stone); word-break: break-all; margin-bottom: var(--space-xs); }

/* Two fields side by side. align-items: flex-end keeps the inputs on one line
   whatever the labels above them do — a hint that wraps to a second line used to
   push its own input half a line below its neighbour's. */
.editor-pair { display: flex; gap: var(--space-md); width: 100%; flex-wrap: wrap; align-items: flex-end; }
.editor-pair label { flex: 1 1 220px; }

/* What a visitor is seeing right now, when this code has no words of its own */
.cta-fallback {
    background: rgba(62, 42, 71, 0.06);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}
.cta-fallback .eyebrow { display: block; margin-bottom: var(--space-xs); }
.cta-fallback__heading { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 0.2rem; }
.cta-fallback p { max-width: none; font-size: 0.92rem; color: var(--ink-soft); }

.aura-card__link { display: block; color: inherit; }
.aura-card__link:hover { color: inherit; }
.aura-card:hover { border-color: var(--ember); }

/* ============================================================================
   Admin/editor tables on a phone — each row becomes its own labelled card
   rather than a seven-column table dragged sideways.
   ========================================================================= */

@media (max-width: 700px) {
    .admin-table thead {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
    .admin-table tr {
        margin-bottom: var(--space-sm);
        padding: var(--space-sm);
        background: linear-gradient(155deg, rgba(255, 255, 255, 0.7), rgba(240, 194, 122, 0.10));
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
    }
    .admin-table td {
        display: flex;
        gap: var(--space-sm);
        justify-content: space-between;
        align-items: baseline;
        padding: 0.3rem 0;
        border-bottom: none;
    }
    .admin-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-family: var(--font-mono);
        font-size: 0.6rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--stone);
    }
    /* Cells with no label (an actions column) give their content the full width. */
    .admin-table td[data-label=""] { justify-content: flex-start; }
    /* An empty-state row spanning the table is a sentence, not a labelled field. */
    .admin-table td[colspan] { justify-content: flex-start; }
    .admin-table td[colspan]::before { content: none; }
    .admin-table code { max-width: none; }
    .inline-form select, .inline-form input[type="password"] { max-width: none; }
}