*{box-sizing:border-box}

/* ── Token system ─────────────────────────────────────────────────────────── */
/* Defaults below = wise-sister theme. body.theme-X overrides for the others. */
:root{
  /* Surfaces */
  --bg-page:#FAF6F1;
  --bg-surface:#FFFFFF;
  --bg-surface-alt:#F4EEE4;
  --bg-sidebar:#3A4A3A;
  --bg-overlay:rgba(20,18,15,0.42);

  /* Text */
  --text-primary:#2D2A26;
  --text-secondary:#5A5650;
  --text-muted:#8A857C;
  --text-on-primary:#FFFFFF;
  --text-on-accent:#FFFFFF;
  --text-on-sidebar:#F0EBE0;

  /* Brand */
  --color-primary:#8FA68A;
  --color-primary-hover:#6F8770;
  --color-primary-soft:rgba(143,166,138,0.10);
  --color-primary-tint:rgba(143,166,138,0.05);
  --color-accent:#C97D5C;
  --color-accent-hover:#B16A4D;
  --color-accent-soft:rgba(201,125,92,0.12);
  --color-accent-tint:rgba(201,125,92,0.06);

  /* Borders + sidebar dividers */
  --border-color:#E5DED1;
  --border-color-subtle:#EFE9DD;
  --sidebar-divider:rgba(240,235,224,0.18);

  /* Shadows */
  --shadow-low:0 1px 3px rgba(45,42,38,0.06);
  --shadow-medium:0 2px 8px rgba(45,42,38,0.10);
  --shadow-high:0 12px 40px rgba(45,42,38,0.20);

  /* Typography */
  --font-heading:'Lora',Georgia,'Times New Roman',serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --weight-heading:600;
  --tracking-label:0.6px;

  /* Shape */
  --radius-card:10px;
  --radius-button:6px;
  --radius-input:6px;
  --radius-pill:999px;

  /* Focus ring */
  --focus-ring:rgba(143,166,138,0.35);

  /* ── Non-themed semantic tokens (constant across all themes) ── */
  --status-not-started-bg:#E0DCD0;
  --status-not-started-fg:#6E6A60;
  --status-in-progress-bg:#D4A84A;
  --status-in-progress-fg:#3D2E0F;
  --status-completed-bg:#4F8C5A;
  --status-completed-fg:#FFFFFF;
  --decision-vaccinate-bg:#1B4D2E;
  --decision-skip-bg:#CC6A28;
  --color-error:#C41E3A;
  --color-error-soft:rgba(196,30,58,0.08);
  --color-warning-bg:#FDECEA;
  --color-warning-border:#C0392B;
  --color-warning-fg:#641E16;
}

body.theme-wise-sister{
  /* Same as :root defaults — explicit for clarity */
  --bg-page:#FAF6F1;
  --bg-surface:#FFFFFF;
  --bg-surface-alt:#F4EEE4;
  --bg-sidebar:#3A4A3A;
  --text-primary:#2D2A26;
  --text-secondary:#5A5650;
  --text-muted:#8A857C;
  --text-on-primary:#FFFFFF;
  --text-on-accent:#FFFFFF;
  --text-on-sidebar:#F0EBE0;
  --color-primary:#8FA68A;
  --color-primary-hover:#6F8770;
  --color-primary-soft:rgba(143,166,138,0.10);
  --color-primary-tint:rgba(143,166,138,0.05);
  --color-accent:#C97D5C;
  --color-accent-hover:#B16A4D;
  --color-accent-soft:rgba(201,125,92,0.12);
  --color-accent-tint:rgba(201,125,92,0.06);
  --border-color:#E5DED1;
  --border-color-subtle:#EFE9DD;
  --sidebar-divider:rgba(240,235,224,0.18);
  --shadow-low:0 1px 3px rgba(45,42,38,0.06);
  --shadow-medium:0 2px 8px rgba(45,42,38,0.10);
  --shadow-high:0 12px 40px rgba(45,42,38,0.20);
  --font-heading:'Lora',Georgia,serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --weight-heading:600;
  --radius-card:10px;
  --radius-button:6px;
  --radius-input:6px;
  --focus-ring:rgba(143,166,138,0.35);
}

body.theme-midwife{
  --bg-page:#F4EFE8;
  --bg-surface:#FBF8F2;
  --bg-surface-alt:#ECE6DA;
  --bg-sidebar:#283328;
  --text-primary:#211C18;
  --text-secondary:#4F4A40;
  --text-muted:#87807A;
  --text-on-primary:#FBF8F2;
  --text-on-accent:#211C18;
  --text-on-sidebar:#E8DFCA;
  --color-primary:#3F5544;
  --color-primary-hover:#2C3E30;
  --color-primary-soft:rgba(63,85,68,0.08);
  --color-primary-tint:rgba(63,85,68,0.04);
  --color-accent:#C8A961;
  --color-accent-hover:#A88E4F;
  --color-accent-soft:rgba(200,169,97,0.14);
  --color-accent-tint:rgba(200,169,97,0.06);
  --border-color:#DDD3C2;
  --border-color-subtle:#E7DFCD;
  --sidebar-divider:rgba(232,223,202,0.18);
  --shadow-low:0 1px 3px rgba(33,28,24,0.06);
  --shadow-medium:0 2px 10px rgba(33,28,24,0.10);
  --shadow-high:0 14px 44px rgba(33,28,24,0.22);
  --font-heading:'Source Serif Pro',Georgia,serif;
  --font-body:'Source Sans Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --weight-heading:600;
  --radius-card:8px;
  --radius-button:4px;
  --radius-input:4px;
  --focus-ring:rgba(63,85,68,0.30);
}

