/* Second Memory stylesheet.
   Table of contents, in file order (search for the heading to jump to it):
      1. Theme and variables (light and dark colours)
      2. Base page, headings, focus ring
      3. Decorative background (corner branches, sidebar leaf, divider)
      4. Layout: app shell and sidebar (nav, undo/redo, sync, backup, theme and lock buttons)
      5. Content area, toolbars, search box
      6. Add forms and date fields
      7. Columns, phone breakpoint, column panels, corner leaves
      8. Cards, buttons, badges and chips shared by every list
      9. Books and the reading goal
     10. Recipes, scaling and add-to-shopping-list
     11. Medications
     12. Diagnoses
     13. To-Do and Shopping List
     14. Notes
     15. Resume and Portfolio
     16. Edit forms shared by most cards
     17. Reminder banner (backup and sync reminders)
     18. Journal: wizard, cards, timeline, search, trends, prompts
     19. Home: rows, search everything, quick add
     20. Weight: stats, history, chart, goal
     21. Therapy and health summary sheets, print styles
     22. Recipe cook mode
     23. App lock
     24. Storage warning
     25. Phone polish and overrides for sections 1-24
     26. Friendlier extras: undo toast, phone bottom bar, text size, Home weigh-in
     27. Buy again, pinned recipes, refill pickup, Home weight, high contrast
     28. Snooze, share, shopping groups, swipe, customise Home
   Notes for editing:
   - Every dark-mode block appears twice, once for the device setting (@media prefers-color-scheme)
     and once for the Menu's hand-picked Dark theme (data-theme="dark"). Change both together.
   - Section 25 overrides equal-strength rules in sections 1-24. Sections 26-28 were added later and
     only add new classes (plus the high-contrast colour variables in 27, which must stay after the
     section 1 palettes so they win). */

/* ===== 1. Theme and variables (light and dark colours) ===== */
/* Light palette by default; the dark block below swaps the same names. Use these
   variables everywhere instead of raw colours so both themes stay in step. */
:root {
  color-scheme: light dark;
  --bg: #F6FAF4;
  --surface: #FFFFFF;
  --text: #1C2B1A;
  --muted: #4C5D46;
  --accent: #2E5D34;
  --accent-2: #A34A2A;
  --border: #6B7A63;
  --accent-contrast: #ffffff;
  --accent-rose: #A24B68;
  --accent-lavender: #6B5B95;
  --tint-blush: #F6E4E9;
  --border-soft: #D7E3CE;
  --font-heading: "Snell Roundhand", "Bradley Hand", "Segoe Script", "Segoe Print",
    cursive, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Dark theme: follows the device setting unless the Menu's Theme button picks Light or Dark
   (that choice is the data-theme attribute on <html>, set by the script at the top of index.html). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101C12;
    --surface: #182A17;
    --text: #EAF3E6;
    --muted: #AEC7A4;
    --accent: #7BC174;
    --accent-2: #E08A5B;
    --border: #63795A;
    --accent-contrast: #101C12;
    --accent-rose: #E8A9BE;
    --accent-lavender: #C9B8E8;
    --tint-blush: #3A2530;
    --border-soft: #33452F;
  }
}

/* Dark theme chosen by hand in the Menu (same rules as above). */
:root[data-theme="dark"] {
  --bg: #101C12;
  --surface: #182A17;
  --text: #EAF3E6;
  --muted: #AEC7A4;
  --accent: #7BC174;
  --accent-2: #E08A5B;
  --border: #63795A;
  --accent-contrast: #101C12;
  --accent-rose: #E8A9BE;
  --accent-lavender: #C9B8E8;
  --tint-blush: #3A2530;
  --border-soft: #33452F;
}

/* The hand-picked themes also tell the browser which colour scheme to use for scroll bars and form controls. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ===== 2. Base page, headings, focus ring ===== */
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-heading);
}

/* Keyboard focus ring for every interactive element. */
:is(button, input, select, textarea, a, summary):focus-visible {
  outline: 2px solid var(--accent-lavender);
  outline-offset: 2px;
}

