/* Tucker Family ERP — app.css */
/* v1.3.26 — Paper theme by default (Tiffany's Happy Planner aesthetic).
   data-theme="paper" → cream paper, warm gray gridlines, italic serif headings.
   data-theme="dark"  → preserved navy palette for Paul's late-night coding.
   data-theme="light" is kept as an alias of "paper" for older bookmarks. */

/* ── PAPER THEME (default) ───────────────────────────────────────────────── */
:root, [data-theme="paper"], [data-theme="light"] {
  /* Planner palette */
  --bg-page:        #fdfaf5;
  --bg-card:        #ffffff;
  --bg-card-tint:   #f9f4ec;
  --border-line:    #d4cfc4;
  --border-soft:    #e8e1d3;
  --text-heading:   #2a2520;
  --text-body:      #3d3530;
  --text-muted:     #8b7355;
  --accent-coral:   #e8a598;
  --accent-sage:    #9bb098;
  --accent-dusty-blue: #8ba5b8;
  --accent-gold:    #d4af37;
  --shadow-paper:   0 1px 3px rgba(139, 115, 85, 0.08), 0 1px 2px rgba(139, 115, 85, 0.04);
  --shadow-paper-lg:0 4px 12px rgba(139, 115, 85, 0.10), 0 2px 4px rgba(139, 115, 85, 0.05);

  /* Bridge: legacy color tokens point at the planner palette so every screen
     inherits the cream aesthetic without renaming every reference site-wide. */
  --color-bg:              var(--bg-page);
  --color-surface:         var(--bg-card);
  --color-surface-2:       var(--bg-card);
  --color-surface-offset:  var(--bg-card-tint);
  --color-surface-alt:     var(--bg-card-tint);
  --color-divider:         var(--border-soft);
  --color-border:          var(--border-line);
  --color-text:            var(--text-heading);
  --color-text-muted:      var(--text-muted);
  --color-text-faint:      #b0a594;
  --color-primary:         #6f5942;          /* warm brown, used for nav active + buttons */
  --color-primary-hover:   #5b4734;
  --color-primary-dark:    #4a3a2c;
  --color-primary-highlight: rgba(232, 165, 152, 0.18);
  --color-accent:          var(--accent-gold);
  --color-accent-hover:    #e0bb4a;
  --color-accent-dark:     #a68a2b;
  --color-crimson:         #b07570;
  --color-crimson-soft:    rgba(232, 165, 152, 0.18);
  --color-gold-soft:       rgba(212, 175, 55, 0.18);
  --color-success:         var(--accent-sage);
  --color-warning:         #c9a14a;
  --color-error:           #b56354;
  --color-gold:            var(--accent-gold);
  --color-blue:            var(--accent-dusty-blue);
  --color-purple:          #b89bbf;
  --color-orange:          #d39a73;

  --shadow-sm: var(--shadow-paper);
  --shadow-md: var(--shadow-paper-lg);

  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --sidebar-w: 220px;
  --topbar-h:  56px;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-script: 'Caveat', 'Cormorant Garamond', cursive;

  /* v1.3.38: planner "warm ink" tokens used by user-typed surfaces
     (inputs, textareas, contenteditable). Theme-agnostic at the call site —
     the variable flips per theme so the rule stays the same everywhere. */
  --cal-label-ink:       #5a4a3a;
  --cal-label-ink-light: #a89880;
}

[data-theme="dark"] {
  --color-bg:              #0A1228;
  --color-surface:         #101B3A;
  --color-surface-2:       #15224A;
  --color-surface-offset:  #15224A;
  --color-surface-alt:     #15224A;
  --color-divider:         #1B2A56;
  --color-border:          #23315F;
  --color-text:            #F5F1E6;
  --color-text-muted:      #A8B0C8;
  --color-text-faint:      #6E7A99;
  --color-primary:         #3D6FE0;
  --color-primary-hover:   #5A87E8;
  --color-primary-dark:    #1B3C8E;
  --color-primary-highlight: #1B2A56;
  --color-accent:          #F2B33D;
  --color-accent-hover:    #F5C25E;
  --color-accent-dark:     #B7831A;
  --color-crimson:         #D8434C;
  --color-crimson-soft:    rgba(216, 67, 76, 0.18);
  --color-gold-soft:       rgba(242, 179, 61, 0.22);
  --color-success:         #6daa45;
  --color-warning:         #F2B33D;
  --color-error:           #D8434C;
  --color-gold:            #F2B33D;
  --color-blue:            #5A87E8;
  --color-purple:          #a86fdf;
  --color-orange:          #fdab43;
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);

  /* v1.3.38: dark-theme warm cream tones — soft on Paul's late-night eyes,
     never pure white. */
  --cal-label-ink:       #e8d4a8;
  --cal-label-ink-light: #8a7d65;
}

/* v1.3.29: prefers-color-scheme is NOT honored. Paper is the universal default
   for every user; dark must be opted into via Settings → Theme. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg);
  display: flex;
}
/* Paper theme: subtle floral wash on the page. The dark theme keeps a flat
   navy background — Paul's late-night coding eyes don't need florals. */
:root[data-theme="paper"] body,
:root[data-theme="light"] body,
:root:not([data-theme]) body {
  background-color: var(--bg-page);
  background-image: url('/assets/paper-bg.svg');
  background-repeat: repeat;
  background-size: 480px 480px;
  background-position: center top;
}
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

/* ── v1.3.38: user-typed text inherits the planner "warm ink" color ──────
   Inputs, textareas, and contenteditable surfaces use the same muted warm
   ink across both themes. The variables flip per theme (warm brown in Paper,
   warm cream in dark), so the rule itself is theme-agnostic. */
input, textarea, [contenteditable="true"] {
  color: var(--cal-label-ink, var(--color-text));
  caret-color: var(--cal-label-ink, var(--color-text));
}
input::placeholder, textarea::placeholder {
  color: var(--cal-label-ink-light, var(--color-text-muted));
  opacity: 0.7;
  font-style: italic;
}

/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  height: 100dvh;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: width var(--transition), transform var(--transition);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c8c4ba transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: #c8c4ba;
  border-radius: 3px;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: #b3ad9f; }
[data-theme="dark"] .sidebar {
  scrollbar-color: #3a3a3a transparent;
}
[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb {
  background: #3a3a3a;
}
[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }
.sidebar.collapsed { width: 56px; }
.sidebar-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--color-border);
  gap: 0;
}
.logo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}
.sidebar-crest {
  width: calc(100% - 20px);
  height: auto;
  max-width: calc(100% - 20px);
  display: block;
  margin: 6px auto 0;
  padding: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(232, 169, 35, 0.25));
  transition: height var(--transition), width var(--transition);
}
.logo-text {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1.2;
  margin: 6px 0 8px;
  padding: 0 4px;
  transition: opacity var(--transition);
}
.sidebar.collapsed .logo-text { display: none; }
.sidebar.collapsed .sidebar-crest {
  width: auto;
  height: 36px;
  margin: 8px auto;
}
.sidebar.collapsed .sidebar-section-label { opacity: 0; }
.sidebar.collapsed .nav-item span { opacity: 0; width: 0; overflow: hidden; }
.sidebar.collapsed .sidebar-bottom span { opacity: 0; width: 0; overflow: hidden; }
.sidebar-toggle {
  position: static;
  margin: 0 auto 4px;
  order: 99;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
  transition: background var(--transition), color var(--transition);
}
.sidebar-toggle:hover { background: var(--color-surface-offset); color: var(--color-text); }
.sidebar.collapsed .sidebar-toggle svg { transform: rotate(180deg); }
.sidebar.collapsed .sidebar-toggle {
  margin: 0 auto 4px;
}
.sidebar-section-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  padding: var(--space-4) var(--space-3) var(--space-1);
  white-space: nowrap;
  transition: opacity var(--transition);
}
.nav-list { list-style: none; padding: var(--space-1) var(--space-2); flex: 1; }
.nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-align: left;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  min-height: 44px;
}
.nav-item svg { flex-shrink: 0; }
.nav-item span { transition: opacity var(--transition), width var(--transition); }
.nav-item:hover { background: var(--color-surface-offset); color: var(--color-text); }
.nav-item.active {
  background: var(--color-gold-soft);
  color: var(--color-primary);
  border-left: 2px solid var(--color-accent);
  padding-left: calc(var(--space-3) - 2px);
}
.sidebar-bottom {
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.theme-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  min-height: 44px;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  overflow: hidden;
}
.theme-toggle:hover { background: var(--color-surface-offset); color: var(--color-text); }

/* ── MAIN WRAPPER ────────────────────────────────────────────────────────── */
.main-wrapper {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition);
}
.sidebar.collapsed ~ .main-wrapper { margin-left: 56px; }

/* ── TOPBAR ──────────────────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  position: sticky;
  top: 0;
  z-index: 50;
}
.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: background var(--transition);
  min-height: 44px; min-width: 44px;
}
.hamburger:hover { background: var(--color-surface-offset); }
.topbar-title {
  font-size: var(--text-base);
  font-weight: 600;
  flex: 1;
  color: var(--color-text);
}
.topbar-actions { display: flex; align-items: center; gap: var(--space-3); }
.topbar-date { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ── PAGE CONTENT ────────────────────────────────────────────────────────── */
.page-content { flex: 1; padding: var(--space-6); overflow-y: auto; }

/* ── SHARED COMPONENTS ───────────────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  gap: var(--space-4);
}
.section-title { font-size: var(--text-lg); font-weight: 700; color: var(--color-text); }
.section-subtitle { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  min-height: 36px;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary {
  background: var(--color-surface-offset);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover { background: var(--color-divider); }
.btn-ghost { color: var(--color-text-muted); }
.btn-ghost:hover { background: var(--color-surface-offset); color: var(--color-text); }
.btn-danger { background: var(--color-error); color: #fff; }
.btn-danger:hover { opacity: 0.85; }
.btn-sm { padding: var(--space-1) var(--space-3); min-height: 30px; font-size: var(--text-xs); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.badge-green  { background: color-mix(in oklab, var(--color-success) 15%, transparent); color: var(--color-success); }
.badge-yellow { background: color-mix(in oklab, var(--color-gold) 15%, transparent);    color: var(--color-gold); }
.badge-red    { background: color-mix(in oklab, var(--color-error) 15%, transparent);   color: var(--color-error); }
.badge-blue   { background: color-mix(in oklab, var(--color-blue) 15%, transparent);    color: var(--color-blue); }
.badge-gray   { background: var(--color-surface-offset); color: var(--color-text-muted); }

.form-group { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.form-label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); }
.form-input, .form-select, .form-textarea {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  min-height: 36px;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent);
}
.form-textarea { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

.divider { border: none; border-top: 1px solid var(--color-divider); margin: var(--space-4) 0; }

/* ── DASHBOARD ───────────────────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.kpi-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 1px solid var(--color-crimson);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: outline var(--transition);
}
.kpi-card:hover { outline: 1px solid var(--color-accent); outline-offset: 2px; }
.kpi-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.kpi-value { font-size: var(--text-xl); font-weight: 700; color: var(--color-accent-dark); font-variant-numeric: tabular-nums lining-nums; }
.kpi-value.positive { color: var(--color-success); }
.kpi-value.negative { color: var(--color-error); }
.kpi-sub { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; } }

.dash-card-title { font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-3); color: var(--color-text); border-bottom: 1px solid var(--color-accent); padding-bottom: 6px; }
.dash-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
}
.dash-item:last-child { border-bottom: none; }
.dash-item-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.dash-item-title { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); }
.dash-item-meta  { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

/* ── CALENDAR ────────────────────────────────────────────────────────────── */
.calendar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
/* v1.3.28: italic-lowercase planner-style label for BOTH themes. The "/"
   separator is inserted by drawCalendar; CSS handles case + family. */
.calendar-month-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: lowercase;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  letter-spacing: 0;
  line-height: 1.05;
  min-width: 240px;
  text-align: center;
  color: var(--color-text);
}
/* v1.3.61 — italic-serif countdown banner under the month label. Subtle,
   no background, warm ink so it doesn't fight the planner aesthetic. */
.trip-countdown-banner {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 1rem;
  margin: calc(var(--space-1) * -1) 0 var(--space-3);
  cursor: pointer;
  letter-spacing: 0.01em;
}
.trip-countdown-banner:hover,
.trip-countdown-banner:focus {
  color: var(--color-text);
  outline: none;
}
[data-theme="paper"] .trip-countdown-banner {
  color: #6b5a3a;
}
[data-theme="paper"] .trip-countdown-banner:hover,
[data-theme="paper"] .trip-countdown-banner:focus {
  color: #3a2f1a;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  background: var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.calendar-day-header {
  background: var(--color-surface-offset);
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
}
.calendar-day {
  background: var(--color-surface);
  min-height: 110px;
  padding: 22px 8px 22px;   /* room for day-num at top-left and holiday label at bottom */
  cursor: pointer;
  transition: background var(--transition);
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
.calendar-day:hover { background: var(--color-surface-offset); }
.calendar-day.other-month .day-num { color: var(--color-text-faint); }
/* v1.3.28: theme-agnostic planner day number — small, light, upper-LEFT. */
.day-num {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 12px;
  font-weight: 300;
  color: var(--color-text-muted);
  opacity: 0.7;
  width: auto;
  height: auto;
}
/* Today is a light outline ring in both themes — color is theme-gated via
   --color-primary, but the SHAPE (ring, no fill) stays the same. */
.calendar-day.today {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.calendar-day.today .day-num {
  color: var(--color-primary);
  font-weight: 500;
  opacity: 1;
}
.cal-today-tag {
  position: absolute;
  top: 4px;
  right: 6px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--color-text-muted);
  opacity: 0.85;
  pointer-events: none;
}
.event-chip {
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  max-width: 100%;
  cursor: pointer;
}
.event-chip-cont { opacity: 0.7; font-style: italic; }
.events-sidebar { display: flex; flex-direction: column; gap: var(--space-3); }
.event-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.event-color-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.event-title { font-size: var(--text-sm); font-weight: 500; }
.event-meta  { font-size: var(--text-xs); color: var(--color-text-muted); }

.cal-layout { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-5); }
@media (max-width: 900px) { .cal-layout { grid-template-columns: 1fr; } }

/* ── TASKS ───────────────────────────────────────────────────────────────── */
.tasks-filters {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.filter-btn {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: all var(--transition);
  min-height: 30px;
}
.filter-btn:hover, .filter-btn.active {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.task-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 700px) { .task-columns { grid-template-columns: 1fr; } }
.task-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-border);
}
.task-col-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); }
.task-col-count {
  font-size: var(--text-xs);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  font-weight: 600;
}
.task-cards { display: flex; flex-direction: column; gap: var(--space-2); }
.task-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition);
}
.task-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.task-card-title { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-1); }
.task-card-meta  { font-size: var(--text-xs); color: var(--color-text-muted); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-top: var(--space-1); }
.priority-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.priority-urgent { background: var(--color-crimson); }
.priority-high   { background: var(--color-accent-dark); }
.priority-medium { background: var(--color-primary); }
.priority-low    { background: var(--color-text-muted); }

/* ── BUDGET ──────────────────────────────────────────────────────────────── */
.budget-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 600px) { .budget-summary { grid-template-columns: 1fr; } }
.budget-kpi { text-align: center; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.budget-kpi-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.budget-kpi-value { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }

.budget-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-5); }
@media (max-width: 900px) { .budget-layout { grid-template-columns: 1fr; } }

.cat-bar-wrap { margin-bottom: var(--space-3); }
.cat-bar-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-1); gap: var(--space-2); }
.cat-bar-name { font-size: var(--text-sm); font-weight: 500; flex: 1; }
.cat-bar-amounts { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cat-bar-track { height: 6px; background: var(--color-surface-offset); border-radius: var(--radius-full); overflow: hidden; }
.cat-bar-fill  { height: 100%; border-radius: var(--radius-full); transition: width 0.4s ease; }
.cat-bar-fill.over-budget { background: var(--color-error) !important; }

.txn-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 450px; overflow-y: auto; }
.txn-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: background var(--transition);
}
.txn-row:hover { background: var(--color-surface-offset); }
.txn-icon { width: 32px; height: 32px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: #fff; }
.txn-desc { flex: 1; }
.txn-title { font-size: var(--text-sm); font-weight: 500; }
.txn-meta  { font-size: var(--text-xs); color: var(--color-text-muted); }
.txn-amount { font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.txn-amount.income  { color: var(--color-success); }
.txn-amount.expense { color: var(--color-error); }
.txn-delete { opacity: 0; transition: opacity var(--transition); color: var(--color-text-faint); }
.txn-row:hover .txn-delete { opacity: 1; }

.month-picker { display: flex; align-items: center; gap: var(--space-2); }
.month-picker input[type="month"] { padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-size: var(--text-sm); min-height: 36px; }

/* ── BUDGET v1.3.14 ──────────────────────────────────────────────────────── */
.budget-search { min-height: 36px; }
.cat-chip-row {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: 0 0 var(--space-4); padding-bottom: var(--space-1);
}
.cat-chip {
  --chip-color: var(--color-accent);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text);
  font-size: var(--text-xs); font-weight: 500;
  cursor: pointer; transition: all var(--transition);
  position: relative;
}
.cat-chip:hover { border-color: var(--chip-color); }
.cat-chip.active {
  background: var(--chip-color);
  color: #fff;
  border-color: var(--chip-color);
}
.cat-chip.active::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; opacity: 0.85;
}
.txn-row .txn-edit { opacity: 0; transition: opacity var(--transition); color: var(--color-text-faint); }
.txn-row:hover .txn-edit { opacity: 1; }
.txn-receipt-link { display: inline-flex; color: var(--color-text-muted); padding: 0 var(--space-2); }
.txn-receipt-link:hover { color: var(--color-accent); }
.receipt-thumb-wrap { text-align: center; margin-bottom: var(--space-4); }
.receipt-thumb {
  max-height: 240px; max-width: 100%; border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.form-help { font-size: var(--text-sm); color: var(--color-text-muted); }
.import-map-table, .manage-table {
  width: 100%; border-collapse: collapse; font-size: var(--text-sm);
}
.import-map-table th, .manage-table th {
  text-align: left; padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600; color: var(--color-text-muted);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em;
}
.import-map-table td, .manage-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.import-map-table td:nth-child(3) {
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  margin-right: var(--space-2); vertical-align: middle;
}

/* ── Plan vs Actual ──────────────────────────────────────────────────── */
.plan-vs-actual-block { margin: var(--space-4) 0 var(--space-5); }
.pva-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
}
.pva-empty {
  background: var(--color-surface); border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
  color: var(--color-text-muted); font-size: var(--text-sm);
}
.pva-empty-title { font-weight: 600; color: var(--color-text); margin-bottom: var(--space-1); }
.pva-empty-sub a, .pva-empty-sub strong { color: var(--color-text); }
.pva-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-3); gap: var(--space-3); flex-wrap: wrap;
}
.pva-totals-mini {
  display: flex; gap: var(--space-3); font-size: var(--text-sm); flex-wrap: wrap;
  color: var(--color-text-muted); font-variant-numeric: tabular-nums lining-nums;
}
.pva-totals-mini strong { color: var(--color-text); font-weight: 700; }
.pva-totals-mini .under strong { color: var(--color-success); }
.pva-totals-mini .over  strong { color: var(--color-error); }
.pva-table { display: flex; flex-direction: column; gap: 2px; }
.pva-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.6fr) 110px 110px 150px minmax(120px, 1.4fr);
  gap: var(--space-3); align-items: center;
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.pva-row.pva-head {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.pva-row:last-child { border-bottom: none; }
.pva-cat { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.pva-swatch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; color: white;
  font-size: 12px; flex-shrink: 0;
}
.pva-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pva-planned { font-variant-numeric: tabular-nums lining-nums; cursor: pointer; }
.pva-planned:hover { color: var(--color-accent-blue, var(--color-text)); text-decoration: underline; }
.pva-actual { font-variant-numeric: tabular-nums lining-nums; color: var(--color-text-muted); }
.pva-variance { font-variant-numeric: tabular-nums lining-nums; font-weight: 600; font-size: var(--text-xs); }
.pva-variance.under { color: var(--color-success); }
.pva-variance.over  { color: var(--color-error); }
.pva-bar-cell { padding: 0; }
.pva-bar-track {
  height: 6px; background: var(--color-surface-offset);
  border-radius: var(--radius-full); overflow: hidden;
}
.pva-bar-fill { height: 100%; border-radius: var(--radius-full); transition: width 0.4s ease; }
.pva-bar-fill.over { background: var(--color-error) !important; }
@media (max-width: 700px) {
  .pva-row { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .pva-row.pva-head { display: none; }
  .pva-bar-cell { grid-column: 1 / -1; }
  .pva-variance { text-align: right; }
}

/* ── Budget v1.3.25 overhaul ─────────────────────────────────────────── */
.budget-actions {
  display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
}
.budget-add-wrap { position: relative; }
.budget-add-drawer {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 280px; padding: 6px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
.budget-add-drawer button {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm);
  background: transparent; text-align: left; cursor: pointer; color: var(--color-text);
}
.budget-add-drawer button:hover { background: var(--color-surface-offset); }
.budget-add-drawer .bad-icon {
  width: 28px; height: 28px; border-radius: 6px; display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--color-surface-offset); font-size: 14px; flex-shrink: 0;
}
.budget-add-drawer strong { display: block; font-size: var(--text-sm); font-weight: 600; }
.budget-add-drawer em {
  display: block; font-style: normal; font-size: var(--text-xs);
  color: var(--color-text-muted); margin-top: 2px;
}

.budget-month-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.bmc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); gap: var(--space-3); flex-wrap: wrap; }
.bmc-title { display: flex; align-items: center; gap: var(--space-2); }
.bmc-title h2 {
  font-family: 'Cormorant Garamond', serif; font-size: var(--text-2xl);
  font-weight: 600; margin: 0; min-width: 180px; text-align: center;
}
.bmc-nav {
  width: 32px; height: 32px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); font-size: var(--text-lg); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.bmc-nav:hover { background: var(--color-surface-offset); }
.bmc-pick {
  padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface);
  color: var(--color-text-muted); font-size: var(--text-xs); margin-left: var(--space-2);
}
.bmc-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4); margin-bottom: var(--space-4);
}
.bmc-stat { display: flex; flex-direction: column; gap: 2px; }
.bmc-stat-label {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-text-muted);
}
.bmc-stat-value {
  font-size: var(--text-xl); font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}
.bmc-stat-value.good { color: var(--color-success); }
.bmc-stat-value.over { color: var(--color-error); }
.bmc-bar { display: flex; align-items: center; gap: var(--space-3); }
.bmc-bar-track {
  flex: 1; height: 10px; background: var(--color-surface-offset);
  border-radius: var(--radius-full); overflow: hidden;
}
.bmc-bar-fill {
  height: 100%; border-radius: var(--radius-full);
  background: var(--color-accent, var(--color-primary)); transition: width 0.4s ease;
}
.bmc-bar-fill.over { background: var(--color-error); }
.bmc-bar-pct { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; }

.pva-row { cursor: default; }
.pva-row .pva-cat { cursor: pointer; }
.pva-row .pva-cat:hover .pva-name { text-decoration: underline; }
.pva-row.is-filtered { background: var(--color-surface-offset); }
.pva-planned { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.pva-planned:hover { text-decoration: none; color: inherit; }
.pva-edit {
  background: transparent; border: 0; padding: 2px; cursor: pointer;
  color: var(--color-text-faint); border-radius: 4px;
}
.pva-edit:hover { color: var(--color-accent); background: var(--color-surface-offset); }
.pva-remaining { font-variant-numeric: tabular-nums lining-nums; font-weight: 600; font-size: var(--text-sm); }
.pva-remaining.under { color: var(--color-success); }
.pva-remaining.over  { color: var(--color-error); }
.pva-empty-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.pva-show-all { margin-top: var(--space-3); }

.budget-bottom { margin-top: var(--space-5); }
.budget-recent { background: transparent; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; background: var(--color-surface-offset);
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  font-size: var(--text-xs); color: var(--color-text);
}
.filter-chip button {
  background: transparent; border: 0; cursor: pointer; padding: 0 2px;
  color: var(--color-text-muted); font-size: 14px; line-height: 1;
}
.filter-chip button:hover { color: var(--color-error); }
.link-muted { color: var(--color-text-muted); text-decoration: none; font-size: var(--text-xs); }
.link-muted:hover { color: var(--color-accent); text-decoration: underline; }

/* ── Plan import preview table ───────────────────────────────────────── */
.plan-import-preview-table {
  width: 100%; border-collapse: collapse; font-size: var(--text-xs);
  font-variant-numeric: tabular-nums lining-nums;
}
.plan-import-preview-table th, .plan-import-preview-table td {
  padding: 4px 8px; border-bottom: 1px solid var(--color-border);
  text-align: right; white-space: nowrap;
}
.plan-import-preview-table th:first-child, .plan-import-preview-table td:first-child {
  text-align: left;
}
.plan-import-preview-table th {
  position: sticky; top: 0; background: var(--color-surface);
  font-weight: 600; color: var(--color-text-muted); text-transform: uppercase;
  letter-spacing: 0.04em; z-index: 1;
}
.plan-preview-month { color: var(--color-text-faint); }
.plan-preview-month.has-val { color: var(--color-text); font-weight: 500; }

.empty-state {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: var(--space-12) var(--space-8);
  color: var(--color-text-muted);
}
.empty-state svg { margin-bottom: var(--space-3); color: var(--color-text-faint); }
.empty-state p { font-size: var(--text-sm); max-width: 32ch; margin-top: var(--space-1); }

/* ── MODAL ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: oklch(0.2 0.01 80 / 0.5);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90dvh;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
  animation: modal-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.modal-title { font-size: var(--text-base); font-weight: 700; }
.modal-close {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
  transition: background var(--transition);
}
.modal-close:hover { background: var(--color-surface-offset); }
.modal-body { padding: var(--space-5); }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-4); }

/* ── TOAST ───────────────────────────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: var(--space-5); right: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
  z-index: 300; pointer-events: none;
}
.toast {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: var(--shadow-md);
  animation: toast-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 320px;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

/* ── SIDEBAR BACKDROP (mobile overlay) ───────────────────────────────────── */
/* The backdrop must not intercept taps when the sidebar is closed — otherwise
   it covers the hamburger button. It only becomes interactive when JS adds
   .visible (which also runs the fade-in transition). */
.sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-backdrop.visible {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    width: 280px !important;
    max-width: 85vw;
    /* iOS Safari address-bar quirk: dvh is the dynamic viewport height that
       accounts for the bottom toolbar. Fallback to vh on browsers that lack
       dvh support. */
    height: 100vh;
    height: 100dvh;
    box-shadow: var(--shadow-md);
    transition: transform 250ms ease;
    z-index: 110; /* above backdrop and topbar */
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  /* The base .sidebar-backdrop rule keeps display:none until .visible is set
     by JS — declaring the mobile-breakpoint state here so a closed backdrop
     never intercepts taps on the hamburger underneath. */
  .sidebar-backdrop.visible { display: block; }
  .main-wrapper { margin-left: 0 !important; }
  .hamburger { display: flex; }
  .page-content { padding: var(--space-4); }
  .form-row { grid-template-columns: 1fr; }
  .task-columns { grid-template-columns: 1fr; }
  .budget-layout { grid-template-columns: 1fr; }
  .cal-layout { grid-template-columns: 1fr; }
  /* Show the collapse arrow as a close affordance on mobile (it's hidden on
     desktop when sidebar is expanded by default — here we make sure it's
     tappable and visible). */
  .sidebar-toggle {
    display: flex;
  }
}

/* When the mobile sidebar is open, lock the body so the underlying page
   doesn't scroll behind the overlay. Applied as a body class by JS. */
body.sidebar-locked {
  overflow: hidden;
  /* iOS Safari needs position:fixed on body to fully prevent scroll, but
     that loses scroll position. overflow:hidden + touch-action covers the
     common cases without that side effect. */
  touch-action: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Tasks v2 / Payments / Notifications ─────────────────────────────── */
.iam-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}
.iam-selector {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  cursor: pointer;
}
.notif-bell {
  position: relative;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  cursor: pointer;
  margin-left: var(--space-2);
}
.notif-bell:hover { background: var(--color-surface-offset); }
.notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--color-error);
  color: #fff;
  font-size: 0.65rem;
  min-width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-weight: 600;
}
.notif-panel {
  position: absolute;
  top: calc(var(--topbar-h) + 4px);
  right: var(--space-4);
  width: 360px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 50;
  padding: var(--space-2);
}
.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}
.notif-item {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 2px;
  border-left: 3px solid transparent;
}
.notif-item:hover { background: var(--color-surface-offset); }
.notif-item.unread { background: var(--color-primary-highlight); border-left-color: var(--color-primary); }
.notif-item-title { font-weight: 600; font-size: var(--text-sm); }
.notif-item-body  { font-size: var(--text-xs); color: var(--color-text-muted); }
.notif-item-time  { font-size: 0.7rem; color: var(--color-text-faint); margin-top: 2px; }

