* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ivory-50); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 20% -4%, rgba(225, 190, 121, 0.34), transparent 28rem),
    radial-gradient(circle at 105% 28%, rgba(108, 146, 176, 0.22), transparent 25rem),
    linear-gradient(165deg, var(--ivory-50), var(--ivory-100));
  color: var(--ink);
}

body::before, body::after { content: ""; position: fixed; z-index: -1; border-radius: 50%; filter: blur(5px); opacity: .55; }
body::before { width: 20rem; height: 20rem; background: rgba(189, 139, 50, .12); left: -11rem; bottom: 6rem; }
body::after { width: 18rem; height: 18rem; background: rgba(59, 100, 135, .15); right: -9rem; top: 30%; }
button, input { font: inherit; }
button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: ui-serif, "New York", Georgia, serif; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 9vw, 3.1rem); line-height: 1.02; margin-bottom: 12px; font-weight: 560; }
h2 { font-size: 1.42rem; margin-bottom: 10px; font-weight: 600; }
p { line-height: 1.55; }
.skip-link { position: fixed; z-index: 100; top: -80px; left: 12px; background: var(--navy-950); color: white; padding: 12px; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.app-shell { max-width: 760px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; }
.topbar { position: sticky; z-index: 20; top: 0; min-height: 58px; display: flex; align-items: center; justify-content: center; padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); border-width: 0 0 1px; box-shadow: var(--shadow-soft); }
.brand-mini { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 9px; font-family: ui-serif, Georgia, serif; font-size: 15px; font-weight: 650; }
.brand-mini img { width: 34px; height: 34px; object-fit: contain; border-radius: 10px; }
#main-content { padding: 22px 16px calc(106px + env(safe-area-inset-bottom)); }
.view { animation: view-in 260ms ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(5px); } }
.view-heading { padding: 16px 5px 14px; }
.view-heading > p:last-child { color: var(--text-soft); margin-bottom: 0; max-width: 38rem; }
.eyebrow { margin: 0 0 7px; color: var(--gold-600); text-transform: uppercase; letter-spacing: .17em; font-size: 11px; font-weight: 800; }
.bottom-nav { position: fixed; z-index: 30; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 760px); display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); border-width: 1px 0 0; box-shadow: 0 -12px 36px rgba(19, 46, 72, .11); }
.nav-item { display: grid; place-items: center; align-content: center; gap: 3px; min-width: 0; color: var(--text-soft); background: transparent; border-radius: 15px; font-size: 10.5px; }
.nav-item.active { color: var(--navy-800); background: rgba(189,139,50,.11); }
.nav-item .icon svg { width: 22px; height: 22px; display: block; }
.boot-loader { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 14px; color: var(--text-soft); }
.boot-loader img { width: 94px; }