/* ===== 3. Decorative background (corner branches, sidebar leaf, divider) ===== */
/* Decorative corner-branch frame, purely aesthetic (aria-hidden by
   construction — a pseudo-element is never exposed to assistive tech).
   Fixed + negative z-index + pointer-events:none keeps it behind all real
   content and fully inert. Four independent background layers place one
   branch-cluster motif at each viewport corner (background-image doesn't
   support per-layer transforms, so the down-right/down-left/up-right/up-left
   orientations are baked into each SVG's own path coordinates — mechanical
   mirrors of one authored motif, same technique as the light/dark hex swap
   below). Deliberately left un-tiled so the center of the screen stays open,
   echoing the corner-framed reference photo this was modeled on without
   reusing its (copyrighted, watercolor-texture) artwork. Opacity sits in the
   0.16-0.2 band already verified safe for corner-anchored decor by
   `.sidebar-header::after` and `.column::before` below — higher than the old
   full-page tile this replaced, but safe here because coverage is confined
   to the outer edges, not the central reading column. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: clamp(180px, 22vw, 300px);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M14 26 C5 107 59 179 140 215 C131 134 104 62 41 8 Z' fill='%232E5D34' opacity='0.18'/%3E%3Cpath d='M14 26 C50 44 95 89 122 152' stroke='%232E5D34' stroke-width='3' fill='none' opacity='0.2'/%3E%3Cpath d='M41 53 L72 76 M59 89 L90 116 M77 125 L104 156' stroke='%232E5D34' stroke-width='1.8' fill='none' opacity='0.16'/%3E%3Cpath d='M90 10 C90 66 122 122 170 146 C159 90 138 42 98 5 Z' fill='%232E5D34' opacity='0.16'/%3E%3Cpath d='M90 10 C114 26 138 58 154 98' stroke='%232E5D34' stroke-width='2.4' fill='none' opacity='0.18'/%3E%3Cg%3E%3Cellipse cx='60' cy='127.6' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16'/%3E%3Cellipse cx='60' cy='127.6' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16' transform='rotate(72 60 150)'/%3E%3Cellipse cx='60' cy='127.6' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16' transform='rotate(144 60 150)'/%3E%3Cellipse cx='60' cy='127.6' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16' transform='rotate(216 60 150)'/%3E%3Cellipse cx='60' cy='127.6' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16' transform='rotate(288 60 150)'/%3E%3Ccircle cx='60' cy='150' r='7.2' fill='%23A24B68' opacity='0.18'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M286 26 C295 107 241 179 160 215 C169 134 196 62 259 8 Z' fill='%232E5D34' opacity='0.18'/%3E%3Cpath d='M286 26 C250 44 205 89 178 152' stroke='%232E5D34' stroke-width='3' fill='none' opacity='0.2'/%3E%3Cpath d='M259 53 L228 76 M241 89 L210 116 M223 125 L196 156' stroke='%232E5D34' stroke-width='1.8' fill='none' opacity='0.16'/%3E%3Cpath d='M210 10 C210 66 178 122 130 146 C141 90 162 42 202 5 Z' fill='%232E5D34' opacity='0.16'/%3E%3Cpath d='M210 10 C186 26 162 58 146 98' stroke='%232E5D34' stroke-width='2.4' fill='none' opacity='0.18'/%3E%3Cg%3E%3Cellipse cx='240' cy='127.6' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16'/%3E%3Cellipse cx='240' cy='127.6' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16' transform='rotate(72 240 150)'/%3E%3Cellipse cx='240' cy='127.6' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16' transform='rotate(144 240 150)'/%3E%3Cellipse cx='240' cy='127.6' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16' transform='rotate(216 240 150)'/%3E%3Cellipse cx='240' cy='127.6' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16' transform='rotate(288 240 150)'/%3E%3Ccircle cx='240' cy='150' r='7.2' fill='%23A24B68' opacity='0.18'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M14 274 C5 193 59 121 140 85 C131 166 104 238 41 292 Z' fill='%232E5D34' opacity='0.18'/%3E%3Cpath d='M14 274 C50 256 95 211 122 148' stroke='%232E5D34' stroke-width='3' fill='none' opacity='0.2'/%3E%3Cpath d='M41 247 L72 224 M59 211 L90 184 M77 175 L104 144' stroke='%232E5D34' stroke-width='1.8' fill='none' opacity='0.16'/%3E%3Cpath d='M90 290 C90 234 122 178 170 154 C159 210 138 258 98 295 Z' fill='%232E5D34' opacity='0.16'/%3E%3Cpath d='M90 290 C114 274 138 242 154 202' stroke='%232E5D34' stroke-width='2.4' fill='none' opacity='0.18'/%3E%3Cg%3E%3Cellipse cx='60' cy='172.4' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16'/%3E%3Cellipse cx='60' cy='172.4' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16' transform='rotate(72 60 150)'/%3E%3Cellipse cx='60' cy='172.4' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16' transform='rotate(144 60 150)'/%3E%3Cellipse cx='60' cy='172.4' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16' transform='rotate(216 60 150)'/%3E%3Cellipse cx='60' cy='172.4' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16' transform='rotate(288 60 150)'/%3E%3Ccircle cx='60' cy='150' r='7.2' fill='%23A24B68' opacity='0.18'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M286 274 C295 193 241 121 160 85 C169 166 196 238 259 292 Z' fill='%232E5D34' opacity='0.18'/%3E%3Cpath d='M286 274 C250 256 205 211 178 148' stroke='%232E5D34' stroke-width='3' fill='none' opacity='0.2'/%3E%3Cpath d='M259 247 L228 224 M241 211 L210 184 M223 175 L196 144' stroke='%232E5D34' stroke-width='1.8' fill='none' opacity='0.16'/%3E%3Cpath d='M210 290 C210 234 178 178 130 154 C141 210 162 258 202 295 Z' fill='%232E5D34' opacity='0.16'/%3E%3Cpath d='M210 290 C186 274 162 242 146 202' stroke='%232E5D34' stroke-width='2.4' fill='none' opacity='0.18'/%3E%3Cg%3E%3Cellipse cx='240' cy='172.4' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16'/%3E%3Cellipse cx='240' cy='172.4' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16' transform='rotate(72 240 150)'/%3E%3Cellipse cx='240' cy='172.4' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16' transform='rotate(144 240 150)'/%3E%3Cellipse cx='240' cy='172.4' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16' transform='rotate(216 240 150)'/%3E%3Cellipse cx='240' cy='172.4' rx='11.2' ry='22.4' fill='%23A24B68' opacity='0.16' transform='rotate(288 240 150)'/%3E%3Ccircle cx='240' cy='150' r='7.2' fill='%23A24B68' opacity='0.18'/%3E%3C/g%3E%3C/svg%3E");
}

/* Same four corner branches, recoloured for dark mode (the colours are baked into each image). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M14 26 C5 107 59 179 140 215 C131 134 104 62 41 8 Z' fill='%237BC174' opacity='0.18'/%3E%3Cpath d='M14 26 C50 44 95 89 122 152' stroke='%237BC174' stroke-width='3' fill='none' opacity='0.2'/%3E%3Cpath d='M41 53 L72 76 M59 89 L90 116 M77 125 L104 156' stroke='%237BC174' stroke-width='1.8' fill='none' opacity='0.16'/%3E%3Cpath d='M90 10 C90 66 122 122 170 146 C159 90 138 42 98 5 Z' fill='%237BC174' opacity='0.16'/%3E%3Cpath d='M90 10 C114 26 138 58 154 98' stroke='%237BC174' stroke-width='2.4' fill='none' opacity='0.18'/%3E%3Cg%3E%3Cellipse cx='60' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16'/%3E%3Cellipse cx='60' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(72 60 150)'/%3E%3Cellipse cx='60' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(144 60 150)'/%3E%3Cellipse cx='60' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(216 60 150)'/%3E%3Cellipse cx='60' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(288 60 150)'/%3E%3Ccircle cx='60' cy='150' r='7.2' fill='%23E8A9BE' opacity='0.18'/%3E%3C/g%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M286 26 C295 107 241 179 160 215 C169 134 196 62 259 8 Z' fill='%237BC174' opacity='0.18'/%3E%3Cpath d='M286 26 C250 44 205 89 178 152' stroke='%237BC174' stroke-width='3' fill='none' opacity='0.2'/%3E%3Cpath d='M259 53 L228 76 M241 89 L210 116 M223 125 L196 156' stroke='%237BC174' stroke-width='1.8' fill='none' opacity='0.16'/%3E%3Cpath d='M210 10 C210 66 178 122 130 146 C141 90 162 42 202 5 Z' fill='%237BC174' opacity='0.16'/%3E%3Cpath d='M210 10 C186 26 162 58 146 98' stroke='%237BC174' stroke-width='2.4' fill='none' opacity='0.18'/%3E%3Cg%3E%3Cellipse cx='240' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16'/%3E%3Cellipse cx='240' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(72 240 150)'/%3E%3Cellipse cx='240' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(144 240 150)'/%3E%3Cellipse cx='240' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(216 240 150)'/%3E%3Cellipse cx='240' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(288 240 150)'/%3E%3Ccircle cx='240' cy='150' r='7.2' fill='%23E8A9BE' opacity='0.18'/%3E%3C/g%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M14 274 C5 193 59 121 140 85 C131 166 104 238 41 292 Z' fill='%237BC174' opacity='0.18'/%3E%3Cpath d='M14 274 C50 256 95 211 122 148' stroke='%237BC174' stroke-width='3' fill='none' opacity='0.2'/%3E%3Cpath d='M41 247 L72 224 M59 211 L90 184 M77 175 L104 144' stroke='%237BC174' stroke-width='1.8' fill='none' opacity='0.16'/%3E%3Cpath d='M90 290 C90 234 122 178 170 154 C159 210 138 258 98 295 Z' fill='%237BC174' opacity='0.16'/%3E%3Cpath d='M90 290 C114 274 138 242 154 202' stroke='%237BC174' stroke-width='2.4' fill='none' opacity='0.18'/%3E%3Cg%3E%3Cellipse cx='60' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16'/%3E%3Cellipse cx='60' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(72 60 150)'/%3E%3Cellipse cx='60' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(144 60 150)'/%3E%3Cellipse cx='60' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(216 60 150)'/%3E%3Cellipse cx='60' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(288 60 150)'/%3E%3Ccircle cx='60' cy='150' r='7.2' fill='%23E8A9BE' opacity='0.18'/%3E%3C/g%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M286 274 C295 193 241 121 160 85 C169 166 196 238 259 292 Z' fill='%237BC174' opacity='0.18'/%3E%3Cpath d='M286 274 C250 256 205 211 178 148' stroke='%237BC174' stroke-width='3' fill='none' opacity='0.2'/%3E%3Cpath d='M259 247 L228 224 M241 211 L210 184 M223 175 L196 144' stroke='%237BC174' stroke-width='1.8' fill='none' opacity='0.16'/%3E%3Cpath d='M210 290 C210 234 178 178 130 154 C141 210 162 258 202 295 Z' fill='%237BC174' opacity='0.16'/%3E%3Cpath d='M210 290 C186 274 162 242 146 202' stroke='%237BC174' stroke-width='2.4' fill='none' opacity='0.18'/%3E%3Cg%3E%3Cellipse cx='240' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16'/%3E%3Cellipse cx='240' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(72 240 150)'/%3E%3Cellipse cx='240' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(144 240 150)'/%3E%3Cellipse cx='240' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(216 240 150)'/%3E%3Cellipse cx='240' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(288 240 150)'/%3E%3Ccircle cx='240' cy='150' r='7.2' fill='%23E8A9BE' opacity='0.18'/%3E%3C/g%3E%3C/svg%3E");
  }
}

/* Dark theme chosen by hand in the Menu (same rules as above). */
:root[data-theme="dark"] body::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M14 26 C5 107 59 179 140 215 C131 134 104 62 41 8 Z' fill='%237BC174' opacity='0.18'/%3E%3Cpath d='M14 26 C50 44 95 89 122 152' stroke='%237BC174' stroke-width='3' fill='none' opacity='0.2'/%3E%3Cpath d='M41 53 L72 76 M59 89 L90 116 M77 125 L104 156' stroke='%237BC174' stroke-width='1.8' fill='none' opacity='0.16'/%3E%3Cpath d='M90 10 C90 66 122 122 170 146 C159 90 138 42 98 5 Z' fill='%237BC174' opacity='0.16'/%3E%3Cpath d='M90 10 C114 26 138 58 154 98' stroke='%237BC174' stroke-width='2.4' fill='none' opacity='0.18'/%3E%3Cg%3E%3Cellipse cx='60' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16'/%3E%3Cellipse cx='60' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(72 60 150)'/%3E%3Cellipse cx='60' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(144 60 150)'/%3E%3Cellipse cx='60' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(216 60 150)'/%3E%3Cellipse cx='60' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(288 60 150)'/%3E%3Ccircle cx='60' cy='150' r='7.2' fill='%23E8A9BE' opacity='0.18'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M286 26 C295 107 241 179 160 215 C169 134 196 62 259 8 Z' fill='%237BC174' opacity='0.18'/%3E%3Cpath d='M286 26 C250 44 205 89 178 152' stroke='%237BC174' stroke-width='3' fill='none' opacity='0.2'/%3E%3Cpath d='M259 53 L228 76 M241 89 L210 116 M223 125 L196 156' stroke='%237BC174' stroke-width='1.8' fill='none' opacity='0.16'/%3E%3Cpath d='M210 10 C210 66 178 122 130 146 C141 90 162 42 202 5 Z' fill='%237BC174' opacity='0.16'/%3E%3Cpath d='M210 10 C186 26 162 58 146 98' stroke='%237BC174' stroke-width='2.4' fill='none' opacity='0.18'/%3E%3Cg%3E%3Cellipse cx='240' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16'/%3E%3Cellipse cx='240' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(72 240 150)'/%3E%3Cellipse cx='240' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(144 240 150)'/%3E%3Cellipse cx='240' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(216 240 150)'/%3E%3Cellipse cx='240' cy='127.6' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(288 240 150)'/%3E%3Ccircle cx='240' cy='150' r='7.2' fill='%23E8A9BE' opacity='0.18'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M14 274 C5 193 59 121 140 85 C131 166 104 238 41 292 Z' fill='%237BC174' opacity='0.18'/%3E%3Cpath d='M14 274 C50 256 95 211 122 148' stroke='%237BC174' stroke-width='3' fill='none' opacity='0.2'/%3E%3Cpath d='M41 247 L72 224 M59 211 L90 184 M77 175 L104 144' stroke='%237BC174' stroke-width='1.8' fill='none' opacity='0.16'/%3E%3Cpath d='M90 290 C90 234 122 178 170 154 C159 210 138 258 98 295 Z' fill='%237BC174' opacity='0.16'/%3E%3Cpath d='M90 290 C114 274 138 242 154 202' stroke='%237BC174' stroke-width='2.4' fill='none' opacity='0.18'/%3E%3Cg%3E%3Cellipse cx='60' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16'/%3E%3Cellipse cx='60' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(72 60 150)'/%3E%3Cellipse cx='60' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(144 60 150)'/%3E%3Cellipse cx='60' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(216 60 150)'/%3E%3Cellipse cx='60' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(288 60 150)'/%3E%3Ccircle cx='60' cy='150' r='7.2' fill='%23E8A9BE' opacity='0.18'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M286 274 C295 193 241 121 160 85 C169 166 196 238 259 292 Z' fill='%237BC174' opacity='0.18'/%3E%3Cpath d='M286 274 C250 256 205 211 178 148' stroke='%237BC174' stroke-width='3' fill='none' opacity='0.2'/%3E%3Cpath d='M259 247 L228 224 M241 211 L210 184 M223 175 L196 144' stroke='%237BC174' stroke-width='1.8' fill='none' opacity='0.16'/%3E%3Cpath d='M210 290 C210 234 178 178 130 154 C141 210 162 258 202 295 Z' fill='%237BC174' opacity='0.16'/%3E%3Cpath d='M210 290 C186 274 162 242 146 202' stroke='%237BC174' stroke-width='2.4' fill='none' opacity='0.18'/%3E%3Cg%3E%3Cellipse cx='240' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16'/%3E%3Cellipse cx='240' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(72 240 150)'/%3E%3Cellipse cx='240' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(144 240 150)'/%3E%3Cellipse cx='240' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(216 240 150)'/%3E%3Cellipse cx='240' cy='172.4' rx='11.2' ry='22.4' fill='%23E8A9BE' opacity='0.16' transform='rotate(288 240 150)'/%3E%3Ccircle cx='240' cy='150' r='7.2' fill='%23E8A9BE' opacity='0.18'/%3E%3C/g%3E%3C/svg%3E");
}

