/* Calm Journey Theme System (V2) - Luna Digital "planner theme palettes".
   Theme ids are unchanged (blush / neutral / dark, saved as cj2_theme) so a
   buyer's chosen theme survives; "rainbow" (Rainbow Pastel) is new.
   Signatures: Blush & Sage = blush menu + sage primary buttons;
   Rainbow Pastel = pale lilac-grey menu, rainbow stripe, cycling icon colours;
   Neutral = sea-glass menu + slate buttons; Dark = soft charcoal + periwinkle. */

:root, :root[data-theme="blush"] {
  color-scheme: light;
  --bg: #FAFAFA; --surface: #FFFFFF; --surface-alt: #FAF7F5;
  --nav-bg: #EFD6D2; --nav-text: #4A2F33; --nav-icon: #9A5E66; --nav-hover-bg: #E9CAC5; --nav-active-bg: #FAF7F5; --nav-active-text: #3B2427;
  --text: #3A2E30; --text-muted: #73666A; --heading: #3A2E30; --link: #5E7A62;
  --border: #EDE3E0; --border-accent: #E1C1C1; --divider: #F2ECEA;
  --btn-primary-bg: #AFC2B0; --btn-primary-text: #22362A; --btn-primary-hover: #9DB49F;
  --btn-secondary-bg: #EFD6D2; --btn-secondary-text: #5A3439; --btn-secondary-hover: #E6C6C1;
  --btn-ghost-text: #5E7A62; --btn-ghost-border: #AFC2B0;
  --accent-1: #E1C1C1; --accent-1-deep: #A86B72; --accent-2: #AFC2B0; --accent-2-deep: #5E7A62;
  --chip-1-bg: #F6E4E1; --chip-1-text: #7A424A; --chip-2-bg: #E4ECE4; --chip-2-text: #3E5A44;
  --chip-3-bg: #F3ECE8; --chip-3-text: #6A5552; --chip-4-bg: #F2E6DA; --chip-4-text: #7A5634;
  --chart-1: #E1C1C1; --chart-2: #AFC2B0; --chart-3: #C9979D; --chart-4: #84A088; --chart-5: #D9AFAA; --chart-6: #D4BFA6;
  --chart-edge: #B88A90; --chart-track: #F3ECEA; --progress-track: #F3E8E6; --progress-fill: #AFC2B0;
  --success-bg: #E4ECE4; --success-text: #3E5A44; --warning-bg: #F6E6D3; --warning-text: #7A5226;
  --danger-bg: #F6DCDD; --danger-text: #8E3E48; --info-bg: #F6E4E1; --info-text: #6E3E45;
  --callout-bg: #F7E6E3; --callout-border: #E1C1C1; --focus-ring: #A86B72; --brand-stripe: none;
}