/* Home */
.hero-logo {
  display: grid;
  place-items: center;
  width: clamp(218px, 64vw, 284px);
  aspect-ratio: 1;
  margin: 3px auto 22px;
  overflow: hidden;
  border: 1.5px solid rgba(189, 139, 50, .52);
  border-radius: 50%;
  background: var(--ivory-50);
  box-shadow: 0 17px 40px rgba(19, 46, 72, .14), inset 0 0 0 7px rgba(255, 255, 255, .42);
}
.hero-logo img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.today-card { padding: 25px 22px 22px; }
.today-card h1 { text-transform: capitalize; font-size: clamp(1.8rem, 8vw, 2.55rem); }
.status-row { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--text-soft); font-size: 13px; }
.status-pill { padding: 7px 11px; border-radius: 999px; font-weight: 750; }
.status-pill.done { color: var(--yes); background: var(--yes-soft); }
.status-pill.draft { color: var(--gold-600); background: rgba(225,190,121,.23); }
.status-pill.empty { color: var(--text-soft); background: var(--mist-100); }
.progress-track, .question-progress { height: 8px; overflow: hidden; background: var(--mist-200); border-radius: 999px; margin: 18px 0 20px; }
.progress-track span, .question-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); }
.home-insights { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
.compact-card { padding: 17px 19px; display: flex; align-items: center; gap: 14px; }
.compact-card strong { font-family: ui-serif, Georgia, serif; font-size: 2.1rem; color: var(--gold-600); }
.compact-card span { font-size: 13px; color: var(--text-soft); line-height: 1.4; }
.help-card, .data-link { width: 100%; border: 1px solid var(--glass-border); color: var(--ink); text-align: left; padding: 17px 19px; display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: center; font: inherit; }
.help-card span:first-child, .data-link strong { font-weight: 720; }
.help-card small, .data-link small { color: var(--text-soft); grid-column: 1; }

/* Questionnaire */
.questionnaire-view { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.questionnaire-header { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; border-width: 0 0 1px; }
.questionnaire-header div { text-align: center; }
.questionnaire-header p { margin: 0 0 2px; color: var(--text-soft); font-size: 12px; text-transform: capitalize; }
.questionnaire-header strong { font-size: 15px; }
.active-period { max-width: 728px; margin: 14px auto 0; padding: 19px 18px 12px; border-radius: 22px; }
.active-period h1 { font-size: clamp(1.55rem, 7vw, 2.15rem); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .015em; }
.period-progress-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-soft); font-size: 13px; }
.period-progress-label strong { color: var(--gold-600); font-size: 17px; }
.active-period .question-progress { margin: 10px 0 0; border-radius: 999px; height: 8px; }
.question-count { max-width: 760px; margin: 0 auto; padding: 14px 18px 5px; display: flex; justify-content: space-between; color: var(--text-soft); font-size: 12px; }
.question-list { max-width: 760px; margin: 0 auto; padding: 8px 16px; display: grid; gap: 13px; }
.question-card { margin: 0; padding: 17px; border: 1px solid var(--glass-border); min-width: 0; }
.question-card legend { float: left; width: 100%; margin-bottom: 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.question-number { font-family: ui-serif, Georgia, serif; color: var(--gold-600); font-size: 25px; }
.section-label { color: var(--text-soft); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; text-align: right; }
.question-card p { clear: both; white-space: normal; line-height: 1.48; font-size: 15.5px; }
.answer-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px; background: var(--mist-100); border-radius: 17px; }
.answer-segment button { border-radius: 13px; background: transparent; color: var(--text-soft); font-weight: 760; }
.answer-segment button[aria-pressed="true"][data-answer="yes"] { color: var(--yes); background: var(--yes-soft); box-shadow: var(--shadow-soft); }
.answer-segment button[aria-pressed="true"][data-answer="no"] { color: var(--no); background: var(--no-soft); box-shadow: var(--shadow-soft); }
.choice-list { display: grid; gap: 8px; }
.choice-list button { min-height: 52px; width: 100%; border: 1px solid var(--line); border-radius: 15px; background: var(--mist-100); color: var(--ink); text-align: left; padding: 12px 13px; display: flex; align-items: center; gap: 12px; font-size: 15px; }
.choice-list button span:last-child { display: grid; gap: 3px; }
.choice-list button small { color: var(--text-soft); line-height: 1.35; }
.choice-check, .radio-mark { flex: 0 0 25px; width: 25px; height: 25px; display: grid; place-items: center; border: 1.5px solid var(--slate-500); color: transparent; }
.choice-check { border-radius: 8px; }
.radio-mark { border-radius: 50%; }
.multi-choice-list button[aria-pressed="true"], .single-choice-list button[aria-checked="true"] { color: var(--navy-800); background: rgba(225,190,121,.2); border-color: var(--gold-500); box-shadow: var(--shadow-soft); }
.multi-choice-list button[aria-pressed="true"] .choice-check { color: white; border-color: var(--gold-600); background: var(--gold-600); }
.single-choice-list button[aria-checked="true"] .radio-mark { border: 7px solid var(--navy-800); background: white; }
.choice-hint { margin: 9px 2px 0 !important; color: var(--text-soft); font-size: 12px !important; }
.note-field { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 7px; }
.note-field label { font-weight: 720; font-size: 14px; }
.note-field textarea { width: 100%; resize: vertical; min-height: 94px; border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--glass-strong); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.45; }
.note-counter { justify-self: end; color: var(--text-soft); font-size: 11px; }
.retry-button { margin-top: 10px; width: 100%; min-height: 44px; border: 1px solid var(--no); border-radius: 12px; background: transparent; color: var(--no); font-size: 15px; }
.question-actions { max-width: 760px; margin: 4px auto 0; padding: 10px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.question-actions [data-action="finish"] { grid-column: 1 / -1; }

/* Calendar */
.calendar-card { padding: 14px; }
.calendar-toolbar { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 8px; }
.calendar-toolbar h2 { text-align: center; text-transform: capitalize; margin: 0; }
.weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.weekdays { padding: 16px 1px 7px; text-align: center; color: var(--text-soft); font-size: 11px; font-weight: 780; }
.calendar-day { min-width: 0; aspect-ratio: .82; border: 0; border-radius: 13px; background: transparent; display: grid; place-items: center; align-content: center; gap: 2px; font-size: 14px; }
.calendar-day.adjacent { opacity: .35; }
.calendar-day.today { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.calendar-day:disabled { opacity: .24; }
.day-state { font-size: 10px; font-weight: 800; }
.status-completed .day-state { color: var(--yes); }
.status-draft .day-state { color: var(--gold-600); }
.status-empty .day-state { color: var(--slate-500); }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 10px 15px; margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text-soft); font-size: 11px; }
.legend-dot { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; font-style: normal; font-weight: 800; }
.legend-dot.done { color: var(--yes); background: var(--yes-soft); }.legend-dot.draft { color: var(--gold-600); background: rgba(225,190,121,.25); }.legend-dot.empty { color: var(--slate-500); background: var(--mist-100); }