/* Small leaf in the corner of the sidebar title. */
.sidebar-header {
  position: relative;
  overflow: visible;
}

.sidebar-header::after {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 84px;
  height: 84px;
  pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cpath d='M80 4 C60 8 40 24 30 48 C48 42 68 26 80 4 Z' fill='%232E5D34' opacity='0.18'/%3E%3Cpath d='M70 12 C55 22 40 36 32 50' stroke='%232E5D34' stroke-width='1.4' fill='none' opacity='0.2'/%3E%3C/svg%3E");
}

/* Sidebar leaf, recoloured for dark mode (colours are baked into the image). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sidebar-header::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cpath d='M80 4 C60 8 40 24 30 48 C48 42 68 26 80 4 Z' fill='%237BC174' opacity='0.18'/%3E%3Cpath d='M70 12 C55 22 40 36 32 50' stroke='%237BC174' stroke-width='1.4' fill='none' opacity='0.2'/%3E%3C/svg%3E");
  }
}

/* Dark theme chosen by hand in the Menu (same rules as above). */
:root[data-theme="dark"] .sidebar-header::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cpath d='M80 4 C60 8 40 24 30 48 C48 42 68 26 80 4 Z' fill='%237BC174' opacity='0.18'/%3E%3Cpath d='M70 12 C55 22 40 36 32 50' stroke='%237BC174' stroke-width='1.4' fill='none' opacity='0.2'/%3E%3C/svg%3E");
}

/* Thin leafy line between the nav groups. */
.leaf-divider {
  height: 32px;
  background: no-repeat center/160px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40'%3E%3Cpath d='M10 20 C60 20 60 20 100 20 C140 20 140 20 190 20' stroke='%232E5D34' stroke-width='1.5' fill='none' opacity='0.35'/%3E%3Cpath d='M60 20 C55 10 45 8 38 12 C45 18 55 20 60 20 Z' fill='%232E5D34' opacity='0.3'/%3E%3Cpath d='M100 20 C100 8 92 2 84 4 C88 14 96 20 100 20 Z' fill='%232E5D34' opacity='0.32'/%3E%3Cpath d='M140 20 C145 10 155 8 162 12 C155 18 145 20 140 20 Z' fill='%232E5D34' opacity='0.3'/%3E%3Ccircle cx='100' cy='20' r='3' fill='%23A24B68' opacity='0.35'/%3E%3C/svg%3E");
}

/* Divider leaf, recoloured for dark mode (colours are baked into the image). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaf-divider {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40'%3E%3Cpath d='M10 20 C60 20 60 20 100 20 C140 20 140 20 190 20' stroke='%237BC174' stroke-width='1.5' fill='none' opacity='0.35'/%3E%3Cpath d='M60 20 C55 10 45 8 38 12 C45 18 55 20 60 20 Z' fill='%237BC174' opacity='0.3'/%3E%3Cpath d='M100 20 C100 8 92 2 84 4 C88 14 96 20 100 20 Z' fill='%237BC174' opacity='0.32'/%3E%3Cpath d='M140 20 C145 10 155 8 162 12 C155 18 145 20 140 20 Z' fill='%237BC174' opacity='0.3'/%3E%3Ccircle cx='100' cy='20' r='3' fill='%23E8A9BE' opacity='0.35'/%3E%3C/svg%3E");
  }
}

/* Dark theme chosen by hand in the Menu (same rules as above). */
:root[data-theme="dark"] .leaf-divider {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40'%3E%3Cpath d='M10 20 C60 20 60 20 100 20 C140 20 140 20 190 20' stroke='%237BC174' stroke-width='1.5' fill='none' opacity='0.35'/%3E%3Cpath d='M60 20 C55 10 45 8 38 12 C45 18 55 20 60 20 Z' fill='%237BC174' opacity='0.3'/%3E%3Cpath d='M100 20 C100 8 92 2 84 4 C88 14 96 20 100 20 Z' fill='%237BC174' opacity='0.32'/%3E%3Cpath d='M140 20 C145 10 155 8 162 12 C155 18 145 20 140 20 Z' fill='%237BC174' opacity='0.3'/%3E%3Ccircle cx='100' cy='20' r='3' fill='%23E8A9BE' opacity='0.35'/%3E%3C/svg%3E");
}

/* ===== 4. Layout: app shell and sidebar (nav, undo/redo, sync, backup, theme and lock buttons) ===== */
.app-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.sidebar {
  flex: 0 0 220px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-header h1 {
  margin: 0;
  font-size: 1.3rem;
}

.sidebar-header .tagline {
  color: var(--muted);
  margin: 4px 0 0;
  font-size: 0.85rem;
}

/* The Menu button only exists on phones; the 700px media query below turns it on. */
.sidebar-toggle {
  display: none;
}

/* Hamburger icon drawn from one bar plus a ::before and ::after bar. */
.sidebar-toggle-icon {
  position: relative;
  width: 20px;
  height: 1.6px;
  background: currentColor;
}

.sidebar-toggle-icon::before,
.sidebar-toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 1.6px;
  background: currentColor;
}

.sidebar-toggle-icon::before {
  top: -6px;
}

.sidebar-toggle-icon::after {
  top: 6px;
}

/* Sidebar navigation: groups of tab buttons with small headings. */
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-group-label {
  margin: 0;
  padding: 0 12px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.nav-group-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}

.nav-item:hover {
  background: var(--bg);
}

/* The tab currently showing (class set by app.js). */
.nav-item.active {
  background: var(--accent);
  color: var(--accent-contrast);
}

.nav-icon {
  flex: 0 0 auto;
}

/* Undo / redo buttons at the top of the sidebar. */
.undo-redo-panel {
  display: flex;
  gap: 8px;
}

.undo-redo-panel button,
.data-io-btn {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.78rem;
}

.undo-redo-panel button:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}