.task-card-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.task-actions {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.task-actions button { font-size: var(--text-xs); padding: 4px 8px; }
.assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 500;
}
.pay-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  color: var(--color-accent-dark);
  border: 1px solid var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 700;
}
.recur-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  font-size: var(--text-xs);
}
.overdue-pill {
  background: var(--color-error);
  color: #fff;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: 600;
}
.priority-urgent { background: var(--color-error) !important; color: #fff !important; }
.approval-pill {
  background: var(--color-warning);
  color: #fff;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: 600;
}
.ext-pill {
  background: var(--color-blue);
  color: #fff;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: 600;
}

.weekday-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.weekday-btn {
  padding: 6px 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-xs);
}
.weekday-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}
.payments-table {
  width: 100%;
  border-collapse: collapse;
}
.payments-table th, .payments-table td {
  text-align: left;
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-sm);
}
.payments-table th { color: var(--color-text-muted); font-weight: 500; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; }
.payments-table tbody tr:hover { background: var(--color-surface-offset); }

.subtab-row {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-4);
}
.subtab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}
.subtab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ── BRAND: serif typography + crest components ─────────────────────────── */
/* .logo-text serif typography defined in sidebar block above */
.topbar-title { font-family: var(--font-serif); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.005em; }
.topbar-title-wrap { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.topbar-chevron { opacity: 0.85; margin-left: 1px; }
.section-title, .dash-card-title { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.005em; }
.page-content h2 { font-family: var(--font-serif); font-weight: 600; }

/* Dashboard hero */
.hero-crest {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(135deg, var(--color-surface-alt) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.hero-crest::before {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 4px solid var(--color-accent);
  pointer-events: none;
}
.hero-crest::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--color-accent) 35%, var(--color-crimson) 50%, var(--color-accent) 65%, transparent 100%);
  pointer-events: none;
}
.hero-crest__img {
  height: 200px;
  width: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}
.hero-crest__copy { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.hero-crest__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  color: var(--color-primary);
  line-height: 1.1;
  letter-spacing: 0.005em;
}
.hero-crest__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--color-accent-dark);
  letter-spacing: 0.04em;
}
[data-theme="dark"] .hero-crest__tagline { color: var(--color-accent); }
.hero-crest__date { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }

@media (max-width: 720px) {
  .hero-crest { flex-direction: column; text-align: center; padding: var(--space-4); }
  .hero-crest__img { height: 140px; }
  .hero-crest::before { border-left: none; border-top: 4px solid var(--color-accent); }
}

/* Crest divider strip */
.crest-divider {
  display: flex;
  justify-content: center;
  margin: var(--space-3) 0 var(--space-4);
  opacity: 0.9;
}
.crest-divider svg { height: 24px; width: auto; }

/* App footer */
.app-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  background: var(--color-surface);
}

/* Priority pills (Tasks) re-mapped */
.priority-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: #fff;
}
.priority-pill--low      { background: var(--color-text-muted); }
.priority-pill--medium   { background: var(--color-primary); }
.priority-pill--high     { background: var(--color-accent-dark); }
.priority-pill--urgent   { background: var(--color-crimson); }

/* ── BRAND v1.3.4: seahorse glyphs, gold/crimson accent rebalance ─────── */

/* Pulse the urgent priority dot — crimson, subtle 2s loop */
@keyframes seahorse-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.priority-dot.priority-urgent {
  animation: seahorse-pulse 2s ease-in-out infinite;
}

/* Seahorse icon (real crest PNG, transparent bg) */
.seahorse-icon {
  height: 24px;
  width: auto;
  vertical-align: middle;
  display: inline-block;
}
.seahorse-pair-img {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.seahorse-pair-img img { height: 28px; width: auto; }

/* Notification bell → single seahorse */
.notif-bell .seahorse-icon--bell {
  height: 22px;
  transition: transform 200ms ease, opacity 200ms ease;
  opacity: 0.85;
}
.notif-bell:hover .seahorse-icon--bell { opacity: 1; transform: scale(1.05); }
.notif-bell .notif-badge {
  position: absolute;
  top: auto; left: auto;
  right: -4px; bottom: -2px;
  background: var(--color-crimson);
}

/* Hover outline on clickable cards/buttons */
.card,
.btn-secondary,
.btn-primary,
.dash-item,
.module-tile {
  transition: outline var(--transition), background var(--transition), color var(--transition);
}
.card:hover,
.btn-secondary:hover,
.btn-primary:hover {
  outline: 1px solid var(--color-accent);
  outline-offset: 2px;
}

/* Module-tile (Quick Links buttons act as our module tiles) — top-right seahorse flourish */
.dashboard-grid .card { position: relative; }
.dashboard-grid .card .module-seahorse,
.module-tile .module-seahorse {
  position: absolute;
  top: 8px;
  right: 8px;
  height: 28px;
  width: auto;
  opacity: 0.6;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.kpi-card { position: relative; }
.kpi-card .module-seahorse {
  position: absolute;
  top: 8px;
  right: 8px;
  height: 28px;
  width: auto;
  opacity: 0.6;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.dashboard-grid .card:hover .module-seahorse,
.kpi-card:hover .module-seahorse,
.module-tile:hover .module-seahorse { opacity: 0.9; }

/* Quick-link buttons get their own seahorse-styled tile look */
.quick-link-tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  font-size: var(--text-sm);
  overflow: hidden;
  transition: outline var(--transition), border-color var(--transition), background var(--transition);
}
.quick-link-tile:hover {
  outline: 1px solid var(--color-accent);
  outline-offset: 2px;
  background: var(--color-gold-soft);
}
.quick-link-tile .module-seahorse {
  position: absolute;
  top: 4px;
  right: 4px;
  height: 22px;
  width: auto;
  opacity: 0.6;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.quick-link-tile:hover .module-seahorse { opacity: 0.9; }

/* Footer pair flanking wordmark — real crest PNGs, facing inward */
.app-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.footer-seahorse {
  height: 36px;
  width: auto;
  opacity: 0.85;
  flex-shrink: 0;
}

/* ── Family avatars ────────────────────────────────────────────────── */
.family-card { position: relative; }
.family-card.drag-over { outline: 2px dashed var(--color-primary); outline-offset: -4px; }
.family-card.is-uploading { opacity: 0.6; pointer-events: none; }

.family-avatar-wrap {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  flex-shrink: 0;
}
.family-avatar-img {
  border-radius: var(--radius-full);
  object-fit: cover;
  display: block;
  background: var(--color-surface-offset);
}
.family-avatar-initial {
  border-radius: var(--radius-full);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.family-avatar-camera {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-primary, #01696f);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 150ms ease;
  border: 2px solid var(--color-surface, #fff);
  pointer-events: none;
}
.family-avatar-wrap:hover .family-avatar-camera { opacity: 1; }

.family-avatar-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  border: none;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.family-avatar-remove:hover { background: rgba(0,0,0,0.7); }

/* Calendar sync form additions */
.form-help { font-size: var(--text-xs, 0.75rem); color: var(--color-text-muted, #666); margin: 4px 0; }
.form-help a { color: var(--color-blue, #1B3C8E); text-decoration: underline; }
.form-checkbox { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 2px; font-size: var(--text-sm, 0.875rem); cursor: pointer; }
.form-checkbox input { margin: 0; }

/* ───────────────────────────────────────────────────────────────────────────
   v1.3.26 — Paper-theme overrides (Tiffany's Happy Planner aesthetic).
   These rules only apply when data-theme="paper" (default) so the dark theme
   keeps its existing navy look untouched.
   ─────────────────────────────────────────────────────────────────────── */

/* Paper-theme typography defaults: italic serif headings + uppercase
   letterspaced labels mirror the planner's two-voice typesetting. */
:root[data-theme="paper"],
:root[data-theme="light"],
:root:not([data-theme]) {
  color-scheme: light;
}

[data-theme="paper"] .section-title,
[data-theme="paper"] .topbar-title,
[data-theme="paper"] .dash-card-title,
[data-theme="paper"] .modal-title,
[data-theme="paper"] .page-content h2,
[data-theme="paper"] .logo-text,
[data-theme="paper"] .hero-crest__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-heading);
}
[data-theme="paper"] .logo-text { text-transform: lowercase; font-size: 1.6rem; }
[data-theme="paper"] .section-title { font-size: 1.6rem; line-height: 1.15; }
[data-theme="paper"] .dash-card-title {
  font-size: 1.25rem;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 6px;
  color: var(--text-heading);
}
[data-theme="paper"] .topbar-title { font-size: 1.5rem; }

/* All-caps letterspaced label style — used on planner pages for things like
   PRIORITIES / NOTES / sidebar section labels. */
[data-theme="paper"] .sidebar-section-label,
[data-theme="paper"] .planner-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
}

[data-theme="paper"] body {
  color: var(--text-body);
}

/* Sidebar: cream-tinted, warm-gray right edge. Active item uses a soft
   coral wash with a warm-brown left border — like a sticky-tab on a planner page. */
[data-theme="paper"] .sidebar {
  background: var(--bg-card-tint);
  border-right: 1px solid var(--border-line);
}
[data-theme="paper"] .sidebar-header { border-bottom: 1px solid var(--border-soft); }
[data-theme="paper"] .nav-item { color: var(--text-body); font-weight: 400; }
[data-theme="paper"] .nav-item:hover { background: rgba(212, 175, 55, 0.10); color: var(--text-heading); }
[data-theme="paper"] .nav-item.active {
  background: rgba(232, 165, 152, 0.18);
  color: var(--text-heading);
  border-left: 3px solid var(--color-primary);
  padding-left: calc(var(--space-3) - 3px);
  font-weight: 500;
}
[data-theme="paper"] .sidebar-bottom { border-top: 1px solid var(--border-soft); }

/* Topbar: cream wash, planner-style label. The "I am" chip becomes a soft
   warm-tan card to match Tiffany's section dividers. */
[data-theme="paper"] .topbar {
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-soft);
}
[data-theme="paper"] .iam-label { letter-spacing: 0.18em; text-transform: uppercase; font-size: 10px; }
[data-theme="paper"] .iam-selector {
  background: var(--bg-card-tint);
  border: 1px solid var(--border-soft);
  color: var(--text-body);
}
[data-theme="paper"] .topbar-date {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-muted);
}
[data-theme="paper"] .notif-bell {
  background: var(--bg-card);
  border-color: var(--border-soft);
  color: var(--text-muted);
}

/* Cards: white on cream, with a warm paper shadow (no harsh borders). */
[data-theme="paper"] .card,
[data-theme="paper"] .kpi-card,
[data-theme="paper"] .budget-kpi,
[data-theme="paper"] .budget-month-card,
[data-theme="paper"] .pva-card,
[data-theme="paper"] .task-card,
[data-theme="paper"] .event-row,
[data-theme="paper"] .txn-row,
[data-theme="paper"] .quick-link-tile,
[data-theme="paper"] .modal {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-paper);
}
[data-theme="paper"] .kpi-card { border-left: 1px solid var(--accent-coral); }
[data-theme="paper"] .kpi-value { color: var(--text-heading); font-weight: 300; font-size: 1.75rem; }
[data-theme="paper"] .kpi-value.positive { color: var(--accent-sage); }
[data-theme="paper"] .kpi-value.negative { color: var(--color-error); }
[data-theme="paper"] .kpi-label { letter-spacing: 0.18em; font-weight: 500; }
[data-theme="paper"] .budget-kpi-value { font-weight: 300; }
[data-theme="paper"] .bmc-stat-value { font-weight: 300; }

/* Buttons: paper-friendly. Primary becomes warm brown; secondary becomes
   a cream-tinted outline. */
[data-theme="paper"] .btn-primary {
  background: var(--color-primary);
  color: var(--bg-card);
  border: 1px solid var(--color-primary);
  font-weight: 500;
  letter-spacing: 0.02em;
}
[data-theme="paper"] .btn-primary:hover { background: var(--color-primary-hover); }
[data-theme="paper"] .btn-secondary {
  background: var(--bg-card);
  color: var(--text-body);
  border: 1px solid var(--border-line);
}
[data-theme="paper"] .btn-secondary:hover { background: var(--bg-card-tint); border-color: var(--text-muted); }
[data-theme="paper"] .btn-ghost { color: var(--text-muted); }
[data-theme="paper"] .btn-ghost:hover { background: var(--bg-card-tint); color: var(--text-heading); }

[data-theme="paper"] .form-input,
[data-theme="paper"] .form-select,
[data-theme="paper"] .form-textarea {
  background: var(--bg-card);
  border-color: var(--border-soft);
  color: var(--text-body);
}
[data-theme="paper"] .form-input:focus,
[data-theme="paper"] .form-select:focus,
[data-theme="paper"] .form-textarea:focus {
  border-color: var(--text-muted);
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.12);
}

/* Toasts: warm tone so they don't shout. */
[data-theme="paper"] .toast {
  background: var(--text-heading);
  color: var(--bg-page);
}

[data-theme="paper"] .app-footer {
  background: var(--bg-card-tint);
  border-top: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-style: italic;
}

/* ── Calendar transformation (the centerpiece of v1.3.26) ───────────── */

/* v1.3.28: month header styling is now theme-agnostic — see the base
   .calendar-month-label rule. Paper just adds the heading text color. */
[data-theme="paper"] .calendar-month-label {
  color: var(--text-heading);
}
[data-theme="paper"] .calendar-nav {
  align-items: baseline;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-soft);
}

/* Grid: hairline warm-gray lines on a cream page, no rounded outer corners
   (it should feel like a printed page, not a card). */
[data-theme="paper"] .calendar-grid {
  background: var(--border-line);
  gap: 1px;
  border: 1px solid var(--border-line);
  border-radius: 0;
}
[data-theme="paper"] .calendar-day-header {
  background: var(--bg-page);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: var(--space-2) 0 6px;
  border-bottom: 1px solid var(--border-line);
}
[data-theme="paper"] .calendar-day {
  background: var(--bg-card);
  gap: 3px;
}
[data-theme="paper"] .calendar-day:hover { background: var(--bg-card-tint); }
[data-theme="paper"] .calendar-day.other-month { background: var(--bg-card-tint); }
[data-theme="paper"] .calendar-day.other-month .day-num { color: var(--color-text-faint); }

/* v1.3.28: paper just tints the day-num color — size/weight/position are
   theme-agnostic on the base .day-num rule. */
[data-theme="paper"] .day-num {
  color: var(--text-muted);
}
/* Paper "today" ring uses the coral accent. Shape (outline ring) is set
   by the base .calendar-day.today rule and shared across themes. */
[data-theme="paper"] .calendar-day.today {
  outline-color: var(--accent-coral);
}
[data-theme="paper"] .calendar-day.today .day-num {
  color: var(--accent-coral);
}

/* Events: cream chip body, dark warm-brown text, colored left border keeps
   the category recognizable without the harsh saturated chip backgrounds. */
[data-theme="paper"] .event-chip {
  background: var(--bg-card-tint) !important;
  color: var(--text-body) !important;
  border-left: 4px solid var(--color-primary);
  border-radius: 2px;
  font-size: 11px;
  font-weight: 400;
  padding: 2px 6px;
  letter-spacing: 0.01em;
}
[data-theme="paper"] .event-chip-cont {
  opacity: 0.85;
  font-style: italic;
}

/* v1.3.28: holiday label at the bottom of the cell — italic serif planner
   style in BOTH themes (lowercase, muted).
   v1.3.30: font-size doubled (Paul: too small to read across the room when
   printed). Stacks up to 3 labels (holiday + family-date birthdays/anniv);
   line-height tightened so they still fit a cell. */
.cal-holiday {
  position: absolute;
  bottom: 4px;
  left: 8px;
  right: 8px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.05;
  text-transform: lowercase;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  letter-spacing: 0.01em;
}
/* v1.3.30: family-date labels share the holiday style. When stacked with a
   holiday, they sit above it (absolute → relative inside a stack wrapper). */
.cal-holiday-stack {
  position: absolute;
  bottom: 4px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}
.cal-holiday-stack .cal-holiday {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
}
.cal-holiday-more {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.05;
  text-align: center;
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: underline dotted;
}

/* Notes + Priorities placeholders above the month grid (paper-only). */
.cal-planner-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (max-width: 700px) { .cal-planner-strip { grid-template-columns: 1fr; } }
.cal-notes, .cal-priorities {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 2px;
  padding: var(--space-3) var(--space-4);
  min-height: 130px;
  box-shadow: var(--shadow-paper);
}
.cal-notes {
  background-image:
    radial-gradient(circle at 0.5px 0.5px, rgba(139, 165, 184, 0.35) 0.5px, transparent 0.5px);
  background-size: 14px 14px;
  background-position: 12px 32px;
}
.cal-planner-strip .planner-label {
  display: block;
  margin-bottom: var(--space-2);
}
.cal-priority-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-muted);
}
.cal-priority-row:last-child { border-bottom: none; }
.cal-priority-num { color: var(--text-heading); width: 22px; flex: 0 0 22px; }