:root[data-theme="rainbow"] {
  color-scheme: light;
  --bg: #FAFAFA; --surface: #FFFFFF; --surface-alt: #FBFAF8;
  --nav-bg: #EFEDF5; --nav-text: #36305E; --nav-icon: #6B62A8; --nav-hover-bg: #E6E3F0; --nav-active-bg: #FFFFFF; --nav-active-text: #2B2552;
  --text: #2F2D3A; --text-muted: #696676; --heading: #2F2D3A; --link: #3F6A9C;
  --border: #ECEAF0; --border-accent: #D8D4F2; --divider: #F1EFF3;
  --btn-primary-bg: #C9DDF2; --btn-primary-text: #1F3A5C; --btn-primary-hover: #B5CFEC;
  --btn-secondary-bg: #F6D1C1; --btn-secondary-text: #6E3520; --btn-secondary-hover: #F1C2AE;
  --btn-ghost-text: #4F4793; --btn-ghost-border: #D8D4F2;
  --accent-1: #D8D4F2; --accent-1-deep: #6B62A8; --accent-2: #C9DDF2; --accent-2-deep: #3F6A9C;
  --chip-1-bg: #FBE5DB; --chip-1-text: #7E3B22; --chip-2-bg: #F8E7CF; --chip-2-text: #77501C;
  --chip-3-bg: #F7F0CF; --chip-3-text: #655619; --chip-4-bg: #E0EEE5; --chip-4-text: #2F5C40;
  --chip-5-bg: #E0EBF8; --chip-5-text: #264E7C; --chip-6-bg: #E8E5F8; --chip-6-text: #463E86;
  --chart-1: #F2B9A3; --chart-2: #EDC690; --chart-3: #E6D488; --chart-4: #A8D0B6; --chart-5: #A6C6E8; --chart-6: #BCB5EA;
  --chart-edge: #8F87C4; --chart-track: #F1EFF3; --progress-track: #EFEDF6;
  --progress-fill: linear-gradient(90deg,#F6D1C1,#F3D8B5,#F1E4B3,#CFE3D6,#C9DDF2,#D8D4F2);
  --success-bg: #E0EEE5; --success-text: #2F5C40; --warning-bg: #F8E7CF; --warning-text: #77501C;
  --danger-bg: #FBE0D6; --danger-text: #8A3A22; --info-bg: #E0EBF8; --info-text: #264E7C;
  --callout-bg: #F1EFFA; --callout-border: #D8D4F2; --focus-ring: #6B62A8;
  --brand-stripe: linear-gradient(90deg,#F6D1C1,#F3D8B5,#F1E4B3,#CFE3D6,#C9DDF2,#D8D4F2);
}

:root[data-theme="neutral"] {
  color-scheme: light;
  --bg: #FAFAFA; --surface: #FFFFFF; --surface-alt: #FAF8F4;
  --nav-bg: #C5D9D8; --nav-text: #243B3A; --nav-icon: #4E6C6B; --nav-hover-bg: #B6CECD; --nav-active-bg: #FAF8F4; --nav-active-text: #1F3332;
  --text: #2D3133; --text-muted: #676D70; --heading: #2D3133; --link: #555F80;
  --border: #ECE9E5; --border-accent: #C5D9D8; --divider: #F1EFEB;
  --btn-primary-bg: #666F8F; --btn-primary-text: #FFFFFF; --btn-primary-hover: #596282;
  --btn-secondary-bg: #C5D9D8; --btn-secondary-text: #243B3A; --btn-secondary-hover: #B6CECD;
  --btn-ghost-text: #555F80; --btn-ghost-border: #AEB6D2;
  --accent-1: #A2B6B5; --accent-1-deep: #4E6C6B; --accent-2: #AEB6D2; --accent-2-deep: #555F80;
  --chip-1-bg: #E3EDEC; --chip-1-text: #2F4D4C; --chip-2-bg: #E6E9F3; --chip-2-text: #3E4768;
  --chip-3-bg: #EFECE7; --chip-3-text: #5A544B; --chip-4-bg: #DCE3E2; --chip-4-text: #34494A;
  --chart-1: #A2B6B5; --chart-2: #7D86A4; --chart-3: #C5D9D8; --chart-4: #AEB6D2; --chart-5: #D3CABE; --chart-6: #5F7A79;
  --chart-edge: #6E8786; --chart-track: #F1EFEB; --progress-track: #ECE9E5; --progress-fill: #A2B6B5;
  --success-bg: #E3EDEC; --success-text: #2F4D4C; --warning-bg: #F1E8DA; --warning-text: #6B5126;
  --danger-bg: #F2E1DF; --danger-text: #83423E; --info-bg: #E6E9F3; --info-text: #3E4768;
  --callout-bg: #EEF4F3; --callout-border: #C5D9D8; --focus-ring: #7D86A4; --brand-stripe: none;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1D1E23; --surface: #25272E; --surface-alt: #2B2D35;
  --nav-bg: #2C2F39; --nav-text: #E3E1EA; --nav-icon: #A9B0D6; --nav-hover-bg: #353947; --nav-active-bg: #3B4052; --nav-active-text: #F3F1F6;
  --text: #E8E6E3; --text-muted: #A9A7B0; --heading: #F1EFEC; --link: #A9C4E6;
  --border: #363944; --border-accent: #4A4F64; --divider: #30333C;
  --btn-primary-bg: #A9B0D6; --btn-primary-text: #1D1E2B; --btn-primary-hover: #BBC1E0;
  --btn-secondary-bg: #3A3E4D; --btn-secondary-text: #E8E6EF; --btn-secondary-hover: #454A5C;
  --btn-ghost-text: #C2C8E6; --btn-ghost-border: #555B75;
  --accent-1: #A9B0D6; --accent-1-deep: #C2C8E6; --accent-2: #9DB8A0; --accent-2-deep: #B6CDB8;
  --chip-1-bg: #3A3550; --chip-1-text: #D6D1F2; --chip-2-bg: #2F4136; --chip-2-text: #C8E0CC;
  --chip-3-bg: #4A3437; --chip-3-text: #F0CFCF; --chip-4-bg: #2E3C4E; --chip-4-text: #C9DCF2;
  --chart-1: #A9B0D6; --chart-2: #9DB8A0; --chart-3: #E3B5B5; --chart-4: #9CC3E6; --chart-5: #E6D29A; --chart-6: #E8B49E;
  --chart-edge: #1D1E23; --chart-track: #30333C; --progress-track: #30333C; --progress-fill: #9DB8A0;
  --success-bg: #2F4136; --success-text: #C8E0CC; --warning-bg: #463D2B; --warning-text: #EBD9A9;
  --danger-bg: #4A3437; --danger-text: #F0C4C4; --info-bg: #2E3C4E; --info-text: #C9DCF2;
  --callout-bg: #2B2D3A; --callout-border: #4A4F64; --focus-ring: #C2C8E6; --brand-stripe: none;
}

/* Themes with four chips reuse chips 1 and 2 for chips 5 and 6. */
:root, :root[data-theme="blush"], :root[data-theme="neutral"], :root[data-theme="dark"] {
  --chip-5-bg: var(--chip-1-bg); --chip-5-text: var(--chip-1-text);
  --chip-6-bg: var(--chip-2-bg); --chip-6-text: var(--chip-2-text);
}

/* The app's original variable names, mapped onto the palette tokens so the
   existing rules keep working. */
:root {
  --bg-main: var(--bg);
  --bg-secondary: var(--surface-alt);
  --bg-card: var(--surface);
  --bg-card-elevated: var(--surface-alt);
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --accent-primary: var(--btn-primary-bg);
  --accent-hover: var(--btn-primary-hover);
  --accent-text: var(--btn-primary-text);
  --accent-light: var(--chip-1-bg);
  --accent-secondary: var(--accent-2);
  --accent-secondary-hover: var(--accent-2-deep);
  --accent-secondary-light: var(--success-bg);
  --accent-secondary-text: var(--btn-primary-text);
  --success: var(--accent-2);
  --warning: var(--border-accent);
  --error: var(--danger-text);
  --error-text: var(--danger-text);
  --info: var(--accent-2);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-main);
  color: var(--text-primary);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: var(--base-font-size, 14px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

:root[data-font="sm"] { --base-font-size: 13px; }
:root[data-font="md"] { --base-font-size: 14px; }
:root[data-font="lg"] { --base-font-size: 16px; }

h1, h2, h3, h4, .display { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; color: var(--heading); }
h1 { font-size: 22px; margin: 0 0 8px; }
h2 { font-size: 18px; margin: 0 0 6px; }
h3 { font-size: 16px; margin: 0 0 4px; font-family: 'DM Sans', sans-serif; font-weight: 600; }
p { margin: 0 0 12px; color: var(--text-secondary); }
small { color: var(--text-muted); font-size: 12px; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Layout ===== */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 220px; flex-shrink: 0; background: var(--nav-bg);
  border-right: 1px solid var(--border); padding: 20px 12px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.main-area { flex: 1; padding: 24px; max-width: 100%; overflow-x: hidden; padding-bottom: 100px; }
.page-header { margin-bottom: 24px; }
.page-header .subtitle { color: var(--text-secondary); font-size: 14px; margin-top: 4px; }

@media (max-width: 767px) {
  .sidebar { display: none; }
  .main-area { padding: 16px; padding-bottom: 100px; }
}

/* ===== Sidebar nav ===== */
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 16px; }
.brand-mark { width: 28px; height: 28px; background: var(--btn-primary-bg); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--btn-primary-text); }
.brand-name { font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--nav-text); }
.trip-badge { background: var(--surface); border: 1px solid var(--border-accent); border-radius: 12px; padding: 10px 12px; margin: 0 4px 14px; font-size: 12px; }
.trip-badge .name { font-weight: 600; color: var(--text-primary); display: block; }
.trip-badge .dates { color: var(--text-muted); margin-top: 2px; }

.nav-section { margin-top: 16px; }
.nav-section-label { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nav-text); padding: 0 12px; margin-bottom: 4px; font-weight: 600; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; color: var(--nav-text); cursor: pointer; font-size: 13px; margin-bottom: 1px; transition: background .15s, color .15s; }
.nav-item:hover { background: var(--nav-hover-bg); color: var(--nav-text); }
.nav-item.active { background: var(--nav-active-bg); color: var(--nav-active-text); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent-1-deep); }
.nav-item .nav-icon { width: 18px; display: inline-flex; justify-content: center; }
.sidebar-footer { position: sticky; bottom: 0; padding: 16px 12px 0; font-size: 11px; color: var(--nav-text); text-align: center; }
/* Rainbow Pastel signature: a 6px rainbow stripe across the top of the menu */
:root[data-theme="rainbow"] .sidebar::before { content: ''; display: block; height: 6px; margin: -20px -12px 14px; background: var(--brand-stripe); }