.undo-redo-panel button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Sync area at the bottom of the sidebar (margin-top: auto pushes it down). */
.sync-panel {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sync-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* An explicit display would otherwise beat the hidden attribute (same guard as .collection[hidden]). */
.sync-status[hidden] {
  display: none;
}

.sync-status-text {
  font-size: 0.78rem;
  color: var(--muted);
}

/* Status colours: green after a good sync, orange-red after a failed one. */
.sync-status-text.sync-ok { color: var(--accent); }
.sync-status-text.sync-failed { color: var(--accent-2); }

.sync-change-btn {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.72rem;
}

/* Passphrase form shown until sync is connected. */
.sync-setup-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sync-setup-form input {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  width: 100%;
}

.sync-setup-form button {
  padding: 6px 12px;
  border: none;
  border-radius: 13px;
  background: var(--accent);
  color: var(--accent-contrast);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.82rem;
}

.sync-setup-form button:hover { opacity: 0.9; }

/* Export data / Import data buttons under the sync area. */
.data-io {
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.data-io-buttons {
  display: flex;
  gap: 8px;
}

/* "N changes not synced" note under the sync status, and the Sync now button
   highlighting itself when there is something to send. */
.sync-pending {
  margin: 6px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-rose);
}

.sync-pending[hidden] { display: none; }

#sync-now-btn.sync-needed {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

/* Menu footer: the version label under the Theme and App lock buttons. */
.app-version {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
}

/* ===== 5. Content area, toolbars, search box ===== */
/* min-width: 0 lets the content column shrink instead of being pushed wider by long text. */
.content {
  flex: 1;
  min-width: 0;
  padding: 32px 32px 48px;
  max-width: 960px;
}

/* Heading row at the top of each tab: title, then search box and sort menu. */
.collection-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.collection-toolbar h2 { margin: 0; }

/* The small grey summary line under a heading ("12 books", totals, etc.). */
.stats-line {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.85rem;
}

.collection-toolbar input[type="search"] {
  flex: 1 1 220px;
  max-width: 320px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
}

/* Known landmine: any `.collection { display: ... }` layout rule silently
   overrides the `hidden` attribute unless this override is present. */
.collection[hidden] {
  display: none;
}

/* ===== 6. Add forms and date fields ===== */
/* Default add form lays its fields out in a wrapping row; .add-form-stacked (below) makes a single column. */
.add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.035);
  /* Without this, flex's default `align-items: stretch` makes a plain
     single-line input match the height of a taller sibling (e.g. `.date-field`,
     which stacks a label above its input) instead of keeping its own height. */
  align-items: flex-start;
}

.add-form input[type="text"],
.add-form input[type="date"],
.add-form input[type="number"],
.add-form input[type="search"],
.add-form select,
.add-form textarea {
  flex: 1 1 160px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
}

.add-form textarea {
  flex: 1 1 100%;
  resize: vertical;
}

.add-form-stacked {
  flex-direction: column;
  align-items: stretch;
}

.add-form-stacked input[type="text"],
.add-form-stacked input[type="date"],
.add-form-stacked input[type="number"],
.add-form-stacked input[type="search"],
.add-form-stacked textarea,
.add-form-stacked select,
.add-form-stacked .date-field {
  width: 100%;
  /* Column layout turns the row-based `flex: 1 1 160px` above into "grow to
     fill vertical space." Selector specificity must match-or-beat that rule
     (it includes an attribute selector) or this override silently loses.
     Every input type present in the base rule above must also be listed
     here — every input type in the base rule must appear in both lists. */
  flex: none;
}

.add-form button {
  padding: 10px 20px;
  border: none;
  border-radius: 13px;
  background: var(--accent);
  color: var(--accent-contrast);
  cursor: pointer;
  font-weight: 600;
  align-self: flex-start;
}

.add-form button:hover { opacity: 0.9; }

/* A label stacked above a date or time input. */
.date-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--muted);
  flex: 1 1 160px;
  min-width: 0; /* lets the date box shrink to fit a phone screen */
}

.date-field input[type="date"] {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  width: 100%;
  /* `.add-form input[type="date"]` (class+attribute+element) also matches
     this input via descendant selection, applying its `flex: 1 1 160px`
     (meant for a row-context sibling of `.add-form`) to this input's actual
     flex parent, `.date-field` (column direction) — turning that 160px
     basis into a height instead of a width. Selector specificity here must
     match that rule's (hence `input[type="date"]`, not bare `input`) so this
     override actually wins. */
  flex: none;
}

/* .date-field sets display:flex, which would otherwise beat [hidden]. */
.date-field[hidden] { display: none; }

/* "unknown" note beside a blank medication date. */
.unknown-hint {
  color: var(--muted);
  font-style: italic;
}

/* Validation message shown above a form's submit button. */
.form-error {
  color: var(--accent-2);
  background: var(--bg);
  border: 1px solid var(--accent-2);
  border-radius: 13px;
  padding: 9px 12px;
  margin: 0;
  font-size: 0.85rem;
}

/* ===== 7. Columns, phone breakpoint, column panels, corner leaves ===== */
/* Side-by-side panels (Books statuses, Home widgets). */
.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.book-columns {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Main phone breakpoint: single-column panels, sidebar stacks on top and collapses behind the Menu button. */
@media (max-width: 700px) {
  .columns { grid-template-columns: 1fr; }
  .app-shell { flex-direction: column; }
  /* Stacked on top, the sidebar's divider line belongs underneath it, not down its right edge. */
  .sidebar {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: transparent;
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    margin-top: 12px;
  }

  .sidebar:not(.sidebar-open) #undo-redo-panel,
  .sidebar:not(.sidebar-open) .nav-list,
  .sidebar:not(.sidebar-open) .sync-panel,
  .sidebar:not(.sidebar-open) .data-io {
    display: none;
  }
}

/* One panel in a .columns grid (for example "Owned - Unread"). */
.column {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 16px;
  min-height: 120px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.035);
  transition: box-shadow 0.2s ease;
  /* Grid items default to min-width:auto, which can't shrink below intrinsic
     content width and causes the grid to overflow its container ("grid
     blowout") at viewport widths where 3 columns are tight but not yet under
     the mobile breakpoint. */
  min-width: 0;
}

/* Corner-accent decor. Scoped to .column and .toolbar-leaf only (not every
   individual card class) to avoid repeating a corner motif once per card —
   Books alone has 218 real records, so per-card decor would read as noise
   rather than "dramatic". .toolbar-leaf marks the collection-toolbar of the
   five flat-list collections (Recipes, To-Do, Shopping List, Notes, Resume &
   Portfolio) that have no .column wrapper, so every collection still gets
   exactly one corner accent near its heading. */
.column,
.toolbar-leaf {
  position: relative;
}

.column::before,
.toolbar-leaf::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M34 2 C20 4 8 14 4 28 C16 24 28 16 34 2 Z' fill='%232E5D34' opacity='0.16'/%3E%3Cpath d='M30 6 C22 12 14 20 8 26' stroke='%232E5D34' stroke-width='1' fill='none' opacity='0.18'/%3E%3C/svg%3E");
}

/* Column corner leaves, recoloured for dark mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .column::before,
  :root:not([data-theme="light"]) .toolbar-leaf::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M34 2 C20 4 8 14 4 28 C16 24 28 16 34 2 Z' fill='%237BC174' opacity='0.16'/%3E%3Cpath d='M30 6 C22 12 14 20 8 26' stroke='%237BC174' stroke-width='1' fill='none' opacity='0.18'/%3E%3C/svg%3E");
  }
}

/* Dark theme chosen by hand in the Menu (same rules as above). */
:root[data-theme="dark"] .column::before,
:root[data-theme="dark"] .toolbar-leaf::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M34 2 C20 4 8 14 4 28 C16 24 28 16 34 2 Z' fill='%237BC174' opacity='0.16'/%3E%3Cpath d='M30 6 C22 12 14 20 8 26' stroke='%237BC174' stroke-width='1' fill='none' opacity='0.18'/%3E%3C/svg%3E");
}

/* ===== 8. Cards, buttons, badges and chips shared by every list ===== */
.column:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.055);
}

.column h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

/* Little pill showing how many items are in a column. */
.count {
  background: var(--tint-blush);
  color: var(--text);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.8rem;
  /* .count lives inside an h3; reset off the inherited --font-heading so the
     small numeral stays on the plain, legible body stack. */
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* The <ul> that holds a list of cards. */
.card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Books can hold hundreds of records per column (218 in the real dataset) —
   cap each column's own height and let it scroll internally instead of the
   whole page growing to the length of the longest column. */
.book-columns .card-list {
  max-height: min(520px, 60vh);
  overflow-y: auto;
  padding-right: 4px;
}

/* A single-column list with no .column wrapper (Recipes, To-Do, Notes, ...); slightly looser spacing. */
.flat-list {
  gap: 16px;
}

/* A collapsible "Add ..." panel that holds an add form (Recipes). */
.add-dropdown { margin-bottom: 16px; }
.add-dropdown > summary {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 13px;
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
}
.add-dropdown[open] > summary { margin-bottom: 12px; }

/* A row of cards you scroll sideways: arrow buttons on both sides, or swipe / arrow keys. */
.carousel { display: flex; align-items: center; gap: 8px; }
.carousel-track {
  flex: 1;
  min-width: 0;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 0 12px;
}
.carousel-track > li { flex: 0 0 min(380px, 88%); scroll-snap-align: start; }
.carousel-arrow {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--accent);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
}
.carousel-arrow:hover { border-color: var(--accent); }
.carousel-arrow:disabled { opacity: 0.35; cursor: default; }
.carousel-arrow[hidden] { display: none; }
@media (max-width: 600px) { .carousel-arrow { width: 32px; height: 32px; font-size: 1.2rem; } }

/* Shared look for every kind of card: same border, radius, padding and shadow. */
.book-card,
.recipe-card,
.med-card,
.diagnosis-card,
.todo-item,
.shopping-item,
.note-card,
.weight-card,
.link-card,
.home-item {
  overflow-wrap: break-word;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 16px;
  background: var(--bg);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.035);
  transition: box-shadow 0.2s ease;
}

.book-card:hover,
.recipe-card:hover,
.med-card:hover,
.diagnosis-card:hover,
.todo-item:hover,
.shopping-item:hover,
.note-card:hover,
.weight-card:hover,
.link-card:hover,
.home-item:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.055);
}

