/* ════════════════════════════════════════════════════════
   NEXUS · Layout
   ════════════════════════════════════════════════════════ */

/* ── Chrome ── */
.site-chrome {
    position: sticky; top: 0; z-index: 100;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 14px clamp(18px, 4vw, 44px);
    background: rgba(248,245,239,0.88);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid var(--border);
}

body[data-view="intro"] .site-chrome {
    position: fixed; width: 100%;
    justify-content: flex-end;
    background: transparent; border-bottom: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-view="intro"] .brand-block { opacity: 0; pointer-events: none; }

.brand-block {
    display: inline-flex; flex-direction: column; align-items: flex-start;
    gap: 1px; padding: 0; border: 0; background: transparent; color: inherit;
}
.brand-mark {
    font-family: var(--mono); font-size: 0.75rem; font-weight: 500;
    letter-spacing: 0.42em; color: var(--text);
}
.brand-subtitle {
    font-family: var(--mono); font-size: 0.68rem;
    letter-spacing: 0.06em; color: var(--text-3);
}
.chrome-actions { display: flex; align-items: center; gap: 10px; }

/* ── App Shell ── */
.app-shell {
    width: min(100%, calc(var(--max-w) + 80px));
    margin: 0 auto;
    padding: 0 22px 100px;
}

.phase { display: none; min-height: calc(100vh - 56px); }
.phase.is-active { display: block; }

.view-shell { padding: clamp(28px, 4vw, 56px) 0; }
.phase.is-entering .view-shell { animation: view-enter 300ms cubic-bezier(0.22,1,0.36,1); }

.view-shell.is-centered {
    min-height: calc(100vh - 56px);
    display: grid; place-items: center;
}
body[data-view="intro"] .view-shell.is-centered { min-height: 100dvh; }

.view-container { width: min(100%, var(--max-w)); margin: 0 auto; }
.view-container.is-narrow { width: min(100%, var(--max-w-sm)); }

/* ── Stacks ── */
.stack-xl { display: grid; gap: 44px; }
.stack-lg { display: grid; gap: 28px; }
.stack-md { display: grid; gap: 18px; }
.stack-sm { display: grid; gap: 10px; }
.stack-xs { display: grid; gap: 6px; }

/* ── Grids ── */
.panel-grid    { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.cluster-grid  { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.program-grid  { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.form-grid     { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-grid.is-three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.profile-grid  { display: grid; gap: 16px; grid-template-columns: minmax(0,1.5fr) minmax(240px,0.8fr); align-items: start; }
.trajectory-grid--dominant { display: grid; gap: 14px; grid-template-columns: minmax(0,1.12fr) minmax(270px,0.88fr); align-items: start; }
.trajectory-grid--cluster  { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0,1fr)); }

.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.button-row.is-spread { justify-content: space-between; }
.button-row.is-centered { justify-content: center; }

/* ── Section Head ── */
.section-head { display: grid; gap: 8px; margin-bottom: 18px; }
.section-head--compact { margin-bottom: 8px; }
.section-head--with-action { grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 16px; }
.section-head__content { display: grid; gap: 8px; }

.section-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--mono); font-size: 0.68rem;
    letter-spacing: 0.20em; text-transform: uppercase;
    color: var(--honey); font-weight: 400;
}
.section-eyebrow::before {
    content: "";
    display: inline-block; width: 18px; height: 1px;
    background: var(--honey); opacity: 0.6;
    flex-shrink: 0;
}

.section-title {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 600; line-height: 0.96;
    letter-spacing: -0.025em; color: var(--text);
}
.section-title--mid { font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.05; }
.section-title--sm  { font-size: 1.15rem; font-weight: 600; line-height: 1.15; }

.section-copy {
    margin: 0; font-size: 0.95rem;
    line-height: 1.68; color: var(--text-2); max-width: 58ch;
}

/* ── Quiz specific ── */
.question-shell { width: min(100%, 780px); margin: 0 auto; }
.option-grid    { display: grid; gap: 9px; }
.progress-shell { display: grid; gap: 10px; }
.analyzing-shell { width: min(100%, 620px); }
.quiz-shell { padding: clamp(16px, 3vw, 40px) 0; }

/* ── Intro specific ── */
.intro-stage { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.intro-inner-wrap { width: min(100%, 840px); margin: 0 auto; }

@keyframes view-enter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}