/* ===== Cards / surfaces ===== */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 18px; transition: transform .18s, box-shadow .18s; }
.card.hover:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.card-elevated { background: var(--bg-card-elevated); }
.card h2, .card h3 { margin-top: 0; }

/* minmax(0,1fr): grid children default to min-width:auto, so one long unbroken
   string would otherwise push the whole layout sideways on mobile */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 1px solid transparent; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s; background: var(--accent-primary); color: var(--accent-text); }
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: scale(0.97); }
.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); }
.btn-secondary:hover { background: var(--btn-secondary-hover); }
.btn-outline { background: var(--surface); border-color: var(--btn-ghost-border); color: var(--btn-ghost-text); }
.btn-outline:hover { background: var(--surface-alt); }
.btn-ghost { background: transparent; color: var(--text-primary); }
.btn-ghost:hover { background: var(--bg-card-elevated); }
.btn-danger { background: transparent; color: var(--danger-text); border-color: var(--danger-text); }
.btn-danger:hover { background: var(--danger-bg); color: var(--danger-text); }
.btn:disabled, .btn[disabled] { background: transparent; color: var(--text-muted); border-color: var(--btn-ghost-border); cursor: not-allowed; }
.btn-sm { min-height: 32px; padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.btn-icon { padding: 10px; min-width: 44px; }
.btn-full { width: 100%; }

/* ===== Forms ===== */
label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-primary); font-family: inherit; font-size: 14px;
  min-height: 44px; transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent-hover); box-shadow: 0 0 0 3px var(--accent-light);
}
.form-row { margin-bottom: 14px; }
.form-grid-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
@media (max-width: 600px) { .form-grid-2 { grid-template-columns: 1fr; } }