/* Edit, Cancel and Delete buttons used on every card (outlined, quiet). */
.edit-btn,
.cancel-btn,
.delete-btn {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8rem;
}

/* margin-left: auto pushes Delete to the right end of the button row. */
.delete-btn { margin-left: auto; }

/* Quiet outlined buttons all turn green on hover; Delete turns orange-red. */
.edit-btn:hover,
.cancel-btn:hover,
.data-io-btn:hover,
.sync-change-btn:hover,
.sidebar-toggle:hover,
.reminder-banner-btn:hover,
.recipe-open-shopping:hover,
.journal-secondary-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.delete-btn:hover {
  color: var(--accent-2);
  border-color: var(--accent-2);
}

/* "Nothing here yet" message shown when a list is empty. */
.empty-state {
  text-align: center;
  color: var(--muted);
  margin-top: 24px;
}

/* Small green pill used for categories and repeat labels. */
.badge {
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75rem;
}

/* Filter chips (category / done / checked filters). Used by Recipes, To-Do, Shopping and Journal. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  max-width: 100%; /* a very long label wraps instead of poking past the screen */
  overflow-wrap: anywhere;
  text-align: left;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* The chip whose filter is currently on. */
.chip-active,
.chip-active:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast); /* stays readable while hovered (phones keep :hover after a tap) */
}

/* Notes and button rows on cards (Recipes, Medications, Diagnoses). */
.recipe-notes,
.med-notes,
.diagnosis-notes {
  color: var(--muted);
  font-size: 0.85rem;
  font-style: italic;
  margin: 0 0 8px;
}

.recipe-actions,
.med-actions,
.diagnosis-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

/* ===== 9. Books and the reading goal ===== */
.book-info {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

.book-title { font-size: 0.95rem; }
.book-author { color: var(--muted); font-size: 0.85rem; }
.book-rating { color: var(--accent-rose); font-size: 0.85rem; }

.book-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.book-actions select {
  /* A <select>'s closed-state width is intrinsic to its widest <option> text
     ("Move: Currently Reading", "Move: Jon's Bookshelf") — without a cap it
     overflows a card at Books' narrower 5-column width. flex-wrap alone
     doesn't stop a single item from being wider than its container. */
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
}

.rating-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--muted);
}

.rating-label[hidden] {
  display: none;
}

/* Reading goal for this year (progress bar and goal form). */
.reading-goal {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--surface);
}

.reading-goal-text { margin: 0 0 6px; font-weight: 600; overflow-wrap: anywhere; }
.reading-goal-undated { margin: 6px 0 0; font-size: 0.8rem; color: var(--muted); }

.reading-goal-bar {
  display: block;
  width: 100%;
  height: 10px;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border-soft);
  accent-color: var(--accent);
}

.reading-goal-bar::-webkit-progress-bar { background: var(--border-soft); }
.reading-goal-bar::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.reading-goal-bar::-moz-progress-bar { background: var(--accent); }
.reading-goal-bar[hidden] { display: none; }

.reading-goal-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.reading-goal-form label { font-size: 0.85rem; color: var(--muted); }

.reading-goal-form input {
  width: 6em;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
}

.reading-goal-form button {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
}

.reading-goal-form button[type="submit"] { border: none; background: var(--accent); color: var(--accent-contrast); font-weight: 600; }

.book-finished { font-size: 0.85rem; color: var(--muted); }

/* ===== 10. Recipes, scaling and add-to-shopping-list ===== */

.recipe-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  min-width: 0;
  overflow-wrap: anywhere; /* a long title wraps instead of widening the page */
}

.recipe-title {
  font-size: 1rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.recipe-section {
  margin-bottom: 8px;
}

.recipe-section h4 {
  margin: 0 0 4px;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Long ingredient or step lists scroll inside the card instead of stretching it. */
.scroll-block {
  margin: 0;
  padding-left: 20px;
  max-height: 180px;
  overflow-y: auto;
}

.scroll-block li {
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.recipe-scale { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; }
.recipe-scale-label { font-size: 0.8rem; color: var(--muted); }

/* Recipe -> shopping list */
.add-to-shopping-btn,
.cook-mode-btn {
  padding: 5px 12px;
  border: 1px solid var(--accent);
  border-radius: 13px;
  background: transparent;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.add-to-shopping-btn:hover,
.cook-mode-btn:hover { background: var(--accent); color: var(--accent-contrast); }
.add-to-shopping-btn[hidden],
.cook-mode-btn[hidden] { display: none; }

/* Confirmation line under a recipe after adding it to the shopping list. */
.recipe-shop-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--accent);
}

.recipe-shop-status[hidden] { display: none; }

.recipe-open-shopping {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
}

/* ===== 11. Medications ===== */

.med-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.med-name { font-size: 0.95rem; }

.med-field {
  font-size: 0.85rem;
  color: var(--muted);
}

.field-label {
  font-weight: 600;
  color: var(--text);
}

.med-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

/* Refill reminder text: red-orange when overdue, rose when coming up soon. */
.refill-hint { font-weight: 600; }
.refill-hint.overdue { color: var(--accent-2); }
.refill-hint.soon { color: var(--accent-rose); }

/* ===== 12. Diagnoses ===== */

.diagnosis-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.diagnosis-condition { font-size: 0.95rem; }
.diagnosis-date,
.diagnosis-provider {
  color: var(--muted);
  font-size: 0.85rem;
}

/* ===== 13. To-Do and Shopping List ===== */

/* Both lists are single-row cards: checkbox and name on the left, details and buttons on the right. */
.todo-item,
.shopping-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.todo-check,
.shopping-check {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0; /* a long task wraps instead of widening the row */
  cursor: pointer;
}

/* Done / checked-off items are struck through and greyed. */
.todo-item.completed .todo-task,
.shopping-item.completed .shopping-item-name {
  text-decoration: line-through;
  color: var(--muted);
}

.todo-due {
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}

/* A long quantity ("2 gallons of ...") wraps inside its card instead of running off the edge. */
.shopping-quantity {
  font-size: 0.85rem;
  color: var(--muted);
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Past-due dates for to-dos and medication refills (.bill-due is the Home refill row's date label;
   the odd name is left over from the removed Budget tab and app.js still uses it). */
.todo-due.overdue,
.bill-due.overdue {
  color: var(--accent-2);
  font-weight: 600;
}

/* Long words (a long to-do or item name) must wrap instead of widening the page. */
.todo-task,
.shopping-item-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* To-Do / Shopping List keep their existing horizontal-row card shape — the
   view/edit-form split just wraps that same row instead of switching to a
   vertical stack. */
.todo-view, .shopping-view {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.todo-edit-form, .shopping-edit-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.todo-view[hidden], .shopping-view[hidden],
.todo-edit-form[hidden], .shopping-edit-form[hidden] {
  display: none;
}

.todo-edit-form input, .shopping-edit-form input {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
}

.todo-repeat[hidden] { display: none; }
.todo-edit-form select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
}

@media (max-width: 700px) {
  /* The to-do / shopping row holds a task plus a due date, badge and two buttons: let it
     wrap onto a second line instead of squeezing everything onto one. */
  .todo-view,
  .shopping-view {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .todo-check,
  .shopping-check {
    flex: 1 1 100%;
  }
}

/* ===== 14. Notes ===== */

.note-title {
  font-size: 1rem;
  overflow-wrap: break-word;
}

.note-body-preview {
  margin: 0;
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.note-modified {
  font-size: 0.75rem;
  color: var(--muted);
}

.note-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ===== 15. Resume and Portfolio ===== */

.link-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.link-label { font-size: 0.95rem; }

.link-url {
  color: var(--accent-lavender);
  font-size: 0.85rem;
  word-break: break-all;
}

.link-notes {
  color: var(--muted);
  font-size: 0.85rem;
  font-style: italic;
  margin: 0 0 8px;
}

.link-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

/* ===== 16. Edit forms shared by most cards ===== */

/* Every card has a view block and a hidden edit form that the Edit button swaps in. Notes, Books,
   Recipes, Medications, Diagnoses, Weight and Resume & Portfolio share one vertical layout;
   To-Do and Shopping List use a horizontal-row variant (in section 13). */
.note-view,
.note-edit-form,
.book-view,
.book-edit-form,
.recipe-view,
.recipe-edit-form,
.med-view,
.med-edit-form,
.diagnosis-view,
.diagnosis-edit-form,
.link-view,
.link-edit-form,
.weight-edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* An explicit display would otherwise beat the hidden attribute (same guard as .collection[hidden]). */
.note-view[hidden],
.note-edit-form[hidden],
.book-view[hidden],
.book-edit-form[hidden],
.recipe-view[hidden],
.recipe-edit-form[hidden],
.med-view[hidden],
.med-edit-form[hidden],
.diagnosis-view[hidden],
.diagnosis-edit-form[hidden],
.link-view[hidden],
.link-edit-form[hidden],
.weight-edit-form[hidden] {
  display: none;
}

/* Text fields inside those edit forms. */
.note-edit-form input,
.note-edit-form textarea,
.book-edit-form input,
.book-edit-form textarea,
.recipe-edit-form input,
.recipe-edit-form textarea,
.med-edit-form input,
.med-edit-form textarea,
.diagnosis-edit-form input,
.diagnosis-edit-form textarea,
.link-edit-form input,
.link-edit-form textarea,
.weight-edit-form input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
}

.note-edit-form textarea,
.book-edit-form textarea,
.recipe-edit-form textarea,
.med-edit-form textarea,
.diagnosis-edit-form textarea,
.link-edit-form textarea {
  resize: vertical;
}

/* Green Save button in every edit form (including To-Do and Shopping List), and its hover state. */
.note-edit-form button[type="submit"],
.book-edit-form button[type="submit"],
.recipe-edit-form button[type="submit"],
.med-edit-form button[type="submit"],
.diagnosis-edit-form button[type="submit"],
.link-edit-form button[type="submit"],
.weight-edit-form button[type="submit"],
.todo-edit-form button[type="submit"],
.shopping-edit-form button[type="submit"] {
  padding: 5px 14px;
  border: none;
  border-radius: 13px;
  background: var(--accent);
  color: var(--accent-contrast);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.8rem;
}

.note-edit-form button[type="submit"]:hover,
.book-edit-form button[type="submit"]:hover,
.recipe-edit-form button[type="submit"]:hover,
.med-edit-form button[type="submit"]:hover,
.diagnosis-edit-form button[type="submit"]:hover,
.link-edit-form button[type="submit"]:hover,
.weight-edit-form button[type="submit"]:hover,
.todo-edit-form button[type="submit"]:hover,
.shopping-edit-form button[type="submit"]:hover {
  opacity: 0.9;
}

/* A date box inside a column-flex edit form: the 160px flex basis of .date-field would become a
   height there, leaving a tall empty gap, so it is switched off (the add forms already do this). */
.book-edit-form .date-field,
.diagnosis-edit-form .date-field { flex: none; }

/* ===== 17. Reminder banner (backup and sync reminders) ===== */

.reminder-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid var(--accent-2);
  border-radius: 14px;
  background: var(--surface);
  font-size: 0.9rem;
}

.reminder-banner[hidden] { display: none; }

.reminder-banner-text {
  flex: 1;
  overflow-wrap: break-word;
  min-width: 0;
}

.reminder-banner-btn {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8rem;
}

@media (max-width: 700px) {
  /* The message gets the full width and its buttons sit underneath, instead of the text being
     squeezed into a thin column beside them. */
  .reminder-banner {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .reminder-banner-text {
    flex: 1 1 100%;
  }
}

/* ===== 18. Journal: wizard, cards, timeline, search, trends, prompts ===== */

/* Privacy note under the Journal heading. */
.journal-privacy { margin-bottom: 14px; }

/* The start buttons are hidden while the wizard (the step-by-step form for a new entry) is open. */
.journal-start[hidden] { display: none; }

.journal-start {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.journal-start-btn,
.journal-wizard-actions button[type="submit"] {
  padding: 9px 18px;
  border: none;
  border-radius: 13px;
  background: var(--accent);
  color: var(--accent-contrast);
  cursor: pointer;
  font-weight: 600;
}

.journal-wizard {
  margin-bottom: 20px;
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: var(--surface);
}

.journal-wizard[hidden] { display: none; }

.journal-progress { margin: 0 0 6px; color: var(--muted); font-size: 0.8rem; }
.journal-question { margin: 0 0 6px; font-size: 1.1rem; overflow-wrap: break-word; }
.journal-hint { margin: 0 0 10px; color: var(--muted); font-size: 0.85rem; }

.journal-answer textarea,
.journal-answer input[type="date"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
}

.journal-answer textarea { min-height: 110px; resize: vertical; }

.journal-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.journal-choice {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 0.95rem;
}

.journal-choice:hover { border-color: var(--accent); }

.journal-choice.journal-choice-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

.journal-wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.journal-wizard-actions button[type="submit"] { margin-left: auto; }

.journal-secondary-btn {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
}

/* A saved entry shown in the timeline. */
.journal-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 16px;
  background: var(--bg);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.035);
}

.journal-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.journal-type-badge {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.75rem;
  font-weight: 600;
}

.journal-card-date { color: var(--muted); font-size: 0.85rem; }

/* Question-and-answer pairs inside a saved entry. */
.journal-qa { margin: 0; }
.journal-qa dt { color: var(--muted); font-size: 0.8rem; margin-top: 8px; }
.journal-qa dd { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: break-word; }

.journal-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.journal-backup { margin-top: 24px; }

/* Journal timeline: entries sit side by side, oldest on the left, newest on
   the right, and scroll sideways. */

.journal-nav[hidden] { display: none; }

.journal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.journal-date-strip {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
}

.journal-date-chip {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}

.journal-date-chip:hover { border-color: var(--accent); }

.journal-date-chip.journal-date-chip-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

.journal-date-chip small { margin-left: 4px; opacity: 0.75; }

/* The id selector is needed to beat .card-list's column layout and make the list scroll sideways. */
#journal-list.journal-timeline {
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
  padding: 2px 2px 14px;
  outline-offset: 2px;
}

#journal-list.journal-timeline .journal-card {
  flex: 0 0 min(340px, 86%);
  scroll-snap-align: start;
  box-sizing: border-box;
  max-height: 70vh;
  overflow-y: auto;
}

/* Journal search and trends */

.journal-search {
  width: 100%;
  margin-bottom: 10px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
}

.journal-trends {
  margin: 4px 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--surface);
}