/* Dashboard */
.period-switcher { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 16px; margin-bottom: 13px; }
.period-switcher button { border: 0; border-radius: 12px; background: transparent; color: var(--text-soft); font-weight: 700; }
.period-switcher button[aria-pressed="true"] { color: white; background: var(--navy-900); box-shadow: var(--shadow-soft); }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.metric-card { padding: 17px; display: grid; gap: 5px; }
.metric-card span, .metric-card small { color: var(--text-soft); font-size: 11px; }
.metric-card strong { font-family: ui-serif, Georgia, serif; font-size: 2.2rem; font-weight: 580; color: var(--navy-800); }
.answer-balance, .chart-card, .sections-card, .ranking-card, .insight-detail-card, .notes-card, .empty-state { padding: 20px; margin-top: 12px; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.card-heading strong { font-family: ui-serif, Georgia, serif; font-size: 2.2rem; }
.balance-bar { display: flex; overflow: hidden; height: 12px; border-radius: 999px; background: var(--mist-200); }
.balance-bar span.yes { background: linear-gradient(90deg, var(--gold-600), var(--gold-300)); }
.balance-bar span.no { background: var(--navy-700); }
.balance-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 9px; margin-top: 14px; color: var(--text-soft); font-size: 12px; }
.yes-dot, .no-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }.yes-dot { background: var(--gold-500); }.no-dot { background: var(--navy-700); }
.timeline-chart { display: block; width: 100%; max-height: 220px; overflow: visible; }
.timeline-chart rect { fill: var(--gold-500); }.timeline-chart line { stroke: var(--line); }.timeline-chart text { fill: var(--text-soft); font: 11px -apple-system, sans-serif; text-transform: capitalize; }
.section-bars { display: grid; gap: 16px; }.section-bar-label { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; font-size: 13px; }.mini-track { height: 7px; background: var(--mist-200); border-radius: 999px; overflow: hidden; }.mini-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--navy-700), var(--gold-500)); border-radius: inherit; }
.ranking-list { list-style: none; padding: 0; margin: 15px 0 0; display: grid; gap: 10px; }.ranking-list li { display: grid; grid-template-columns: 32px 1fr auto; align-items: start; gap: 9px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.4; }.rank-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(189,139,50,.14); color: var(--gold-600); font-weight: 800; }.opportunity .rank-number { background: var(--mist-100); color: var(--navy-700); }.soft-note { color: var(--text-soft); font-size: 13px; }.empty-state { text-align: center; padding: 38px 22px; }.empty-symbol { display: block; color: var(--gold-500); font-size: 3rem; }.empty-chart { text-align: center; color: var(--text-soft); padding: 25px 10px; }
.card-intro { color: var(--text-soft); font-size: 13px; }
.frequency-list { display: grid; gap: 15px; margin-top: 17px; }
.frequency-row { display: grid; gap: 6px; }
.frequency-label { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; }
.frequency-label strong { white-space: nowrap; color: var(--gold-600); }
.frequency-row > small { color: var(--text-soft); line-height: 1.35; }
.notes-timeline { display: grid; gap: 17px; margin-top: 16px; }
.note-day { border-top: 1px solid var(--line); padding-top: 14px; }
.note-day h3 { margin: 0 0 10px; font-family: ui-serif, Georgia, serif; font-size: 1rem; text-transform: capitalize; }
.note-day article { padding: 11px 12px; background: var(--mist-100); border-radius: 13px; margin-top: 8px; }
.note-day article span { color: var(--gold-600); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.note-day article p { margin: 5px 0 0; white-space: pre-wrap; color: var(--ink); font-size: 13px; }

/* Instructions and data */
.logo-heading { text-align: center; }.logo-heading img { width: min(88%, 380px); mix-blend-mode: multiply; }.instruction-intro, .instruction-stack details, .privacy-card, .data-card, .danger-zone { padding: 21px; margin-bottom: 12px; }.instruction-intro p:not(.eyebrow) { color: var(--text-soft); }.instruction-stack { display: grid; gap: 10px; }.instruction-stack details { margin: 0; }.instruction-stack summary { list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: 13px; }.instruction-stack summary::-webkit-details-marker { display: none; }.instruction-stack summary span { color: var(--gold-600); font-family: ui-serif, Georgia, serif; font-size: 1.3rem; }.instruction-stack details div { padding: 11px 0 0 37px; color: var(--text-soft); }.instruction-stack ol { padding-left: 20px; line-height: 1.7; }.data-link { margin-top: 14px; }.copyright { text-align: center; color: var(--text-soft); font-size: 10px; margin: 25px 20px 0; }.subpage-heading { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; padding: 10px 0 18px; }.subpage-heading h1 { margin: 0; }.privacy-card { display: flex; gap: 15px; align-items: flex-start; }.privacy-icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; background: var(--yes-soft); color: var(--yes); border-radius: 14px; font-size: 22px; }.privacy-card p, .data-card p, .danger-zone p { color: var(--text-soft); }.file-button { width: 100%; background: var(--mist-100); border: 1px dashed var(--navy-700); color: var(--navy-700); }.file-button input { position: absolute; opacity: 0; width: 1px; height: 1px; }.import-preview { margin-top: 14px; }.success-panel, .error-panel { border-radius: 14px; padding: 14px; }.success-panel { background: var(--yes-soft); color: var(--yes); }.error-panel { background: var(--no-soft); color: var(--no); }.import-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }.replace-confirm, .clear-confirm { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }.danger-zone { border-color: rgba(150,70,78,.2); }