input[type="checkbox"] {
  width: 20px; height: 20px; min-height: auto; margin: 0;
  accent-color: var(--accent-hover);
}

/* ===== Pills & badges ===== */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--chip-3-bg); color: var(--chip-3-text); }
.pill-success { background: var(--success-bg); color: var(--success-text); }
.pill-warning { background: var(--warning-bg); color: var(--warning-text); }
.pill-error { background: var(--danger-bg); color: var(--danger-text); }
.pill-info { background: var(--info-bg); color: var(--info-text); }

/* ===== Progress ===== */
.progress { background: var(--progress-track); border-radius: 999px; height: 8px; overflow: hidden; }
.progress-bar { background: var(--progress-fill); height: 100%; border-radius: 999px; transition: width .5s ease; }
.progress-bar.secondary { background: var(--accent-secondary); }

/* ===== Mobile bottom nav ===== */
.mobile-nav { display: none; }
@media (max-width: 767px) {
  .mobile-nav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; bottom: 0; left: 0; right: 0; height: 64px;
    background: var(--nav-bg); border-top: 1px solid var(--border); z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; color: var(--nav-text); cursor: pointer; }
  .mobile-nav-item.active { color: var(--nav-active-text); font-weight: 700; background: var(--nav-active-bg); box-shadow: inset 0 3px 0 var(--accent-1-deep); }
  :root[data-theme="rainbow"] .mobile-nav { background: var(--brand-stripe) top / 100% 4px no-repeat, var(--nav-bg); }
}

/* ===== Toast ===== */
.toast-container { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
@media (min-width: 768px) { .toast-container { bottom: auto; top: 24px; right: 24px; left: auto; transform: none; } }
.toast { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 18px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); animation: toast-in .3s ease; min-width: 240px; pointer-events: auto; font-size: 13px; }
.toast.success { border-color: var(--success); }
.toast.error { border-color: var(--error); }
.toast.warning { border-color: var(--warning); }
.toast.info { border-color: var(--info); }
@keyframes toast-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ===== Modal ===== */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 900; display: flex; align-items: flex-end; justify-content: center; animation: fade-in .2s ease; }
@media (min-width: 768px) { .modal-backdrop { align-items: center; } }
.modal { background: var(--bg-card); border-radius: 18px 18px 0 0; padding: 22px; width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; animation: slide-up .25s ease; }
@media (min-width: 768px) { .modal { border-radius: 18px; animation: scale-in .2s ease; } }
.modal-title { font-family: 'DM Serif Display', serif; font-size: 20px; margin: 0 0 6px; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end; flex-wrap: wrap; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes scale-in { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ===== Empty state ===== */
.empty { text-align: center; padding: 48px 20px; }
.empty-icon { font-size: 40px; margin-bottom: 12px; animation: float 3s ease-in-out infinite; }
.empty h2 { font-family: 'DM Serif Display', serif; font-size: 22px; margin-bottom: 8px; color: var(--text-primary); }
.empty p { color: var(--text-secondary); max-width: 380px; margin: 0 auto 18px; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ===== Lists / rows ===== */
.row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); margin-bottom: 8px; }
.row.checked { opacity: 0.6; }
.row.checked .row-title { text-decoration: line-through; text-decoration-color: var(--border-accent); color: var(--text-muted); }
.row-title { flex: 1; min-width: 0; font-weight: 500; color: var(--text-primary); overflow-wrap: anywhere; }
.card p, .card h3 { overflow-wrap: anywhere; }
.row-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.row-actions { display: flex; gap: 4px; }

/* ===== Settings theme cards ===== */
.theme-card { padding: 14px; border-radius: 14px; border: 2px solid var(--border); cursor: pointer; text-align: center; transition: border-color .15s; }
.theme-card.selected { border-color: var(--focus-ring); box-shadow: 0 0 0 2px var(--focus-ring) inset; }
.theme-swatch { display: flex; gap: 4px; margin: 0 auto 8px; justify-content: center; }
.theme-swatch span { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.05); }

/* ===== Dashboard widgets ===== */
.countdown { background: linear-gradient(135deg, var(--chip-1-bg), var(--chip-2-bg)); padding: 28px; border-radius: 18px; text-align: center; }
.countdown .big { font-family: 'DM Serif Display', serif; font-size: 64px; line-height: 1; color: var(--link); }
.countdown .label { color: var(--text-secondary); margin-top: 4px; }

.dash-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 18px; }
.dash-tile .tile-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; }
.dash-tile .tile-value { font-family: 'DM Serif Display', serif; font-size: 26px; margin-top: 6px; color: var(--text-primary); }

/* ===== Tabs ===== */
.tabs { display: flex; gap: 4px; overflow-x: auto; padding: 4px; background: var(--bg-secondary); border-radius: 12px; margin-bottom: 16px; }
.tab { padding: 8px 14px; border-radius: 8px; font-size: 13px; cursor: pointer; white-space: nowrap; color: var(--text-secondary); border: none; background: transparent; font-family: inherit; }
.tab.active { background: var(--bg-card); color: var(--text-primary); font-weight: 600; }