body.theme-modern-clinician{
  --bg-page:#FBF9F4;
  --bg-surface:#FFFFFF;
  --bg-surface-alt:#F0EDE6;
  --bg-sidebar:#2A3744;
  --text-primary:#1F2A33;
  --text-secondary:#4F5963;
  --text-muted:#8B939A;
  --text-on-primary:#FFFFFF;
  --text-on-accent:#1F2A33;
  --text-on-sidebar:#E5EAEE;
  --color-primary:#5E8B89;
  --color-primary-hover:#486F6D;
  --color-primary-soft:rgba(94,139,137,0.10);
  --color-primary-tint:rgba(94,139,137,0.05);
  --color-accent:#E8A99A;
  --color-accent-hover:#D69080;
  --color-accent-soft:rgba(232,169,154,0.18);
  --color-accent-tint:rgba(232,169,154,0.08);
  --border-color:#E0DAD2;
  --border-color-subtle:#EDE8DF;
  --sidebar-divider:rgba(229,234,238,0.18);
  --shadow-low:0 1px 4px rgba(31,42,51,0.06);
  --shadow-medium:0 4px 14px rgba(31,42,51,0.10);
  --shadow-high:0 16px 48px rgba(31,42,51,0.20);
  --font-heading:'Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --weight-heading:600;
  --radius-card:12px;
  --radius-button:8px;
  --radius-input:8px;
  --focus-ring:rgba(94,139,137,0.32);
}

body.theme-quiet-institution{
  --bg-page:#F2EEE6;
  --bg-surface:#FAF7F0;
  --bg-surface-alt:#E9E3D5;
  --bg-sidebar:#1A222C;
  --text-primary:#1A1410;
  --text-secondary:#4A453E;
  --text-muted:#807B73;
  --text-on-primary:#F5F1E8;
  --text-on-accent:#1A1410;
  --text-on-sidebar:#DCD3BE;
  --color-primary:#2A3744;
  --color-primary-hover:#181F28;
  --color-primary-soft:rgba(42,55,68,0.08);
  --color-primary-tint:rgba(42,55,68,0.04);
  --color-accent:#B68B4A;
  --color-accent-hover:#97713A;
  --color-accent-soft:rgba(182,139,74,0.12);
  --color-accent-tint:rgba(182,139,74,0.06);
  --border-color:#D9D1BE;
  --border-color-subtle:#E5DDC8;
  --sidebar-divider:rgba(220,211,190,0.18);
  --shadow-low:0 1px 2px rgba(26,20,16,0.05);
  --shadow-medium:0 2px 6px rgba(26,20,16,0.08);
  --shadow-high:0 10px 32px rgba(26,20,16,0.18);
  --font-heading:'Crimson Pro',Georgia,'Times New Roman',serif;
  --font-body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --weight-heading:600;
  --radius-card:4px;
  --radius-button:3px;
  --radius-input:3px;
  --focus-ring:rgba(42,55,68,0.30);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body,html{height:100%;margin:0;font-family:var(--font-body);background:var(--bg-page);color:var(--text-primary);touch-action:manipulation}

#app{display:flex;flex-direction:row-reverse;height:100dvh}

/* ── Landing ──────────────────────────────────────────────────────────────── */
#landing-screen{min-height:100vh;background:var(--bg-page);color:var(--text-primary);font-family:var(--font-body);overflow-x:hidden}

.landing-topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:20px 32px;z-index:5}
.landing-wordmark{font-family:var(--font-heading);font-weight:var(--weight-heading);font-size:18px;color:var(--color-primary);letter-spacing:0.02em}
.landing-signin-link{display:inline-block;background:transparent;border:1px solid var(--color-primary);color:var(--color-primary);font-family:var(--font-body);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.5px;padding:8px 16px;border-radius:var(--radius-button);cursor:pointer;text-decoration:none;transition:all 0.2s}
.landing-signin-link:visited{color:var(--color-primary)}
@media (hover:hover){.landing-signin-link:hover{background:var(--color-primary-soft)}}

.landing-hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px;gap:22px;background:linear-gradient(180deg,var(--bg-page) 0%,var(--bg-surface) 100%)}
.landing-hero h1{margin:0;font-family:var(--font-heading);font-weight:var(--weight-heading);font-size:clamp(44px,9vw,96px);line-height:1.05;letter-spacing:-0.015em;color:var(--text-primary)}
.landing-tagline{margin:0;font-family:var(--font-heading);font-size:clamp(20px,3vw,28px);color:var(--color-primary);max-width:720px;line-height:1.3}
.landing-subtagline{margin:0;max-width:640px;font-size:17px;line-height:1.55;color:var(--text-secondary)}
.landing-hero .landing-cta-primary{margin-top:14px}
.landing-scroll-hint{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);font-size:24px;color:var(--text-muted);animation:landing-bounce 2.2s ease-in-out infinite}
@keyframes landing-bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