/* Trends is a collapsible <details> panel. */
.journal-trends summary { cursor: pointer; font-weight: 600; }

.journal-trend-summary,
.journal-trend-feelings { margin: 8px 0 0; font-size: 0.85rem; color: var(--muted); }

/* The trend chart is an SVG drawn by app.js; these style its grid, labels, lines and dots. */
.journal-chart { margin-top: 8px; }
.journal-chart svg { width: 100%; height: auto; display: block; }
.journal-chart .trend-grid { stroke: var(--border-soft); stroke-width: 1; }
.journal-chart .trend-label { fill: var(--muted); font-size: 11px; }
.journal-chart .trend-line { fill: none; stroke-width: 2; }
.journal-chart .trend-dot { stroke: var(--bg); stroke-width: 1.5; }

/* Daily day-rating is green, therapy mood is rose. */
.trend-daily.trend-line { stroke: var(--accent); }
.trend-daily.trend-dot { fill: var(--accent); }
.trend-therapy.trend-line { stroke: var(--accent-rose); }
.trend-therapy.trend-dot { fill: var(--accent-rose); }

.journal-trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.journal-trend-legend[hidden] { display: none; }

/* Coloured dots in the chart legend. */
.trend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-radius: 50%;
}
.trend-swatch.trend-daily { background: var(--accent); }
.trend-swatch.trend-therapy { background: var(--accent-rose); }

@media (max-width: 700px) {
  /* The trend chart is drawn in a 640-unit box that shrinks to the screen, so its labels need to start big. */
  .journal-chart .trend-label { font-size: 24px; }
}

.journal-extra { flex: 1 1 100%; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--surface); }
.journal-extra[hidden] { display: none; }
.journal-extra-label { margin: 0 0 4px; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.journal-prompt-text { margin: 0 0 10px; font-size: 1.05rem; overflow-wrap: anywhere; }
.journal-lookback-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }

.journal-lookback-list button {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  background: var(--bg);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  overflow-wrap: anywhere;
}

/* ===== 19. Home: rows, search everything, quick add ===== */

.home-actions { margin: 0 0 16px; }

.quick-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.quick-add select,
.quick-add input[type="text"] {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  min-width: 0;
}

.quick-add input[type="text"] { flex: 1 1 160px; }

.quick-add button {
  padding: 9px 18px;
  border: none;
  border-radius: 13px;
  background: var(--accent);
  color: var(--accent-contrast);
  cursor: pointer;
  font-weight: 600;
}

.quick-add-status {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.quick-add-status[hidden] { display: none; }

/* Search everything (Home) */

.global-search { margin-bottom: 16px; }

.global-search > input[type="search"] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
}

.global-search-journal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--muted);
}

#global-search-results[hidden] { display: none; }
#global-search-results { margin-top: 12px; }
#global-search-results h3 { margin: 14px 0 6px; font-size: 0.95rem; color: var(--muted); }
#global-search-results ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* One clickable result in the search-everything list. */
.search-hit {
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--bg);
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.search-hit:hover { border-color: var(--accent); }
.search-hit-title { display: block; font-weight: 600; }
.search-hit-snippet { display: block; margin-top: 2px; font-size: 0.85rem; color: var(--muted); }
.search-hit mark { background: transparent; color: var(--accent); font-weight: 700; }
.search-more { color: var(--accent); font-size: 0.85rem; font-weight: 600; }

/* While searching, the rest of Home steps aside. */
#home-collection.is-searching > :not(.collection-toolbar):not(.global-search) { display: none !important; }

/* A Home row that is really a button: looks like plain text, opens the full tab when clicked. */
.home-item-link {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  /* name on one line, its detail (amount, due date) underneath */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  overflow-wrap: anywhere;
}

/* Home rows: put the name and its detail (amount, due date) on separate lines, like the
   to-do cards, instead of running them together in a narrow column. */
.home-item-link .bill-due,
.home-item-link .todo-task,
.home-item-link .todo-due {
  display: block;
}

.bill-due {
  font-size: 0.85rem;
  color: var(--muted);
}