/* ===== Day pills (itinerary) ===== */
.day-pills { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 16px; }
.day-pill { flex-shrink: 0; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; font-size: 12px; text-align: center; min-width: 70px; }
.day-pill.active { background: var(--accent-primary); color: var(--accent-text); border-color: var(--accent-hover); }
.day-pill .day-num { font-family: 'DM Serif Display', serif; font-size: 16px; display: block; }

/* Update banner */
#update-banner { font-family: 'DM Sans', sans-serif; }

/* Confetti animation */
.confetti-piece { position: fixed; width: 8px; height: 8px; pointer-events: none; z-index: 999; animation: confetti-fall 2s linear forwards; }
@keyframes confetti-fall { 0% { transform: translateY(-20px) rotate(0); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } }

/* Install banner */
.install-banner { position: fixed; bottom: 80px; left: 12px; right: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); z-index: 800; display: flex; align-items: center; gap: 12px; }
@media (min-width: 768px) { .install-banner { bottom: 24px; left: auto; right: 24px; max-width: 380px; } }

/* Focus visible */
*:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }

/* Page fade */
.page { animation: fade-in .15s ease; }

/* Utility */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.flex-center { display: flex; align-items: center; gap: 8px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-error { color: var(--error-text); }
.text-success { color: var(--success-text); }
.text-center { text-align: center; }
.hidden { display: none !important; }
.text-sm { font-size: 12px; }
.text-lg { font-size: 16px; }
.serif { font-family: 'DM Serif Display', serif; }
.font-semibold { font-weight: 600; }

/* Print — only the content should reach paper: no nav, controls, overlays,
   or app-shell constraints that fight pagination */
/* ===== Travel Day + Leave-By (V2) — theme tokens only ===== */
.td-page { max-width: 560px; }
.td-top { margin-bottom: 14px; }
.td-kicker { font-size: 13px; color: var(--text-secondary); margin: 0 0 4px; }
.td-big { font-family: 'DM Serif Display', Georgia, serif; font-size: 34px; line-height: 1.15; color: var(--link); margin: 0 0 4px; overflow-wrap: anywhere; }
.td-sub { font-size: 15px; color: var(--text-secondary); margin: 0 0 10px; }
.td-count { font-size: 13px; color: var(--text-secondary); margin: 6px 0 0; }
.td-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 4px; }
.td-section { margin-top: 18px; }
.td-now { background: var(--bg-card); border: 2px solid var(--accent-hover); border-radius: 18px; padding: 18px; margin-bottom: 12px; }
.td-now-title { font-size: 24px; font-weight: 700; line-height: 1.25; margin: 2px 0 6px; overflow-wrap: anywhere; }
.td-now-sub { font-size: 15px; color: var(--text-secondary); margin: 0 0 6px; overflow-wrap: anywhere; }
.td-link { font-size: 14px; color: var(--link); }
.td-done-btn { display: block; width: 100%; min-height: 64px; margin-top: 14px; border: none; border-radius: 16px; background: var(--accent-primary); color: var(--accent-text); font-family: inherit; font-size: 20px; font-weight: 700; cursor: pointer; }
.td-done-btn:hover { background: var(--accent-hover); }
.td-done-btn:disabled { opacity: .6; }
.td-tools { display: flex; justify-content: flex-end; gap: 4px; margin-top: 6px; }
.td-tools:empty { display: none; }
.td-next { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; margin-bottom: 8px; }
.td-next-text { min-width: 0; }
.td-next-title { font-size: 18px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.td-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--divider); font-size: 15px; }
.td-row-text { min-width: 0; overflow-wrap: anywhere; }
.td-row-time { font-weight: 600; color: var(--link); margin-right: 4px; }
.td-row.is-done .td-row-text { color: var(--text-secondary); text-decoration: line-through; }
.td-row-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.td-tick { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--accent-secondary); background: var(--bg-card); color: var(--success-text); font-size: 18px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.td-tick:hover { background: var(--accent-secondary-light); }
.td-group { font-size: 13px; font-style: italic; color: var(--text-secondary); margin: 12px 4px 2px; }
.td-done-list { margin-top: 16px; }
.td-done-list summary { cursor: pointer; color: var(--text-secondary); font-size: 14px; padding: 8px 0; }
.td-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.td-wake { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-secondary); }
.td-journey-pick select { width: 100%; }
.td-field small { display: block; color: var(--text-secondary); margin-top: 4px; }
.td-field input[type="range"] { width: 100%; }
.td-mins { display: flex; align-items: center; gap: 8px; }
.td-mins input { max-width: 110px; }
.td-mins span { color: var(--text-secondary); font-size: 14px; }
.td-plan { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; font-size: 15px; }
.td-plan-time { font-weight: 700; color: var(--link); text-align: right; white-space: nowrap; }
.td-saved { font-size: 13px; color: var(--success-text); min-height: 1em; margin: 10px 0 0; }
.td-alert { border: 1px solid var(--accent-hover); }
/* ===== Doorway Check (V2) ===== */
.dw-last { font-size: 15px; color: var(--link); font-weight: 600; margin: 0 0 14px; }
.dw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dw-item { position: relative; display: flex; align-items: center; gap: 8px; min-height: 76px; padding: 12px 20px 12px 12px; border: 2px solid var(--border); border-radius: 16px; background: var(--bg-card); color: var(--text-primary); font-family: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; }
.dw-item.on { background: var(--success-bg); border-color: var(--accent-2); color: var(--success-text); }
.dw-icon { font-size: 24px; flex-shrink: 0; }
.dw-name { flex: 1; min-width: 0; overflow-wrap: break-word; }
.dw-check { position: absolute; top: 5px; right: 8px; font-size: 18px; font-weight: 700; }
.dw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.dw-chip { min-height: 40px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text-primary); font-family: inherit; font-size: 14px; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.dw-chip.on { background: var(--chip-1-bg); border-color: var(--accent-1-deep); color: var(--chip-1-text); font-weight: 600; }
.dw-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-secondary); font-size: 13px; }
.dw-anyway { display: block; margin: 8px auto 0; }
.dw-section { margin-top: 22px; }
.dw-section summary { cursor: pointer; font-weight: 600; padding: 8px 0; color: var(--text-primary); }
@media (max-width: 360px) { .dw-grid { grid-template-columns: minmax(0, 1fr); } }

