/* Mobile-first page composition; desktop adds columns only when space allows. */
.shell { width: min(1180px, calc(100% - 2 * var(--page-gutter) - env(safe-area-inset-left) - env(safe-area-inset-right))); }
.site-header { height: auto; min-height: 76px; gap: 12px; padding-block: 12px; padding-top: max(12px, env(safe-area-inset-top)); }
.brand { flex-shrink: 0; gap: 8px; min-height: 44px; }
.brand small { font-size: 10px; }
.header-actions { min-width: 0; flex-wrap: nowrap; gap: 8px; }
.header-note { display: none; }
.theme-toggle { width: 44px; flex: 0 0 44px; padding: 0; }
.theme-toggle-label { display: none; }
.header-actions .ghost-button { padding-inline: 12px; white-space: nowrap; }
.flow-navigation { top: 0; margin: 0; padding: 8px 0; background: var(--bg); }
.flow-navigation::before { content: ''; position: absolute; z-index: -1; inset: 0 calc(-1 * (var(--page-gutter) + max(env(safe-area-inset-left), env(safe-area-inset-right)))); background: var(--bg); border-bottom: 1px solid var(--line); }
.flow-tabs { width: 100%; max-width: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.flow-tab { flex: 1 0 72px; min-height: 52px; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 2px 10px; font-size: 12px; text-align: center; }
.flow-tab::after { left: 6px; right: 6px; }
.flow-tab b { font-size: 10px; }
.flow-tab:disabled { opacity: .65; }
.flow-status { font-size: 12px; }
.flow-page { touch-action: auto; scroll-margin-top: 88px; animation: none; transition: none; }
.flow-page--intake { width: 100%; }
.flow-page--intake .intake-page-header, .intake-page-header { padding: 28px 0 24px; }
h1 { font-size: clamp(30px, 6vw, 48px); line-height: 1.25; letter-spacing: -.025em; }
.hero-copy { margin-top: 12px; font-size: 15px; }
.intake-card, .analysis-panel, .summary-card, .school-card,
.local-basics, .life-trajectory, .local-tarot { padding: var(--card-padding); }
.flow-page--foundation, .flow-page--stage, .flow-page--overview, .flow-page--reading { padding-top: 24px; }
.section-head, .intake-head, .results-intro, .school-section-head,
.local-basics-head, .foundation-tarot-head, .local-tarot-head,
.overview-section-head, .overview-next-step { flex-direction: column; align-items: stretch; gap: 12px; }
.section-head h2, .results-intro h2 { font-size: clamp(26px, 4vw, 38px); line-height: 1.35; }
.form-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 24px; }
.form-bottom { flex-direction: column; align-items: stretch; gap: 24px; }
.submit-stack { width: 100%; justify-items: stretch; }
.primary-button { width: 100%; }
.consent-stack { gap: 12px; }
.field-hint { margin: 0; }
.profile-bar-list { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 3px 2px 8px; scroll-snap-type: x proximity; }
.profile-pill { flex: 0 0 auto; max-width: 100%; scroll-snap-align: start; overflow-wrap: anywhere; }
.save-profile-row { display: grid; grid-template-columns: 1fr 1fr; }
.save-profile-row input { width: 100%; grid-column: 1 / -1; }
.analysis-warning { flex-direction: column; align-items: stretch; }
.analysis-runtime, .analysis-explainer { font-size: 14px; }
.progress-step { grid-template-columns: 14px minmax(0, 1fr); }
.progress-step > :last-child { grid-column: 2; }
.foundation-meta-grid, .foundation-detail-grid, .foundation-tarot-grid,
.overview-signal-grid, .overview-dimension-grid, .overview-caveats,
.life-trajectory-current-grid, .life-trajectory-basis,
.summary-reasons, .summary-split { grid-template-columns: minmax(0, 1fr); }
.foundation-detail-card--luck, .life-trajectory-current-card:last-child { grid-column: auto; }
.foundation-reading-guide { grid-template-columns: 1fr; gap: 6px; }
.local-basics-source-stack, .foundation-tarot-head > p, .local-tarot-head > p,
.overview-section-head > p, .overview-next-step > p { max-width: none; text-align: left; font-size: 13px; }
.local-basics-card { padding: 14px; }
.local-basics-card p, .foundation-reading-guide p, .local-basics-card small,
.local-bazi-note, .life-trajectory-note, .life-trajectory-detail p { font-size: 13px; line-height: 1.8; }
.local-bazi-pillars { gap: 4px; }
.local-bazi-pillar { padding-inline: 3px; }
.local-name-analysis-main { flex-direction: column; align-items: flex-start; gap: 8px; }
.local-name-analysis-main > p { justify-content: flex-start; max-width: none; text-align: left; }
.local-name-analysis-grids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.local-name-analysis-grid { padding: 12px 8px; border-radius: 10px; }
.local-name-analysis-grid:last-child { grid-column: 1 / -1; }
.local-name-analysis-grid-heading { flex-wrap: wrap; font-size: 12px; }
.local-name-analysis-grid-role, .local-name-analysis-grid-result, .local-name-analysis-harmony, .local-name-analysis-warning { font-size: 12px; line-height: 1.7; }
.local-bazi-power-row { grid-template-columns: 16px minmax(0, 1fr) 34px 60px; gap: 4px; }
.foundation-tarot-cards { gap: 6px; }
.foundation-tarot-card { padding: 8px 4px; }
.foundation-tarot-draw { padding: 12px; }
.foundation-tarot-draw-head { flex-wrap: wrap; gap: 6px; }
.foundation-tarot-draw-head > small { max-width: 100%; text-align: left; }
.local-tarot-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.local-tarot-card { padding: 8px 4px; }
.local-tarot-card strong { font-size: 15px; }
.overview-hero { grid-template-columns: 1fr; gap: 20px; padding: var(--card-padding); }
.overview-hero h3 { font-size: clamp(28px, 4vw, 44px); }
.overview-profile-line { font-size: 14px; }
.overview-agreement { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line-bright); }
.overview-dimension { min-height: 0; padding: 18px; }
.overview-dimension-copy { display: block; overflow: visible; -webkit-line-clamp: unset; font-size: 14px; }
.overview-dimension-summary { font-size: 20px; }
.overview-dimension-title strong { white-space: normal; }
.overview-signal p, .overview-caveats p { font-size: 14px; }
.overview-caveats { gap: 16px; padding: var(--card-padding); }
.overview-caveats > div { padding: 0 0 16px; border-right: 0; border-bottom: 1px solid var(--line); }
.life-trajectory-visual { grid-template-columns: 40px minmax(0, 1fr); gap: 6px; }
.life-trajectory-axis { font-size: 11px; }
.life-trajectory-scroll, .local-bazi-luck-periods { overscroll-behavior-x: contain; touch-action: pan-x pan-y pinch-zoom; }
.life-trajectory-detail-head { flex-wrap: wrap; gap: 8px; }
.life-trajectory-period { min-height: 44px; }
.results-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.question-rail { scroll-margin-top: calc(var(--flow-nav-height, 68px) + 8px); position: sticky; top: calc(var(--flow-nav-height, 68px) + 8px); z-index: 5; padding: 0 12px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.question-rail-head { padding: 4px 0; }
.question-rail-head button { min-height: 44px; padding-inline: 8px; font-size: 13px; }
.question-select-field { display: flex; }
.question-select-field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.question-list { display: none; }
.question-pagination { max-width: none; gap: 8px; margin-top: 8px; padding-top: 0; border: 0; }
.question-pagination button { min-height: 44px; font-size: 13px; }
.profile-chips { justify-content: flex-start; }
.profile-chip { max-width: 100%; white-space: normal; font-size: 12px; }
.summary-topline, .school-meta, .school-name { flex-wrap: wrap; }
.summary-main h3 { font-size: 24px; }
.summary-main p, .summary-split p, .school-card > p { font-size: 15px; line-height: 1.85; }
.summary-split { gap: 20px; }
.school-section { margin-top: 32px; }
.school-section-head h3 { font-size: 26px; }
.evidence-list li, .limitation, .result-note { font-size: 13px; }
.coverage-badge, .school-type, .school-status { font-size: 11px; line-height: 1.5; }
.account-page { padding-top: 24px; padding-bottom: max(32px, env(safe-area-inset-bottom)); gap: 24px; }
.account-page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-page-header > div { min-width: 0; }
.account-page-header .section-kicker { margin-bottom: 8px; }
.account-identity { margin-bottom: 0; color: var(--muted); font-size: 14px; }
#account-body { display: grid; gap: 24px; }
.account-row { flex-direction: column; align-items: stretch; gap: 12px; padding-block: 20px; }
.account-row-actions { gap: 12px; }
.account-row-actions > * { flex: 1; border: 1px solid var(--line); }
.account-filter { width: 100%; max-width: none; }
.account-empty, .account-guard { padding: 20px 0; font-size: 14px; line-height: 1.8; }
.account-status:empty { display: none; }
.account-status:not(:empty) { position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); margin: 0; padding: 14px 16px; border: 1px solid var(--line-bright); border-radius: 12px; background: var(--surface); }
#history-more { width: 100%; margin-top: 16px; }
.site-footer { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 40px; padding-bottom: max(28px, env(safe-area-inset-bottom)); font-size: 12px; }
.site-footer p { text-align: left; }
@media (min-width: 640px) {
  .site-header { min-height: 88px; }
  .theme-toggle { width: auto; flex-basis: auto; padding-inline: 12px; }
  .theme-toggle-label { display: inline; }
  .flow-tab { flex-direction: row; gap: 8px; font-size: 14px; }
  .flow-tabs { max-width: 760px; }
  .form-grid, .foundation-meta-grid, .foundation-detail-grid, .foundation-tarot-grid,
  .overview-dimension-grid, .summary-reasons, .summary-split,
  .life-trajectory-current-grid, .life-trajectory-basis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foundation-detail-card--luck, .life-trajectory-current-card:last-child { grid-column: 1 / -1; }
  .local-name-analysis-grids { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .local-name-analysis-grid:last-child { grid-column: auto; }
  .overview-signal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .intake-head, .section-head, .results-intro, .school-section-head { flex-direction: row; }
  .account-filter { width: 200px; flex: 0 0 200px; }
  .account-row { flex-direction: row; align-items: center; }
  .account-row-actions > * { flex: none; }
  .submit-stack { justify-items: end; }
  .submit-stack .primary-button { width: auto; min-width: 200px; }
  .save-profile-row { display: flex; }
  .save-profile-row input { flex: 1; width: auto; }
  .question-rail { top: calc(var(--flow-nav-height, 68px) + 8px); }
}
@media (min-width: 1024px) {
  :root { --card-padding: 28px; }
  .header-note { display: block; }
  .flow-page--intake { max-width: 980px; }
  .flow-page--intake .intake-page-header { padding-top: 40px; }
  .flow-page--foundation, .flow-page--stage, .flow-page--overview, .flow-page--reading { padding-top: 40px; }
  .foundation-meta-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .overview-dimension-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .overview-hero { grid-template-columns: minmax(0, 1.35fr) minmax(230px, .65fr); }
  .overview-agreement { border-top: 0; border-left: 1px solid var(--line-bright); padding: 0 0 0 24px; }
  .local-basics-head, .foundation-tarot-head, .local-tarot-head, .overview-section-head, .overview-next-step { flex-direction: row; align-items: flex-start; }
  .overview-section-head > p, .overview-next-step > p { max-width: 360px; }
  .form-bottom { flex-direction: row; align-items: flex-end; }
  .submit-stack { width: auto; flex-shrink: 0; }
  .results-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 28px; }
  .question-rail { top: calc(var(--flow-nav-height, 68px) + 16px); }
  .question-list { display: flex; flex-direction: column; max-height: calc(100dvh - 270px); overflow: auto; padding: 4px; }
  .question-button { min-width: 0; min-height: 48px; border-radius: 8px; }
  .question-select-field { display: none; }
  .site-footer { flex-direction: row; justify-content: space-between; }
  .site-footer p { text-align: right; }
}
/* A short landscape viewport needs its height for report text. */
@media (max-height: 600px) and (max-width: 1023px) {
  .question-rail { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}