.landing-section{padding:120px 24px;background:var(--bg-page)}
.landing-section-alt{background:var(--bg-surface-alt)}
.landing-section-inner{max-width:720px;margin:0 auto;text-align:center}
.landing-section h2{margin:0 0 24px;font-family:var(--font-heading);font-weight:var(--weight-heading);font-size:clamp(28px,4.5vw,40px);line-height:1.2;color:var(--text-primary);letter-spacing:-0.005em}
.landing-section p{margin:0 auto;max-width:620px;font-size:17px;line-height:1.65;color:var(--text-secondary)}
.landing-section .landing-cta-primary{margin-top:36px}

.landing-steps{list-style:none;padding:0;margin:40px auto 0;max-width:640px;display:flex;flex-direction:column;gap:32px;text-align:left}
.landing-steps li{display:flex;align-items:flex-start;gap:20px;background:var(--bg-surface);padding:24px;border-radius:var(--radius-card);border:1px solid var(--border-color-subtle);box-shadow:var(--shadow-low)}
.landing-steps .step-num{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--color-accent);color:var(--text-on-accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:var(--weight-heading);font-size:18px}
.landing-steps .step-body{flex:1 1 auto;min-width:0}
.landing-steps .step-body h3{margin:0 0 8px;font-family:var(--font-heading);font-weight:var(--weight-heading);font-size:19px;color:var(--text-primary);letter-spacing:0}
.landing-steps .step-body p{margin:0;font-size:15px;line-height:1.55;color:var(--text-secondary);max-width:none}

.landing-cta-primary{display:inline-block;background:var(--color-primary);color:var(--text-on-primary);border:none;padding:14px 30px;border-radius:var(--radius-button);font-family:var(--font-body);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:0.7px;cursor:pointer;text-decoration:none;text-align:center;box-shadow:var(--shadow-medium);transition:transform .2s,box-shadow .2s,background .2s}
.landing-cta-primary:visited{color:var(--text-on-primary)}
@media (hover:hover){.landing-cta-primary:hover{background:var(--color-primary-hover);color:var(--text-on-primary);transform:translateY(-1px);box-shadow:var(--shadow-high)}}
.landing-cta-primary:active{transform:translateY(0)}

.landing-section-final{padding-top:96px;padding-bottom:140px}
.landing-reassure{font-family:var(--font-heading);font-style:italic;font-size:clamp(20px,3vw,26px);line-height:1.45;color:var(--color-primary);max-width:560px;margin:0 auto 36px!important}
.landing-footnote{margin-top:28px!important;font-size:14px;color:var(--text-muted)}
.landing-link{background:none;border:none;padding:0;color:var(--color-primary);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.landing-link:visited{color:var(--color-primary)}
@media (hover:hover){.landing-link:hover{color:var(--color-primary-hover)}}

.login-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px}
.login-actions button{margin:0}

@media (max-width:640px){
  .landing-topbar{padding:14px 18px}
  .landing-hero{padding:100px 20px 70px;gap:18px}
  .landing-section{padding:80px 20px}
  .landing-section-final{padding-top:70px;padding-bottom:100px}
  .landing-steps li{padding:18px;gap:14px}
  .landing-steps .step-num{width:36px;height:36px;font-size:16px}
}

/* ── Login ────────────────────────────────────────────────────────────────── */
#login-screen{display:flex;height:100vh;align-items:center;justify-content:center;padding:0 16px;background:linear-gradient(135deg,var(--bg-sidebar) 0%,var(--color-primary) 100%)}
.login-box{background:var(--bg-surface);padding:32px;border-radius:var(--radius-card);box-shadow:var(--shadow-high);width:100%;max-width:420px;border-top:4px solid var(--color-accent)}
.login-welcome{font-size:14px;line-height:1.55;color:var(--text-secondary);margin:0 0 18px 0;text-align:left}
.login-box h2{margin-top:0;color:var(--color-primary);font-family:var(--font-heading);font-weight:var(--weight-heading);text-align:center;font-size:22px;letter-spacing:0}
.login-box input{display:block;width:100%;margin:10px 0;padding:10px 12px;border:1px solid var(--border-color);border-radius:var(--radius-input);font-size:14px;font-family:var(--font-body);background:var(--bg-surface);color:var(--text-primary)}
.login-box input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--focus-ring)}
.login-box button{background:var(--color-primary);color:var(--text-on-primary);border:none;padding:10px 20px;border-radius:var(--radius-button);cursor:pointer;font-family:var(--font-body);font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:0.5px;transition:all 0.2s;margin-right:8px}
@media (hover:hover){.login-box button:hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-medium)}}
.login-box button:active{transform:translateY(0)}
#login-msg{margin-top:12px;color:var(--color-error);font-size:13px;text-align:center}
.login-instruction{font-size:13px;color:var(--text-secondary);margin:0 0 10px 0;text-align:center}