/* v1.3.31: live Priorities widget controls inside .cal-priority-row */
.cal-priorities-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--space-2);
}
.cal-priorities-count { font-size: var(--text-xs); color: var(--text-muted); }
.cal-priorities-count select {
  margin-left: 4px; font-size: var(--text-xs);
  padding: 2px 4px; border: 1px solid var(--color-border);
  background: var(--bg-card);
}
.cal-priorities-list { min-height: 60px; }
.cal-priority-icon { color: var(--text-muted); font-size: 0.8rem; width: 14px; flex: 0 0 14px; }
.cal-priority-icon-spacer { width: 14px; flex: 0 0 14px; }
.cal-priority-title {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: none; border-bottom: 1px dashed transparent;
  font: inherit; color: var(--text-heading);
  padding: 2px 4px;
}
.cal-priority-title:hover, .cal-priority-title:focus {
  border-bottom: 1px dashed var(--color-border); outline: none;
}
.cal-priority-date {
  font-size: var(--text-xs); padding: 2px 4px;
  border: 1px solid var(--color-border); background: var(--bg-card);
}
.cal-priority-date-spacer { width: 110px; flex: 0 0 110px; }
.cal-priority-tier {
  font-size: var(--text-xs); padding: 2px 4px;
  border: 1px solid var(--color-border); background: var(--bg-card);
}
.cal-priority-tier-spacer { width: 80px; flex: 0 0 80px; }
.cal-priority-tier.tier-urgent { color: #B5202A; font-weight: 600; }
.cal-priority-tier.tier-high   { color: #da7101; }
.cal-priority-tier.tier-low    { color: var(--text-muted); }
.cal-priorities-add {
  display: flex; gap: var(--space-2); margin-top: var(--space-2);
  align-items: center;
}
.cal-priority-input { font-size: var(--text-xs); padding: 4px 6px; }
.cal-notes-textarea {
  width: 100%; min-height: 90px; resize: vertical;
  background: transparent; border: 1px dashed transparent;
  /* v1.3.38: Notes panel adopts the planner heading font — italic Cormorant
     Garamond in warm ink — so jotted notes feel hand-written, not typed. */
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 14pt;
  line-height: 1.5;
  color: var(--cal-label-ink, var(--text-heading));
  caret-color: var(--cal-label-ink, var(--text-heading));
  padding: 4px 6px;
}
.cal-notes-textarea:hover, .cal-notes-textarea:focus {
  border-color: var(--color-border); outline: none;
}
.cal-notes-textarea::placeholder {
  color: var(--cal-label-ink-light, var(--color-text-muted));
  opacity: 0.7;
  font-style: italic;
}
.cal-notes-status { font-size: 0.7rem; color: var(--text-muted); }

/* v1.3.31: Tasks page enhancements — tier chip, inline edit, milestones */
.tier-chip {
  display: inline-block; padding: 1px 6px;
  font-size: 0.65rem; text-transform: uppercase;
  border: 1px solid var(--color-border); border-radius: 2px;
  background: var(--bg-card);
}
.tier-chip.tier-urgent { color: #B5202A; border-color: #B5202A; }
.tier-chip.tier-high   { color: #da7101; border-color: #da7101; }
.tier-chip.tier-low    { color: var(--text-muted); }
.task-progress {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 4px 0;
}
.task-progress-bar {
  flex: 1 1 auto; height: 6px; background: var(--border-soft);
  border-radius: 3px; overflow: hidden;
}
.task-progress-fill {
  height: 100%; background: var(--color-accent, #437a22);
  transition: width 0.2s;
}
.task-progress-label { font-size: 0.7rem; color: var(--text-muted); }
.task-inline-edit {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  margin: 4px 0; font-size: var(--text-xs);
}
.task-inline-label {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-muted);
}
.task-inline-input {
  font: inherit; padding: 2px 4px;
  border: 1px solid var(--color-border); background: var(--bg-card);
  width: 80px;
}
.task-milestones {
  margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px dashed var(--border-soft);
}
.task-milestone-row {
  display: flex; gap: var(--space-2); align-items: center;
  padding: 2px 0;
}
.task-milestone-title {
  flex: 1; background: transparent; border: none; border-bottom: 1px dashed transparent;
  font: inherit; padding: 2px 4px; color: var(--text-heading);
}
.task-milestone-title:hover, .task-milestone-title:focus {
  border-bottom-color: var(--color-border); outline: none;
}
.task-milestone-add {
  display: flex; gap: var(--space-2); margin-top: var(--space-2);
  align-items: center;
}
.task-milestone-input { font-size: var(--text-xs); padding: 4px 6px; }

/* Calendar layout sidebar (Calendars toggles + files) gets paper treatment. */
[data-theme="paper"] .events-sidebar .event-row {
  border-color: var(--border-soft);
  background: var(--bg-card);
}

/* Theme toggle row in Settings */
.theme-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  min-width: 140px;
  transition: border-color var(--transition), background var(--transition);
}
.theme-swatch.active {
  border-color: var(--accent-coral);
  box-shadow: 0 0 0 2px rgba(232, 165, 152, 0.25);
}
.theme-swatch-preview {
  width: 88px;
  height: 56px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}
.theme-swatch-preview.paper {
  background: linear-gradient(135deg, #fdfaf5 0%, #f9f4ec 100%);
  border-color: #d4cfc4;
}
.theme-swatch-preview.dark {
  background: linear-gradient(135deg, #0A1228 0%, #15224A 100%);
  border-color: #23315F;
}
.theme-swatch-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-text);
}

/* Mobile (375px) — keep cells legible, drop the planner strip below the grid.
   v1.3.28: rules made theme-agnostic; both Paper and Dark get the planner feel. */
@media (max-width: 480px) {
  .calendar-month-label { font-size: 1.75rem; min-width: 0; }
  .calendar-day { min-height: 86px; padding: 18px 5px 18px; }
  .day-num { font-size: 11px; top: 4px; left: 6px; }
  [data-theme="paper"] .event-chip { font-size: 10px; padding: 1px 4px; }
  .cal-holiday { font-size: 19px; line-height: 1.0; }
  .cal-holiday-more { font-size: 12px; }
  [data-theme="paper"] .calendar-day-header { font-size: 9px; letter-spacing: 0.16em; }
  .cal-planner-strip { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Print stylesheet — "Print this month for fridge" produces a single
   landscape 8.5×11 page with one header, a grid that fills the sheet,
   wrapping family-date/holiday labels, and the footer on the same page.
   v1.3.35: rewritten for one-page landscape output.
   ─────────────────────────────────────────────────────────────────────── */
/* v1.3.55: Universal print preamble — applies to every page. Hides app
   chrome and forces the Paper palette regardless of [data-theme="dark"], so
   Tiffany never gets a dark-mode printout. Page-specific @media print blocks
   below scope themselves with `body.page-<view>`. */
@media print {
  /* Force light palette + white background even if dark theme is active. */
  html, html[data-theme="dark"],
  body, body[data-theme="dark"] {
    background: #fff !important;
    background-image: none !important;
    color: #2a2520 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Hide app chrome on every page — nav, topbar, footer, transient UI. */
  .sidebar, .topbar, .app-footer, .toast-container, .modal-overlay,
  .notif-panel, .hamburger, .topbar-actions {
    display: none !important;
  }
  .main-wrapper { margin-left: 0 !important; padding: 0 !important; }
  .page-content  { padding: 0 !important; margin: 0 !important; }
}

/* v1.3.57: Calendar landscape @page is injected at print time by
   printCalendarMonth() in app.js — named @page rules proved unreliable
   across browsers. Other print views (Family Directory, Home Inventory,
   Meals shopping lists) keep the browser default (portrait Letter). */

@media print {
  body.page-calendar { display: block !important; margin: 0 !important; padding: 0 !important; font-size: 10pt; }

  /* Hide calendar-specific chrome and the side/right columns of cal-layout. */
  body.page-calendar .section-header,
  body.page-calendar .calendar-nav,
  body.page-calendar .cal-planner-strip,
  body.page-calendar .cal-layout > aside,
  body.page-calendar .cal-layout > div:last-child {
    display: none !important;
  }

  /* v1.3.56: Hide noisy interactive overlays in print. The fridge-printed
     planner should show the month skeleton + family-dates + holidays, not
     household clutter. Trips, meals, bills, maintenance overlays are all
     suppressed (still visible on-screen). */
  body.page-calendar .vac-cal-banner,
  body.page-calendar .cal-meals-overlay,
  body.page-calendar .cal-bill-overlay,
  body.page-calendar .cal-maint-overlay {
    display: none !important;
  }

  /* Collapse the 3-column calendar layout down to just the grid column. */
  body.page-calendar .cal-layout {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }
  body.page-calendar .cal-layout > div:nth-child(2) { width: 100% !important; }

  /* Print layout: calendar grid on the left, a tall ruled "Notes" strip on
     the right. The decal-wrap becomes a flex row; the decal overlay layer is
     suppressed so it doesn't steal width. */
  body.page-calendar .cal-decal-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0.18in !important;
    width: 100% !important;
  }
  body.page-calendar .cal-decal-layer { display: none !important; }
  body.page-calendar .cal-grid-print { flex: 0 0 80%; }

  /* Single header: centered crest + italic month label.
     page-break-after: avoid keeps the grid welded to the header. */
  body.page-calendar .print-header {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 14pt;
    margin: 0 0 4pt;
    page-break-after: avoid;
    break-after: avoid;
  }
  body.page-calendar .print-header img { height: 0.42in; width: auto; }
  body.page-calendar .print-header .calendar-month-label {
    font-size: 18pt;
    min-width: 0;
    color: #2a2520 !important;
    margin: 0;
  }

  /* v1.3.58: Switched from gap-as-borders (the light-gray grid background
     showing through 0.5pt gaps) to explicit borders on each cell. Most
     consumer printers + browser print pipelines aggressively lighten pale
     grays, so #c8c4ba gaps printed as nearly-white and the internal grid
     lines vanished. Cells now carry their own borders in #5a4a3a (the warm
     ink color), and print-color-adjust: exact tells the browser to keep the
     declared colors instead of "optimizing" them.

     Sizing: 8.5x11 landscape, 0.35in margins -> printable 10.3 x 7.8in.
     Print-header ~0.6in, footer ~0.35in clearance, dow-header 0.24in inside
     the grid. Grid container capped at 6.8in (dow + 6 day-rows). That
     leaves 6.56in / 6 ≈ 1.09in per day-row — tight but enough for a day
     number + 2 stacked holiday/family-date lines at 6.5pt. */
  body.page-calendar .calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    /* Default 6 day-rows. A month that only needs 5 (data-rows="5") gets a
       5-row template below, so the empty trailing row is gone and the five
       used rows each grow to fill the same 6.8in of page height. Columns are
       always 7 — never collapsed. */
    grid-template-rows: 0.24in repeat(6, minmax(0, 1fr)) !important;
    grid-auto-rows: 0 !important;
    height: 6.8in;
    max-height: 6.8in;
    border: 0.75pt solid #5a4a3a !important;
    background: #fff !important;
    gap: 0 !important;
    border-radius: 0;
    width: 100%;
    page-break-inside: avoid;
    break-inside: avoid;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* Months that only need 5 rows: drop the empty 6th row and let the five
     used rows split the full grid height. The render path emits exactly
     5*7 day cells for these months, so 5 rows fits with nothing clipped. */
  body.page-calendar .calendar-grid[data-rows="5"] {
    grid-template-rows: 0.24in repeat(5, minmax(0, 1fr)) !important;
  }
  body.page-calendar .calendar-day-header {
    background: #f4efe6 !important;
    color: #6f5942 !important;
    font-size: 7pt;
    padding: 1pt 0;
    letter-spacing: 0.08em;
    line-height: 1;
    border-right: 0.5pt solid #5a4a3a !important;
    border-bottom: 0.75pt solid #5a4a3a !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* Drop the trailing vertical line on Saturday so we don't double up with
     the grid's outer border. */
  body.page-calendar .calendar-day-header:nth-child(7n) { border-right: 0 !important; }
  body.page-calendar .calendar-day {
    background: #fff !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 11pt 3pt 3pt !important;
    page-break-inside: avoid;
    break-inside: avoid;
    overflow: hidden;
    position: relative;
    border-right: 0.5pt solid #5a4a3a !important;
    border-bottom: 0.5pt solid #5a4a3a !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* Faint handwriting rules inside each in-month cell. A ::after layer carries
     a repeating-linear-gradient of thin light-gray lines, sitting below the
     day number (top inset) and above the holiday/family-date stack (bottom
     inset). 0.22in line spacing yields ~3-4 lines in a 5- or 6-row cell.
     Only in-month cells get rules — other-month spill stays blank. */
  body.page-calendar .calendar-day:not(.other-month)::after {
    content: "";
    position: absolute;
    left: 3pt;
    right: 3pt;
    top: 13pt;
    bottom: 11pt;
    pointer-events: none;
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(0.22in - 0.5pt),
      #cfcabf calc(0.22in - 0.5pt),
      #cfcabf 0.22in
    );
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* Keep real content (chips, holiday stack, day number) above the rules. */
  body.page-calendar .calendar-day > * { position: relative; z-index: 1; }
  /* The day-of-week header row occupies the first 7 grid items; the day
     cells follow. Within the 7-column grid, every 7th day cell (Saturday,
     i.e. items 14, 21, 28, ...) should drop its right border, and the last
     row of day cells should drop its bottom border, so the outer frame
     isn't doubled. Use :nth-child math: cells start at index 8 (after the
     7 header items). */
  body.page-calendar .calendar-day:nth-child(7n+7) { border-right: 0 !important; }
  body.page-calendar .calendar-day:nth-last-child(-n+7) { border-bottom: 0 !important; }
  body.page-calendar .calendar-day.today {
    background: #fff !important;
    outline: 1pt solid #2a2520;
    outline-offset: -1pt;
  }
  body.page-calendar .calendar-day.other-month { background: #fafaf7 !important; }
  body.page-calendar .day-num {
    color: #2a2520 !important;
    opacity: 0.75;
    font-size: 7pt;
    top: 2pt;
    left: 3pt;
  }
  body.page-calendar .event-chip {
    background: #f9f4ec !important;
    color: #2a2520 !important;
    border-left: 1.5pt solid #2a2520 !important;
    font-size: 6.5pt;
    padding: 0 2pt;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* CRITICAL: family-date + holiday labels must wrap, not truncate. */
  body.page-calendar .cal-holiday,
  body.page-calendar .cal-holiday-stack .cal-holiday {
    color: #6f5942 !important;
    font-style: italic;
    font-size: 6.5pt !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  body.page-calendar .cal-holiday-stack {
    position: absolute;
    bottom: 2pt;
    left: 3pt;
    right: 3pt;
  }
  /* The "+N more" pill makes no sense in print — hide; the page is the index. */
  body.page-calendar .cal-holiday-more { display: none !important; }
  /* The "today" tag is a live screen cue; printed sheets are static records. */
  body.page-calendar .cal-today-tag { display: none !important; }

  /* Print-only Notes strip: full-grid-height ruled paper to the right of the
     calendar. Header matches the cell day-of-week band; the body is the same
     light-gray ruling as the cells, drawn top-to-bottom. */
  body.page-calendar .cal-print-notes {
    display: flex !important;
    flex-direction: column;
    flex: 0 0 18%;
    height: 6.8in;
    border: 0.75pt solid #5a4a3a !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body.page-calendar .cal-print-notes__head {
    background: #f4efe6 !important;
    color: #6f5942 !important;
    font-size: 7pt;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 1pt 0;
    height: 0.24in;
    line-height: 0.24in;
    border-bottom: 0.75pt solid #5a4a3a !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body.page-calendar .cal-print-notes__lines {
    flex: 1 1 auto;
    margin: 4pt;
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(0.26in - 0.5pt),
      #cfcabf calc(0.26in - 0.5pt),
      #cfcabf 0.26in
    );
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Footer pinned to the bottom of the same page. */
  body.page-calendar .print-footer {
    display: block !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0.08in;
    text-align: center;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    color: #6f5942;
    font-size: 7pt;
  }
}
.print-header, .print-footer { display: none; }
/* The calendar's print-only Notes strip is hidden on screen. */
.cal-print-notes { display: none; }

/* Dark-theme italic-serif polish for non-calendar headings. The calendar
   month label is now theme-agnostic (see .calendar-month-label base rule). */
[data-theme="dark"] .section-title,
[data-theme="dark"] .topbar-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}

/* ── v1.3.29: Budget tabs + per-user template + monthly view ────────────── */
.budget-tab-rail {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-border, #d9cdb8);
  margin-bottom: var(--space-3, 12px);
}
.budget-tab {
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--color-text-muted, #6f5942);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.budget-tab:hover { color: var(--color-text, #2a2520); }
.budget-tab.active {
  color: var(--color-accent-dark, #01696f);
  border-bottom-color: var(--color-accent-dark, #01696f);
  font-weight: 600;
}
.budget-person-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-3, 12px);
}
.budget-person-chip {
  background: var(--bg-card-tint, #f9f4ec);
  border: 1px solid var(--color-border, #d9cdb8);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--color-text-muted, #6f5942);
}
.budget-person-chip.active {
  background: var(--color-accent-dark, #01696f);
  color: #fff;
  border-color: var(--color-accent-dark, #01696f);
}
.budget-tab-body { margin-top: var(--space-2, 8px); }
.bm-help {
  color: var(--color-text-muted, #6f5942);
  font-size: 0.9rem;
  margin-bottom: var(--space-3, 12px);
}
.bm-totals {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--bg-card-tint, #f9f4ec);
  border-radius: 6px;
  margin: 12px 0;
}
.bm-totals > div { display: flex; flex-direction: column; gap: 2px; }
.bm-totals-label {
  font-size: 0.8rem;
  color: var(--color-text-muted, #6f5942);
}
.bm-totals strong {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.bm-totals strong.under { color: #437a22; }
.bm-totals strong.over  { color: #B5202A; }
.bm-table { display: flex; flex-direction: column; gap: 2px; }
.bm-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border, #d9cdb8);
  background: var(--bg-card, #fff);
}
.bm-row.bm-head {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #6f5942);
  background: transparent;
  border-bottom: 2px solid var(--color-border, #d9cdb8);
}
.bm-cat { display: flex; align-items: center; gap: 8px; }
.bm-swatch {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem; color: #fff;
}
.bm-name { cursor: pointer; }
.bm-name:hover { text-decoration: underline; }
.bm-planned, .bm-actual {
  font-variant-numeric: tabular-nums lining-nums;
  cursor: pointer;
}
.bm-planned:hover, .bm-actual:hover { text-decoration: underline; }
.bm-remaining {
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
}
.bm-remaining.under { color: #437a22; }
.bm-remaining.over  { color: #B5202A; }
.bm-notes {
  font-size: 0.85rem;
  color: var(--color-text-muted, #6f5942);
  cursor: pointer;
}
.bm-notes:hover { text-decoration: underline; }
.bm-actions { text-align: right; }
.bm-add-row { margin-top: 12px; }

/* ── v1.3.38: two-line anniversary labels ──────────────────────────────── */
/* Birthdays stay single-line ("bill   78ᵗʰ"); anniversaries get the name on
   one row and "N happy years" on the next so both fit without truncation. */
.cal-holiday.anniversary {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  white-space: normal;
}
.cal-holiday.anniversary .anniv-line-1,
.cal-holiday.anniversary .anniv-line-2 {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.cal-holiday.anniversary .anniv-line-2 {
  font-size: 0.85em;
  opacity: 0.9;
}
@media print {
  body.page-calendar .cal-holiday.anniversary .anniv-line-1,
  body.page-calendar .cal-holiday.anniversary .anniv-line-2 { font-size: inherit; }
}

/* ── v1.3.37: ordinal age superscript on family-date labels ─────────────── */
/* Birthdays render as e.g. "tiffany   46<sup>th</sup>". Make the suffix feel
   planner-y (small, italic, soft) rather than pedantic. Inherits color from
   the parent label so it stays muted in both Paper and dark themes. */
.cal-holiday sup {
  font-size: 0.6em;
  vertical-align: super;
  font-style: italic;
  opacity: 0.75;
  margin-left: 1px;
  line-height: 0;
}

/* ── v1.3.37: sticky-note tooltip ───────────────────────────────────────── */
/* A planner sticky-note styled tooltip surfaced on hover, long-press, or
   keyboard focus of any element with `data-tooltip="..."`. Cream/floral feel,
   italic serif body, soft drop shadow, generous line-height. Positioning is
   handled in JS (above/below auto-flip). */
.has-tooltip {
  cursor: help;
  outline: none;
}
.has-tooltip:focus-visible {
  box-shadow: 0 0 0 2px rgba(139, 90, 43, 0.45);
  border-radius: 3px;
}
.sticky-tooltip {
  position: absolute;
  z-index: 9999;
  max-width: 280px;
  padding: 10px 14px;
  background: #fff8e7;
  color: #4a3a26;
  border: 1px solid #e6d6b6;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(60, 40, 10, 0.18), 0 2px 4px rgba(60, 40, 10, 0.10);
  font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  pointer-events: none;
  transform: rotate(-0.5deg);
}
[data-theme="dark"] .sticky-tooltip {
  background: #f5ebd3;
  color: #3a2c1a;
  border-color: #d6c094;
}

/* ───────────────────────────────────────────────────────────────────────────
   v1.3.42 — Hub-wide typography cohesiveness (Paper theme only)

   Before: page titles used Cormorant Garamond italic but every other label
   (sidebar sections, nav items, tabs, filter pills, kanban headers, stat-card
   labels, day-of-week headers, quick-link arrows, family sub-labels) was
   still Inter bold or ALL-CAPS small. The page read as "planner header on
   top, tech-app chrome below." This block rewrites those small labels in
   italic Cormorant Garamond Title Case so the Tiffany's Happy Planner voice
   carries through every page.

   Scope: Paper theme only — dark theme keeps the existing Inter chrome.
   No font size changes; same size, different family/style/case.
   Dense data (table numerics, form inputs, big stat numbers, button text
   inside solid buttons) stays Inter for legibility.
   ─────────────────────────────────────────────────────────────────────── */

/* Stat-card labels (Dashboard KPIs + Budget KPIs + BMC stats):
   "EVENTS (NEXT 7 DAYS)" → "Events (Next 7 Days)" in italic serif. */
[data-theme="paper"] .kpi-label,
[data-theme="paper"] .budget-kpi-label,
[data-theme="paper"] .bmc-stat-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  color: var(--text-muted, var(--color-text-muted));
}

/* Sidebar section labels: MAIN / HOUSEHOLD → italic serif Title Case.
   The base rule already inherits a max-uppercase letterspaced style; we
   override here (more specific) for the Paper theme. */
[data-theme="paper"] .sidebar-section-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  color: var(--text-muted, var(--color-text-muted));
}

/* Sidebar nav item labels + theme-toggle label — italic serif, normal-case.
   The hosting button keeps its layout; only the inner span text is restyled. */
[data-theme="paper"] .nav-item span,
[data-theme="paper"] .theme-toggle span {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  font-size: 1rem;
}

/* Tab labels — Tasks "Board / Templates", Payments "Summary / History". */
[data-theme="paper"] .subtab-btn {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  font-size: 1rem;
}

/* Budget tabs (This Month / Template / Activity). */
[data-theme="paper"] .budget-tab {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
}

/* Filter pills on Tasks page (All / To Do / In Progress / Done / Overdue).
   Pill chrome (border, radius, hover wash) is preserved — only typography
   shifts to italic serif. */
[data-theme="paper"] .filter-btn {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  font-size: 0.9rem;
}

/* Kanban column headers — To Do / In Progress / Done. */
[data-theme="paper"] .task-col-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  font-size: 1.15rem;
  color: var(--text-heading, var(--color-text));
}

/* Day-of-week headers on the calendar grid: SUN MON TUE … → Sun Mon Tue …
   Paper-theme rule already exists at line ~1771 with uppercase + heavy
   letterspacing; this rule (later in the cascade) wins and replaces it.
   Mobile override below also retunes. */
[data-theme="paper"] .calendar-day-header {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  color: var(--text-muted, var(--color-text-muted));
}
@media (max-width: 480px) {
  [data-theme="paper"] .calendar-day-header {
    font-size: 0.75rem;
    letter-spacing: 0;
  }
}

/* Dashboard quick-link tiles ("Calendar", "Tasks", "Budget", "Family"…)
   and the arrow-button links inside stat-card subs / dash-item-meta
   ("View calendar →", "Tasks →", "Add one →"). Keep the tile chrome,
   restyle the text. */
[data-theme="paper"] .quick-link-tile {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0;
}
[data-theme="paper"] .kpi-sub .btn-ghost,
[data-theme="paper"] .dash-item-meta .btn-ghost {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  font-size: 0.9rem;
}

/* Family Members card sub-labels ("Child · Aug 2", "Admin · Parent" etc.)
   The Family page renders these as .dash-item-meta inside .family-card. */
[data-theme="paper"] .family-card .dash-item-meta {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0;
}

/* Notes panel: "Saved May 18" timestamp picks up the same italic serif as
   the typing area, so the planner voice is consistent within the strip. */
[data-theme="paper"] .cal-notes-status {
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: 0;
}

/* ── v1.3.44: Vacation Planning workspace ──────────────────────────────────
   Tiffany's Happy-Planner trip-ideas page. Italic-serif section headers and
   labels, Inter for dense data and buttons, soft cream surfaces with warm-gray
   gridlines. All inline-editable; no modal-driven flow except "New Trip". */

.vac-section { margin-top: var(--space-6); }
.vac-section-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--text-heading);
  letter-spacing: 0.005em;
  margin-bottom: var(--space-3);
}
.vac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}
.vac-empty {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-muted);
  padding: var(--space-3) 0;
}
.vac-empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  margin-top: var(--space-6);
}
.vac-empty-seahorse {
  width: 64px; height: 64px; margin: 0 auto var(--space-3);
  opacity: 0.6;
}
.vac-empty-headline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--text-heading);
}
.vac-empty-sub {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.vac-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-paper);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex; flex-direction: column;
}
.vac-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-paper-lg);
}
.vac-card-cover {
  height: 140px;
  background: var(--bg-card-tint) center/cover no-repeat;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.vac-card-placeholder {
  width: 48px; height: 48px; opacity: 0.5;
}
.vac-status-pill {
  position: absolute; top: 8px; right: 8px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-heading);
  border: 1px solid var(--border-soft);
}
.vac-status-idea       { background: rgba(255, 255, 255, 0.92); color: var(--text-muted); }
.vac-status-planning   { background: rgba(155, 176, 152, 0.85); color: #2a2520; }
.vac-status-booked     { background: rgba(212, 175, 55, 0.88);  color: #2a2520; }
.vac-status-upcoming   { background: rgba(139, 165, 184, 0.92); color: #1e2a3a; }
.vac-status-past       { background: rgba(176, 165, 148, 0.88); color: #2a2520; }
.vac-status-cancelled  { background: rgba(232, 165, 152, 0.85); color: #2a2520; }

.vac-card-body {
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: 4px;
}
.vac-card-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text-heading);
  margin: 0;
}
.vac-card-dest {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-body);
}
.vac-card-dates,
.vac-card-countdown,
.vac-card-budget {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Detail page */
.vac-back-row {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.vac-trip-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--text-heading);
  letter-spacing: 0.005em;
  outline: none;
  padding: 2px 4px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
}
.vac-trip-title:hover,
.vac-trip-title:focus { background: var(--bg-card-tint); }

.vac-trip-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}
.vac-meta-cell {
  display: flex; flex-direction: column; gap: 2px;
}
.vac-meta-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.vac-meta-input,
.vac-meta-static {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-body);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--border-soft);
  padding: 4px 2px;
  outline: none;
  border-radius: 0;
}
.vac-meta-input:hover,
.vac-meta-input:focus { border-bottom-color: var(--color-primary); background: var(--bg-card-tint); }

.vac-cover-area {
  margin: var(--space-4) 0 var(--space-3);
  display: flex; flex-direction: column;
  gap: 8px;
}
.vac-cover {
  height: 200px;
  background: var(--bg-card-tint);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.vac-cover.vac-cover-dragover {
  outline: 2px dashed var(--color-primary);
  outline-offset: -6px;
}
.vac-cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: var(--bg-card-tint);
}
.vac-cover-placeholder {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px; opacity: 0.45;
}
.vac-cover-controls {
  display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
}
.vac-cover-uploading {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.vac-cover-url {
  width: 100%; max-width: 100%;
  font-family: var(--font-body);
  font-size: 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  box-sizing: border-box;
}

.vac-tabs { margin-top: var(--space-3); }
.vac-tab-body { margin-top: var(--space-4); }

.vac-card-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.vac-panel-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
}
.vac-faint {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-muted);
}
.vac-notes {
  width: 100%; min-height: 120px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--bg-card-tint);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  resize: vertical;
}

.vac-overview-grid,
.vac-packing-grid,
.vac-budget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}

.vac-must-see-list,
.vac-checklist {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.vac-must-see-list li,
.vac-checklist li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.vac-checklist .vac-cell-input { flex: 1; }

/* v1.5.23 — Vacation Lists tab */
.vac-lists-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.vac-lists-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vac-lists-tabs { margin-bottom: 12px; }
.vac-lists-person-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}
.vac-list-panel { margin-top: 0; }
.vac-list-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.vac-list-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--border-soft);
  border-radius: 3px;
  overflow: hidden;
}
.vac-list-progress-fill {
  height: 100%;
  background: var(--color-accent, #01696f);
  transition: width 200ms ease;
}
.vac-list-items .vac-list-item--checked .vac-list-item-text {
  text-decoration: line-through;
  color: var(--color-text-muted);
}
.vac-list-item input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.5; }

.vac-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.88rem;
}
.vac-table th {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  text-align: left;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--border-line);
  padding: 6px 8px;
}
.vac-table td {
  border-bottom: 1px solid var(--border-soft);
  padding: 4px 8px;
  vertical-align: middle;
}
.vac-num { text-align: right; }
.vac-cell-input {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--border-soft);
  padding: 4px 6px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-body);
  outline: none;
  border-radius: 0;
}
.vac-cell-input:hover,
.vac-cell-input:focus { border-bottom-color: var(--color-primary); background: var(--bg-card-tint); }
.vac-cell-narrow { max-width: 140px; }
.vac-cell-num { max-width: 100px; text-align: right; }

.vac-inline-add {
  display: flex; gap: var(--space-2);
  margin-top: var(--space-2);
  align-items: center;
}
.vac-inline-add .form-input { flex: 1; }
.vac-link-add {
  display: grid;
  grid-template-columns: 140px 1fr 1fr auto;
  gap: var(--space-2);
}
.vac-link-open {
  margin-left: 6px;
  color: var(--color-primary);
  font-size: 0.85rem;
  text-decoration: none;
}

/* Calendar integration — trip banner row in cell. Sits above event chips,
   below the date number. Italic serif, warm gold-tinted background. */
.vac-cal-banner {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.72rem;
  color: #2a2520;
  background: rgba(212, 175, 55, 0.28);
  border-left: 3px solid var(--accent-gold, #d4af37);
  padding: 1px 6px;
  margin: 1px 0;
  border-radius: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.vac-cal-banner-cont {
  background: rgba(212, 175, 55, 0.18);
  color: var(--text-muted);
}
.vac-cal-banner:hover { background: rgba(212, 175, 55, 0.42); }

/* ── v1.3.43: Homeschool & College module ────────────────────────────────── */
.school-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.school-card { padding: var(--space-4); transition: transform 120ms ease, box-shadow 120ms ease; }
.school-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.school-subtab-row .subtab-btn { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; }

.school-schedule-grid {
  display: grid;
  grid-template-columns: 64px repeat(5, 1fr);
  gap: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  overflow-x: auto;
}
.school-time-col, .school-day-col { min-width: 0; }
.school-day-header {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-muted);
  padding: 4px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 0.95rem;
}
.school-time-label {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-right: 6px;
  border-top: 1px dashed var(--color-divider);
}
.school-day-slots {
  background: repeating-linear-gradient(
    to bottom,
    var(--color-surface) 0,
    var(--color-surface) 27px,
    var(--color-divider) 27px,
    var(--color-divider) 28px
  );
  border-left: 1px solid var(--color-divider);
}
.school-schedule-block {
  position: absolute;
  left: 2px;
  right: 2px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--color-text);
  overflow: hidden;
}
.school-block-title { font-weight: 600; font-size: 0.85rem; }
.school-block-meta { color: var(--color-text-muted); font-size: 0.72rem; }

.school-course-row { gap: var(--space-2); align-items: center; }
.form-select-sm, .form-input-sm { padding: 4px 8px; font-size: 0.85rem; height: auto; }

/* ── v1.3.43: planner-spread dashboard ───────────────────────────────────── */
/* The dashboard is the first page Tiffany sees when she opens the Hub. We
   treat it like the day's planner page: cream paper, warm gridlines, italic
   serif headings; data rows in Inter for legibility. */

.planner-banner {
  margin-bottom: var(--space-6);
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
  text-align: center;
}
.planner-banner__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.planner-banner__date {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2.5vw, 3.4rem);
  color: var(--text-heading);
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.planner-banner__verse {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  color: var(--text-muted);
  line-height: 1.5;
}
.planner-banner__verse-cite {
  display: inline-block;
  margin-left: var(--space-2);
  color: var(--color-accent-dark);
  font-size: 0.92em;
}
.planner-banner__motto {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.1rem);
  color: var(--color-accent-dark);
  letter-spacing: 0.01em;
  line-height: 1.4;
  margin-top: calc(-1 * var(--space-1));
}
/* v1.3.81 — Season badge on the dashboard banner. Small italic small-caps
   line below the verse — names the person being celebrated this month or, on
   Feb 23, quietly memorializes Mabry (the cherub is baked into the badge
   text on the server side via the centralized MEMORIAL_SYMBOL). */