/* ===== 20. Weight: stats, history, chart, goal ===== */

/* Small sub-headings inside a tab (for example Weight "History"). */
.subsection-heading {
  margin: 20px 0 8px;
  font-size: 1rem;
  color: var(--muted);
}

/* Four headline figures (oldest, highest, lowest, most recent) above the form. */
.weight-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.weight-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--surface);
}

.weight-stat-label { font-size: 0.8rem; color: var(--muted); }
.weight-stat-value { font-size: 1.5rem; overflow-wrap: anywhere; }
.weight-stat-date { font-size: 0.8rem; color: var(--muted); min-height: 1.1em; }

.weight-view {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.weight-view[hidden] { display: none; }

.weight-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; min-width: 0; }
.weight-entry-value { font-size: 1.1rem; }
.weight-entry-date, .weight-entry-note { font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }
.weight-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.weight-chart-box { margin-bottom: 18px; }

.weight-chart-toolbar { margin-bottom: 6px; }

.weight-chart {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--surface);
}

.weight-chart .w-grid { stroke: var(--border-soft); stroke-width: 1; }
.weight-chart .w-label { fill: var(--muted); font-size: 16px; }
.weight-chart .w-line { fill: none; stroke: var(--accent); stroke-width: 2.2; }
.weight-chart .w-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.weight-chart .w-goal { stroke: var(--accent-rose); stroke-width: 1.6; stroke-dasharray: 6 4; }
.weight-chart .w-goal-label { fill: var(--accent-rose); font-size: 16px; font-weight: 600; }
.weight-chart .w-empty { fill: var(--muted); font-size: 18px; }

.weight-trend { margin: 8px 0; font-size: 0.9rem; color: var(--muted); min-height: 1.2em; }

.weight-goal-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.weight-goal-form label { font-size: 0.85rem; color: var(--muted); }

.weight-goal-form input {
  width: 8em;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
}

.weight-goal-form button {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
}

.weight-goal-form button[type="submit"] {
  border: none;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

@media (max-width: 700px) {
  /* Two figures per row instead of one tall column */
  .weight-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .weight-stat { padding: 12px; }
  .weight-stat-value { font-size: 1.25rem; }

  /* The chart is drawn in a 600-unit box that shrinks to the screen, so its labels need to start big. */
  .weight-chart .w-label,
  .weight-chart .w-goal-label { font-size: 26px; }
}

/* ===== 21. Therapy and health summary sheets, print styles ===== */

/* Therapy summary: a full-screen sheet to read, copy, or print before a session */

.journal-summary-btn {
  padding: 9px 18px;
  border: 1px solid var(--accent);
  border-radius: 13px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
}

/* Dark full-screen backdrop behind the summary sheet. */
.summary-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  padding: 16px;
  background: rgba(0, 0, 0, 0.6);
}

.summary-overlay[hidden] { display: none; }

.summary-sheet {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: var(--bg);
  color: var(--text);
}

.summary-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.summary-count-label { display: flex; align-items: center; gap: 6px; margin-right: auto; font-size: 0.85rem; color: var(--muted); }

.summary-btn {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
}

.summary-btn:hover { border-color: var(--accent); color: var(--accent); }
.summary-btn:disabled { opacity: 0.5; cursor: default; }

.summary-status { margin: 0 0 10px; font-size: 0.85rem; color: var(--accent); }
.summary-status[hidden] { display: none; }

/* Content of the summary, built by renderTherapySummary. */
.summary-body h2 { margin: 0 0 4px; font-size: 1.4rem; }
.summary-body h3 { margin: 18px 0 6px; font-size: 1.05rem; }
.summary-body .summary-meta { margin: 0 0 8px; color: var(--muted); font-size: 0.85rem; }
.summary-body dl { margin: 0; }
.summary-body dt { margin-top: 8px; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.summary-body dd { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: break-word; }
.summary-body .summary-session { padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); break-inside: avoid; }
.summary-body ul { margin: 6px 0 0; padding-left: 20px; }

/* Printing while the summary is open: hide everything except the sheet, and use plain black on white. */
@media print {
  body.summary-open > *:not(.summary-overlay) { display: none !important; }
  body.summary-open .summary-overlay:not([hidden]) {
    position: static;
    padding: 0;
    overflow: visible;
    background: #fff;
  }
  body.summary-open .summary-sheet {
    max-width: none;
    padding: 0;
    border: none;
    background: #fff;
    color: #000;
  }
  body.summary-open .summary-body .summary-meta,
  body.summary-open .summary-body dt { color: #444; }
  body.summary-open .summary-body .summary-session { border-bottom-color: #bbb; }
  /* Buttons and other screen-only controls inside the sheet. */
  .summary-no-print { display: none !important; }
}

/* ===== 22. Recipe cook mode ===== */

.cook-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow-y: auto;
  padding: 16px;
  background: var(--bg);
  color: var(--text);
}

.cook-overlay[hidden] { display: none; }
.cook-sheet { max-width: 760px; margin: 0 auto; }
.cook-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cook-top h2 { margin: 0; overflow-wrap: anywhere; }
.cook-ingredients { margin: 14px 0; }
.cook-ingredients summary { cursor: pointer; font-weight: 600; }
.cook-ingredients ul { margin: 8px 0 0; padding-left: 22px; }
.cook-progress { margin: 18px 0 6px; color: var(--muted); font-size: 0.95rem; }
.cook-step { margin: 0 0 20px; font-size: 1.6rem; line-height: 1.45; overflow-wrap: anywhere; }
.cook-nav { display: flex; gap: 12px; }
.cook-nav .summary-btn { flex: 1; padding: 16px; font-size: 1.1rem; }
.cook-nav .summary-btn:disabled { opacity: 0.4; }
.cook-awake { margin: 14px 0 0; font-size: 0.8rem; color: var(--muted); }
.cook-awake[hidden] { display: none; }

/* ===== 23. App lock ===== */

/* The lock screen covers everything until the PIN is right. It is shown purely by CSS (the
   data-locked attribute on <html>), so a locked app never flashes its content while loading. */
.lock-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--bg);
}

html[data-locked] .lock-screen { display: flex; }
html[data-locked] .app-shell,
html[data-locked] .storage-warning,
html[data-locked] .summary-overlay,
html[data-locked] .cook-overlay,
html[data-locked] .lock-backdrop { visibility: hidden; }

/* The dialog for turning the lock on or off sits over the page like a small sheet. */
.lock-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
}

.lock-backdrop[hidden] { display: none; }

.lock-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 340px);
  padding: 22px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
}

.lock-card h2 { margin: 0 0 4px; font-size: 1.2rem; }
.lock-note { margin: 0; font-size: 0.85rem; color: var(--muted); }

.lock-card input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
}

.lock-card button {
  padding: 10px 18px;
  border: none;
  border-radius: 13px;
  background: var(--accent);
  color: var(--accent-contrast);
  cursor: pointer;
  font-weight: 600;
}

.lock-card .lock-forgot,
.lock-card #lock-setup-cancel {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85rem;
}

.lock-buttons { display: flex; gap: 8px; }
.lock-buttons button { flex: 1; }

/* ===== 24. Storage warning ===== */

/* Shown when the browser refuses to save (storage full or blocked). */
.storage-warning {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1000;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--accent-2);
  border-radius: 13px;
  font-size: 0.9rem;
  font-style: normal;
}
.storage-warning button {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  font: inherit;
  color: var(--accent-contrast);
  background: var(--accent-2);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

/* ===== 25. Phone polish and overrides for sections 1-24 ===== */

/* Date inputs.
   iPhone Safari gives date inputs their own minimum width and centres the date text, so
   they could poke out of their box. Dropping the native look and letting them shrink fixes it. */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  max-width: 100%;
  min-height: 2.6em;
  text-align: left;
}

input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  min-width: 0;
}

/* The "Sort:" dropdowns above each list used the browser's plain look; match the search box. */
select[id$="-sort-input"],
#therapy-summary-count {
  max-width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background-color: var(--surface);
  color: var(--text);
  font-family: inherit;
  margin-bottom: 12px;
}

/* The bottom margin above is for stacked layouts; inside a centred toolbar row it pushed the dropdown up. */
.collection-toolbar select,
.summary-count-label select { margin-bottom: 0; }

/* iOS Safari zooms the page when a text control under 16px gets focus, and every form control in
   the app is a candidate. Many specific rules set smaller sizes, so !important is the one
   override that reliably wins on phones. */
@media (max-width: 700px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Finger-sized tap targets for the small buttons. */
  .chip,
  .sync-change-btn,
  .recipe-open-shopping,
  .reminder-banner-btn { min-height: 36px; }
}

/* ===== 26. Friendlier extras: undo toast, phone bottom bar, text size, Home weigh-in ===== */