.btn-secondary{background:transparent;color:var(--color-primary);border:1px solid var(--color-primary);padding:10px 20px;border-radius:var(--radius-button);cursor:pointer;font-family:var(--font-body);font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:0.5px;transition:all 0.2s;margin-left:4px}
@media (hover:hover){.btn-secondary:hover{background:var(--color-primary-soft)}}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
#sidebar{width:280px;background:var(--bg-sidebar);border-left:2px solid var(--color-accent);padding:0;display:flex;flex-direction:column;color:var(--text-on-sidebar);min-height:100vh}
#user-panel{padding:16px;background:rgba(0,0,0,0.18);border-bottom:1px solid var(--sidebar-divider)}
#profile-box h3{margin:0;color:var(--color-accent);font-family:var(--font-heading);font-size:16px;font-weight:var(--weight-heading);letter-spacing:0}

#sidebar-nav{padding:16px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--sidebar-divider)}
.sidebar-nav-btn{display:block;width:100%;background:transparent;color:var(--text-on-sidebar);border:1px solid var(--color-accent);padding:10px 14px;border-radius:var(--radius-button);cursor:pointer;font-family:var(--font-body);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;text-align:left;transition:all 0.2s}
@media (hover:hover){.sidebar-nav-btn:hover{background:rgba(255,255,255,0.08)}}
.sidebar-nav-btn.active{background:var(--color-accent);color:var(--text-on-accent)}

#sidebar-footer{margin-top:auto;padding:16px;display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--sidebar-divider);background:rgba(0,0,0,0.14)}
#sidebar-footer button{background:transparent;color:var(--text-on-sidebar);border:1px solid var(--color-accent);padding:6px 14px;border-radius:var(--radius-button);cursor:pointer;font-family:var(--font-body);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.2s}
@media (hover:hover){#sidebar-footer button:hover{background:var(--color-accent);color:var(--text-on-accent)}}

/* ── Timeline placeholder + page ──────────────────────────────────────────── */
.timeline-placeholder{max-width:560px;margin:40px auto;background:var(--bg-surface);padding:32px;border-radius:var(--radius-card);border-top:4px solid var(--color-accent);box-shadow:var(--shadow-medium);text-align:center}
.timeline-placeholder h3{margin:0 0 12px 0;color:var(--color-primary);font-family:var(--font-heading);font-size:20px;font-weight:var(--weight-heading);letter-spacing:0}
.timeline-placeholder p{margin:8px 0;color:var(--text-secondary);font-size:14px;line-height:1.55}
.timeline-placeholder strong{color:var(--text-primary)}

.timeline-page{display:flex;flex-direction:column;flex:1;min-height:0;gap:14px;width:100%;max-width:1100px;margin:0 auto}
.timeline-intro{background:var(--bg-surface);border-radius:var(--radius-card);border-top:4px solid var(--color-accent);box-shadow:var(--shadow-low);padding:18px 22px;flex-shrink:0}
.timeline-intro p{margin:0 0 10px 0;color:var(--text-secondary);font-size:14px;line-height:1.6}
.timeline-intro p:last-child{margin-bottom:0}
.timeline-intro strong{color:var(--text-primary)}
.timeline-frame{flex:1;width:100%;min-height:0;border:1px solid var(--border-color);border-radius:var(--radius-card);background:var(--bg-surface);display:block}

/* ── Celebration layer (parent-side, full-viewport) ───────────────────────── */
.celebrate-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:2000}
.confetti-piece{position:absolute;top:0;left:0;will-change:transform,opacity;animation:confetti-flow 1.1s cubic-bezier(.25,.55,.45,1) var(--delay) forwards}
@keyframes confetti-flow{
  0%{transform:translate(var(--x0),var(--y0)) rotate(0);opacity:0}
  10%{opacity:1}
  100%{transform:translate(calc(var(--x0) + var(--vx)),calc(var(--y0) + var(--vy))) rotate(var(--full-rot));opacity:0}
}
.balloon{position:absolute;bottom:-60px;user-select:none;will-change:transform,opacity;animation:balloon-float 1.3s ease-out var(--delay) forwards}
@keyframes balloon-float{
  0%{transform:translate(var(--x0-off),0) scale(.4);opacity:0}
  15%{opacity:1;transform:translate(var(--x0-off),-40px) scale(1)}
  100%{transform:translate(calc(var(--x0-off) + var(--drift)),calc(var(--rise) * -1)) rotate(var(--spin));opacity:0}
}

/* ── Main + page header ───────────────────────────────────────────────────── */
#main{flex:1;display:flex;flex-direction:column;background:var(--bg-page);min-height:0}
#page-header{display:flex;align-items:center;justify-content:center;padding:16px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-surface);box-shadow:var(--shadow-low);flex-shrink:0;position:relative}
#page-title{margin:0;font-family:var(--font-heading);font-size:22px;font-weight:var(--weight-heading);color:var(--text-primary);letter-spacing:0}
#btn-sidebar-toggle{display:none;align-items:center;justify-content:center;background:transparent;color:var(--color-primary);border:1px solid var(--color-primary);border-radius:var(--radius-button);min-width:44px;min-height:44px;font-size:22px;line-height:1;cursor:pointer;padding:0;font-family:inherit}
#sidebar-backdrop{position:fixed;inset:0;background:var(--bg-overlay);z-index:900}
#page-body{flex:1;overflow:auto;display:flex;flex-direction:column}