.planner-banner__season-badge {
  font-family: var(--font-serif);
  font-style: italic;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  color: var(--color-accent-dark);
  margin-top: var(--space-1);
}
.planner-banner__season-badge--memorial {
  color: var(--text-muted);
}
[data-theme="dark"] .planner-banner__season-badge { color: var(--color-accent); }
[data-theme="dark"] .planner-banner__season-badge--memorial { color: var(--color-text-muted); }

[data-theme="dark"] .planner-banner__date { color: var(--color-text); }
[data-theme="dark"] .planner-banner__verse { color: var(--color-text-muted); }
[data-theme="dark"] .planner-banner__verse-cite { color: var(--color-accent); }
[data-theme="dark"] .planner-banner__motto { color: var(--color-accent); }

/* v1.3.77 — reveal-day welcome banner for Tiffany (2026-05-27 only).
   A quiet paper note from Paul. Cream background, warm ink, italic serif
   headline, regular serif body. Centered, max ~640px, dismissable. */
.reveal-banner {
  position: relative;
  max-width: 640px;
  margin: 0 auto var(--space-6);
  padding: var(--space-7) var(--space-6) var(--space-6);
  background: #fbf3df;
  border: 1px solid #e8d8a9;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 #f3e6c0 inset, 0 6px 22px -14px rgba(111, 89, 66, 0.35);
  text-align: center;
  color: #4a3a2c;
}
.reveal-banner__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: #a89172;
  cursor: pointer;
  border-radius: 50%;
  line-height: 1;
}
.reveal-banner__close:hover { background: rgba(111, 89, 66, 0.08); color: #6f5942; }
.reveal-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.reveal-banner__crest {
  width: 84px;
  height: 84px;
  object-fit: contain;
  margin-bottom: var(--space-1);
  opacity: 0.95;
}
.reveal-banner__headline {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem);
  color: #4a3a2c;
  letter-spacing: 0.01em;
  line-height: 1.15;
}
.reveal-banner__body {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.18rem);
  line-height: 1.6;
  color: #4a3a2c;
  max-width: 520px;
}
.reveal-banner__body p {
  margin: 0 0 var(--space-3);
}
.reveal-banner__body p:last-child { margin-bottom: 0; }
.reveal-banner__signature {
  margin-top: var(--space-3);
  font-style: italic;
  color: #6f5942;
}
.reveal-banner__footnote {
  margin: var(--space-4) 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.82rem;
  color: #a89172;
}
.reveal-banner__tuck {
  margin-top: var(--space-2);
  background: transparent;
  border: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: #a89172;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(168, 145, 114, 0.4);
}
.reveal-banner__tuck:hover { color: #6f5942; }
[data-theme="dark"] .reveal-banner {
  background: #2a2218;
  border-color: #4a3a28;
  color: #ede2cf;
}
[data-theme="dark"] .reveal-banner__headline,
[data-theme="dark"] .reveal-banner__body { color: #f1e5cf; }
[data-theme="dark"] .reveal-banner__signature { color: #d9c8a3; }
[data-theme="dark"] .reveal-banner__footnote,
[data-theme="dark"] .reveal-banner__tuck { color: #a89172; }
@media print {
  .reveal-banner { display: none !important; }
}

/* v1.3.96 — Day-of birthday card. Full-width, paper-themed hero block. */
.birthday-card {
  margin: 0 auto var(--space-6);
  padding: var(--space-7) var(--space-6);
  background: #fbf3df;
  border: 1px solid #e8d8a9;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 #f3e6c0 inset, 0 6px 22px -14px rgba(111, 89, 66, 0.35);
  color: #4a3a2c;
}
.birthday-card__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  max-width: 880px;
  margin: 0 auto;
}
.birthday-card__photo {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #e8d8a9;
  box-shadow: 0 4px 14px -8px rgba(111, 89, 66, 0.4);
  background: #f4ead2;
  flex-shrink: 0;
}
.birthday-card__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.birthday-card__photo--placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.85;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
.birthday-card__copy {
  flex: 1 1 320px;
  min-width: 0;
}
.birthday-card__headline {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem);
  color: #4a3a2c;
  letter-spacing: 0.01em;
  line-height: 1.15;
}
.birthday-card__age {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: #6f5942;
  margin-bottom: var(--space-3);
  letter-spacing: 0.04em;
}
.birthday-card__message {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
  line-height: 1.6;
  color: #4a3a2c;
  margin: 0 0 var(--space-4);
  max-width: 560px;
}
.birthday-card__btn {
  background: #4a3a2c;
  color: #fbf3df;
  border: 1px solid #4a3a2c;
  border-radius: var(--radius-md);
  padding: 0.6rem 1.2rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s ease, color 0.15s ease;
}
.birthday-card__btn:hover {
  background: #6f5942;
  border-color: #6f5942;
}
[data-theme="dark"] .birthday-card {
  background: #2a2218;
  border-color: #4a3a28;
  color: #ede2cf;
}
[data-theme="dark"] .birthday-card__headline,
[data-theme="dark"] .birthday-card__message { color: #f1e5cf; }
[data-theme="dark"] .birthday-card__age { color: #d9c8a3; }
[data-theme="dark"] .birthday-card__btn {
  background: #f1e5cf;
  color: #2a2218;
  border-color: #f1e5cf;
}
[data-theme="dark"] .birthday-card__btn:hover {
  background: #d9c8a3;
  border-color: #d9c8a3;
}
@media print {
  .birthday-card { display: none !important; }
}

/* Birthday / anniversary card — soft warm cream, sits above everything */
.planner-celebrate {
  background: #fbf3df;
  border: 1px solid #e8d8a9;
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5);
  margin-bottom: var(--space-5);
  text-align: center;
  box-shadow: var(--shadow-paper);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.planner-celebrate__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.planner-celebrate__line {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  color: #7a5a1f;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.planner-celebrate__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.1rem);
  color: #8a6d34;
}
[data-theme="dark"] .planner-celebrate {
  background: #3a2f17;
  border-color: #6a5527;
}
[data-theme="dark"] .planner-celebrate__line { color: #f4d98f; }
[data-theme="dark"] .planner-celebrate__sub { color: #d4b76a; }

.planner-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-5);
}
.planner-card--span3  { grid-column: span 3; }
.planner-card--span4  { grid-column: span 4; }
.planner-card--span5  { grid-column: span 5; }
.planner-card--span6  { grid-column: span 6; }
.planner-card--span8  { grid-column: span 8; }
.planner-card--span12 { grid-column: span 12; }
@media (max-width: 1100px) {
  .planner-card--span3,
  .planner-card--span4,
  .planner-card--span5,
  .planner-card--span6,
  .planner-card--span8 { grid-column: span 6; }
}
@media (max-width: 700px) {
  .planner-card--span3,
  .planner-card--span4,
  .planner-card--span5,
  .planner-card--span6,
  .planner-card--span8,
  .planner-card--span12 { grid-column: span 12; }
}

.planner-card {
  background: var(--bg-card-tint);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-paper);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
[data-theme="dark"] .planner-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.planner-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: var(--space-2);
}
.planner-card__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.5rem);
  color: var(--text-heading);
  letter-spacing: 0.005em;
  line-height: 1.1;
  margin: 0;
}
[data-theme="dark"] .planner-card__title { color: var(--color-text); }
.planner-card__link {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  background: transparent;
  border: 0;
  color: var(--color-accent-dark);
  cursor: pointer;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}
.planner-card__link:hover { background: var(--color-gold-soft); }
[data-theme="dark"] .planner-card__link { color: var(--color-accent); }

.planner-empty {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
  padding: var(--space-3) 0;
}
[data-theme="dark"] .planner-empty { color: var(--color-text-muted); }

/* Today / Tomorrow two-column body. */
.planner-today-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 700px) {
  .planner-today-cols { grid-template-columns: 1fr; }
}
.planner-today-col__label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text-heading);
  line-height: 1.1;
}
[data-theme="dark"] .planner-today-col__label { color: var(--color-text); }
.planner-today-col__sub {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: var(--space-2);
}
.planner-agenda {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.planner-agenda-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  width: 100%;
  font-family: var(--font-body);
}
.planner-agenda-row:hover { background: rgba(212, 175, 55, 0.06); }
.planner-agenda-row:last-child { border-bottom: 0; }
.planner-agenda-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
}
.planner-agenda-dot--plain { background: var(--text-muted); }
.planner-agenda-body { min-width: 0; flex: 1; }
.planner-agenda-title {
  font-size: var(--text-sm);
  color: var(--text-body);
  font-weight: 500;
  line-height: 1.3;
}
[data-theme="dark"] .planner-agenda-title { color: var(--color-text); }
.planner-agenda-meta {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 1px;
}
[data-theme="dark"] .planner-agenda-meta { color: var(--color-text-muted); }

/* Upcoming Birthdays. */
.planner-birthdays {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.planner-birthday {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-soft);
}
.planner-birthday:last-child { border-bottom: 0; }
.planner-birthday__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--text-heading);
}
[data-theme="dark"] .planner-birthday__name { color: var(--color-text); }
.planner-birthday__age {
  font-family: var(--font-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-accent-dark);
  font-size: 0.95rem;
}
.planner-birthday__age sup { font-size: 0.65em; }
[data-theme="dark"] .planner-birthday__age { color: var(--color-accent); }
.planner-birthday__date {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.9rem;
}
[data-theme="dark"] .planner-birthday__date { color: var(--color-text-muted); }

/* On This Day widget. Quiet remembrance card sized like Upcoming Birthdays. */
.planner-on-this-day__title {
  text-transform: lowercase;
}
.planner-on-this-day__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.planner-on-this-day__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--text-heading);
}
.planner-on-this-day__item:last-child { border-bottom: 0; }
[data-theme="dark"] .planner-on-this-day__item { color: var(--color-text); }
.planner-on-this-day__year {
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  color: var(--color-accent-dark);
}
[data-theme="dark"] .planner-on-this-day__year { color: var(--color-accent); }
.planner-on-this-day__label {
  font-style: italic;
}
.planner-on-this-day__cherub {
  margin-left: 0.25em;
  font-style: normal;
}
.planner-on-this-day__dash {
  color: var(--text-muted);
}
.planner-on-this-day__suffix,
.planner-on-this-day__memorial {
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.95rem;
}
[data-theme="dark"] .planner-on-this-day__suffix,
[data-theme="dark"] .planner-on-this-day__memorial,
[data-theme="dark"] .planner-on-this-day__dash {
  color: var(--color-text-muted);
}
.planner-on-this-day__empty {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.4;
}
[data-theme="dark"] .planner-on-this-day__empty { color: var(--color-text-muted); }

/* v1.3.93 — Anniversary countdown widget */
.planner-anniv__title {
  text-transform: lowercase;
}
.planner-anniv__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.planner-anniv__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--text-heading);
}
.planner-anniv__item:last-child { border-bottom: 0; }
[data-theme="dark"] .planner-anniv__item { color: var(--color-text); }
.planner-anniv__couple {
  font-style: italic;
}
.planner-anniv__ordinal {
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  color: var(--color-accent-dark);
}
[data-theme="dark"] .planner-anniv__ordinal { color: var(--color-accent); }
.planner-anniv__suffix-word {
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.planner-anniv__dash {
  color: var(--text-muted);
}
.planner-anniv__days {
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums lining-nums;
}
[data-theme="dark"] .planner-anniv__suffix-word,
[data-theme="dark"] .planner-anniv__days,
[data-theme="dark"] .planner-anniv__dash {
  color: var(--color-text-muted);
}
.planner-anniv__item--today {
  border-bottom: 0;
}
.planner-anniv__line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-heading);
}
[data-theme="dark"] .planner-anniv__line { color: var(--color-text); }

/* Family photo card — frame the image like a scrapbook page.
   Photos display at their real aspect ratio (object-fit: contain); when a
   portrait photo lands in the landscape-shaped frame the empty space gets
   the same cream "paper" tone as the rest of the planner so it reads as
   matting around the print. */
.planner-photo {
  align-items: stretch;
  padding: var(--space-4);
}
.planner-photo__frame {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  box-shadow: var(--shadow-paper);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  max-height: 500px;
}
[data-theme="dark"] .planner-photo__frame {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}
.planner-photo__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  display: block;
}
.planner-photo__img--placeholder {
  padding: var(--space-5);
  opacity: 0.92;
}
.planner-photo__caption {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: var(--space-2);
}
[data-theme="dark"] .planner-photo__caption { color: var(--color-text-muted); }

/* Prev / next chevrons over the frame — quiet warm-ink until hover. */
.planner-photo__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 56px;
  border: 1px solid var(--border-line);
  background: rgba(252, 248, 238, 0.78);
  color: var(--color-ink, #4a3a1c);
  font-family: var(--font-serif);
  font-size: 1.6rem;
  line-height: 1;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.15s ease, background 0.15s ease;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.planner-photo__nav:hover,
.planner-photo__nav:focus-visible {
  opacity: 1;
  background: rgba(252, 248, 238, 0.95);
  outline: none;
}
.planner-photo__nav--prev { left: 12px; }
.planner-photo__nav--next { right: 12px; }
.planner-photo:hover .planner-photo__nav,
.planner-photo:focus-within .planner-photo__nav { opacity: 0.78; }
[data-theme="dark"] .planner-photo__nav {
  background: rgba(36, 32, 26, 0.7);
  color: var(--color-text);
  border-color: var(--color-border);
}
[data-theme="dark"] .planner-photo__nav:hover,
[data-theme="dark"] .planner-photo__nav:focus-visible {
  background: rgba(36, 32, 26, 0.95);
}

.planner-photo__gallery-link {
  text-align: center;
  margin-top: var(--space-1);
  font-family: var(--font-serif);
  font-size: 0.9rem;
}
.planner-photo__gallery-link a {
  color: var(--text-muted);
  text-decoration: none;
}
.planner-photo__gallery-link a:hover { color: var(--color-text); text-decoration: underline; }

/* Budget glance. */
.planner-budget-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.planner-budget-row { display: flex; flex-direction: column; gap: 4px; }
.planner-budget-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.planner-budget-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--text-heading);
  font-size: 1rem;
}
[data-theme="dark"] .planner-budget-name { color: var(--color-text); }
.planner-budget-amounts {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.planner-budget-amounts em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  margin: 0 2px;
  color: var(--color-text-faint);
}
.planner-budget-track {
  height: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  overflow: hidden;
}
[data-theme="dark"] .planner-budget-track {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}
.planner-budget-fill {
  height: 100%;
  background: var(--color-accent);
  transition: width var(--transition);
}
.planner-budget-fill.over { background: var(--color-error); }

/* Quick add column. */
.planner-quick-add { display: flex; flex-direction: column; gap: var(--space-2); }
.planner-quick-btn {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  color: var(--text-heading);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), border-color var(--transition);
}
.planner-quick-btn:hover {
  background: var(--color-gold-soft);
  border-color: var(--color-accent);
}
[data-theme="dark"] .planner-quick-btn {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Top open tasks. */
.planner-tasks {
  list-style: none;
  padding: 0;
  margin: 0;
}
.planner-task {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-soft);
}
.planner-task:last-child { border-bottom: 0; }
.planner-task__priority {
  width: 10px; height: 10px;
  border-radius: 50%;
  align-self: center;
}
.planner-task__title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  color: var(--text-heading);
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planner-task__title:hover { color: var(--color-accent-dark); }
[data-theme="dark"] .planner-task__title { color: var(--color-text); }
[data-theme="dark"] .planner-task__title:hover { color: var(--color-accent); }
.planner-task__assignee {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.planner-task__due {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.92rem;
}
.planner-task--overdue .planner-task__due {
  color: var(--color-error);
  font-weight: 600;
  font-style: italic;
}
@media (max-width: 700px) {
  .planner-task {
    grid-template-columns: auto 1fr;
    row-gap: 2px;
  }
  .planner-task__assignee,
  .planner-task__due { grid-column: 2; }
}

/* "Around the Hub" tiles — quick links restyled to match the planner. */
.planner-quicklinks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
}
.planner-tile {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
  color: var(--text-heading);
  text-align: center;
  transition: background var(--transition), border-color var(--transition);
}
.planner-tile:hover {
  background: var(--color-gold-soft);
  border-color: var(--color-accent);
}
[data-theme="dark"] .planner-tile {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Next-trip widget (v1.3.45). Sits in the third planner row next to the
   family photo and budget glance. Whole card is a click target → trip detail.
   The countdown is the emotional centerpiece — kept large and italic-serif. */
.planner-trip { cursor: pointer; }
.planner-trip__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-1);
}
.planner-trip__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--text-heading);
  line-height: 1.2;
}
[data-theme="dark"] .planner-trip__title { color: var(--color-text); }
.planner-trip__destination {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-muted);
}
.planner-trip__dates {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums lining-nums;
  margin-top: var(--space-1);
}
.planner-trip__countdown {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.4rem;
  line-height: 1.05;
  color: var(--color-accent-dark, var(--text-heading));
  margin-top: var(--space-2);
}
[data-theme="dark"] .planner-trip__countdown { color: var(--color-accent); }
.planner-trip--empty { cursor: default; }
.planner-trip__empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
}
.planner-trip__empty-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-muted);
}
.planner-trip__empty-link {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-accent-dark, var(--text-heading));
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.planner-trip__empty-link:hover { text-decoration: underline; }
[data-theme="dark"] .planner-trip__empty-link { color: var(--color-accent); }

/* Row 4: when both Quick Add (span3) and Top Open Tasks (span9) share a row,
   the existing responsive rules already collapse them at narrower widths. */
.planner-card--span9 { grid-column: span 9; }
@media (max-width: 1100px) { .planner-card--span9 { grid-column: span 12; } }

/* ── Dashboard — Dinner Tonight (v1.3.61) ──────────────────────────────── */
.planner-dinner { cursor: pointer; }
.planner-dinner__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-1);
}
.planner-dinner__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--text-heading);
}
[data-theme="dark"] .planner-dinner__title { color: var(--color-text); }
.planner-dinner__sub {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.planner-dinner__warning {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: #b03a2e;
  margin-top: var(--space-2);
  font-weight: 500;
}
[data-theme="dark"] .planner-dinner__warning { color: #e57373; }
.planner-dinner--empty { cursor: pointer; }
.planner-dinner__empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
}
.planner-dinner__empty-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-muted);
}
.planner-dinner__empty-link {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-accent-dark, var(--text-heading));
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.planner-dinner__empty-link:hover { text-decoration: underline; }
[data-theme="dark"] .planner-dinner__empty-link { color: var(--color-accent); }

/* ── Messages — Family Corkboard (v1.3.46) ─────────────────────────────── */
.msg-page-head {
  margin: 0 0 var(--space-6);
  text-align: center;
}
.msg-page-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  color: var(--cal-label-ink);
  margin: 0;
  letter-spacing: 0.01em;
}
.msg-page-sub {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
  font-size: 1.1rem;
  margin: var(--space-1) 0 0;
}

.msg-composer {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-paper);
  max-width: 720px;
  margin: 0 auto var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.msg-composer-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.msg-composer-meta { justify-content: space-between; }
.msg-swatch-row { display: flex; gap: var(--space-2); }
.msg-swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border-line);
  cursor: pointer;
  padding: 0;
  transition: transform var(--transition), box-shadow var(--transition);
}
.msg-swatch:hover { transform: scale(1.1); }
.msg-swatch.is-active {
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--cal-label-ink);
  transform: scale(1.05);
}
.msg-swatch-cream  { background: #fdf6e3; }
.msg-swatch-sky    { background: #dceaf2; }
.msg-swatch-rose   { background: #f3dcdc; }
.msg-swatch-sage   { background: #dde6d5; }
.msg-swatch-butter { background: #f6e8c4; }

.msg-composer-author {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
}
.msg-composer-author select {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-line);
  background: var(--bg-card-tint);
  color: var(--cal-label-ink);
  border-radius: var(--radius-sm);
}
.msg-composer-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  border: none;
  border-bottom: 1px dashed var(--border-line);
  background: transparent;
  color: var(--cal-label-ink);
  padding: var(--space-2) 0;
  outline: none;
}
.msg-composer-title:focus { border-bottom-color: var(--cal-label-ink); }
.msg-composer-body {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--cal-label-ink);
  background: var(--bg-card-tint);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  resize: vertical;
  min-height: 80px;
  outline: none;
  line-height: 1.55;
}
.msg-composer-body:focus { border-color: var(--cal-label-ink-light); }
.msg-composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.msg-composer-hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.msg-section { margin: 0 0 var(--space-8); }
.msg-section-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--cal-label-ink);
  margin: 0 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.msg-pin-icon { color: var(--color-crimson); transform: rotate(-12deg); }

.msg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}
.msg-card {
  position: relative;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-paper-lg);
  border: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform var(--transition);
}
.msg-card:hover { transform: translateY(-2px); }
.msg-card-cream  { background: #fdf6e3; }
.msg-card-sky    { background: #dceaf2; }
.msg-card-rose   { background: #f3dcdc; }
.msg-card-sage   { background: #dde6d5; }
.msg-card-butter { background: #f6e8c4; }
.msg-card.is-pinned::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  background: var(--color-crimson);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.msg-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cal-label-ink);
  font-size: 0.95rem;
}
.msg-card-author { font-weight: 500; }
.msg-card-date   { font-size: 0.85rem; color: var(--text-muted); }
.msg-card-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--cal-label-ink);
  margin: 0;
  outline: none;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  margin-left: -4px;
}
.msg-card-title[contenteditable="true"]:focus { background: rgba(255,255,255,0.4); }
.msg-card-title[contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-faint);
  font-style: italic;
}
.msg-card-body {
  font-family: var(--font-body);
  color: var(--cal-label-ink);
  font-size: 0.98rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  margin-left: -4px;
}
.msg-card-body[contenteditable="true"]:focus { background: rgba(255,255,255,0.4); }

.msg-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  border-top: 1px dashed rgba(90, 74, 58, 0.15);
  padding-top: var(--space-2);
}
.msg-react-row { display: flex; gap: 4px; flex-wrap: wrap; }
.msg-react {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.4);
  color: var(--cal-label-ink);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.msg-react:hover { background: rgba(255,255,255,0.7); }
.msg-react.is-active {
  background: rgba(255,255,255,0.85);
  border-color: var(--cal-label-ink-light);
}
.msg-react-glyph { font-size: 0.95rem; line-height: 1; }
.msg-react-count {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.8rem;
}
.msg-card-actions { display: flex; gap: 4px; }
.msg-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: rgba(255,255,255,0.4);
  color: var(--cal-label-ink);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.msg-icon-btn:hover { background: rgba(255,255,255,0.8); }
.msg-icon-btn.is-active { color: var(--color-crimson); }
.msg-icon-btn-danger:hover { color: var(--color-error); }

.msg-empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
}
.msg-empty-headline { font-size: 1.25rem; margin: 0; }
.msg-empty-inline {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
  padding: var(--space-4) 0;
}