/* ===== Where I Put It (V2) ===== */
.pi-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); }
.pi-thumb { flex-shrink: 0; width: 64px; height: 64px; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-secondary); cursor: pointer; }
.pi-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pi-text { flex: 1; min-width: 0; }
.pi-what { font-size: 18px; font-weight: 700; margin: 0 0 2px; overflow-wrap: break-word; }
.pi-where { font-size: 16px; margin: 0 0 4px; overflow-wrap: break-word; white-space: pre-wrap; }
.pi-when { font-size: 13px; color: var(--text-secondary); margin: 0; }
.pi-actions { display: flex; flex-shrink: 0; }
.pi-note { font-size: 13px; color: var(--text-secondary); margin-top: 14px; }
.pi-sugg { margin-top: 8px; }
.pi-photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pi-pick { cursor: pointer; }
.pi-preview-img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); display: block; }
.pi-full { display: block; width: 100%; height: auto; border-radius: 12px; }
.db-notice { position: fixed; left: 12px; right: 12px; bottom: 80px; z-index: 10000; padding: 12px 16px; border-radius: 12px; background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--accent-hover); box-shadow: 0 4px 16px rgba(0,0,0,.12); font-size: 14px; }

/* ===== Energy budget per day (V2) ===== */
.en-card { padding-bottom: 10px; }
.en-label { font-size: 13px; color: var(--text-secondary); margin: 0 0 6px; }
.en-bar { display: flex; height: 12px; border-radius: 8px; overflow: hidden; background: var(--chart-track); }
.en-fill { display: block; height: 100%; background: var(--chart-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-edge) 35%, transparent); }
.en-over { display: block; height: 100%; background: var(--chart-3); }
.en-total { font-size: 15px; margin: 8px 0 4px; }
.en-links { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -8px; }
.en-warn { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--border-accent); border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; font-size: 14px; }
.en-idea { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--divider); font-size: 14px; }
.en-idea:last-of-type { border-bottom: none; }
.en-idea span { min-width: 0; overflow-wrap: break-word; }
.en-idea button { flex-shrink: 0; }
.en-badge { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--chip-1-bg); color: var(--chip-1-text); white-space: nowrap; vertical-align: middle; }
.en-badge.is-rest { background: var(--chip-2-bg); color: var(--chip-2-text); }
.en-guess { margin-left: 1px; opacity: .7; }
.en-dots { display: block; font-size: 8px; letter-spacing: 1px; color: var(--success-text); margin-top: 2px; }
.en-dots.is-full { color: var(--warning-text); }
.day-pill.active .en-dots { color: inherit; }