/* ── Settings modal ───────────────────────────────────────────────────────── */
.hidden{display:none !important}
#settings-overlay{position:fixed;inset:0;background:var(--bg-overlay);display:flex;align-items:center;justify-content:center;z-index:1000}
#settings-modal{background:var(--bg-surface);border-radius:var(--radius-card);width:520px;max-width:90vw;box-shadow:var(--shadow-high);border-top:4px solid var(--color-accent);display:flex;flex-direction:column;max-height:85vh}
#settings-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border-color);background:var(--color-primary-tint)}
#settings-modal .modal-header h3{margin:0;color:var(--text-primary);font-family:var(--font-heading);font-size:18px;font-weight:var(--weight-heading);letter-spacing:0}
#btn-close-settings{background:none;border:none;font-size:24px;cursor:pointer;color:var(--text-muted);padding:0 4px;line-height:1}
@media (hover:hover){#btn-close-settings:hover{color:var(--text-primary)}}
#settings-modal .modal-body{padding:16px;display:flex;flex-direction:column;gap:8px;overflow:auto}
#settings-modal .modal-body label{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:var(--tracking-label);margin-top:4px}
#settings-modal .modal-body input,
#settings-modal .modal-body textarea{width:100%;padding:8px 10px;border:1px solid var(--border-color);border-radius:var(--radius-input);font-size:13px;font-family:var(--font-body);background:var(--bg-surface);color:var(--text-primary);box-sizing:border-box}
#settings-modal .modal-body input:focus,
#settings-modal .modal-body textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--focus-ring)}
.settings-section-label{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:var(--tracking-label);margin-top:8px}
#settings-fields{display:flex;flex-direction:column;gap:6px}
.settings-row{display:flex;align-items:center;gap:8px}
.settings-row-label{flex:0 0 auto;min-width:60px;font-size:13px;font-weight:600;color:var(--text-primary);text-align:right;white-space:nowrap}
.settings-row-input{flex:1;padding:6px 8px;border:1px solid var(--border-color);border-radius:var(--radius-input);font-size:13px;font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--bg-surface);color:var(--text-primary)}
#settings-empty{font-size:13px;color:var(--text-muted);font-style:italic;padding:4px 0}
#settings-error{color:var(--color-error);font-size:13px;padding:6px 10px;background:var(--color-error-soft);border-radius:var(--radius-input)}
#settings-modal .modal-footer{padding:12px 16px;border-top:1px solid var(--border-color);display:flex;justify-content:flex-end;gap:8px}
#btn-save-settings{background:var(--color-primary);color:var(--text-on-primary);border:none;padding:8px 18px;border-radius:var(--radius-button);cursor:pointer;font-family:var(--font-body);font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:0.5px;transition:all 0.2s}
@media (hover:hover){#btn-save-settings:hover{background:var(--color-primary-hover)}}
#btn-cancel-settings{margin-left:0}

/* Theme picker (inside Settings modal) */
.theme-picker{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.theme-picker-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.theme-option{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border-color);border-radius:var(--radius-input);background:var(--bg-surface);cursor:pointer;transition:all 0.15s;font-family:var(--font-body)}
@media (hover:hover){.theme-option:hover{border-color:var(--color-primary);background:var(--color-primary-tint)}}
.theme-option.active{border-color:var(--color-primary);background:var(--color-primary-soft);box-shadow:0 0 0 1px var(--color-primary) inset}
.theme-swatches{display:inline-flex;gap:3px;flex-shrink:0}
.theme-swatch{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,0.06)}
.theme-option-label{font-size:12px;font-weight:600;color:var(--text-primary);line-height:1.3}
.theme-option-sub{display:block;font-weight:400;font-size:11px;color:var(--text-muted);margin-top:1px}