.msg-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
}
.msg-pager-label {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Dark theme — keep sticky-note tints legible but muted */
[data-theme="dark"] .msg-card-cream  { background: #2a2418; color: #e8dfc8; }
[data-theme="dark"] .msg-card-sky    { background: #1c2a35; color: #d8e6ee; }
[data-theme="dark"] .msg-card-rose   { background: #3a2424; color: #f3d8d8; }
[data-theme="dark"] .msg-card-sage   { background: #1f2b1c; color: #d8e6cd; }
[data-theme="dark"] .msg-card-butter { background: #322a16; color: #efe1b4; }
[data-theme="dark"] .msg-card,
[data-theme="dark"] .msg-card-title,
[data-theme="dark"] .msg-card-body,
[data-theme="dark"] .msg-card-head,
[data-theme="dark"] .msg-icon-btn,
[data-theme="dark"] .msg-react { color: inherit; }
[data-theme="dark"] .msg-card-date { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .msg-page-title,
[data-theme="dark"] .msg-section-title { color: var(--color-text); }

/* ── v1.3.47: Requests & Ideas inbox ───────────────────────────────────────
   Family wishlist + suggestion inbox. Italic-serif headers, Inter body,
   warm cream surfaces with handwritten-feel decision notes. */

.req-page { max-width: 880px; margin: 0 auto; }

.req-header {
  text-align: center;
  margin-bottom: var(--space-5);
}
.req-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: var(--text-2xl, 2rem);
  color: var(--text-heading);
  margin: 0;
}
.req-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  font-size: 1.05rem;
}

.req-composer {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-paper);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.req-composer-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
  border: none;
  background: transparent;
  color: var(--text-heading);
  padding: var(--space-1) 0;
  outline: none;
  border-bottom: 1px solid var(--border-soft);
}
.req-composer-title::placeholder {
  color: var(--color-text-muted);
  font-style: italic;
}
.req-composer-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  background: var(--bg-card-tint, var(--bg-card));
  color: var(--text-body);
  min-height: 60px;
  resize: vertical;
  outline: none;
}
.req-composer-row {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: flex-end;
}
.req-composer-field {
  display: flex; flex-direction: column;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  gap: 2px;
}
.req-composer-field select {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.9rem;
  padding: 4px 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-body);
}
.req-composer-submit { margin-left: auto; }

.req-filters {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
}
.req-pill-row {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
}
.req-pill {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  padding: 3px 12px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.req-pill:hover { color: var(--text-heading); }
.req-pill--active {
  background: var(--color-accent, #5a4a3a);
  color: #fdfaf5;
  border-color: var(--color-accent, #5a4a3a);
}
.req-filter-aux {
  display: flex; gap: var(--space-2); margin-left: auto;
}
.req-aux-field {
  display: flex; flex-direction: column;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  gap: 2px;
}
.req-aux-field select {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.9rem;
  padding: 3px 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-body);
}

.req-list { display: flex; flex-direction: column; gap: var(--space-3); }
.req-empty {
  font-family: var(--font-serif);
  font-style: italic;
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-6) var(--space-3);
  background: var(--bg-card);
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-lg);
  font-size: 1.05rem;
}

.req-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-paper);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.req-card-head {
  display: flex; gap: var(--space-2);
  align-items: flex-start; justify-content: space-between;
}
.req-card-head-left { flex: 1; min-width: 0; }
.req-card-head-right {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap; justify-content: flex-end;
}
.req-card-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--text-heading);
  margin: 0;
  outline: none;
}
.req-card-title[contenteditable="true"]:focus {
  background: var(--color-gold-soft, rgba(232, 169, 35, 0.1));
  border-radius: var(--radius-sm);
}
.req-card-meta {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-top: 2px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.req-card-cat-pill {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-card-tint, rgba(0,0,0,0.04));
  color: var(--text-heading);
  border: 1px solid var(--border-soft);
  margin-left: 4px;
}
.req-card-cat-wishlist    { background: rgba(232, 169, 35, 0.18);  }
.req-card-cat-hub_feature { background: rgba(36, 85, 181, 0.14);  }
.req-card-cat-household   { background: rgba(150, 66, 25, 0.14);  }
.req-card-cat-event       { background: rgba(181, 32, 42, 0.14);  }
.req-card-cat-idea        { background: rgba(0, 0, 0, 0.05);       }
.req-card-cat-other       { background: rgba(0, 0, 0, 0.05);       }