/* Onboarding */
.onboarding { min-height: 100vh; min-height: 100dvh; background: var(--ivory-50); display: flex; flex-direction: column; }
.onboarding-splash { min-height: 55vh; background: var(--ivory-50) url("../../assets/splash/splash-browser.webp") center/cover no-repeat; }
.onboarding-sheet { z-index: 2; margin: -50px 12px 12px; padding: 25px 21px calc(20px + env(safe-area-inset-bottom)); border-radius: 30px; }
.onboarding-sheet h1 { font-size: 2rem; }.onboarding-sheet p, .onboarding-sheet li { color: var(--text-soft); }.onboarding-sheet ul { padding-left: 22px; line-height: 1.8; }.onboarding-sheet .text-button { display: block; margin: 7px auto 0; }

@media (min-width: 600px) {
  #main-content { padding-left: 28px; padding-right: 28px; }
  .home-insights { grid-template-columns: 1fr; }
  .question-list { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .question-card { display: flex; flex-direction: column; }.question-card p { flex: 1; }
  .calendar-day { aspect-ratio: 1.2; }
}

@media (max-width: 360px) {
  #main-content { padding-left: 12px; padding-right: 12px; }
  .brand-mini span { display: none; }
  .question-list, .question-actions { padding-left: 11px; padding-right: 11px; }
  .calendar-card { padding: 10px; }.calendar-grid, .weekdays { gap: 2px; }.calendar-day { border-radius: 10px; }
  .metric-grid { grid-template-columns: 1fr; }
}

@media (prefers-color-scheme: dark) {
  .hero-logo { background: #fdf8ef; }
  .hero-logo img, .logo-heading img { mix-blend-mode: normal; }
  .nav-item.active { color: var(--gold-300); }
  .metric-card strong { color: var(--gold-300); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}