/* ===== Overwhelm button + calm sheet (V2) ===== */
.ow-button { position: fixed; right: 20px; bottom: 24px; z-index: 850; width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--accent-secondary); background: var(--accent-secondary-light); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; }
.ow-button:hover { background: var(--accent-secondary); }
@media (max-width: 767px) { .ow-button { right: 14px; bottom: calc(76px + env(safe-area-inset-bottom)); } }
body:has(.install-banner) .ow-button { bottom: calc(190px + env(safe-area-inset-bottom)); }
body.ow-open { overflow: hidden; }
body.ow-open .ow-button { display: none; }
.ow-sheet { position: fixed; inset: 0; z-index: 10001; background: var(--bg-main); color: var(--text-primary); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ow-inner { max-width: 520px; margin: 0 auto; padding: 28px 20px calc(40px + env(safe-area-inset-bottom)); }
.ow-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 32px; color: var(--link); margin: 0 0 4px; }
.ow-sub { font-size: 16px; color: var(--text-secondary); margin: 0 0 8px; }
.ow-breath { text-align: center; margin: 12px 0 20px; }
.ow-circle { width: 170px; height: 170px; margin: 18px auto 14px; border-radius: 50%; background: var(--accent-secondary-light); border: 3px solid var(--accent-secondary); transform: scale(.6); animation: ow-breathe 10s ease-in-out infinite; }
@keyframes ow-breathe { 0% { transform: scale(.6); } 40% { transform: scale(1); } 100% { transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .ow-circle { animation: none; transform: none; width: 90px; height: 90px; } }
.ow-cue { font-size: 24px; font-weight: 600; margin: 0 0 2px; }
.ow-count { font-size: 15px; color: var(--text-secondary); margin: 0; min-height: 1.4em; }
.ow-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; font-size: 16px; }
.ow-card ul { margin: 0; padding-left: 20px; }
.ow-card li { margin: 6px 0; overflow-wrap: break-word; }
.ow-card p { margin: 0 0 8px; }
.ow-h { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.ow-close { margin-top: 8px; }
.ow-foot { font-size: 13px; color: var(--text-secondary); margin-top: 16px; }

/* ===== Time zones (V2) ===== */
.tz-clocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.tz-clock { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 14px; text-align: center; }
.tz-where { font-size: 13px; color: var(--text-secondary); margin: 0 0 4px; overflow-wrap: break-word; }
.tz-time { font-family: 'DM Serif Display', Georgia, serif; font-size: 34px; line-height: 1.1; color: var(--link); margin: 0; }
.tz-day { font-size: 13px; color: var(--text-secondary); margin: 4px 0 0; }
.tz-diff { font-size: 16px; margin: 0 0 8px; }
.tz-change { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--border-accent); border-radius: 12px; padding: 10px 12px; font-size: 14px; margin: 0 0 12px; }
.tz-note { font-size: 13px; color: var(--text-secondary); margin: 0 0 10px; }
.tz-table { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px 10px; align-items: baseline; font-size: 15px; }
.tz-th { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.tz-med { overflow-wrap: break-word; }
.tz-t { font-weight: 600; color: var(--link); }
@media (max-width: 360px) { .tz-time { font-size: 28px; } }

/* ===== Dashboard (V2 redesign: ombre hero, stat tiles, calm tools) ===== */
:root { --hero-ombre: linear-gradient(135deg, var(--chip-1-bg) 0%, var(--surface-alt) 55%, var(--chip-2-bg) 100%); }
:root[data-theme="rainbow"] { --hero-ombre: linear-gradient(120deg, var(--chip-1-bg) 0%, var(--chip-3-bg) 35%, var(--chip-4-bg) 65%, var(--chip-5-bg) 100%); }
.tone-1 { --tone-bg: var(--chip-1-bg); --tone-text: var(--chip-1-text); }
.tone-2 { --tone-bg: var(--chip-2-bg); --tone-text: var(--chip-2-text); }
.tone-3 { --tone-bg: var(--chip-3-bg); --tone-text: var(--chip-3-text); }
.tone-4 { --tone-bg: var(--chip-4-bg); --tone-text: var(--chip-4-text); }
.tone-5 { --tone-bg: var(--chip-5-bg); --tone-text: var(--chip-5-text); }
.tone-6 { --tone-bg: var(--chip-6-bg); --tone-text: var(--chip-6-text); }

.dash-cover { width: 100%; height: 180px; object-fit: cover; border-radius: 22px; margin-bottom: 14px; display: block; }
.dash-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 28px; margin-bottom: 16px; border-radius: 24px; background: var(--hero-ombre); border: 1px solid var(--border-accent); }
.dash-hero-text { min-width: 0; }
.dash-kicker { font-size: 13px; font-weight: 600; color: var(--chip-1-text); margin: 0 0 2px; letter-spacing: .02em; }
.dash-title { font-size: 34px; line-height: 1.1; margin: 0 0 6px; overflow-wrap: break-word; }
.dash-dates { font-size: 15px; color: var(--text); margin: 0 0 12px; }
.dash-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--tone-bg); color: var(--tone-text); border: 1px solid var(--surface); }
.dash-count { flex-shrink: 0; width: 132px; height: 132px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent-1); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.dash-count-num { font-family: 'DM Serif Display', Georgia, serif; font-size: 50px; line-height: 1; color: var(--link); }
.dash-count-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; max-width: 100px; line-height: 1.2; }

.dash-callout { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 16px; border-radius: 18px; background: var(--callout-bg); border: 1.5px solid var(--callout-border); color: var(--text); text-decoration: none; flex-wrap: wrap; }
.dash-callout:hover { text-decoration: none; }
.dash-callout-icon { font-size: 26px; }
.dash-callout-text { flex: 1; min-width: 180px; }