.req-vote {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.req-vote:hover { color: #B5202A; }
.req-vote--on   { background: rgba(181, 32, 42, 0.1); color: #B5202A; border-color: rgba(181, 32, 42, 0.4); }

.req-status-pill,
.req-status-select {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-soft);
}
.req-status-select { cursor: pointer; background: var(--bg-card); }
.req-status-open        { background: rgba(0, 0, 0, 0.05);       color: var(--text-heading); }
.req-status-considering { background: rgba(232, 169, 35, 0.22);  color: #6b4f10; }
.req-status-planned     { background: rgba(36, 85, 181, 0.18);   color: #1a3470; }
.req-status-in_progress { background: rgba(67, 122, 34, 0.20);   color: #2d5114; }
.req-status-done        { background: rgba(67, 122, 34, 0.35);   color: #1f3a0e; }
.req-status-declined    { background: rgba(181, 32, 42, 0.18);   color: #7a1419; }

.req-card-body {
  display: flex; flex-direction: column; gap: var(--space-2);
}
.req-card-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-body);
  margin: 0;
  white-space: pre-wrap;
  outline: none;
}
.req-card-desc[contenteditable="true"]:focus {
  background: var(--color-gold-soft, rgba(232, 169, 35, 0.1));
  border-radius: var(--radius-sm);
  padding: 2px 4px;
}
.req-card-desc--empty:empty::before,
.req-card-decision--empty:empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-muted);
  font-style: italic;
}
.req-card-decision {
  font-family: 'Caveat', var(--font-serif);
  font-size: 1.15rem;
  color: var(--color-accent, #5a4a3a);
  background: var(--color-gold-soft, rgba(232, 169, 35, 0.12));
  border-left: 3px solid var(--color-accent, #5a4a3a);
  padding: var(--space-1) var(--space-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  outline: none;
}
.req-card-decision--empty {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  background: transparent;
  border-left-color: var(--border-soft);
  color: var(--color-text-muted);
}

.req-card-foot {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: center;
  padding-top: var(--space-1);
  border-top: 1px dashed var(--border-soft);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.req-card-foot-spacer { flex: 1; }
.req-card-priority { letter-spacing: 0.01em; }
.req-card-priority-urgent { color: #B5202A; font-weight: 600; }
.req-card-priority-high   { color: #c46c11; font-weight: 600; }
.req-card-priority-low    { color: var(--color-text-muted); }
.req-card-linked {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-heading);
  background: rgba(36, 85, 181, 0.12);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.req-card-delete { color: var(--color-error, #B5202A); }

@media (max-width: 640px) {
  .req-filter-aux { margin-left: 0; }
  .req-card-head { flex-direction: column; }
  .req-card-head-right { width: 100%; justify-content: flex-start; }
  .req-composer-submit { margin-left: 0; width: 100%; }
}

/* ─── v1.3.49 Meals & Groceries ─────────────────────────────────────────── */
.meal-section-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}
.meal-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border, #e9e2d3);
  margin: 0 0 var(--space-3) 0;
}
.meal-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-text-muted);
  cursor: pointer;
}
.meal-tab:hover { color: var(--color-text); }
.meal-tab--active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

.meal-week-nav {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.meal-week-label {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.05rem; color: var(--color-text);
  padding: 0 var(--space-2);
}

.meal-week-grid {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-border, #e9e2d3);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  background: var(--color-bg-card, #fffdf8);
}
.meal-week-row {
  display: grid;
  grid-template-columns: 110px repeat(7, 1fr);
  border-bottom: 1px solid var(--color-border, #e9e2d3);
}
.meal-week-row:last-child { border-bottom: none; }
.meal-week-row--head {
  background: rgba(166, 138, 43, 0.06);
}
.meal-week-typecol {
  font-family: var(--font-serif); font-style: italic;
  padding: var(--space-2) var(--space-3);
  border-right: 1px solid var(--color-border, #e9e2d3);
  color: var(--color-text);
  display: flex; align-items: center;
  text-transform: lowercase;
}
.meal-week-dayhead {
  padding: var(--space-2) var(--space-3);
  border-left: 1px solid var(--color-border, #e9e2d3);
  text-align: center;
}
.meal-week-dayhead__name {
  font-family: var(--font-serif); font-style: italic;
  font-size: 0.95rem; color: var(--color-text);
}
.meal-week-dayhead__sub {
  font-size: 0.75rem; color: var(--color-text-muted);
}
.meal-cell {
  border-left: 1px solid var(--color-border, #e9e2d3);
  min-height: 64px;
  padding: 4px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.meal-cell:hover { background: rgba(166, 138, 43, 0.04); }
.meal-cell-empty {
  color: var(--color-text-faint, #b0a594);
  font-size: 1.1rem; text-align: center;
  padding-top: 8px;
}
.meal-cell-row {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  font-size: 0.85rem;
}
.meal-cell-row--hazelnut {
  background: rgba(181, 32, 42, 0.08);
  border-left: 2px solid var(--color-error, #B5202A);
}
.meal-cell-title { color: var(--color-text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meal-hazelnut-dot { color: var(--color-error, #B5202A); font-size: 0.7rem; }

/* v1.4.2 — paper-themed kind badges so Tiffany can scan the week and tell
   recipe meals from leftovers + eating-out at a glance. */
.meal-cell-row--leftovers  { background: rgba(180, 150, 70, 0.10); border-left: 2px solid #b49646; }
.meal-cell-row--eating_out { background: rgba(70, 130, 180, 0.10); border-left: 2px solid #4682b4; }
.meal-kind-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--color-paper-deep, #f3ead6);
  color: var(--color-text, #3b2c1a);
  border: 1px solid rgba(0,0,0,0.08);
}
.meal-kind-badge--leftovers  { background: #efe2b8; color: #6a4c0a; }
.meal-kind-badge--eating-out { background: #d8e6f0; color: #1f4a6a; }

/* Recipes tab */
.meal-recipe-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.meal-recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
.meal-recipe-card {
  text-align: left;
  border: 1px solid var(--color-border, #e9e2d3);
  border-radius: var(--radius-md, 6px);
  padding: var(--space-3);
  background: var(--color-bg-card, #fffdf8);
  cursor: pointer;
  font-family: inherit;
  display: flex; flex-direction: column; gap: 4px;
  transition: box-shadow 120ms ease;
}
.meal-recipe-card:hover { box-shadow: var(--shadow-paper-lg, 0 2px 8px rgba(0,0,0,0.06)); }
.meal-recipe-card__row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.meal-recipe-card__title {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.15rem; color: var(--color-text);
}
.meal-recipe-card__fav {
  font-size: 1.1rem; color: var(--accent-gold, #c4a13a);
  cursor: pointer; line-height: 1;
}
.meal-recipe-card__hazel {
  color: var(--color-error, #B5202A);
  font-size: 0.75rem; font-weight: 600;
}
.meal-recipe-card__cuisine { font-size: 0.85rem; color: var(--color-text-muted); font-style: italic; }
.meal-recipe-card__meta { font-size: 0.8rem; color: var(--color-text-muted); }
.meal-recipe-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.meal-tag {
  font-size: 0.7rem;
  background: rgba(166, 138, 43, 0.1);
  padding: 2px 6px;
  border-radius: var(--radius-full, 999px);
  color: var(--color-text-muted);
}

.meal-empty { text-align: center; padding: var(--space-6) 0; }
.meal-empty__title {
  font-family: var(--font-serif); font-style: italic; font-size: 1.4rem;
  color: var(--color-text);
}
.meal-empty__sub { color: var(--color-text-muted); margin-top: 4px; }

/* Allergen UI */
.meal-allergen-warning {
  background: rgba(181, 32, 42, 0.08);
  border: 1px solid rgba(181, 32, 42, 0.3);
  border-left: 4px solid var(--color-error, #B5202A);
  color: var(--color-error, #B5202A);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md, 6px);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.meal-allergen-warning--sm { font-size: 0.85rem; padding: 6px 10px; margin-bottom: var(--space-2); }
.meal-allergen-warning--banner { font-size: 1rem; }
.meal-chip-row {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: var(--space-2);
}
.meal-chip {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: var(--radius-full, 999px);
  border: 1px solid var(--color-border, #e9e2d3);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: inherit;
}
.meal-chip:hover { color: var(--color-text); }
.meal-chip--on {
  background: rgba(181, 32, 42, 0.1);
  color: var(--color-error, #B5202A);
  border-color: rgba(181, 32, 42, 0.4);
  font-weight: 600;
}

/* Recipe detail page */
.meal-detail {
  background: var(--color-bg-card, #fffdf8);
  border: 1px solid var(--color-border, #e9e2d3);
  border-radius: var(--radius-md, 6px);
  padding: var(--space-4);
}
.meal-detail__nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-3);
}
.meal-detail__title {
  font-family: var(--font-serif); font-style: italic;
  font-weight: 500;
  font-size: 2rem; margin: 0 0 var(--space-2) 0;
  color: var(--color-text);
  outline: none;
}
.meal-detail__title:focus { background: rgba(166, 138, 43, 0.06); }
.meal-detail__meta {
  font-family: var(--font-serif); font-style: italic;
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.meal-inline-num {
  outline: none;
  border-bottom: 1px dotted var(--color-text-faint);
  min-width: 1.4em; display: inline-block; text-align: center;
}
.meal-inline-num:focus { background: rgba(166, 138, 43, 0.06); }
.meal-fav-toggle { cursor: pointer; }

/* v1.3.95 — Recipe scaling: servings stepper, scaled banner, variant tag. */
.meal-servings-stepper {
  display: inline-flex; align-items: center; gap: 6px;
  font-style: normal;
}
.meal-step-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--color-border, #d6cdb6);
  background: var(--color-surface, #fff8ec);
  cursor: pointer; font-size: 1rem; line-height: 1;
  color: var(--color-text, #2b2418);
}
.meal-step-btn:hover { background: rgba(166, 138, 43, 0.08); }
.meal-step-input {
  width: 3.5em; text-align: center;
  padding: 4px 6px;
  border: 1px solid var(--color-border, #d6cdb6);
  border-radius: 4px;
  font-family: inherit;
  background: var(--color-surface, #fff8ec);
}
.meal-scale-banner {
  background: rgba(166, 138, 43, 0.10);
  border-left: 3px solid var(--color-accent, #a68a2b);
  padding: 10px 14px;
  margin-bottom: var(--space-3);
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  font-family: var(--font-serif); font-style: italic;
}
.meal-variant-tag {
  background: rgba(0,0,0,0.04);
  padding: 6px 12px; margin-bottom: var(--space-2);
  font-family: var(--font-serif); font-style: italic; font-size: 0.9rem;
  display: flex; gap: var(--space-2); align-items: center;
}
.meal-recipe-card--variant {
  margin-left: var(--space-4);
  border-left: 3px solid var(--color-accent, #a68a2b);
}
.meal-recipe-card__variant-of {
  font-family: var(--font-serif); font-style: italic; font-size: 0.78rem;
  color: var(--color-text-muted, #6b6052); margin-top: 2px;
}
.meal-detail__source { margin-bottom: var(--space-3); font-size: 0.9rem; }
.meal-detail__columns {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
}

/* v1.4.1 — "What you need" pantry-check block */
.meal-pantry-check {
  border: 1px solid var(--color-border, #e9e2d3);
  border-radius: 6px;
  padding: var(--space-3);
  margin: var(--space-3) 0;
  background: #fafaf6;
}
.meal-pantry-check__head {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.meal-pantry-summary {
  font-size: 0.85rem; color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.meal-pantry-store { margin-bottom: var(--space-3); }
.meal-pantry-store__label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-muted); font-weight: 600;
  border-bottom: 1px solid var(--color-border, #e9e2d3);
  padding-bottom: 2px; margin-bottom: 6px;
}
.meal-pantry-list {
  list-style: none; padding: 0; margin: 0;
}
.meal-pantry-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 8px; align-items: center;
  padding: 4px 0;
  border-bottom: 1px dotted var(--color-border, #e9e2d3);
}
.meal-pantry-ing { font-weight: 500; }
.meal-pantry-buy {
  font-size: 0.85rem; color: var(--color-text-muted); font-style: italic;
}
.meal-pantry-tag {
  font-size: 0.75rem; padding: 2px 8px; border-radius: 10px;
  white-space: nowrap;
}
.meal-pantry-tag--ok       { background: #e3f2e3; color: #2a5d2a; }
.meal-pantry-tag--partial  { background: #fff4d6; color: #735200; }
.meal-pantry-tag--missing  { background: #f8d7da; color: #8a1f29; }

.meal-detail__h2 {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.2rem; color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
  text-transform: lowercase;
}
.meal-ing-group { margin-bottom: var(--space-3); }
.meal-ing-group__label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-muted); margin-bottom: 4px;
}
.meal-ing-row {
  display: grid; grid-template-columns: 90px 1fr auto;
  gap: 8px; align-items: center;
  padding: 4px 0;
  border-bottom: 1px dotted var(--color-border, #e9e2d3);
}
.meal-ing-qty {
  font-family: var(--font-serif); font-style: italic;
  color: var(--color-text-muted); outline: none;
}
.meal-ing-qty:focus, .meal-ing-name:focus { background: rgba(166, 138, 43, 0.06); }
.meal-ing-name { outline: none; }
.meal-ing-del {
  background: transparent; border: none;
  color: var(--color-text-faint); cursor: pointer;
  font-size: 1rem;
}
.meal-ing-del:hover { color: var(--color-error, #B5202A); }
.meal-ing-add {
  display: grid; grid-template-columns: 90px 1fr 130px auto;
  gap: 8px; margin-top: var(--space-2);
}
.meal-detail__instructions { font-family: var(--font-body, inherit); white-space: pre-wrap; }

/* Shopping tab */
.meal-shop-layout {
  display: grid; grid-template-columns: 220px 1fr; gap: var(--space-4);
}
.meal-shop-sidebar { display: flex; flex-direction: column; gap: var(--space-1); }
.meal-shop-list-btn {
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 6px);
  padding: var(--space-2);
  cursor: pointer;
  font-family: inherit;
}
.meal-shop-list-btn:hover { background: rgba(166, 138, 43, 0.06); }
.meal-shop-list-btn--active {
  background: rgba(166, 138, 43, 0.1);
  border-color: var(--color-border, #e9e2d3);
}
.meal-shop-list-btn__name {
  font-family: var(--font-serif); font-style: italic; font-size: 1rem;
  color: var(--color-text);
}
.meal-shop-list-btn__meta {
  font-size: 0.75rem; color: var(--color-text-muted);
}
.meal-shop-main {
  background: var(--color-bg-card, #fffdf8);
  border: 1px solid var(--color-border, #e9e2d3);
  border-radius: var(--radius-md, 6px);
  padding: var(--space-4);
}
.meal-shop-head {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.meal-shop-title {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.5rem; margin: 0; color: var(--color-text);
  outline: none;
}
.meal-shop-title:focus { background: rgba(166, 138, 43, 0.06); }
.meal-shop-status { font-size: 0.8rem; color: var(--color-text-muted); }
.meal-shop-head__actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.meal-shop-add {
  display: grid; grid-template-columns: 1fr 90px 130px auto;
  gap: 8px; margin-bottom: var(--space-3);
}
.meal-shop-print-head {
  display: none;
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.3rem; margin-bottom: var(--space-3);
}
.meal-shop-cat { margin-bottom: var(--space-3); }
.meal-shop-cat__label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-muted); margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border, #e9e2d3); padding-bottom: 2px;
}
.meal-shop-item {
  display: grid; grid-template-columns: auto 80px 1fr auto;
  gap: 8px; align-items: center;
  padding: 4px 0;
  border-bottom: 1px dotted var(--color-border, #e9e2d3);
  cursor: pointer;
}
.meal-shop-item--checked .meal-shop-item__name,
.meal-shop-item--checked .meal-shop-item__qty {
  text-decoration: line-through; color: var(--color-text-faint);
}
.meal-shop-item__qty {
  font-family: var(--font-serif); font-style: italic;
  color: var(--color-text-muted); outline: none;
}
.meal-shop-item__name { outline: none; }
.meal-shop-item__qty:focus, .meal-shop-item__name:focus { background: rgba(166, 138, 43, 0.06); }
.meal-shop-item__del {
  background: transparent; border: none; color: var(--color-text-faint);
  cursor: pointer; font-size: 1rem;
}
.meal-shop-item__del:hover { color: var(--color-error, #B5202A); }
/* v1.3.61 — persistent allergen flag on shopping items sourced from a
   hazelnut-containing recipe. The modal confirmation handles add-time
   awareness; this keeps the warning visible while the list is being shopped. */
.meal-shop-item__hazel {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.95em;
  line-height: 1;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  color: var(--color-error, #B5202A);
}
.meal-shop-item--hazel .meal-shop-item__name {
  color: var(--color-error, #B5202A);
}

/* Calendar overlay labels */
.cal-meals-overlay {
  display: flex; flex-direction: column; gap: 1px;
  margin-top: 2px;
}
.cal-meals-overlay__row {
  font-family: var(--font-serif); font-style: italic;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-meals-overlay__row--hazel { color: var(--color-error, #B5202A); font-weight: 600; }

/* Mobile / print */
@media (max-width: 720px) {
  .meal-week-row { grid-template-columns: 90px repeat(7, 1fr); }
  .meal-detail__columns { grid-template-columns: 1fr; }
  .meal-shop-layout { grid-template-columns: 1fr; }
  .meal-recipe-toolbar { grid-template-columns: 1fr; }
}

@media print {
  body.print-shopping .sidebar,
  body.print-shopping .topbar,
  body.print-shopping .app-footer,
  body.print-shopping .meal-tabs,
  body.print-shopping .section-header,
  body.print-shopping .meal-shop-sidebar,
  body.print-shopping .meal-shop-head__actions,
  body.print-shopping .meal-shop-add,
  body.print-shopping .meal-shop-item__del,
  body.print-shopping .no-print {
    display: none !important;
  }
  body.print-shopping .meal-shop-layout { grid-template-columns: 1fr; }
  body.print-shopping .meal-shop-main { border: none; padding: 0; }
  body.print-shopping .meal-shop-print-head { display: block; }
  body.print-shopping { background: #fff; color: #000; }
}

/* ───── v1.3.48 — Family directory polish & print view ───────────────── */
.family-grid { gap: var(--space-3); }
.family-card { cursor: default; transition: box-shadow .15s ease, transform .15s ease; }
.family-card:hover { box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,0.06)); transform: translateY(-1px); }
.family-card__name {
  font-family: var(--font-body);
  font-weight: 600;
}
.family-card__sub {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
}
.family-card__allergy {
  margin-top: 4px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .82rem;
  color: #B5202A;
}

/* ── Detail page ─────────────────────────────────────────────────────── */
.family-detail { display: flex; flex-direction: column; gap: var(--space-4); }
.family-detail-header { display: flex; align-items: center; gap: var(--space-3); }
.family-detail-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 2.25rem;
  line-height: 1.1;
  color: var(--text-heading, #1B2A41);
  margin: 0;
}
.family-detail-sub {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
  margin-top: 2px;
}
.family-detail-title-block { display: flex; flex-direction: column; }
.family-detail-grid {
  display: grid;
  grid-template-columns: 220px repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  align-items: start;
}
.family-detail-grid > .card { display: flex; flex-direction: column; }
.family-detail-photo-card { align-items: center; }
.family-detail-photo-wrap {
  position: relative;
  width: 180px; height: 180px;
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.05));
}
.family-detail-photo {
  width: 180px; height: 180px;
  object-fit: cover;
  border-radius: var(--radius-lg, 14px);
  display: block;
}
.family-detail-photo--initial {
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 4rem;
  font-weight: 500;
}
.family-detail-photo-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .82rem;
  color: #fff;
  background: rgba(0,0,0,0.45);
  padding: 4px 0;
  opacity: 0;
  transition: opacity .15s ease;
}
.family-detail-photo-wrap:hover .family-detail-photo-overlay { opacity: 1; }

.family-detail-section-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-heading);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  padding-bottom: 4px;
}
.family-detail-vital {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.family-detail-vital > div { display: flex; flex-direction: column; }
.family-detail-vital-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .82rem;
  color: var(--text-muted);
}
.family-detail-vital-val {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.05rem;
}
.planner-ordinal { font-size: 0.55em; vertical-align: super; margin-left: 2px; font-style: italic; }

.family-detail-allergy-banner {
  background: rgba(181, 32, 42, 0.08);
  border: 1px solid rgba(181, 32, 42, 0.25);
  color: #B5202A;
  padding: 8px 12px;
  border-radius: var(--radius-md, 8px);
  font-family: var(--font-serif);
  font-style: italic;
  margin-bottom: var(--space-2);
}
.family-detail-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.family-detail-field--full { grid-column: 1 / -1; }
.family-detail-field-label {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .82rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.family-detail-textarea { min-height: 70px; resize: vertical; }
.family-detail-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.family-detail-links a {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-heading);
  text-decoration: none;
  border-bottom: 1px dotted var(--border-subtle);
  padding-bottom: 2px;
}
.family-detail-links a:hover { color: var(--accent, #1B3C8E); }

/* ── Print view ──────────────────────────────────────────────────────── */
/* v1.3.55: scoped to body.page-family. Before scoping, the `body * { visibility:
   hidden }` rule below was leaking onto every other page's print output —
   notably Calendar — and hiding everything. */
.family-print-view { display: none; }
@media print {
  body.page-family * { visibility: hidden; }
  body.page-family .family-print-view,
  body.page-family .family-print-view * { visibility: visible; }
  body.page-family .family-print-view {
    display: block;
    position: absolute;
    inset: 0;
    padding: 32px;
    background: #fff;
    color: #1B2A41;
  }
  body.page-family .family-print-header { margin-bottom: 16px; border-bottom: 1px solid #c9c2b7; padding-bottom: 8px; }
  body.page-family .family-print-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.8rem;
  }
  body.page-family .family-print-sub {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: #6b6b6b;
    font-size: 0.9rem;
  }
  body.page-family .family-print-list { list-style: none; padding: 0; margin: 0; columns: 1; }
  body.page-family .family-print-list li {
    break-inside: avoid;
    padding: 8px 0;
    border-bottom: 1px dashed #d8d0c2;
  }
  body.page-family .family-print-name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
  }
  body.page-family .family-print-meta {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.9rem;
    color: #4a4a4a;
  }
  body.page-family .family-print-allergy { color: #B5202A; }
}

/* ───── v1.3.48 — Notification panel refinements ─────────────────────── */
.notif-panel-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-heading);
}
.notif-panel-list { display: flex; flex-direction: column; gap: 2px; }
.notif-empty { cursor: default; }
.notif-empty:hover { background: transparent; }
.notif-item-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: normal;
}
.notif-item-body {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  white-space: pre-wrap;
}

/* ── v1.3.48: Receipt scanning inbox ──────────────────────────────────── */
.receipt-upload-card { margin: 16px 0 20px; }
.receipt-drop {
  border: 2px dashed var(--color-rule, #c9bfa9);
  border-radius: 10px;
  padding: 32px 20px;
  text-align: center;
  background: var(--surface, #fdfaf5);
  transition: border-color 120ms ease, background 120ms ease;
}
.receipt-drop.is-dragover {
  border-color: var(--color-accent, #01696f);
  background: rgba(1, 105, 111, 0.04);
}
.receipt-drop.is-uploading {
  border-style: solid;
  border-color: var(--color-accent, #01696f);
  background: rgba(1, 105, 111, 0.04);
}
.receipt-drop-idle, .receipt-drop-busy {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-muted, #6f6657);
}
.receipt-drop-idle strong,
.receipt-drop-busy strong {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--text-heading, #2b2418);
}
.receipt-drop-hint { font-size: 0.8125rem; opacity: 0.7; }
.btn-link {
  background: none; border: none; color: var(--color-accent, #01696f);
  text-decoration: underline; cursor: pointer; padding: 0;
  font: inherit;
}
.receipt-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(1,105,111,0.18);
  border-top-color: var(--color-accent, #01696f);
  border-radius: 50%;
  animation: receipt-spin 1s linear infinite;
  margin-bottom: 6px;
}
@keyframes receipt-spin { to { transform: rotate(360deg); } }

.receipt-list {
  display: flex; flex-direction: column; gap: 16px;
}
.receipt-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  background: var(--surface, #fdfaf5);
  border: 1px solid var(--color-rule, #c9bfa9);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.receipt-card-thumb img {
  width: 100%; height: auto; max-height: 220px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--color-rule, #c9bfa9);
  background: #fff;
}
.receipt-card-thumb-empty {
  width: 100%; height: 140px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--color-rule, #c9bfa9); border-radius: 6px;
  color: var(--text-muted, #6f6657); font-size: 0.85rem;
}
.receipt-card-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.receipt-card-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.receipt-card-uploader {
  font-size: 0.8125rem; color: var(--text-muted, #6f6657);
  flex: 1; min-width: 0;
}
.receipt-card-delete {
  font-size: 1.1rem; line-height: 1; padding: 2px 8px;
}
.receipt-status {
  display: inline-block; padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.receipt-status--pending  { background: rgba(218, 113, 1, 0.16); color: #8a4500; }
.receipt-status--reviewed { background: rgba(36, 85, 181, 0.14); color: #1B3C8E; }
.receipt-status--logged   { background: rgba(67, 122, 34, 0.18); color: #3a6720; }
.receipt-status--rejected { background: rgba(122, 122, 122, 0.18); color: #555; }

.receipt-banner {
  background: rgba(218, 113, 1, 0.12);
  border-left: 3px solid #da7101;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #8a4500;
}
.receipt-banner--soft {
  background: rgba(232, 169, 35, 0.12);
  border-left-color: #E8A923;
  color: #8a6700;
}

.receipt-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.receipt-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.receipt-field--wide { grid-column: 1 / -1; }
.receipt-field > span {
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted, #6f6657);
}
.receipt-field input,
.receipt-field select {
  font: inherit; font-size: 0.95rem;
  padding: 5px 8px;
  background: #fff;
  border: 1px solid var(--color-rule, #c9bfa9);
  border-radius: 4px;
  color: var(--text-body, #2b2418);
}
.receipt-field input:disabled,
.receipt-field select:disabled {
  background: #f4efe5; color: var(--text-muted, #6f6657); cursor: not-allowed;
}
.receipt-card-foot {
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--color-rule, #c9bfa9);
  padding-top: 10px; margin-top: 4px;
}
.receipt-card-foot-spacer { flex: 1; }
.receipt-linked {
  font-size: 0.85rem; font-style: italic; color: var(--text-muted, #6f6657);
}

@media (max-width: 640px) {
  .receipt-card { grid-template-columns: 1fr; }
  .receipt-card-thumb img { max-height: 160px; }
  .receipt-fields { grid-template-columns: 1fr; }
}

/* ─── v1.3.50 Home module ───────────────────────────────────────────────── */
.home-page-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 2rem;
  margin: 0;
  color: var(--color-text);
  letter-spacing: 0.01em;
}
.home-section-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--color-text);
  margin: var(--space-4) 0 var(--space-2);
  border-bottom: 1px solid var(--color-border, #e9e2d3);
  padding-bottom: var(--space-1);
}
.home-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--color-border, #e9e2d3);
  margin: 0 0 var(--space-3) 0;
}
.home-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-text-muted);
  cursor: pointer;
}
.home-tab:hover { color: var(--color-text); }
.home-tab--active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

.home-empty {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-muted);
  padding: var(--space-3);
}

.home-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border, #e9e2d3);
  border-radius: var(--radius-md, 6px);
  background: var(--color-bg-card, #fffdf8);
  margin-bottom: var(--space-3);
}
.home-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.home-table th {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  text-align: left;
  padding: var(--space-2);
  background: rgba(166, 138, 43, 0.06);
  border-bottom: 1px solid var(--color-border, #e9e2d3);
  color: var(--color-text);
}
.home-table td {
  padding: 4px var(--space-2);
  border-bottom: 1px solid var(--color-border, #e9e2d3);
  vertical-align: middle;
}
.home-table tr:last-child td { border-bottom: none; }
.home-edit {
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 6px;
  width: 100%;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--color-text);
  border-radius: 4px;
}
.home-edit:hover, .home-edit:focus {
  border-color: var(--color-border, #e9e2d3);
  background: var(--color-bg, #fdfaf5);
  outline: none;
}
.home-edit--num { text-align: right; }
.home-row-actions { white-space: nowrap; text-align: right; }
.home-row--overdue { background: rgba(220, 38, 38, 0.07); }
.home-row--overdue td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.home-row--due-soon { background: rgba(234, 179, 8, 0.08); }
.home-row--due-soon td:first-child { box-shadow: inset 3px 0 0 #b45309; }

.home-filter-row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.home-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.home-filter select {
  padding: 6px 8px;
  border: 1px solid var(--color-border, #e9e2d3);
  border-radius: 4px;
  background: var(--color-bg-card, #fffdf8);
  font-family: inherit;
  font-style: normal;
  color: var(--color-text);
}

.home-inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}
.home-inv-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--color-bg-card, #fffdf8);
  border: 1px solid var(--color-border, #e9e2d3);
  border-radius: var(--radius-md, 6px);
  padding: 10px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.home-inv-card:hover {
  border-color: var(--color-accent, #a68a2b);
}
.home-inv-card__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
  background: #f3ecd9;
}
.home-inv-card__placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3ecd9;
  color: #8a7a52;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2rem;
  border-radius: 4px;
  margin-bottom: 8px;
}
.home-inv-card__name {
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--color-text);
}
.home-inv-card__meta {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.home-inv-card__sub {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.home-inv-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: var(--space-3);
}
.home-inv-detail__photo {
  max-width: 240px;
  max-height: 180px;
  border-radius: 4px;
  border: 1px solid var(--color-border, #e9e2d3);
}
.home-inv-detail__placeholder {
  width: 240px; height: 140px;
  display: flex; align-items: center; justify-content: center;
  background: #f3ecd9; color: #8a7a52;
  font-family: var(--font-serif); font-style: italic;
  border-radius: 4px;
}

.home-link {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--color-text);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-accent, #a68a2b);
  text-underline-offset: 3px;
  cursor: pointer;
}
.home-link:hover { color: var(--color-accent, #a68a2b); }
.home-tag {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.8rem;
  padding: 2px 8px;
  background: rgba(166, 138, 43, 0.08);
  border: 1px solid var(--color-border, #e9e2d3);
  border-radius: 999px;
  color: var(--color-text-muted);
}
.home-doc-expired {
  color: #b91c1c;
  font-weight: 600;
}

/* v1.3.50 — Maintenance overlay on the month calendar. */
.cal-maint-overlay {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.7rem;
  color: #6b5e44;
  padding: 1px 2px;
  line-height: 1.2;
}
.cal-maint-overlay__row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-maint-overlay__row--overdue { color: #b91c1c; }

/* v1.3.54 — Payments (recurring bills) row tinting */
.bill-overdue td  { color: #b91c1c; }
.bill-overdue td strong { color: #b91c1c; }
.bill-due-soon td { color: #b45309; }
.bill-due-soon td strong { color: #b45309; }
[data-theme="paper"] .bill-overdue td   { color: #9a3a2a; }
[data-theme="paper"] .bill-due-soon td  { color: #a06d18; }

/* Calendar bill overlay — italic serif planner label */
.cal-bill-overlay {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px;
  color: var(--color-text-muted);
  padding: 1px 2px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-bill-overlay--overdue  { color: #b91c1c; }
.cal-bill-overlay--due-soon { color: #b45309; }

/* ── Family Photos gallery (v1.3.61) ────────────────────────────────────── */
.family-subnav {
  display: flex;
  gap: var(--space-4);
  border-bottom: 1px solid var(--border-line);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
}
.family-subnav__link {
  background: none;
  border: none;
  padding: var(--space-1) 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.family-subnav__link:hover { color: var(--color-warm-ink, #5a4a3a); }
.family-subnav__link.is-active {
  color: var(--color-warm-ink, #5a4a3a);
  border-bottom-color: var(--color-warm-ink, #5a4a3a);
}
[data-theme="dark"] .family-subnav__link.is-active,
[data-theme="dark"] .family-subnav__link:hover { color: var(--color-text); }

.family-photos__title {
  font-family: var(--font-serif);
  font-style: italic;
}
.family-photos__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
}
.family-photos__grid {
  column-count: 4;
  column-gap: 12px;
}
@media (max-width: 1100px) { .family-photos__grid { column-count: 3; } }
@media (max-width: 760px)  { .family-photos__grid { column-count: 2; } }
@media (max-width: 460px)  { .family-photos__grid { column-count: 1; } }

.family-photos__item {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  background: none;
  border: 1px solid var(--border-line);
  border-radius: 8px;
  overflow: hidden;
  break-inside: avoid;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
}
.family-photos__item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-paper);
}
.family-photos__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px 8px 0 0;
}
.family-photos__item:only-child img,
.family-photos__item:not(:has(.family-photos__caption)) img {
  border-radius: 8px;
}
.family-photos__caption {
  padding: 6px 10px 8px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.family-photos__more {
  display: flex;
  justify-content: center;
  margin: var(--space-4) 0 var(--space-2);
}
.family-photos__count {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.family-photos__empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.family-photos__empty-hint {
  margin-top: var(--space-2);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.family-photos__empty-hint a { color: var(--color-warm-ink, #5a4a3a); }

/* Lightbox */
.family-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 8, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.family-lightbox__stage {
  max-width: min(92vw, 1400px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.family-lightbox__img {
  max-width: 100%;
  max-height: 84vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.family-lightbox__caption {
  font-family: var(--font-serif);
  font-style: italic;
  color: #f6efe0;
  font-size: 1rem;
  text-align: center;
  max-width: 80ch;
}
.family-lightbox__close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: #f6efe0;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
}
.family-lightbox__close:hover { background: rgba(255,255,255,0.1); }
.family-lightbox__nav {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.18);
  color: #f6efe0;
  font-size: 2.5rem;
  line-height: 1;
  width: 52px;
  height: 64px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.family-lightbox__nav:hover { background: rgba(255,255,255,0.15); }
.family-lightbox__nav--prev { margin-right: 8px; }
.family-lightbox__nav--next { margin-left: 8px; }

/* Dashboard photo widget — discoverable hover state (v1.3.61) */
.planner-photo--linked .planner-photo__frame { position: relative; }
.planner-photo__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 12, 8, 0.0);
  color: #f6efe0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  opacity: 0;
  transition: background 0.2s ease, opacity 0.2s ease;
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.planner-photo--linked:hover .planner-photo__overlay,
.planner-photo--linked:focus-visible .planner-photo__overlay {
  opacity: 1;
  background: rgba(15, 12, 8, 0.42);
}

/* ── Pets module (v1.3.65) ──────────────────────────────────────────── */
.pets-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.pets-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2rem;
  color: var(--color-text, #5a4a3a);
  line-height: 1.1;
}
.pets-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-muted, #8d795a);
  font-size: 1rem;
  margin-top: 2px;
}
.pets-section { margin-bottom: var(--space-5); }
.pets-section__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--color-text, #5a4a3a);
  border-bottom: 1px solid var(--color-border, #e4d8bf);
  padding-bottom: 4px;
  margin-bottom: var(--space-3);
}
.pets-section__title--memorial {
  color: var(--color-text-muted, #8d795a);
  border-bottom-style: dashed;
}
.pets-section--memorial { opacity: 0.85; }
.pets-section__empty { padding: var(--space-3) 0; color: var(--color-text-muted); }
.pets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}
.pet-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface, #fffaf0);
  border: 1px solid var(--color-border, #e4d8bf);
  border-radius: 10px;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
}
.pet-card:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.pet-card--memorial {
  background: rgba(245, 240, 230, 0.6);
  filter: grayscale(0.35);
}
.pet-card__photo { flex-shrink: 0; }
.pet-card__body { flex: 1; min-width: 0; }
.pet-card__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--color-text, #5a4a3a);
  line-height: 1.1;
}
.pet-card__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--color-text-muted, #8d795a);
  margin-top: 2px;
  text-transform: lowercase;
}
.pet-card__age-row {
  margin-top: 4px;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text, #5a4a3a);
}
.pet-card__age sup { font-size: 0.65em; vertical-align: super; margin-left: 1px; }
.pet-card__est {
  margin-left: 6px;
  font-size: 0.7rem;
  padding: 1px 6px;
  border: 1px dashed var(--color-text-muted, #8d795a);
  border-radius: 8px;
  color: var(--color-text-muted, #8d795a);
  font-style: italic;
}
.pet-card__weight {
  font-size: 0.85rem;
  color: var(--color-text-muted, #8d795a);
  margin-top: 2px;
}
.pet-card__memorial {
  margin-top: 4px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--color-text-muted, #8d795a);
}
.pet-photo-img {
  object-fit: cover;
  border-radius: 50%;
  background: var(--color-surface, #fffaf0);
  border: 1px solid var(--color-border, #e4d8bf);
}
.pet-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(212, 133, 58, 0.12);
  color: rgba(138, 79, 23, 0.65);
  border: 1px dashed rgba(138, 79, 23, 0.35);
}

/* Detail page */
.pet-detail__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.pet-detail__title-block { flex: 1; min-width: 0; }
.pet-detail__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.2rem;
  color: var(--color-text, #5a4a3a);
  margin: 0;
  outline: none;
}
.pet-detail__name:focus { background: rgba(212, 133, 58, 0.08); border-radius: 4px; }
.pet-detail__sub {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-muted, #8d795a);
  margin-top: 2px;
  text-transform: lowercase;
}
.pet-detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.pet-detail__photo-card { text-align: center; }
.pet-detail__photo-wrap {
  position: relative;
  width: 192px;
  height: 192px;
  margin: 0 auto;
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
}
.pet-detail__photo-wrap .pet-photo-img,
.pet-detail__photo-wrap .pet-photo-placeholder { width: 192px; height: 192px; }
.pet-detail__photo-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 6px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity .15s ease;
}
.pet-detail__photo-wrap:hover .pet-detail__photo-overlay { opacity: 1; }
.pet-detail__section-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-text, #5a4a3a);
  margin-bottom: var(--space-2);
}
.pet-detail__vital {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2);
}
.pet-detail__vital > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pet-detail__vital-label {
  font-size: 0.75rem;
  color: var(--color-text-muted, #8d795a);
  text-transform: lowercase;
  font-family: var(--font-serif);
  font-style: italic;
}
.pet-detail__vital-val {
  font-size: 1rem;
  color: var(--color-text, #5a4a3a);
}
.pet-detail__vital-val sup { font-size: 0.7em; }
.pet-est-badge {
  font-size: 0.65rem;
  padding: 1px 6px;
  border: 1px dashed var(--color-text-muted, #8d795a);
  border-radius: 8px;
  color: var(--color-text-muted, #8d795a);
  font-style: italic;
  margin-left: 6px;
}
.pet-detail__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
}
.pet-detail__field { display: flex; flex-direction: column; gap: 4px; }
.pet-detail__field--full { grid-column: 1 / -1; }
.pet-detail__field--check { grid-column: 1 / -1; padding-top: 6px; }
.pet-detail__field-label {
  font-size: 0.75rem;
  color: var(--color-text-muted, #8d795a);
  text-transform: lowercase;
  font-family: var(--font-serif);
  font-style: italic;
}
.pet-detail__bio-card { grid-column: 1 / -1; }
.pet-detail__bio {
  width: 100%;
  resize: vertical;
  font-family: var(--font-body, Inter), sans-serif;
}

/* Tabs */
.pet-detail__tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border, #e4d8bf);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.pet-detail__tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--color-text-muted, #8d795a);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
}
.pet-detail__tab.is-active {
  color: var(--color-text, #5a4a3a);
  border-bottom-color: #d4853a;
}
.pet-detail__tab:hover { color: var(--color-text, #5a4a3a); }

.pet-tab-actions { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); justify-content: flex-end; }
.pet-subsection-title {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text, #5a4a3a);
  margin: var(--space-3) 0 var(--space-1) 0;
}
.pet-subsection-title--muted { color: var(--color-text-muted, #8d795a); }

.pet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--color-surface, #fffaf0);
  border: 1px solid var(--color-border, #e4d8bf);
  border-radius: 8px;
  overflow: hidden;
}
.pet-table th, .pet-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border, #e4d8bf);
  vertical-align: middle;
}
.pet-table th {
  background: rgba(212, 133, 58, 0.06);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-muted, #8d795a);
  font-weight: 500;
  text-transform: lowercase;
}
.pet-table--muted { opacity: 0.75; }
.pet-table tbody tr:last-child td { border-bottom: none; }
.form-input--inline, .form-select--inline {
  padding: 4px 6px;
  font-size: 0.9rem;
  background: transparent;
  border: 1px solid transparent;
  width: 100%;
  min-width: 90px;
}
.form-input--inline:focus, .form-select--inline:focus {
  background: #fff;
  border-color: var(--color-border, #e4d8bf);
  outline: none;
}

.pet-due-banner {
  background: rgba(212, 133, 58, 0.12);
  border-left: 3px solid #d4853a;
  padding: 8px 12px;
  margin-bottom: var(--space-3);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text, #5a4a3a);
  border-radius: 4px;
}

.pet-weight-chart {
  background: #fffaf0;
  border: 1px solid var(--color-border, #e4d8bf);
  border-radius: 8px;
  padding: var(--space-2);
  margin: var(--space-2) 0;
}
.pet-weight-chart svg { width: 100%; height: auto; display: block; }

.pet-feeding-current { grid-column: 1 / -1; }

.pets-empty {
  padding: var(--space-4) var(--space-3);
  color: var(--color-text-muted, #8d795a);
}

/* Calendar overlay distinctions for pet items */
.cal-holiday.pet-birthday,
.cal-holiday.pet-care {
  color: #8a4f17;
  cursor: pointer;
}
.cal-holiday.pet-care { font-size: 0.7rem; opacity: 0.85; }

/* Dashboard birthday list paw */
.planner-birthday__paw { font-size: 0.85em; margin-right: 4px; }

/* ── Pantry (v1.3.67) ────────────────────────────────────────────────── */
.pantry-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: var(--space-3); gap: var(--space-3); flex-wrap: wrap;
}
.pantry-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2rem;
  color: var(--color-text, #2a2419);
}
.pantry-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-text-muted, #8d795a);
  font-size: 0.95rem;
}
.pantry-header__actions { display: flex; gap: var(--space-2); }

.pantry-toolbar {
  display: flex; gap: var(--space-2); margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.pantry-search { flex: 1 1 240px; }
.pantry-sort { flex: 0 0 200px; }

.pantry-pills {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3);
}
.pantry-pill {
  background: var(--color-bg-paper, #faf6ef);
  border: 1px solid var(--color-border, #e2d9c4);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--font-sans, Inter), system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--color-text-muted, #8d795a);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pantry-pill:hover { background: #f3eadb; }
.pantry-pill.is-active {
  background: var(--color-primary, #6f5942);
  color: #fff;
  border-color: var(--color-primary, #6f5942);
}

.pantry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

.pantry-card {
  background: var(--color-bg-paper, #faf6ef);
  border: 1px solid var(--color-border, #e2d9c4);
  border-radius: 6px;
  padding: var(--space-2);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.pantry-card:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.pantry-card--trash { opacity: 0.6; }

.pantry-card__img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px;
  background: #efe8d6;
}
.pantry-card__img--placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--color-text-muted, #8d795a);
}

.pantry-card__name {
  font-family: var(--font-sans, Inter), system-ui, sans-serif;
  font-weight: 600;
  color: var(--color-text, #2a2419);
}
.pantry-card__brand {
  font-size: 0.85rem;
  color: var(--color-text-muted, #8d795a);
}
.pantry-card__meta {
  display: flex; justify-content: space-between;
  font-size: 0.85rem;
  color: var(--color-text-muted, #8d795a);
}
.pantry-card__exp {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-family: var(--font-sans, Inter), system-ui, sans-serif;
}
.pantry-card__exp--none { color: #aaa; }
.pantry-card--fresh .pantry-card__exp  { background: #d8eccf; color: #2f5d2a; }
.pantry-card--warn .pantry-card__exp   { background: #fbf3c4; color: #6e5500; }
.pantry-card--soon .pantry-card__exp   { background: #fde0c8; color: #884a14; }
.pantry-card--expired .pantry-card__exp{ background: #f8c3bd; color: #7a1f1f; }

.pantry-card__opened {
  font-size: 0.75rem; font-style: italic;
  color: var(--color-text-muted, #8d795a);
}
.pantry-card__allergen-dot {
  display: inline-block;
  margin-left: 6px;
  color: #b91c1c;
  font-size: 0.9em;
}
.pantry-card__low-dot {
  display: inline-block;
  margin-left: 4px;
  color: #d97706;
}

.pantry-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted, #8d795a);
  font-family: var(--font-serif);
  font-size: 1.1rem;
}

.pantry-allergen-banner {
  background: #fde2e1;
  color: #7a1f1f;
  border: 1px solid #f3a6a0;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: var(--space-2);
  font-family: var(--font-serif); font-style: italic;
}

/* Scanner */
.pantry-scan { max-width: 720px; margin: 0 auto; }
.pantry-scan__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-2);
}
.pantry-scan__title {
  font-family: var(--font-serif); font-style: italic; font-size: 1.6rem;
}
.pantry-scan__viewport {
  position: relative;
  width: 100%; aspect-ratio: 4/3;
  background: #000;
  border-radius: 6px; overflow: hidden;
  margin-bottom: var(--space-2);
}
.pantry-scan__video {
  width: 100%; height: 100%; object-fit: cover;
}
.pantry-scan__frame {
  position: absolute; inset: 15% 10%;
  border: 2px dashed rgba(255,255,255,.7);
  border-radius: 8px; pointer-events: none;
}
.pantry-scan__status {
  text-align: center;
  font-family: var(--font-serif); font-style: italic;
  color: var(--color-text-muted, #8d795a);
  margin-bottom: var(--space-2);
}
.pantry-scan__manual {
  background: var(--color-bg-paper, #faf6ef);
  border: 1px solid var(--color-border, #e2d9c4);
  border-radius: 6px;
  padding: var(--space-2);
  margin-bottom: var(--space-2);
}
.pantry-scan__product {
  background: var(--color-bg-paper, #faf6ef);
  border: 1px solid var(--color-border, #e2d9c4);
  border-radius: 6px;
  padding: var(--space-3);
}
.pantry-scan__product-head { display: flex; gap: var(--space-2); align-items: flex-start; }
.pantry-scan__product-img { width: 96px; height: 96px; object-fit: cover; border-radius: 4px; }
.pantry-scan__product-img--ph {
  display: flex; align-items: center; justify-content: center;
  background: #efe8d6; font-size: 2rem;
}
.pantry-scan__product-name { font-weight: 600; font-size: 1.1rem; }
.pantry-scan__product-brand { color: var(--color-text-muted, #8d795a); }
.pantry-scan__product-upc { color: var(--color-text-muted, #8d795a); font-size: 0.85rem; }
.pantry-add-form { margin-top: var(--space-2); }
.pantry-loc-radios { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pantry-loc-radios label { font-size: 0.9rem; }

/* Detail modal */
.pantry-detail__hero { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
.pantry-detail__img { width: 120px; height: 120px; object-fit: cover; border-radius: 4px; }
.pantry-detail__img--ph {
  display: flex; align-items: center; justify-content: center;
  background: #efe8d6; font-size: 2.5rem;
}
.pantry-detail__name { font-family: var(--font-serif); font-style: italic; font-size: 1.4rem; }
.pantry-detail__brand { color: var(--color-text-muted, #8d795a); margin-bottom: var(--space-1); }
.pantry-detail__meta { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.pantry-detail__qty { width: 80px; }
.pantry-detail__loc { width: 140px; }
.pantry-detail__opened { font-size: 0.9rem; display: flex; align-items: center; gap: 4px; }
.pantry-detail__exp { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.pantry-detail__exp label { font-size: 0.85rem; color: var(--color-text-muted, #8d795a); }
.pantry-detail__actions {
  display: flex; gap: var(--space-2);
  margin: var(--space-2) 0;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border, #e2d9c4);
  border-bottom: 1px solid var(--color-border, #e2d9c4);
}
.pantry-detail__tabs {
  display: flex; gap: 0; margin-top: var(--space-2);
  border-bottom: 1px solid var(--color-border, #e2d9c4);
}
.pantry-tab {
  background: none; border: none;
  padding: 8px 14px;
  font-family: var(--font-sans, Inter), system-ui, sans-serif;
  color: var(--color-text-muted, #8d795a);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  text-transform: capitalize;
}
.pantry-tab.is-active {
  color: var(--color-primary, #6f5942);
  border-bottom-color: var(--color-primary, #6f5942);
}
.pantry-detail__tab-body {
  padding-top: var(--space-2);
  max-height: 320px; overflow-y: auto;
}
.pantry-nutrition { width: 100%; border-collapse: collapse; }
.pantry-nutrition th { text-align: left; padding: 4px 8px; font-weight: 600; }
.pantry-nutrition td { padding: 4px 8px; text-align: right; }
.pantry-nutrition tr + tr { border-top: 1px solid var(--color-border, #e2d9c4); }
.pantry-ingredients { line-height: 1.5; }
.pantry-allergen-mark { background: #fde2e1; color: #7a1f1f; padding: 0 2px; }
.pantry-history { list-style: none; padding: 0; margin: 0; }
.pantry-history li { padding: 4px 0; font-size: 0.88rem; border-bottom: 1px dashed var(--color-border, #e2d9c4); }
.pantry-history__type { font-weight: 600; text-transform: capitalize; }
.pantry-history__ts { color: var(--color-text-muted, #8d795a); margin-left: 6px; font-size: 0.8rem; }
.pantry-notes { width: 100%; }

.pantry-badge {
  display: inline-block;
  padding: 2px 8px; margin-right: 4px; margin-top: 4px;
  border-radius: 999px; font-size: 0.78rem; font-weight: 600;
}
.pantry-badge--a, .pantry-badge--b { background: #d8eccf; color: #2f5d2a; }
.pantry-badge--c { background: #fbf3c4; color: #6e5500; }
.pantry-badge--d { background: #fde0c8; color: #884a14; }
.pantry-badge--e { background: #f8c3bd; color: #7a1f1f; }
.pantry-badge--nova { background: #e6e2d5; color: #4a3f29; }

/* Dashboard widgets */
.planner-pantry-list { list-style: none; padding: 0; margin: 0; }
.planner-pantry-row {
  display: flex; justify-content: space-between; padding: 6px 4px;
  border-bottom: 1px dashed var(--color-border, #e2d9c4);
  cursor: pointer;
}
.planner-pantry-row:last-child { border-bottom: none; }
.planner-pantry-row__name { font-weight: 500; }
.planner-pantry-row__exp,
.planner-pantry-row__qty { color: var(--color-text-muted, #8d795a); font-size: 0.85rem; }
.planner-pantry-row.pantry-card--expired { color: #7a1f1f; }
.planner-pantry-row.pantry-card--soon { color: #884a14; }

/* Recipe "in pantry" indicator */
.recipe-in-pantry { color: #2f5d2a; font-size: 0.85em; margin-left: 6px; }
.recipe-in-pantry--low { color: #884a14; }

/* ── v1.3.76: Mabry memorial — inset cherub image on Feb 23 calendar cell ─ */
/* The day cell keeps the normal cream paper background and renders a centered
   sleeping-cherub photo as an actual <img>, with the italic-serif "mabry / in
   loving memory" text stacked below it. Other memorial surfaces (family card,
   family detail, day-modal list, printable directory) keep the emoji prefix
   via memorialPrefix(). */
.calendar-day__memorial-img {
  display: block;
  margin: 2px auto 0;
  max-width: 80%;
  max-height: 65%;
  object-fit: contain;
  border: 1px solid rgba(120, 90, 60, 0.35);
  box-shadow: 0 1px 2px rgba(74, 58, 42, 0.18);
  pointer-events: none;
}
/* Memorial text below the image — italic serif, two stacked lines. */
.cal-holiday.memorial {
  display: flex;
  flex-direction: column;
  white-space: normal;
  overflow: visible;
  line-height: 1.1;
  color: #4a3a2a;
  font-weight: 500;
  text-align: center;
}
.cal-holiday.memorial .memorial-line-1,
.cal-holiday.memorial .memorial-line-2 {
  display: block;
  text-align: center;
}
.cal-holiday.memorial .memorial-line-2 {
  font-size: 0.78em;
  opacity: 0.92;
}

/* Print: keep the inset image visible at full color, wrap the text cleanly. */
@media print {
  body.page-calendar .calendar-day__memorial-img {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body.page-calendar .cal-holiday.memorial {
    color: #4a3a2a !important;
    font-style: italic !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  body.page-calendar .cal-holiday.memorial .memorial-line-2 {
    font-size: 0.85em !important;
  }
}

/* ── Scripture & Bible Study (v1.3.83) ─────────────────────────────────── */
.scripture-page, .bible-study-page, .bible-study-detail {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
}
.scripture-header { text-align: center; margin-bottom: 1.5rem; }
.scripture-title {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.9rem;
  color: var(--color-ink, #2a2823);
  margin: 0 0 0.4rem;
  letter-spacing: 0.01em;
}
.scripture-sub {
  font-family: var(--font-sans, 'Inter', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  color: var(--color-muted, #7a7468);
  font-weight: 500;
  margin: 0;
}
.scripture-form { margin: 1rem 0 1.5rem; }
.scripture-textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border, #ddd5c5);
  border-radius: 6px;
  background: var(--color-paper, #fdfaf5);
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--color-ink, #2a2823);
  resize: vertical;
  box-sizing: border-box;
}
.scripture-textarea::placeholder { font-style: italic; color: var(--color-muted, #9c9485); }
.scripture-form-row {
  display: flex; align-items: center; gap: 1.25rem; margin-top: 0.85rem;
}
.btn-scripture {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  padding: 0.6rem 1.3rem;
  background: var(--color-accent, #01696f);
  color: var(--color-paper, #fdfaf5);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.btn-scripture:hover { opacity: 0.85; }
.scripture-journal-link {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  color: var(--color-accent, #01696f);
  text-decoration: none;
  font-size: 1rem;
}
.scripture-journal-link:hover { text-decoration: underline; }
.scripture-cat-line {
  text-align: center;
  font-family: var(--font-sans, 'Inter', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  color: var(--color-muted, #7a7468);
  margin: 0 0 1rem;
}
.scripture-fallback-note {
  text-align: center;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  color: var(--color-muted, #7a7468);
  font-size: 0.95rem;
  margin: 0.25rem 0 1rem;
}
.scripture-empty {
  text-align: center;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  color: var(--color-muted, #7a7468);
  padding: 2rem 1rem;
}
.scripture-cards {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.verse-card {
  background: var(--color-paper, #fdfaf5);
  border: 1px solid var(--color-border, #ddd5c5);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.verse-text {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--color-ink, #2a2823);
  margin: 0 0 0.6rem;
}
.verse-ref {
  font-family: var(--font-sans, 'Inter', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--color-muted, #7a7468);
  margin: 0;
}
.verse-context {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--color-border, #ddd5c5);
}
.verse-context-text {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1rem;
  color: var(--color-ink-soft, #4a463d);
  margin: 0;
  line-height: 1.55;
}
.verse-note {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 0.95rem;
  color: var(--color-ink-soft, #4a463d);
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid var(--color-border, #ddd5c5);
}
.verse-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border, #eee6d6);
}
.verse-action-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-accent, #01696f);
  cursor: pointer;
}
.verse-action-link:hover { text-decoration: underline; }

/* Bible study list */
.study-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.study-card {
  background: var(--color-paper, #fdfaf5);
  border: 1px solid var(--color-border, #ddd5c5);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.study-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.07); }
.study-card-title {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--color-ink, #2a2823);
  margin-bottom: 0.2rem;
}
.study-card-passage {
  font-family: var(--font-sans, 'Inter', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--color-muted, #7a7468);
  margin-bottom: 0.5rem;
}
.study-card-desc {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1rem;
  color: var(--color-ink-soft, #4a463d);
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
.study-card-meta {
  display: flex; gap: 0.55rem; flex-wrap: wrap;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 0.75rem;
  color: var(--color-muted, #7a7468);
}
.study-status { text-transform: lowercase; font-style: italic; font-family: var(--font-serif, 'Cormorant Garamond', serif); font-size: 0.85rem; }
.study-status--completed { color: var(--color-accent, #01696f); }
.study-status--paused { color: #a07a32; }

/* Study creation form */
.study-form { display: flex; flex-direction: column; gap: 1rem; }
.study-label {
  display: flex; flex-direction: column; gap: 0.35rem;
  font-family: var(--font-sans, 'Inter', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--color-muted, #7a7468);
}
.study-label input, .study-label textarea, .study-label select {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border, #ddd5c5);
  border-radius: 3px;
  background: var(--color-paper, #fdfaf5);
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1rem;
  color: var(--color-ink, #2a2823);
}
.study-fieldset {
  border: 1px solid var(--color-border, #ddd5c5);
  padding: 0.85rem 1rem;
  border-radius: 3px;
}
.study-fieldset legend {
  font-family: var(--font-sans, 'Inter', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--color-muted, #7a7468);
  padding: 0 0.4rem;
}
.study-checkbox { display: flex; gap: 0.5rem; align-items: center; padding: 0.25rem 0;
  font-family: var(--font-serif, 'Cormorant Garamond', serif); font-size: 1rem; }
.session-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem;
}
.session-row input {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-border, #ddd5c5);
  background: var(--color-paper, #fdfaf5);
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 0.95rem;
}

/* Study detail */
.study-detail-desc {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.05rem;
  color: var(--color-ink-soft, #4a463d);
  text-align: center;
  margin: 0.5rem 0 0;
  line-height: 1.5;
}
.study-progress { margin: 1rem 0 1.5rem; }
.study-progress-bar {
  height: 6px;
  background: var(--color-border, #ddd5c5);
  border-radius: 3px;
  overflow: hidden;
}
.study-progress-fill {
  height: 100%;
  background: var(--color-accent, #01696f);
  transition: width 0.3s ease;
}
.study-progress-label {
  margin-top: 0.4rem;
  font-family: var(--font-sans, 'Inter', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--color-muted, #7a7468);
  text-align: center;
}
.study-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.5rem;
}
@media (max-width: 720px) {
  .study-layout { grid-template-columns: 1fr; }
}
.study-sessions-list ul { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.study-sub {
  font-family: var(--font-sans, 'Inter', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  color: var(--color-muted, #7a7468);
  margin: 0 0 0.6rem;
  font-weight: 500;
}
.session-item {
  display: flex; gap: 0.5rem; align-items: center;
  padding: 0.5rem 0.7rem;
  border-left: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 0.95rem;
  color: var(--color-ink, #2a2823);
}
.session-item:hover { background: rgba(0,0,0,0.025); }
.session-item--active { border-left-color: var(--color-accent, #01696f); background: rgba(1,105,111,0.06); }
.session-item--done { color: var(--color-muted, #7a7468); }
.session-order { font-family: var(--font-sans, 'Inter', sans-serif); font-size: 0.75rem; color: var(--color-muted, #7a7468); }
.session-check { margin-left: auto; color: var(--color-accent, #01696f); }
.study-session-header { margin-bottom: 1rem; }
.session-passage-line {
  font-family: var(--font-sans, 'Inter', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--color-muted, #7a7468);
  margin: 0.3rem 0;
}
.session-prompts-line {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  color: var(--color-ink-soft, #4a463d);
  font-size: 1rem;
  margin: 0.4rem 0;
}
.session-done-note {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  color: var(--color-muted, #7a7468);
  margin: 0.5rem 0;
}
.study-discussion {
  display: flex; flex-direction: column; gap: 0.85rem;
  margin: 1rem 0;
}
.study-post {
  background: var(--color-paper, #fdfaf5);
  border: 1px solid var(--color-border, #ddd5c5);
  border-radius: 3px;
  padding: 0.85rem 1.1rem;
}
.study-post--reply {
  margin-left: 1.5rem;
  margin-top: 0.6rem;
  border-left: 2px solid var(--color-accent, #01696f);
  background: rgba(1,105,111,0.03);
}
.study-post-body {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-ink, #2a2823);
  margin: 0 0 0.4rem;
  line-height: 1.55;
}
.study-post-meta {
  font-family: var(--font-sans, 'Inter', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.65rem;
  color: var(--color-muted, #7a7468);
  margin: 0;
}
.study-post-form {
  display: flex; flex-direction: column; gap: 0.6rem;
  margin-top: 1rem;
}
.study-post-form textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border, #ddd5c5);
  border-radius: 4px;
  background: var(--color-paper, #fdfaf5);
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-ink, #2a2823);
  box-sizing: border-box;
  resize: vertical;
}
.study-post-form button { align-self: flex-start; }

/* ── v1.3.80: November Thankfulness ───────────────────────────────────── */
.planner-thanks {
  background: linear-gradient(180deg, #fdf6e9 0%, #fbf2dd 100%);
  border: 1px solid #e6d4a8;
}
.planner-thanks__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.01em;
}
.planner-thanks__form {
  display: flex;
  gap: 8px;
  margin: 8px 0 6px;
}
.planner-thanks__input {
  flex: 1;
  border: 1px solid #d8c389;
  background: #fffdf7;
  padding: 10px 12px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 15pt;
  color: #4a3a2a;
  border-radius: 4px;
}
.planner-thanks__input:focus {
  outline: none;
  border-color: #b39455;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.18);
}
.planner-thanks__submit {
  background: #b39455;
  color: #fffdf7;
  border: none;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}
.planner-thanks__submit:hover { background: #9a7d44; }
.planner-thanks__mine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 12px;
  padding: 10px 14px;
  background: #fffdf7;
  border-left: 3px solid #b39455;
}
.planner-thanks__mine-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 15pt;
  color: #4a3a2a;
  line-height: 1.4;
}
.planner-thanks__edit {
  background: transparent;
  border: none;
  color: #8a6f3a;
  font-style: italic;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 13px;
}
.planner-thanks__edit:hover { color: #6b5226; text-decoration: underline; }
.planner-thanks__board-head {
  margin: 10px 0 6px;
  color: #8a6f3a;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13pt;
}
.planner-thanks__board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.planner-thanks__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(179, 148, 85, 0.25);
}
.planner-thanks__row:last-child { border-bottom: none; }
.planner-thanks__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.planner-thanks__avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d8c389;
  color: #4a3a2a;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
}
.planner-thanks__entry { flex: 1; }
.planner-thanks__text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14pt;
  color: #4a3a2a;
  display: block;
}
.planner-thanks__by {
  color: #8a6f3a;
  font-size: 12px;
  margin-top: 2px;
  display: inline-block;
}
.planner-thanks__empty {
  color: #8a6f3a;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14pt;
  text-align: center;
  padding: 12px 0;
}
.planner-thanks--thanksgiving {
  background: linear-gradient(180deg, #fdf0d6 0%, #fbe5b8 100%);
  border-color: #c9a85f;
}
.planner-thanks__keepsake {
  margin-top: 10px;
  text-align: center;
}
.planner-thanks__keepsake-btn {
  background: transparent;
  border: 1px solid #b39455;
  color: #6b5226;
  padding: 8px 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14pt;
  cursor: pointer;
  border-radius: 4px;
}
.planner-thanks__keepsake-btn:hover { background: #fbf2dd; }

/* /thankfulness page */
.thanks-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 24px 48px;
}
.thanks-page__head {
  text-align: center;
  margin-bottom: 28px;
}
.thanks-page__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 30pt;
  margin: 0 0 8px;
  color: #4a3a2a;
}
.thanks-page__stat {
  color: #8a6f3a;
  font-style: italic;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15pt;
  margin-bottom: 16px;
}
.thanks-page__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.thanks-stats {
  max-width: 360px;
  margin: 0 auto 24px;
  background: #fffdf7;
  border: 1px solid #e6d4a8;
  padding: 12px 18px;
  border-radius: 6px;
}
.thanks-stats__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 15pt;
  text-align: center;
  margin: 0 0 8px;
  color: #6b5226;
}
.thanks-stats__list { list-style: none; margin: 0; padding: 0; }
.thanks-stats__row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14pt;
  color: #4a3a2a;
}
.thanks-stats__n { color: #8a6f3a; }
.thanks-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
@media (max-width: 1100px) { .thanks-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 780px)  { .thanks-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px)  { .thanks-grid { grid-template-columns: repeat(2, 1fr); } }
.thanks-day {
  background: #fffdf7;
  border: 1px solid #e6d4a8;
  padding: 8px 10px;
  min-height: 110px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.thanks-day--future { background: #faf6ed; opacity: 0.55; }
.thanks-day--today { border-color: #b39455; box-shadow: 0 0 0 2px rgba(179, 148, 85, 0.22); }
.thanks-day--thanksgiving {
  background: linear-gradient(180deg, #fdf0d6 0%, #fbe5b8 100%);
  border-color: #c9a85f;
}
.thanks-day__head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  border-bottom: 1px solid rgba(179, 148, 85, 0.25);
  padding-bottom: 4px;
  margin-bottom: 4px;
}
.thanks-day__num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 15pt;
  color: #4a3a2a;
}
.thanks-day__wk {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 11pt;
  color: #8a6f3a;
}
.thanks-day__tg {
  margin-left: auto;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 10pt;
  color: #6b5226;
}
.thanks-day__entry {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 12pt;
  color: #4a3a2a;
}
.thanks-day__text { font-style: italic; display: block; }
.thanks-day__by { color: #8a6f3a; font-size: 10pt; }
.thanks-day__placeholder {
  color: #b8a472;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 12pt;
  text-align: center;
}
.thanks-keepsake-cta {
  margin-top: 28px;
  padding: 20px;
  text-align: center;
  background: #fdf0d6;
  border: 1px solid #c9a85f;
  border-radius: 6px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16pt;
  color: #6b5226;
}

/* Month-print mode hides nav etc. */
@media print {
  body.thanks-print-month .sidebar,
  body.thanks-print-month .topbar,
  body.thanks-print-month .thanks-page__actions,
  body.thanks-print-month .thanks-keepsake-cta { display: none !important; }
  body.thanks-print-month .thanks-day { break-inside: avoid; }
}

/* ── Pet Sitter Binder (v1.3.84) ───────────────────────────────────────── */
.ps-shell { max-width: 880px; margin: 0 auto; }
.ps-nav {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: 1.25rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.ps-nav__btn {
  background: transparent; border: 1px solid rgba(0,0,0,0.12);
  padding: 0.45rem 0.9rem; border-radius: 999px;
  font: inherit; color: inherit; cursor: pointer;
  font-family: var(--font-serif); font-style: italic; font-size: 0.95rem;
}
.ps-nav__btn:hover { background: rgba(1,105,111,0.06); }
.ps-nav__btn.is-active {
  background: #01696f; color: #fdfaf5; border-color: #01696f;
}

.ps-h1 {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 2rem; margin: 0 0 1rem 0;
}

.ps-cover {
  text-align: center; padding: 2.5rem 1.5rem;
  background: #f9f4ec; border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 2rem;
}
.ps-cover__crest { width: 110px; height: 110px; object-fit: contain; margin-bottom: 0.75rem; }
.ps-cover__title {
  font-family: var(--font-serif); font-style: italic;
  font-size: 2.4rem; font-weight: 500;
  margin: 0 0 0.5rem 0; line-height: 1.15;
}
.ps-cover__sub { margin: 0 0 1rem 0; color: #4a3a2a; }
.ps-cover__updated { font-size: 0.85rem; color: #6a5a4a; margin: 0 0 1.25rem 0; }
.ps-cover__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

.ps-section { margin-bottom: 1.75rem; }
.ps-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.75rem; }
.ps-section__title {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 1.35rem; margin: 0 0 0.75rem 0;
}
.ps-section--owners {
  background: #fff8ec; border: 1px solid rgba(193,150,80,0.35);
  padding: 1rem 1.25rem; border-radius: 10px;
}
.ps-section--owners .ps-section__title { font-size: 1.6rem; }

.ps-pet-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.ps-pet-card {
  background: #fdfaf5; border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px; padding: 0; cursor: pointer;
  text-align: left; overflow: hidden; transition: transform 0.1s ease;
  font: inherit; color: inherit;
}
.ps-pet-card:hover { transform: translateY(-2px); border-color: rgba(1,105,111,0.4); }
.ps-pet-card__photo {
  width: 100%; aspect-ratio: 1/1; overflow: hidden;
  background: #efeae0;
}
.ps-pet-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-pet-card__placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 2.5rem; font-style: italic; color: #b39c7b;
}
.ps-pet-card__body { padding: 0.65rem 0.85rem 0.85rem; }
.ps-pet-card__name {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 1.15rem; margin: 0;
}
.ps-pet-card__meta { font-size: 0.85rem; color: #6a5a4a; margin: 0.2rem 0 0 0; }

.ps-quicklinks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.ps-quicklinks button {
  background: #fdfaf5; border: 1px solid rgba(0,0,0,0.08); padding: 0.7rem 1rem;
  border-radius: 8px; cursor: pointer; text-align: left; font: inherit; color: inherit;
  width: 100%;
}
.ps-quicklinks button:hover { border-color: rgba(1,105,111,0.4); }

.ps-pet__head {
  display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.ps-pet__title-block { flex: 1 1 240px; }
.ps-back-link {
  background: transparent; border: none; padding: 0 0 0.5rem 0;
  cursor: pointer; color: #01696f; font: inherit;
}
.ps-pet__name {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 2.4rem; margin: 0;
}
.ps-pet__meta { color: #6a5a4a; margin: 0.25rem 0 0 0; }
.ps-pet__identity {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.5rem 0.75rem; margin-top: 0.75rem;
}
.ps-pet__identity .ps-field { gap: 0.2rem; }
.ps-pet__photo { width: 220px; height: 220px; flex: 0 0 220px; }
.ps-pet__photo img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
}
.ps-pet__photo-placeholder {
  width: 100%; height: 100%; background: #efeae0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-style: italic; color: #b39c7b;
}

.ps-pet__body { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.ps-field { display: flex; flex-direction: column; gap: 0.35rem; }
.ps-field__label {
  font-family: var(--font-serif); font-style: italic; font-weight: 600;
  color: #4a3a2a; font-size: 0.95rem;
}
.ps-editable {
  width: 100%; padding: 0.6rem 0.75rem;
  border: 1px solid rgba(0,0,0,0.12); border-radius: 6px;
  font: inherit; color: inherit; background: #fdfaf5;
  resize: vertical; min-height: 4.5rem;
}
.ps-editable:focus { outline: 2px solid rgba(1,105,111,0.4); outline-offset: -1px; }
.ps-editable--inline { min-height: 0; }

.ps-dos-donts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem;
}
.ps-dos-donts h3 {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 1.2rem; margin: 0 0 0.5rem 0;
}

.ps-contact {
  background: #fdfaf5; border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px; padding: 0.85rem 1rem; margin-bottom: 0.75rem;
}
.ps-contact__row {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 0.75rem; align-items: center; margin-bottom: 0.35rem;
}
.ps-contact__label {
  font-family: var(--font-serif); font-style: italic;
  color: #6a5a4a; font-size: 0.9rem;
}
.ps-contact__actions { margin-top: 0.5rem; text-align: right; }
.ps-link-danger {
  background: transparent; border: none; padding: 0; cursor: pointer;
  color: #b04a3a; font: inherit; text-decoration: underline;
}

.ps-empty { color: #6a5a4a; font-style: italic; margin: 0.25rem 0; }
.ps-pet__actions { margin-top: 1rem; }

/* ── Print binder layout ────────────────────────────────────────────────── */
.ps-print { max-width: 760px; margin: 0 auto; }
.ps-print__toolbar {
  display: flex; gap: 0.5rem; justify-content: flex-end; margin-bottom: 1rem;
}
.ps-print__page {
  background: #fff; border: 1px solid rgba(0,0,0,0.1);
  padding: 2rem; margin: 0 auto 1.25rem auto;
  border-radius: 6px;
  page-break-after: always;
}
.ps-print__page:last-child { page-break-after: auto; }
.ps-print__cover { text-align: center; padding-top: 3.5rem; padding-bottom: 3.5rem; }
.ps-print__crest { width: 140px; height: 140px; object-fit: contain; margin-bottom: 1rem; }
.ps-print__cover h1 {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 2.8rem; margin: 0 0 0.75rem 0;
}
.ps-print__cover-sub { color: #4a3a2a; }
.ps-print__cover-date { font-size: 0.9rem; color: #6a5a4a; }

.ps-print__owners h2,
.ps-print__vets h2,
.ps-print__sitters h2,
.ps-print__house h2 {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 1.8rem; margin: 0 0 1rem 0;
}
.ps-print__owner-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.ps-print__contact {
  border: 1px solid rgba(0,0,0,0.08); border-radius: 6px;
  padding: 0.85rem 1rem; margin-bottom: 0.75rem;
}
.ps-print__contact h3 {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 1.2rem; margin: 0 0 0.4rem 0;
}
.ps-print__contact-body p { margin: 0.15rem 0; font-size: 0.95rem; }
.ps-print__owner-note { font-style: italic; color: #4a3a2a; margin-top: 1rem; }

.ps-print__pet-header {
  display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem;
}
.ps-print__pet-header h2 {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 1.9rem; margin: 0;
}
.ps-print__pet-meta { color: #6a5a4a; margin: 0.2rem 0 0 0; font-size: 0.9rem; }
.ps-print__pet-photo {
  width: 220px; height: 220px; object-fit: cover; border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08); flex: 0 0 220px;
}
.ps-print__pet-body { display: grid; gap: 0.6rem; margin-bottom: 0.75rem; }
.ps-print__pet-field h4 {
  font-family: var(--font-serif); font-style: italic; font-weight: 600;
  margin: 0 0 0.15rem 0; font-size: 1rem;
}
.ps-print__pet-field p { margin: 0; font-size: 0.92rem; }
.ps-print__dos-donts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.5rem;
}
.ps-print__dos-donts h4 {
  font-family: var(--font-serif); font-style: italic; font-weight: 600;
  margin: 0 0 0.25rem 0;
}
.ps-print__dos-donts ul { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; }
.ps-print__dos-donts li { margin-bottom: 0.15rem; }

/* Print rules: hide the app shell when printing any pet-sitter view. */
@media print {
  body.page-pet-sitter .sidebar,
  body.page-pet-sitter .topbar,
  body.page-pet-sitter-print .sidebar,
  body.page-pet-sitter-print .topbar,
  body.page-pet-sitter-print .no-print,
  body.page-pet-sitter-print .ps-nav,
  body.page-pet-sitter-print .ps-print__toolbar {
    display: none !important;
  }
  /* The app's .page-content wrapper is overflow-y:auto, which renders a
     scrollbar onto the printed page. Kill all scrolling on print so
     content flows naturally onto pages instead of being trapped inside
     a scrollable region. */
  body.page-pet-sitter,
  body.page-pet-sitter-print,
  body.page-pet-sitter .page-content,
  body.page-pet-sitter-print .page-content,
  body.page-pet-sitter .ps-shell,
  body.page-pet-sitter .ps-shell *,
  body.page-pet-sitter-print .ps-print,
  body.page-pet-sitter-print .ps-print * {
    overflow: visible !important;
    max-height: none !important;
  }
  body.page-pet-sitter .ps-shell,
  body.page-pet-sitter-print .ps-print {
    max-width: none; margin: 0; padding: 0;
  }
  body.page-pet-sitter-print .ps-print__page {
    border: none; box-shadow: none; margin: 0; padding: 1rem 0;
    page-break-after: always; break-after: page;
  }
  body.page-pet-sitter-print .ps-print__page:last-child {
    page-break-after: auto; break-after: auto;
  }
  body.page-pet-sitter-print .ps-print__pet-page,
  body.page-pet-sitter-print .ps-print__contact { break-inside: avoid; }
}
/* ── Quote Book (v1.3.88) ─────────────────────────────────────────────── */
.qb-page { max-width: 880px; margin: 0 auto; padding: var(--space-4) var(--space-5); }
.qb-header { text-align: center; margin-bottom: var(--space-5); }
.qb-title { font-family: var(--font-serif); font-size: 2rem; margin: 0 0 var(--space-2); }
.qb-subtitle { color: var(--text-muted); font-family: var(--font-serif); margin: 0 0 var(--space-4); }
.qb-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.qb-tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--color-divider); margin-bottom: var(--space-4); flex-wrap: wrap; }
.qb-tab { background: transparent; border: none; padding: var(--space-2) var(--space-4); cursor: pointer; font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: var(--text-muted); border-bottom: 2px solid transparent; }
.qb-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.qb-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); align-items: center; }
.qb-search { flex: 1 1 220px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-divider); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); }
.qb-select { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-divider); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); }
.qb-list { display: flex; flex-direction: column; gap: var(--space-4); }
.qb-empty { text-align: center; color: var(--text-muted); padding: var(--space-6); font-family: var(--font-serif); }
.qb-card { background: var(--bg-card-tint, #f9f4ec); border: 1px solid var(--color-divider); border-radius: 8px; padding: var(--space-4) var(--space-5); }
.qb-quote { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.55; margin: 0 0 var(--space-2); }
.qb-meta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); font-family: var(--font-serif); }
.qb-attribution { font-style: italic; color: var(--text-muted); }
.qb-attribution--missing { opacity: .6; }
.qb-status { font-size: var(--text-xs); padding: 1px 8px; border-radius: 10px; background: var(--color-divider); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.qb-status--pending { background: #f1d97a; color: #5a4500; }
.qb-status--rejected { background: #e8c2c2; color: #6b1d1d; }
.qb-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.qb-tag { font-size: var(--text-xs); background: var(--bg-card); border: 1px solid var(--color-divider); border-radius: 10px; padding: 1px 8px; color: var(--text-muted); }
.qb-notes { font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-2) 0; font-style: italic; }
.qb-footer { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }
.qb-submitted { font-style: italic; }
.qb-actions-inline { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.qb-preview-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); max-height: 320px; overflow-y: auto; }
.qb-preview-row { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2); border: 1px solid var(--color-divider); border-radius: 6px; background: var(--bg-card); }
.qb-preview-check { padding-top: 6px; }
.qb-preview-fields { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }

/* ── v1.5.1 / Phase 7 — Recipe tags, browse, history, cook-tonight ───── */

/* Tag chips on the recipe detail */
.meal-detail__tags { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.meal-tags-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.meal-tags-row__label { width: 110px; font-family: var(--font-serif); font-style: italic; color: var(--text-muted); }
.meal-tags-row__chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }
.meal-tags-row__add, .meal-tags-row__select, .meal-tags-row__keywords { max-width: 320px; }
.meal-tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--bg-card-tint, #f4ecdf); border: 1px solid var(--color-divider); border-radius: 12px; font-size: var(--text-sm); }
.meal-tag-chip__x { background: none; border: none; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; color: var(--text-muted); }
.meal-tag-chip__x:hover { color: var(--color-primary); }

/* History list */
.meal-detail__history { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.meal-history-actions { margin-bottom: var(--space-2); }
.meal-history-list { display: flex; flex-direction: column; gap: var(--space-2); }
.meal-history-row { display: grid; grid-template-columns: 160px 90px 1fr auto; gap: var(--space-2); align-items: center; padding: 4px 8px; background: var(--bg-card-tint, #f9f4ec); border: 1px solid var(--color-divider); border-radius: 4px; }
.meal-history-row__rating-input { width: 70px; }
.meal-history-row__notes { padding: 4px; border: 1px dashed transparent; min-height: 1.5em; }
.meal-history-row__notes:focus { border-color: var(--color-divider); background: white; outline: none; }

/* Recipes browse */
.meal-browse { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-4); }
.meal-browse__filters { display: flex; flex-direction: column; gap: var(--space-3); }
.meal-browse-facet__label { font-family: var(--font-serif); font-style: italic; color: var(--text-muted); margin-bottom: 4px; }
.meal-browse-facet__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.meal-browse-chip { background: var(--bg-card); border: 1px solid var(--color-divider); border-radius: 12px; padding: 2px 8px; font-size: var(--text-sm); cursor: pointer; }
.meal-browse-chip--on { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.meal-browse__results { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.meal-browse-card { background: var(--bg-card); border: 1px solid var(--color-divider); border-radius: 8px; padding: var(--space-3); cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.meal-browse-card__photo { width: 100%; height: 120px; background-size: cover; background-position: center; border-radius: 4px; }
.meal-browse-card__title { font-family: var(--font-serif); font-size: 1.05rem; }
.meal-browse-card__meta { font-size: var(--text-sm); color: var(--text-muted); }
.meal-browse-card__chips { display: flex; gap: 4px; flex-wrap: wrap; }
.meal-browse-card__last { font-size: var(--text-xs); color: var(--text-muted); font-style: italic; }
@media (max-width: 700px) { .meal-browse { grid-template-columns: 1fr; } }

/* Cook tonight widget */
.planner-cook-tonight { padding: var(--space-3) var(--space-4); }
.planner-cook-tonight__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }
.planner-cook-tonight__card { background: var(--bg-card); border: 1px solid var(--color-divider); border-radius: 8px; padding: var(--space-3); display: flex; flex-direction: column; gap: 4px; }
.planner-cook-tonight__label { font-family: var(--font-serif); font-style: italic; color: var(--text-muted); }
.planner-cook-tonight__photo { width: 100%; height: 100px; background-size: cover; background-position: center; border-radius: 4px; }
.planner-cook-tonight__title { background: none; border: none; padding: 0; text-align: left; font-family: var(--font-serif); font-size: 1.05rem; cursor: pointer; }
.planner-cook-tonight__title:hover { text-decoration: underline; }
.planner-cook-tonight__meta, .planner-cook-tonight__last, .planner-cook-tonight__pantry, .planner-cook-tonight__missing, .planner-cook-tonight__reason { font-size: var(--text-sm); color: var(--text-muted); }
.planner-cook-tonight__empty { font-size: var(--text-sm); color: var(--text-muted); font-style: italic; }
@media (max-width: 800px) { .planner-cook-tonight__grid { grid-template-columns: 1fr; } }

/* ── v1.5.4 — Students Module (My School) ──────────────────────────────────
   Theme is SCOPED to .page-students. The school's primary + accent colors
   ride on inline --school-primary / --school-accent vars set on the page
   container. Do NOT leak these into the global :root. */

body.page-students .students-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.school-banner__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
}
.school-banner__wordmark {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.school-banner__sub {
  margin-left: auto;
  opacity: 0.85;
  font-style: italic;
}

.students-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.students-section h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

.students-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 800px) {
  .students-summary { grid-template-columns: 1fr; }
}
.students-profile-card,
.students-term-card {
  padding: 1rem;
  background: var(--color-card, #fff);
  border: 1px solid var(--color-border, #e6e3dc);
  border-radius: 0.5rem;
}
.students-term-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.students-term-card__remaining {
  font-weight: 600;
  color: var(--school-primary);
}

.students-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.students-classes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.students-class-card {
  background: var(--color-card, #fff);
  border: 1px solid var(--color-border, #e6e3dc);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.students-class-card__code {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.students-class-card h4 {
  margin: 0 0 0.4rem 0;
}
.students-class-card__next {
  font-size: 0.85rem;
  font-style: italic;
  margin-top: 0.4rem;
}
.students-class-card__actions {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
}

.students-upcoming {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.students-upcoming li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.4rem;
  background: var(--color-card, #fff);
}
.students-upcoming__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.students-upcoming__date { font-variant-numeric: tabular-nums; min-width: 100px; }
.students-upcoming__days { margin-left: auto; opacity: 0.7; }

.students-term-events {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
/* v1.5.14 — Type column widened to fit "commencement" (12ch) plus padding;
   each cell clips with ellipsis so long labels can never bleed into the
   neighbour. min-width:0 on grid cells is required for ellipsis. */
.students-term-events li {
  display: grid;
  grid-template-columns: 110px minmax(140px, max-content) 1fr;
  gap: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px dashed var(--color-border, #e6e3dc);
}
.students-term-events__date,
.students-term-events__type,
.students-term-events__title {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.students-term-events__type { font-style: italic; opacity: 0.7; }

/* v1.5.14 — Anticipated graduation year inline-editable cell. */
.students-grad-year { display: flex; align-items: baseline; gap: 0.35rem; }
.students-grad-year__value {
  display: inline-block;
  min-width: 3ch;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  border-bottom: 1px dashed var(--color-border, #e6e3dc);
  cursor: text;
  font-variant-numeric: tabular-nums;
}
.students-grad-year__value:focus {
  outline: 2px solid var(--color-accent, #2563eb);
  outline-offset: 1px;
  background: var(--color-card, #fff);
}
.students-grad-year__hint {
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}
.students-grad-year:hover .students-grad-year__hint,
.students-grad-year__value:focus + .students-grad-year__hint {
  opacity: 0.55;
}

.students-resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.students-resource-card {
  background: var(--color-card, #fff);
  border: 1px solid var(--color-border, #e6e3dc);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
}
.students-resource-card__cat {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.2rem;
}
.students-resource-card h4 { margin: 0 0 0.4rem 0; }

.students-class-detail__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1rem;
}
@media (max-width: 720px) {
  .students-class-detail__grid { grid-template-columns: 1fr; }
}
.students-class-detail__grid label {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  gap: 0.2rem;
}
.students-class-detail__actions {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.students-assignments {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.students-assignments li {
  display: grid;
  grid-template-columns: auto 1fr 130px auto auto auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.3rem 0.5rem;
  background: var(--color-card, #fff);
  border-radius: 0.3rem;
}
.students-assignments__type {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  opacity: 0.65;
  text-transform: uppercase;
}

.inline-edit {
  border: 1px solid var(--color-border, #d8d4cd);
  border-radius: 0.3rem;
  padding: 0.3rem 0.4rem;
  background: var(--color-card, #fff);
  font-size: 0.95rem;
}
.inline-edit--block { width: 100%; }

/* ── v1.5.6 — Homeschool class tabs + driving log ─────────────────────── */
.students-class-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.students-class-tab {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-border, #d8d4cd);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  font-size: 0.92rem;
}
.students-class-tab--active {
  background: var(--school-primary, #1B3C8E);
  color: var(--school-accent, #fff);
  border-color: transparent;
}
.students-class-card--homeschool {
  background: linear-gradient(0deg, rgba(124, 58, 237, 0.04), transparent);
}

.driving-log-page { padding: 1rem; max-width: 1200px; margin: 0 auto; }
.driving-log__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.driving-log__header h2 { margin: 0; flex: 1; }
.driving-log__progress {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.driving-log__progress-card {
  background: var(--color-card, #fff);
  border: 1px solid var(--color-border, #d8d4cd);
  border-radius: 0.6rem;
  padding: 1rem;
}
.driving-log__progress-label { font-size: 0.85rem; color: #666; text-transform: uppercase; letter-spacing: 0.04em; }
.driving-log__progress-value { font-size: 1.6rem; font-weight: 600; margin: 0.2rem 0; }
.driving-log__progress-sub   { font-size: 0.85rem; color: #555; }
.driving-log__bar {
  height: 12px;
  background: #eee;
  border-radius: 6px;
  overflow: hidden;
  margin: 0.4rem 0;
}
.driving-log__bar-fill { height: 100%; transition: width 200ms ease; }

.driving-log__quick-form {
  background: var(--color-card, #fff);
  border: 1px solid var(--color-border, #d8d4cd);
  border-radius: 0.6rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
}
.driving-log__quick-form h3 { margin-top: 0; }
.driving-log__form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.driving-log__form-grid label { display: flex; flex-direction: column; font-size: 0.85rem; gap: 0.2rem; }
.driving-log__form-grid input, .driving-log__form-grid select { padding: 0.4rem; font-size: 0.95rem; }
.driving-log__route { grid-column: 1 / -1; }
.driving-log__skills { grid-column: 1 / -1; }
.driving-log__skills textarea {
  padding: 0.4rem;
  font-size: 0.95rem;
  font-family: inherit;
  resize: vertical;
  min-height: 3.5rem;
  border: 1px solid var(--color-border, #d8d4cd);
  border-radius: 4px;
}
.driving-log__chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  overflow-x: auto;
  padding: 0.25rem 0;
  margin-bottom: 0.35rem;
}
.driving-log__chip {
  flex: 0 0 auto;
  padding: 0.25rem 0.7rem;
  border: 1px solid #0080C0;
  background: #fff;
  color: #0080C0;
  border-radius: 999px;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
.driving-log__chip:hover { background: #e6f3fb; }
.driving-log__chip:active { background: #006ba1; color: #fff; border-color: #006ba1; }
.driving-log__skills-sub {
  font-size: 0.75rem;
  margin-top: 0.2rem;
  color: #666;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.driving-log__night-override {
  flex-direction: row !important;
  align-items: center;
  gap: 0.4rem !important;
  grid-column: 1 / -1;
}

.driving-log__entries h3 { margin-top: 0; }
.driving-log__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.driving-log__table th, .driving-log__table td {
  border-bottom: 1px solid var(--color-border, #d8d4cd);
  padding: 0.4rem 0.3rem;
  text-align: left;
  vertical-align: middle;
}
.driving-log__table input { width: 100%; box-sizing: border-box; }
.driving-log__legal { font-size: 0.82rem; color: #666; margin-top: 1.5rem; border-top: 1px solid var(--color-border, #d8d4cd); padding-top: 0.75rem; }

@media (max-width: 640px) {
  .driving-log__progress { grid-template-columns: 1fr; }
  .driving-log__table { font-size: 0.78rem; }
}

/* ── v1.5.10 — Polish My School aesthetic ─────────────────────────────────
   v1.5.9 left an unclosed @media (max-width: 640px) at the top of this
   block, so every spirit + decal rule below only applied on mobile.
   Closing the media query above restored desktop styling. Below: a cleaner
   3-column hero banner, horizontal stat cards, polished decal × delete,
   and a softer overall feel. All scoped to body.page-students.
   Artwork remains original SVG (public/img/school-spirit/) — no copyrighted
   marks or specific mascot likenesses. */

/* Hero banner — 3 columns: mascot (fixed left) · body (flex center) · pennant
   (fixed right). Softer gradient sits behind via inline style on the
   element. ~150px tall, rounded, contained padding. */
body.page-students .school-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 1.5rem;
  border-radius: 0.85rem;
  overflow: hidden;
  min-height: 140px;
  max-height: 160px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
body.page-students .school-hero__mascot {
  position: relative;
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  max-width: 96px;
  max-height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
/* v1.5.13 — UCF banner uses the wider Old UCF Golden Knights logo (~2:1
   landscape). Give the left slot more room while keeping a contained fit
   so the wordmark stays readable in the center column. */
body.page-students .school-hero__mascot--wide {
  flex: 0 0 200px;
  width: 200px;
  max-width: 200px;
  height: 110px;
  max-height: 110px;
}
body.page-students .school-hero__body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
}
body.page-students .school-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  opacity: 0.82;
  font-weight: 600;
}
body.page-students .school-hero__wordmark {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0;
  line-height: 1.05;
}
body.page-students .school-hero__tag {
  font-style: italic;
  font-size: 0.9rem;
  opacity: 0.92;
  letter-spacing: 0.02em;
}
body.page-students .school-hero__pennant {
  position: relative;
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  max-width: 96px;
  max-height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
/* v1.5.9 shipped a star-burst accent floating over the hero — Paul read it
   as "MS Paint sparkles." Kept in markup so the smoke-test contract holds,
   but rendered at zero opacity and capped to a 1×1 size so it can't paint
   anything visible. Max-width / max-height kept so the v1.5.9 sizing-cap
   smoke test still finds them. */
body.page-students .school-hero__accent {
  position: absolute;
  width: 1px;
  height: 1px;
  max-width: 1px;
  max-height: 1px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
@media (max-width: 720px) {
  body.page-students .school-hero {
    padding: 0.85rem 1rem;
    gap: 0.85rem;
    min-height: 110px;
    max-height: 130px;
  }
  body.page-students .school-hero__mascot,
  body.page-students .school-hero__pennant {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
    max-width: 64px;
    max-height: 64px;
  }
  body.page-students .school-hero__mascot--wide {
    flex-basis: 130px;
    width: 130px;
    max-width: 130px;
    height: 72px;
    max-height: 72px;
  }
  body.page-students .school-hero__wordmark { font-size: 1.4rem; }
  body.page-students .school-hero__eyebrow  { font-size: 0.65rem; letter-spacing: 0.14em; }
  body.page-students .school-hero__tag      { font-size: 0.78rem; }
}

/* Stat cards — horizontal row of 3 (Battle Cry / Days / Classes). */
body.page-students .school-stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
@media (max-width: 720px) {
  body.page-students .school-stats-strip { grid-template-columns: 1fr; }
}
body.page-students .school-stat {
  position: relative;
  background: var(--color-card, #fff);
  border: 1px solid var(--color-border, #e6e3dc);
  border-top: 3px solid var(--school-primary);
  border-radius: 0.6rem;
  padding: 0.9rem 1rem;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
}
/* Type-only stat cards read cleaner. The selector is still required by the
   v1.5.8 smoke test, so keep the rule (with max-width/max-height) but
   collapse the actual element to nothing. */
body.page-students .school-stat__icon {
  position: absolute;
  width: 1px;
  height: 1px;
  max-width: 1px;
  max-height: 1px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.page-students .school-stat__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.7;
  font-weight: 600;
}
body.page-students .school-stat__value {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--school-primary);
  line-height: 1.1;
}

body.page-students .students-class-card {
  position: relative;
}
/* Class-card spirit iconette: ultra-subtle accent in the top-right corner.
   Required by the v1.5.8 smoke test. Tuned down so it reads as a quiet
   watermark, not a sticker. */
body.page-students .students-class-card__spirit {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
  opacity: 0.18;
  pointer-events: none;
}
body.page-students .students-classes-grid .students-class-card header h4 {
  padding-right: 32px;
}

/* Hide the global brand seahorse icons in the app footer while on the
   My School page — Paul's v1.5.10 ask: footer should be plain text on
   this module so it doesn't read as another scattered mascot. */
body.page-students .app-footer .footer-seahorse { display: none; }

/* ── Dorm-style decals ────────────────────────────────────────────────
   Floating layer that doesn't intercept clicks; individual decals do.
   The × delete button is absolutely positioned to the top-right of each
   decal and only revealed on hover/focus — no inline text artifact. */
body.page-students .student-decal-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
body.page-students .decal {
  position: absolute;
  display: inline-block;
  width: 80px;
  height: 80px;
  max-width: 80px;
  max-height: 80px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: grab;
  opacity: 0.85;
  pointer-events: auto;
  filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.1));
  touch-action: none;
  transform-origin: center;
  transition: opacity 120ms ease;
}
body.page-students .decal:hover,
body.page-students .decal:focus-visible {
  opacity: 1;
  outline: 0;
}
body.page-students .decal:active,
body.page-students .decal--dragging { cursor: grabbing; }
body.page-students .decal img {
  display: block;
  width: 80px;
  height: 80px;
  max-width: 80px;
  max-height: 80px;
  pointer-events: none;
}
body.page-students .decal--pennant      { width: 100px; height: 100px; max-width: 100px; max-height: 100px; }
body.page-students .decal--pennant img  { width: 100px; height: 100px; max-width: 100px; max-height: 100px; }
/* v1.5.11 — real-photo image decals get a slightly bigger frame + rounded
   chip + soft shadow so they read as polished stickers, not raw photos. */
body.page-students .decal--image       { width: 110px; height: 110px; max-width: 110px; max-height: 110px; }
body.page-students .decal--image img   {
  width: 110px;
  height: 110px;
  max-width: 110px;
  max-height: 110px;
  object-fit: contain;
  border-radius: 0.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

body.page-students .decal__delete {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(40, 40, 40, 0.92);
  color: #fff;
  font: 600 14px/20px system-ui, -apple-system, sans-serif;
  text-align: center;
  text-decoration: none;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease, visibility 120ms ease;
  pointer-events: auto;
  z-index: 2;
  /* Counter-rotate so the × stays upright regardless of decal tilt. */
  transform: rotate(0deg);
}
body.page-students .decal:hover .decal__delete,
body.page-students .decal:focus-within .decal__delete {
  opacity: 1;
  visibility: visible;
}

body.page-students .decal-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}
body.page-students .decal-picker__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem;
  background: var(--color-card, #fff);
  border: 1px solid var(--color-border, #e6e3dc);
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.8rem;
}
body.page-students .decal-picker__item:hover {
  border-color: var(--school-primary, #1B3C8E);
}
body.page-students .decal-picker__item img {
  width: 60px;
  height: 60px;
  max-width: 60px;
  max-height: 60px;
  object-fit: contain;
}
body.page-students .decal-picker__heading {
  margin: 0.9rem 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text, #2a2a2a);
}
body.page-students .decal-picker__eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #6b6b6b);
  font-style: italic;
}


/* v1.5.21 — Recurring task UX polish */
.recurrence-section-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.6rem 0 0.4rem;
}
.recurrence-section-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text, #2a2a2a);
}
.recurrence-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1px solid var(--color-border, #d4cdbf);
  background: var(--color-surface, #fff);
  color: var(--color-text-muted, #6b6b6b);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.recurrence-help-btn:hover,
.recurrence-help-btn:focus-visible {
  background: var(--color-primary-highlight, rgba(232, 165, 152, 0.18));
  color: var(--color-primary, #6f5942);
  outline: none;
}
.recurrence-help-tip {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 50;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0.7rem 0.9rem;
  background: var(--color-surface, #fff);
  color: var(--color-text, #2a2a2a);
  border: 1px solid var(--color-border, #d4cdbf);
  border-radius: 0.5rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  font-size: 0.85rem;
  line-height: 1.4;
}
.recurrence-help-tip p {
  margin: 0 0 0.35rem;
}
.recurrence-help-tip p:last-child {
  margin-bottom: 0;
}
.recurrence-interval-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.recurrence-unit {
  color: var(--color-text-muted, #6b6b6b);
  font-size: 0.9rem;
}
.recurrence-preview {
  margin-top: 0.6rem;
  padding: 0.55rem 0.75rem;
  background: var(--color-surface-alt, var(--bg-card-tint, #f4efe5));
  border-left: 3px solid var(--color-primary, #6f5942);
  border-radius: 0.35rem;
  color: var(--color-text, #2a2a2a);
  font-size: 0.88rem;
  font-style: italic;
  min-height: 1.4em;
}

/* v1.5.22 — Time Asked ledger */
.time-asked-page { display: flex; flex-direction: column; gap: var(--space-4, 1rem); }
.time-asked-page__header { display: flex; align-items: center; gap: var(--space-3, 0.75rem); }
.time-asked-page__lede { color: var(--color-text-muted, #6b6b6b); margin: 0; max-width: 60ch; }
.time-asked-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3, 0.75rem);
}
.time-asked-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2dccf);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.time-asked-card__label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted, #6b6b6b); }
.time-asked-card__rows { display: flex; flex-direction: column; gap: 0.15rem; }
.time-asked-card__row { display: flex; justify-content: space-between; font-size: 0.95rem; }
.time-asked-card__row strong { font-variant-numeric: tabular-nums; }
.time-asked-card__pct { font-size: 0.8rem; color: var(--color-text-muted, #6b6b6b); text-align: right; }
.time-asked-bar { height: 6px; background: var(--color-surface-alt, #efe9dc); border-radius: 999px; overflow: hidden; }
.time-asked-bar__fill { height: 100%; background: var(--color-primary, #01696f); transition: width 0.2s; }
.time-asked-controls { display: flex; align-items: center; gap: var(--space-3, 0.75rem); flex-wrap: wrap; }
.time-asked-controls__hint { color: var(--color-text-muted, #6b6b6b); font-size: 0.9rem; }
.time-asked-toggle { display: inline-flex; border: 1px solid var(--color-border, #e2dccf); border-radius: 0.5rem; overflow: hidden; }
.time-asked-toggle__btn {
  appearance: none; background: transparent; border: 0; padding: 0.4rem 0.85rem;
  font: inherit; cursor: pointer; color: var(--color-text, #2a2a2a);
}
.time-asked-toggle__btn + .time-asked-toggle__btn { border-left: 1px solid var(--color-border, #e2dccf); }
.time-asked-toggle__btn.is-active { background: var(--color-primary, #01696f); color: #fff; }
.time-asked-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.time-asked-table th, .time-asked-table td { text-align: left; padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--color-border, #e2dccf); }
.time-asked-table th { font-weight: 600; color: var(--color-text-muted, #6b6b6b); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.time-asked-empty { text-align: center; color: var(--color-text-muted, #6b6b6b); padding: 1.5rem 0.5rem; font-style: italic; }
.time-asked-chart-card { display: flex; flex-direction: column; gap: 0.5rem; }
.time-asked-chart { width: 100%; height: auto; }
.time-asked-legend { display: flex; gap: 1rem; font-size: 0.85rem; color: var(--color-text-muted, #6b6b6b); align-items: center; }
.time-asked-legend__swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 0.3rem; vertical-align: middle; }
.time-asked-legend__swatch--solid { background: var(--color-primary, #01696f); }
.time-asked-legend__swatch--light { background: var(--color-primary-soft, #b3d4d6); }
.time-asked-leaderboard a { color: var(--color-primary, #01696f); text-decoration: none; }
.time-asked-leaderboard a:hover { text-decoration: underline; }