/* Undo toast: a small bar that slides in near the bottom for a few seconds after a delete. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--text);
  color: var(--bg);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.toast[hidden] { display: none; }
.toast button {
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 600;
}

/* Bottom bar: phones only; sits above the page content and under the toast. */
.bottom-bar { display: none; }
@media (max-width: 700px) {
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bottom-bar button {
    flex: 1;
    min-height: 52px;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
  }
  .bottom-bar button.active { color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
  /* Leave room so the bar never covers the end of a page, and lift the toast above the bar. */
  .content { padding-bottom: 76px; }
  .toast { bottom: 70px; }
}
html[data-locked] .bottom-bar,
html[data-locked] .toast { visibility: hidden; }

/* The "new version is ready" banner sits at the top so it never covers the Undo toast or the bottom bar. */
.update-banner { top: 12px; bottom: auto; }
@media (max-width: 700px) { .update-banner { bottom: auto; } }

/* Text size: scales everything sized in rem. Set from the Menu. */
html[data-text="large"] { font-size: 112.5%; }
html[data-text="larger"] { font-size: 125%; }

/* Finger-sized tap targets on touch screens. */
@media (pointer: coarse) {
  .edit-btn, .cancel-btn, .delete-btn, .data-io-btn, .nav-item, #undo-btn, #redo-btn { min-height: 44px; }
}

/* The Home "Weigh in" box: number and Save side by side. */
.home-weigh-form { display: flex; gap: 8px; }
.home-weigh-form input { flex: 1; min-width: 0; }

/* The two reminder-time boxes in the Menu. */
.reminder-times { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: 0.85rem; color: var(--muted); }
.reminder-times label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* The "Add one now" button inside an empty-state message. */
.empty-state-add { margin-left: 8px; }

/* ===== 27. Buy again, pinned recipes, refill pickup, Home weight, high contrast ===== */

.buy-again { margin: 0 0 14px; }
.buy-again-label { margin: 0 0 6px; font-size: 0.85rem; color: var(--muted); font-weight: 600; }

.pin-btn {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.pin-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }

.refill-pickup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.refill-picked-btn {
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: 13px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
}
.refill-interval { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; font-size: 0.85rem; color: var(--muted); }

.home-sparkline { width: 100%; max-width: 240px; height: 40px; }
.home-sparkline polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* High contrast: near-black on white (or white on black in dark mode) with strong borders. Set from the Menu. */
:root[data-contrast="high"] {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --text: #000000;
  --muted: #1A1A1A;
  --accent: #004D12;
  --accent-2: #8A2A00;
  --border: #000000;
  --accent-contrast: #FFFFFF;
  --accent-rose: #7A1F3D;
  --accent-lavender: #3D2A7A;
  --tint-blush: #FFFFFF;
  --border-soft: #333333;
}
@media (prefers-color-scheme: dark) {
  :root[data-contrast="high"]:not([data-theme="light"]) {
    --bg: #000000;
    --surface: #000000;
    --text: #FFFFFF;
    --muted: #E6E6E6;
    --accent: #9FE89A;
    --accent-2: #FFB48A;
    --border: #FFFFFF;
    --accent-contrast: #000000;
    --accent-rose: #FFC2D6;
    --accent-lavender: #DCCFFF;
    --tint-blush: #000000;
    --border-soft: #CCCCCC;
  }
}
:root[data-contrast="high"][data-theme="dark"] {
  --bg: #000000;
  --surface: #000000;
  --text: #FFFFFF;
  --muted: #E6E6E6;
  --accent: #9FE89A;
  --accent-2: #FFB48A;
  --border: #FFFFFF;
  --accent-contrast: #000000;
  --accent-rose: #FFC2D6;
  --accent-lavender: #DCCFFF;
  --tint-blush: #000000;
  --border-soft: #CCCCCC;
}

/* "Change days" next to Picked up refill: a quiet outlined button like Edit and Cancel. */
.refill-change-btn {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
}

/* ===== 28. Snooze, share, shopping groups, swipe, customise Home ===== */

.snooze-btn {
  padding: 5px 10px;
  border: 1px solid var(--accent-2);
  border-radius: 13px;
  background: transparent;
  color: var(--accent-2);
  cursor: pointer;
  font-size: 0.8rem;
}
.snooze-btn[hidden] { display: none; }

.share-row { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.share-btn {
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: 13px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
}
.share-status { font-size: 0.85rem; color: var(--muted); }

/* A category heading inside the shopping list (shown when there are two or more categories). */
.shopping-group {
  list-style: none;
  margin: 6px 0 -6px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* Swipe on touch screens: horizontal moves go to the app, vertical ones still scroll the page. */
.todo-item, .shopping-item { touch-action: pan-y; transition: transform 0.15s ease; }

.home-customize { margin: 18px 0 0; }
.home-customize > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.home-customize-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.home-customize-list label { display: flex; align-items: center; gap: 8px; }

/* ===== 29. This week panel and Settings check ===== */

.week-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

.settings-check { margin: 8px 0; font-size: 0.85rem; }
.settings-check > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.settings-check-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.settings-check-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.check-mark {
  min-width: 48px;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
}
.check-ok .check-mark { border-color: var(--accent); color: var(--accent); }
.check-warn .check-mark { border-color: var(--accent-2); color: var(--accent-2); }
.check-action {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 0.8rem;
}

/* ===== 30. Sort: My order (drag handles and move buttons) ===== */

.drag-handle {
  padding: 4px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: grab;
  touch-action: none; /* a drag on the handle must not scroll the page */
  letter-spacing: -2px;
}
.drag-handle[hidden], .move-btn[hidden] { display: none; }
.move-btn {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

/* While dragging: the row being moved fades, and a line shows where it will land. */
.dragging { opacity: 0.55; }
.drop-before { box-shadow: 0 -3px 0 var(--accent); }
.drop-after { box-shadow: 0 3px 0 var(--accent); }

/* ===== 31. Calendar ===== */

.calendar-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.calendar-controls h3 { flex: 1; margin: 0; text-align: center; }
.calendar-controls button {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
}

.calendar-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 3px; }
.calendar-table th { font-size: 0.75rem; color: var(--muted); font-weight: 600; padding: 2px 0; }
.calendar-table td { padding: 0; }

/* One day: the number on top and up to three dots under it. */
.calendar-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
}
.calendar-day.is-today { border-color: var(--accent); font-weight: 700; }
.calendar-day.is-selected { background: var(--accent); color: var(--accent-contrast); }
.calendar-dots { display: flex; gap: 3px; min-height: 7px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.dot-todo { background: var(--accent-2); }
.dot-refill { background: var(--accent-rose); }
.dot-weight { background: var(--accent); }
.calendar-day.is-selected .dot { box-shadow: 0 0 0 1px var(--accent-contrast); }

.calendar-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0; font-size: 0.8rem; color: var(--muted); }
.calendar-legend .dot { margin-right: 4px; }

.calendar-detail { margin-top: 8px; }
.calendar-detail h3 { margin: 0 0 6px; }
.calendar-detail ul { margin: 0 0 8px; padding-left: 18px; }
.calendar-detail-link {
  padding: 4px 12px;
  border: 1px solid var(--accent);
  border-radius: 13px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.85rem;
}

/* ===== 32. Recipe print view, welcome card and tips ===== */

/* The printable copy of a recipe is invisible on screen. */
#print-recipe { display: none; }
@media print {
  body.printing-recipe > *:not(#print-recipe) { display: none !important; }
  body.printing-recipe #print-recipe { display: block; padding: 16px; color: #000; background: #fff; }
  #print-recipe h1 { margin: 0 0 4px; font-size: 1.6rem; }
  #print-recipe h2 { margin: 16px 0 4px; font-size: 1.15rem; }
  #print-recipe p { margin: 0 0 6px; }
  #print-recipe li { margin-bottom: 4px; }
}

.share-recipe-btn, .print-recipe-btn {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.welcome-card {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--accent);
  border-radius: 18px;
  background: var(--surface);
}
.welcome-card[hidden] { display: none; }
.welcome-card h3 { margin: 0 0 8px; }
.welcome-card button {
  padding: 6px 16px;
  border: 1px solid var(--accent);
  border-radius: 13px;
  background: var(--accent);
  color: var(--accent-contrast);
  cursor: pointer;
  font-weight: 600;
}
.tip-more { margin: 0 0 10px; font-size: 0.85rem; color: var(--muted); }
.tip-list { margin: 0 0 10px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }

/* ===== 33. Edit in place and History ===== */

/* The text box that replaces a to-do or shopping item's name while you edit it in place. */
.inline-edit {
  flex: 1;
  min-width: 140px;
  padding: 4px 8px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.todo-task, .shopping-item-name { cursor: text; }

.history-when { color: var(--muted); font-size: 0.75rem; }

/* ===== 34. Password vault ===== */

.vault-note { margin: 0 0 12px; font-size: 0.85rem; color: var(--muted); }
.vault-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.vault-bar input { flex: 1; min-width: 0; }
.vault-bar button, .vault-link, #vault-generate, #vault-cancel-edit {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.vault-link { border-color: transparent; color: var(--accent); text-decoration: underline; }
.vault-form-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vault-strength { font-size: 0.85rem; color: var(--muted); }
.vault-tool-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

/* One saved password. The password itself shows as dots until you tap Show. */
.vault-entry {
  overflow-wrap: anywhere;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 14px 16px;
  background: var(--bg);
}
.vault-entry strong { display: block; }
.vault-entry .vault-line { margin: 2px 0; color: var(--muted); font-size: 0.9rem; }
.vault-secret { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.05em; color: var(--text); }
.vault-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.vault-actions button, .vault-actions a {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: none;
}

/* The vault's create and unlock forms are .add-form (display: flex), which would override the hidden attribute. */
.add-form[hidden], #vault-open[hidden] { display: none; }