.dash-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { display: block; padding: 16px; border-radius: 20px; border: 1px solid var(--border); background: linear-gradient(160deg, var(--tone-bg) 0%, var(--surface) 80%); color: var(--text); text-decoration: none; transition: transform .15s, box-shadow .15s; }
a.stat:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.06); text-decoration: none; }
.stat-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tone-text); margin: 0 0 8px; }
.stat-value { font-family: 'DM Serif Display', Georgia, serif; font-size: 30px; line-height: 1.1; color: var(--heading); margin: 0 0 10px; overflow-wrap: anywhere; }
.stat-value span { font-size: 18px; color: var(--tone-text); }
.stat-money { font-size: 24px; }
.stat-sub { font-size: 12px; color: var(--tone-text); margin: 8px 0 0; }
.stat-ring { position: relative; width: 84px; height: 84px; margin: 0 auto; }
.stat-ring canvas { width: 84px !important; height: 84px !important; }
.stat-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'DM Serif Display', Georgia, serif; font-size: 22px; color: var(--heading); }
.stat:first-child { text-align: center; }

.dash-section { font-size: 20px; margin: 4px 0 10px; }
.dash-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tool { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 16px; border-radius: 20px; border: 1px solid var(--border); background: linear-gradient(160deg, var(--tone-bg) 0%, var(--surface) 85%); color: var(--text); text-decoration: none; font-family: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s; min-height: 118px; }
.tool:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.06); text-decoration: none; }
.tool-icon { font-size: 28px; line-height: 1; margin-bottom: 4px; }
.tool-title { font-size: 15px; font-weight: 700; color: var(--heading); }
.tool-sub { font-size: 12px; color: var(--tone-text); overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .dash-stats, .dash-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .dash-hero { flex-direction: column-reverse; align-items: flex-start; padding: 20px; gap: 14px; }
  .dash-count { width: 104px; height: 104px; }
  .dash-count-num { font-size: 40px; }
  .dash-title { font-size: 28px; }
  .stat { padding: 14px; }
  .stat-value { font-size: 26px; }
  .tool { min-height: 104px; padding: 14px; }
}

/* ===== Luna Sync card (V2) ===== */
.sync-status { white-space: normal; text-align: left; font-size: 12px; padding: 5px 12px; }
.sync-code { font-family: 'DM Serif Display', Georgia, serif; font-size: 40px; letter-spacing: .12em; text-align: center; color: var(--heading); margin: 8px 0; }
.sync-code-input { font-size: 24px; letter-spacing: .2em; text-align: center; }
.sync-pics { display: flex; justify-content: center; gap: 18px; margin: 12px 0; }
.sync-pics > span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sync-pic { font-size: 40px; line-height: 1; }
.sync-key { display: block; width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.6; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text); text-align: left; word-break: break-all; cursor: pointer; }
.sync-key-hidden { color: transparent; text-shadow: 0 0 8px var(--text-muted); user-select: none; }
.sync-more summary { cursor: pointer; color: var(--link); font-size: 14px; padding: 4px 0; }
.toast-action { margin-left: 10px; }

/* ===== Add to phone calendar sheet (V2) ===== */
.ics-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; background: var(--bg-card); cursor: pointer; }
.ics-row.is-empty { opacity: .55; cursor: default; }
.ics-grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ics-count { font-size: 13px; color: var(--text-secondary); }
.ics-note { font-size: 13px; color: var(--text-secondary); margin: 10px 0; }
.ics-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.ics-help summary { cursor: pointer; color: var(--link); font-size: 14px; padding: 6px 0; }
.ics-help p { font-size: 14px; color: var(--text-secondary); margin: 4px 0 8px; }
@media (max-width: 767px) {
  .td-big { font-size: 30px; }
  .td-now-title { font-size: 22px; }
}

/* ===== Free demo (only when the demo build's shim sets html.is-demo) ===== */
html.is-demo .demo-hide, html.is-demo .sync-card { display: none !important; }
.demo-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; padding: 7px 16px; background: var(--callout-bg); border-bottom: 1px solid var(--callout-border); color: var(--text); font-size: 13px; font-weight: 600; text-align: center; }
.demo-bar .btn { min-height: 0; padding: 5px 12px; font-size: 12px; text-decoration: none; }
.demo-bar .demo-short { display: none; }
@media (max-width: 480px) { .demo-bar { flex-wrap: nowrap; padding: 6px 12px; } .demo-bar .demo-long { display: none; } .demo-bar .demo-short { display: inline; } }
.demo-card { background: var(--callout-bg); border: 1.5px solid var(--callout-border); }
.demo-card .btn { text-decoration: none; display: inline-block; }

@media print {
  .demo-bar,
  .sidebar, .mobile-nav, .btn, #update-banner, .install-banner,
  .toast-container, .modal-backdrop, .tabs, .day-pills, .ow-button, .ow-sheet, .td-footer, .td-done-btn, .td-tick, .td-tools,
  #bd-search, #bd-filter { display: none !important; }
  body { background: #fff; color: #000; }
  .app-shell { display: block; min-height: auto; }
  .main-area { padding: 0; overflow: visible; }
  .card { border: 1px solid #ddd; box-shadow: none; break-inside: avoid; }
  input, select { border: none; background: none; color: #000; padding: 2px 0; min-height: 0; }
  textarea { border: none; background: none; color: #000; overflow: visible; }
  a { color: #000; }
}