/* ── Profile dashboard cards ──────────────────────────────────────────────── */
#page-body{padding:20px}
.dashboard-section{max-width:900px;margin:0 auto}
.dashboard-section-title{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:var(--tracking-label);margin:0 0 12px 0}
.profile-card{background:var(--bg-surface);padding:20px 24px;border-radius:var(--radius-card);border-top:4px solid var(--color-accent);box-shadow:var(--shadow-medium);margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.profile-card-body{flex:1;min-width:220px}
.profile-card-title{margin:0 0 4px 0;color:var(--text-primary);font-family:var(--font-heading);font-size:18px;font-weight:var(--weight-heading);letter-spacing:0}
.profile-card-desc{margin:6px 0 10px 0;font-size:14px;color:var(--text-secondary);line-height:1.55}
.profile-card-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:160px;flex-shrink:0}
.status-pill{display:block;padding:7px 12px;border-radius:var(--radius-pill);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;text-align:center;line-height:1.2;box-sizing:border-box}
.status-pill.status-not_started{background:var(--status-not-started-bg);color:var(--status-not-started-fg)}
.status-pill.status-in_progress{background:var(--status-in-progress-bg);color:var(--status-in-progress-fg)}
.status-pill.status-completed{background:var(--status-completed-bg);color:var(--status-completed-fg)}
.profile-card-btn{background:var(--color-primary);color:var(--text-on-primary);border:none;padding:8px 18px;border-radius:var(--radius-button);cursor:pointer;font-family:var(--font-body);font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:0.5px;transition:all 0.2s;width:100%;box-sizing:border-box;min-height:44px}
@media (hover:hover){.profile-card-btn:hover{background:var(--color-primary-hover)}}
.profile-card-decision{width:170px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.decision-badge{display:inline-block;padding:10px 20px;border-radius:var(--radius-pill);font-size:12px;font-weight:700;letter-spacing:0.4px;color:#FFFFFF;text-align:center;text-transform:uppercase;box-shadow:0 2px 6px rgba(0,0,0,0.15)}
.decision-badge.decision-vaccinate{background:var(--decision-vaccinate-bg)}
.decision-badge.decision-skip{background:var(--decision-skip-bg)}
.decision-badge.decision-unsure{background:#6B8597}
.decision-badge.decision-hard-stop{background:var(--color-warning-border)}

/* ── All Vaccines: visit-grouped compact rows ─────────────────────────────── */
.visit-group{margin-bottom:22px}
.visit-group-header{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.2px;padding:0 0 6px 0;border-bottom:1px solid var(--border-color);margin-bottom:6px}
.survey-row{display:grid;grid-template-columns:auto minmax(110px,140px) minmax(140px,1.4fr) minmax(150px,1fr) auto;align-items:center;gap:14px;width:100%;padding:12px 16px;background:var(--bg-surface);border:1px solid var(--border-color-subtle);border-radius:var(--radius-input);margin-bottom:6px;text-align:left;font-family:var(--font-body);font-size:13px;cursor:pointer;transition:all 0.15s;color:var(--text-primary);min-height:44px}
@media (hover:hover){.survey-row:hover{border-color:var(--color-primary);background:var(--color-primary-tint);transform:translateX(2px)}}
.survey-row.faded{opacity:0.55}
@media (hover:hover){.survey-row.faded:hover{opacity:1}}
.survey-row-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,0.08)}
.survey-row-name{font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.survey-row-doses{color:var(--text-secondary);font-size:12px;font-family:ui-monospace,Menlo,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.survey-row-status{color:var(--text-secondary);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.survey-row-status.decision-vaccinate{color:var(--decision-vaccinate-bg);font-weight:600}
.survey-row-status.decision-skip{color:var(--decision-skip-bg);font-weight:600}
.survey-row-status.decision-unsure{color:#6B8597;font-weight:600}
.survey-row-status.decision-hard-stop{color:var(--color-warning-border);font-weight:600}
.survey-row-action{color:var(--color-primary);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap}

@media (max-width:768px){
  .survey-row{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:6px 10px;padding:10px 12px}
  .survey-row-dot{grid-row:1 / span 2}
  .survey-row-name{grid-column:2;grid-row:1}
  .survey-row-action{grid-column:3;grid-row:1;align-self:start}
  .survey-row-doses{grid-column:2 / span 2;grid-row:2;font-size:11px}
  .survey-row-status{grid-column:2 / span 2;grid-row:3}
  .survey-row{grid-template-rows:auto auto auto}
}

/* ── Survey view ──────────────────────────────────────────────────────────── */
#survey-view{display:flex;flex-direction:column;min-height:100dvh;background:var(--bg-page)}
#survey-header{padding:16px 20px;background:var(--bg-surface);border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-low);flex-wrap:wrap}
#survey-header #btn-survey-back-to-profile{margin:0;padding:6px 14px;font-size:11px}
#survey-header h2{margin:0;flex:1;color:var(--text-primary);font-family:var(--font-heading);font-size:20px;font-weight:var(--weight-heading);letter-spacing:0}
#survey-progress{font-size:12px;color:var(--text-muted);font-weight:500}
#btn-survey-sidenav-toggle{display:none;align-items:center;justify-content:center;background:transparent;color:var(--color-primary);border:1px solid var(--color-primary);border-radius:var(--radius-button);min-width:44px;min-height:44px;font-size:22px;line-height:1;cursor:pointer;padding:0;font-family:inherit}
#survey-backdrop{position:fixed;inset:0;background:var(--bg-overlay);z-index:900}
#survey-sidenav-progress{display:none;padding:16px 20px;border-bottom:1px solid var(--border-color);background:var(--color-primary-tint);font-size:13px;font-weight:600;color:var(--text-primary);line-height:1.4}

#survey-main{flex:1;display:flex;flex-direction:row;align-items:stretch}
#survey-sidenav{width:240px;flex-shrink:0;background:var(--bg-surface);border-right:1px solid var(--border-color);padding:20px 0;overflow-y:auto;box-shadow:inset -1px 0 0 rgba(0,0,0,0.03)}
#survey-sidenav .sidenav-section-label{padding:10px 20px 4px 20px;font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--tracking-label)}
.sidenav-item{display:flex;align-items:center;gap:10px;padding:9px 20px;font-family:var(--font-body);font-size:12px;color:var(--text-secondary);cursor:pointer;border-left:3px solid transparent;transition:all 0.15s;background:transparent;border-top:none;border-right:none;border-bottom:none;width:100%;text-align:left;line-height:1.3}
@media (hover:hover){.sidenav-item:hover{background:var(--color-primary-tint);color:var(--text-primary)}}
.sidenav-item .sidenav-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--bg-surface-alt);color:var(--text-primary);font-size:11px;font-weight:600;flex-shrink:0}
.sidenav-item.answered .sidenav-num{background:var(--status-completed-bg);color:var(--status-completed-fg)}
.sidenav-item.active{border-left-color:var(--color-accent);background:var(--color-accent-soft);color:var(--text-primary);font-weight:600}
.sidenav-item.active .sidenav-num{background:var(--color-accent);color:var(--text-on-accent)}
.sidenav-item.results .sidenav-num{background:var(--color-primary);color:var(--text-on-primary);font-size:9px}
.sidenav-item.results.active{border-left-color:var(--color-primary);background:var(--color-primary-soft)}

#survey-body{flex:1;max-width:760px;width:100%;margin:0 auto;padding:32px 24px;display:flex;flex-direction:column;gap:16px;min-width:0}

@media (max-width:768px){
  #survey-header{padding:12px 14px;gap:10px;flex-wrap:nowrap}
  #survey-header h2{font-size:16px;text-align:center;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #survey-progress{display:none}
  #btn-survey-sidenav-toggle{display:flex;flex-shrink:0}
  #survey-header #btn-survey-back-to-profile{flex-shrink:0}

  #survey-main{flex-direction:row}
  #survey-sidenav{position:fixed;top:0;left:0;height:100dvh;width:min(280px,80vw);max-height:none;padding:0;z-index:1000;transform:translateX(-100%);transition:transform 0.25s ease;overflow-y:auto;background:var(--bg-surface);border-right:1px solid var(--border-color);border-bottom:none}
  #survey-sidenav.open{transform:translateX(0)}
  #survey-sidenav-progress{display:block}
  #survey-sidenav .sidenav-section-label{padding:10px 20px 4px 20px}
  .sidenav-item{padding:12px 20px;min-height:44px}

  #survey-body{padding:20px 16px 96px 16px}

  #survey-nav{position:fixed;bottom:0;left:0;right:0;z-index:50;padding:10px 14px;background:var(--bg-surface);border-top:1px solid var(--border-color);box-shadow:0 -2px 8px rgba(0,0,0,0.08)}
  #btn-survey-next,#btn-survey-back,#btn-survey-exit{min-height:44px}
}
#survey-section{font-size:11px;font-weight:600;color:var(--color-accent-hover);text-transform:uppercase;letter-spacing:1.2px}
#survey-question{font-family:var(--font-heading);font-size:18px;color:var(--text-primary);line-height:1.55;background:var(--bg-surface);padding:22px 26px;border-radius:var(--radius-card);border-left:3px solid var(--color-primary);box-shadow:var(--shadow-low)}
#survey-question p{margin:0 0 10px 0}
#survey-question p:last-child{margin-bottom:0}
#survey-help{font-size:13px;color:var(--text-secondary);background:var(--color-accent-soft);border:1px solid var(--color-accent-soft);border-radius:var(--radius-input);padding:12px 16px;line-height:1.5}
#survey-options{display:flex;flex-direction:column;gap:8px}
.survey-radio-row{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-input);cursor:pointer;transition:all 0.15s}
@media (hover:hover){.survey-radio-row:hover{border-color:var(--color-primary);background:var(--color-primary-tint)}}
.survey-radio-row input[type="radio"]{margin-top:2px;cursor:pointer;accent-color:var(--color-primary)}
.survey-radio-row input[type="radio"]:focus{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.survey-radio-row label{flex:1;font-size:14px;line-height:1.5;cursor:pointer;color:var(--text-primary)}
.survey-radio-row.selected{border-color:var(--color-primary);background:var(--color-primary-soft)}

#survey-warning{background:var(--color-warning-bg);border:1px solid var(--color-warning-border);border-left:4px solid var(--color-warning-border);border-radius:var(--radius-input);padding:14px 18px;color:var(--color-warning-fg);font-size:13px;line-height:1.55}
#survey-warning .warning-header{font-weight:700;text-transform:uppercase;letter-spacing:0.5px;font-size:12px;color:var(--color-warning-border);margin-bottom:6px}
#survey-warning .warning-ack{margin-top:8px;font-size:12px;color:var(--color-warning-fg);font-style:italic}

#survey-error{color:var(--color-error);font-size:13px;padding:8px 12px;background:var(--color-error-soft);border-radius:var(--radius-input)}

/* Analysis / results panel */
#survey-analysis{background:var(--bg-surface);border-radius:var(--radius-card);border-top:4px solid var(--color-accent);padding:22px 26px;box-shadow:var(--shadow-medium);display:flex;flex-direction:column;gap:14px}
.analysis-recommendation{font-family:var(--font-heading);font-size:20px;font-weight:var(--weight-heading);color:var(--text-primary);margin:0;line-height:1.4}
.analysis-recommendation.hard-stop{color:var(--color-warning-border)}
.analysis-summary{font-size:14px;color:var(--text-secondary);margin:0;line-height:1.6}
.analysis-hard-stop-box{background:var(--color-warning-bg);border:1px solid var(--color-warning-border);border-left:4px solid var(--color-warning-border);border-radius:var(--radius-input);padding:12px 16px;font-size:13px;color:var(--color-warning-fg);line-height:1.55}
.analysis-red-flags{background:var(--color-accent-soft);border-left:3px solid var(--color-accent);padding:10px 14px;border-radius:var(--radius-input)}
.analysis-red-flags-label{font-size:11px;font-weight:600;color:var(--text-primary);text-transform:uppercase;letter-spacing:var(--tracking-label);margin:0 0 6px 0}
.analysis-red-flags ul{margin:0;padding-left:20px;font-size:12px;color:var(--text-secondary);line-height:1.5}
.analysis-table{width:100%;border-collapse:collapse;font-size:13px}
.analysis-table th,.analysis-table td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--border-color)}
.analysis-table th{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:var(--tracking-label);background:var(--color-primary-tint)}
.analysis-table td.numeric{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.analysis-caveat{font-size:11px;color:var(--text-muted);font-style:italic;margin:0}

/* Herd immunity reflection */
.reflection-heading{margin:20px 0 8px 0;font-family:var(--font-heading);font-size:18px;font-weight:var(--weight-heading);color:var(--text-primary);letter-spacing:0}
.reflection-ratio{font-size:14px;color:var(--text-secondary);line-height:1.6;margin:10px 0 4px 0;background:var(--color-primary-tint);padding:12px 16px;border-radius:var(--radius-input)}
.reflection-choices{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.reflection-choice{padding:14px 18px;border-radius:var(--radius-input);font-size:14px;line-height:1.55;color:var(--text-primary)}
.reflection-choice:first-child{background:var(--color-primary-soft);border-left:3px solid var(--color-primary)}
.reflection-choice:last-child{background:var(--color-accent-soft);border-left:3px solid var(--color-accent)}
.reflection-choice strong{display:block;margin-bottom:4px;color:var(--text-primary)}

/* Survey nav footer */
#survey-nav{padding:14px 20px;background:var(--bg-surface);border-top:1px solid var(--border-color);display:flex;gap:10px;justify-content:flex-end;box-shadow:0 -2px 4px rgba(0,0,0,0.04)}
#btn-survey-back{margin-left:0}
#btn-survey-back:disabled{opacity:0.4;cursor:not-allowed}
#btn-survey-next{background:var(--color-primary);color:var(--text-on-primary);border:none;padding:10px 24px;border-radius:var(--radius-button);cursor:pointer;font-family:var(--font-body);font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:0.5px;transition:all 0.2s}
@media (hover:hover){#btn-survey-next:hover{background:var(--color-primary-hover)}}
#btn-survey-exit{background:transparent;color:var(--color-warning-border);border:1px solid var(--color-warning-border);padding:10px 20px;border-radius:var(--radius-button);cursor:pointer;font-family:var(--font-body);font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:0.5px;transition:all 0.2s}
@media (hover:hover){#btn-survey-exit:hover{background:var(--color-warning-bg)}}

.survey-thanks{text-align:center;padding:40px 20px;background:var(--bg-surface);border-radius:var(--radius-card);border-top:4px solid var(--color-primary);box-shadow:var(--shadow-medium)}
.survey-thanks h3{margin:0 0 8px 0;font-family:var(--font-heading);color:var(--text-primary);font-size:22px;font-weight:var(--weight-heading);letter-spacing:0}
.survey-thanks p{margin:0;color:var(--text-secondary);font-size:14px}

/* ── Mobile (≤768px) ──────────────────────────────────────────────────────── */
@media (max-width:768px){
  #page-header{justify-content:space-between;padding:12px 14px}
  #page-title{font-size:18px;flex:1;text-align:center}
  #btn-sidebar-toggle{display:flex}

  #sidebar{position:fixed;top:0;left:0;height:100dvh;min-height:0;width:min(280px,80vw);z-index:1000;transform:translateX(-100%);transition:transform 0.25s ease;border-left:none;border-right:2px solid var(--color-accent);overflow-y:auto}
  #sidebar.open{transform:translateX(0)}
  #main{width:100%}
  .sidebar-nav-btn{padding:14px 14px;min-height:44px}
  #sidebar-footer button{padding:12px 14px;min-height:44px;font-size:12px}

  .profile-card{flex-direction:column;align-items:stretch;padding:18px 18px;gap:14px}
  .profile-card-body{order:1;min-width:0;width:100%}
  .profile-card-decision{order:2;width:100%}
  .profile-card-actions{order:3;width:100%}

  .timeline-placeholder{margin:20px auto;padding:20px}

  .timeline-page{gap:10px;max-width:none}
  .timeline-intro{padding:14px 16px}
  .timeline-intro p{font-size:13px;margin-bottom:8px}

  #page-body{padding:14px}
  .dashboard-section-title{margin-bottom:10px}

  .theme-picker-options{grid-template-columns:1fr}
}