:root{--ink:#452d37;--muted:#7e6570;--purple:#b56080;--dark:#874560;--lilac:#f9e0e8;--pink:#fae1ea;--paper:#fff;--off:#fff5f8;--line:#efd7e1;--soft:#fff0f5;--blue:#bed6e9;--rest:#e4b2d3;--awake:#b9d5e8;--shadow:0 9px 36px rgba(92,44,64,.07)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:linear-gradient(140deg,#fff3f7 0,#fffafc 68%,#fff1f6 100%);min-height:100vh;font-size:15px}button,select,input,textarea{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,label:focus-within{outline:3px solid #b24b77;outline-offset:3px}input,textarea,select{accent-color:var(--purple)}.app-shell{max-width:790px;margin:auto;padding:calc(18px + env(safe-area-inset-top)) 18px calc(26px + env(safe-area-inset-bottom))}.app-header{display:flex;gap:12px;align-items:center;padding:7px 2px 23px}.brand-mark{width:45px;height:45px;border-radius:16px;background:linear-gradient(145deg,#f7cadc,#f5dfe8);display:grid;place-items:center;font-size:32px;color:#94506e;box-shadow:inset 0 1px 0 #fff}.brand-text{flex:1}.eyebrow{font-size:10px;letter-spacing:.21em;font-weight:750;color:#9f647e}.brand-name{font-family:Georgia,serif;font-weight:600;font-size:24px;letter-spacing:-.055em}.brand-name .star{font-family:ui-sans-serif;font-size:14px;margin-left:6px;color:#c77e9d}.icon-button{height:35px;width:35px;background:#fff;border:1px solid var(--line);border-radius:50%;font-weight:700;font-size:19px;color:#92516c}.welcome-banner{padding:20px 24px 22px;border-radius:22px;background:radial-gradient(circle at 85% 15%,#fff9fa,transparent 46%),linear-gradient(120deg,#fbe0eb,#fce9f0 62%,#fff0f5);position:relative;overflow:hidden;border:1px solid #f0d5e1}.welcome-banner h1{font-family:Georgia,serif;font-size:25px;font-weight:500;letter-spacing:-.03em;margin:4px 0 6px}.welcome-banner p{font-size:13px;color:#805969;margin:0;line-height:1.5}.banner-stars{position:absolute;right:18px;top:14px;color:#c884a3;font-size:17px;opacity:.9;letter-spacing:4px}.view-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:#f8e1ea;border:1px solid #efd4df;border-radius:17px;padding:5px;margin:18px 0 20px}.view-tab{border:0;border-radius:12px;background:transparent;color:#795669;font-size:13px;font-weight:680;padding:12px 7px;white-space:nowrap}.view-tab.active{background:#fff;color:#903f64;box-shadow:0 2px 9px rgba(93,35,63,.09)}.notice{background:#fde6ee;padding:10px 14px;color:#833b5b;border-radius:11px;margin-bottom:14px;border:1px solid #e9bcd0}.notice.error{background:#fbecee;color:#8f3c59;border-color:#f1d6df}h2{font-size:23px;font-family:Georgia,serif;font-weight:500;letter-spacing:-.025em;margin:0}h3{font-size:15px;margin:0}p{line-height:1.5}.panel{border-radius:20px;background:#fff;box-shadow:var(--shadow);border:1px solid #f0dfe7;padding:19px 20px;margin-bottom:16px}.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.muted{color:var(--muted)}.tiny{font-size:12px;line-height:1.4}.pill{display:inline-block;background:#fce7ef;color:#93476b;border-radius:100px;padding:6px 10px;font-size:11px;font-weight:700}.month-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:15px}.month-nav h2{text-align:center;font-size:22px}.month-nav .nav-btn{background:#fff;border:1px solid var(--line);height:39px;width:39px;border-radius:12px;font-weight:700;font-size:20px}.month-nav .today-btn{border:1px solid var(--line);background:#fff;color:var(--dark);padding:9px 12px;border-radius:11px;font-size:12px;font-weight:700}.month-nav .nav-group{display:flex;gap:5px}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}.stat{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:15px;padding:12px 13px}.stat-label{font-size:11px;color:var(--muted);line-height:1.25}.stat-value{font-size:23px;line-height:1.5;color:#8d405f;font-weight:750;letter-spacing:-.04em}.stat-foot{font-size:10px;color:#806874}.month-table-scroll{overflow-x:auto;padding-bottom:2px}.month-table{min-width:325px;width:100%;}.month-heading,.month-row{display:grid;grid-template-columns:35px repeat(12,minmax(0,1fr)) 37px;align-items:center;gap:3px}.month-heading{padding:6px 0 8px}.month-heading span{font-size:11px;text-align:center;color:var(--muted)}.month-heading .day-label{text-align:left;padding-left:2px}.month-row{width:100%;padding:4px 0;border:0;border-top:1px solid #f7e9ee;background:#fff;border-radius:0;text-align:left}.month-row:hover,.month-row:focus-visible{background:#fff0f5;border-radius:6px}.day-number{font-size:13px;color:#6e485b;padding-left:4px;font-weight:700}.day-number.today{color:#9d476e}.dot{width:min(19px,100%);aspect-ratio:1/1;justify-self:center;display:block;border:1.5px solid #d7d0e2;border-radius:100%;background:#fff}.dot.full{background:var(--cat);border-color:var(--cat)}.dot.half{background:linear-gradient(90deg,var(--cat) 50%,#fff 50%);border-color:var(--cat)}.row-total{font-size:10px;color:#79596c;text-align:right;padding-right:2px}.dot-key{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:11px;color:#7b606f}.dot-example{height:10px;width:10px;border-radius:100%;display:inline-block;margin-right:4px;border:1px solid #8d79bd;background:#8d79bd}.dot-example.half{background:linear-gradient(90deg,#8d79bd 50%,white 50%)}.dot-example.blank{border-color:#d7d0e2;background:#fff}.hint{background:#fff5f8;border-radius:13px;padding:12px 14px;font-size:12px;line-height:1.5;color:#7c5e6e;margin-top:14px}.button{border:1px solid #e5bfd0;background:#fff;border-radius:12px;padding:11px 15px;font-size:13px;font-weight:720;min-height:42px}.button.primary{background:#a2476b;border-color:#a2476b;color:white}.button.ghost{background:#fff4f8}.button:disabled{opacity:.4;cursor:not-allowed}.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.detail-head h2{margin:5px 0 0}.detail-head .sub{font-size:11px;color:var(--muted);margin:5px 0 0}.detail-actions{display:flex;gap:8px}.mini-btn{background:#fff0f5;border:1px solid #efd5e1;color:#88465f;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:750}.detail-stat{background:linear-gradient(135deg,#fff0f6,#fffafa);border-radius:14px;padding:13px 14px}.detail-stat strong{display:block;font-size:21px;color:#8c3e61;margin-top:3px}.detail-stat small{font-size:11px;color:var(--muted)}.detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0 2px}.status-picker{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.status-btn{border-radius:11px;border:2px solid transparent;background:#fff4f7;font-size:12px;font-weight:700;padding:10px 9px;flex:1;white-space:nowrap}.status-btn.sleep{background:#ebe5f8;color:#634889}.status-btn.rest{background:#fce9f0;color:#93587e}.status-btn.awake{background:#eaf3f9;color:#507d9f}.status-btn.erase{background:#f3f0f4;color:#736d78}.status-btn.selected{border-color:currentColor;box-shadow:inset 0 0 0 1px #fff}.timeline-guide{margin-bottom:12px;color:#7d626e;font-size:12px}.time-group{margin:17px 0 19px}.time-group-label{font-size:11px;font-weight:800;letter-spacing:.08em;color:#8c5770;margin-bottom:8px}.timeline-hours{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:4px}.timeline-hours span{font-size:10px;color:#806373;white-space:nowrap}.time-slots{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}.time-block{height:42px;border:1px solid #eddae3;border-radius:8px;background:#fff9fb;display:grid;place-items:center;position:relative;padding:0;min-width:0}.time-block.sleep{background:#9b83cd;border-color:#9079c4}.time-block.rest{background:#e4b2d3;border-color:#d9a3c7}.time-block.awake{background:#b9d5e8;border-color:#a6c8e0}.time-block .halfmark{height:11px;width:2px;border-radius:5px;background:#f6e5ec}.time-block:not(.empty) .halfmark{background:rgba(255,255,255,.6)}.status-key{display:flex;gap:13px;flex-wrap:wrap;font-size:12px;color:#725261}.key-dot{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:4px}.form-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.form-field{min-width:130px;flex:1}.form-field label{display:block;font-size:12px;font-weight:700;color:#815368;margin-bottom:5px}.form-field select,.form-field textarea,.form-field input{width:100%;border:1px solid #e3c6d4;border-radius:10px;background:#fff;padding:11px;font-size:14px}.form-field textarea{min-height:75px;resize:vertical}.form-field .short{max-width:160px}.form-actions{margin-top:12px}.warn-text{font-size:11px;color:#8d526d}.quality-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.quality{border:1px solid #ead0dc;padding:9px 14px;border-radius:18px;background:white;font-size:12px}.quality.active{background:#f9dce7;border-color:#b46b8e;font-weight:750}.wheel-wrap{display:flex;align-items:center;justify-content:center}.wheel-wrap svg{width:min(100%,470px);height:auto;overflow:visible}.ring-day{cursor:pointer}.ring-day:hover path,.ring-day:focus path{stroke:#b46b8e;stroke-width:2.5}.ring-day:focus{outline:none}.ring-day text{pointer-events:none;fill:#5e4b78;font-family:Georgia,serif;font-weight:600;font-size:12px;text-anchor:middle;dominant-baseline:middle}.wheel-legend{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin:12px 0}.legend-item{text-align:center;font-size:10px;color:#71657b}.legend-color{display:block;width:22px;height:22px;border-radius:100%;margin:0 auto 6px;border:1px solid #e9d7df}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.summary-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #f7e6ed;font-size:13px}.summary-row:last-child{border-bottom:0}.caption{font-size:11px;color:var(--muted);line-height:1.5}.app-footer{margin-top:24px;text-align:center;padding:16px 8px 4px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}.footer-moon{color:#bd6e92}.backup-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin:14px 0}.footer-button{background:white;border:1px solid var(--line);padding:10px 13px;border-radius:10px;font-size:12px;color:#8b4866;font-weight:700;cursor:pointer}.app-footer p{font-size:11px;max-width:620px;margin:4px auto}.help-dialog{border:1px solid #e9cbd9;border-radius:20px;max-width:560px;width:calc(100% - 30px);box-shadow:0 14px 80px rgba(82,33,54,.2);padding:0}.help-dialog::backdrop{background:rgba(66,30,46,.44)}.dialog-inner{padding:23px}.dialog-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.help-dialog p{color:#745463;font-size:14px;line-height:1.5}.empty{color:#846b77}
@media(max-width:480px){.app-shell{padding-left:11px;padding-right:11px}.brand-name{font-size:22px}.panel{padding:15px 12px;border-radius:17px}.welcome-banner{padding:18px 16px}.welcome-banner h1{font-size:22px}.welcome-banner p{max-width:285px}.banner-stars{display:none}.view-tab{font-size:12px;padding:11px 4px}.month-heading,.month-row{grid-template-columns:30px repeat(12,minmax(0,1fr)) 30px;gap:2px}.month-table{min-width:315px}.dot{width:min(17px,100%)}.stat{padding:10px}.stat-value{font-size:21px}.detail-stats{gap:5px}.detail-stat{padding:10px}.detail-stat strong{font-size:19px}.time-slots{gap:3px}.time-block{height:37px;border-radius:7px}.status-btn{font-size:11px;padding:9px 5px}.wheel-legend{gap:2px}.legend-color{width:17px;height:17px}.legend-item{font-size:9px}.two-col{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Weekly moods and daily activities. Keep sleep colors consistent with the moon wheel. */
.app-shell, #content, .panel { min-width: 0; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.brand-text { min-width: 0; }
.view-tab, .mini-btn, .footer-button, .quality { min-height: 44px; }
.view-tab { white-space: normal; line-height: 1.35; }
.button, .status-btn { min-height: 44px; }
.button { max-width: 100%; overflow-wrap: anywhere; }
.status-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.status-btn { white-space: normal; line-height: 1.35; }
.form-field input, .form-field select, .form-field textarea { font-size: 16px; }
.form-field textarea { line-height: 1.5; }
.panel-title-row { flex-wrap: wrap; }
.detail-head > div:first-child { min-width: 0; }
.detail-actions { flex-shrink: 0; }

/* Seven days stay together inside their own scrollable region. */
.week-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
.week-heading { min-width: 0; text-align: center; }
.week-nav h2 { font-size: 22px; }
.week-dates { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.week-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 10px; }
.week-jump label { color: #815368; font-size: 12px; line-height: 1.45; font-weight: 700; }
.week-jump input { flex: 0 1 210px; min-width: 0; max-width: 100%; min-height: 44px; padding: 10px 11px; border: 1px solid #e3c6d4; border-radius: 10px; background: #fffafb; color: #6f3d54; font-size: 16px; }
.week-nav .nav-btn { width: 44px; height: 44px; }
.week-nav .today-btn { min-height: 44px; }
.week-day-links {
  display: grid;
  grid-template-columns: repeat(7, minmax(44px, 1fr));
  gap: 5px;
  max-width: 100%;
  padding: 4px 2px 10px;
  margin: 8px 0 6px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.week-day-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 62px;
  min-width: 44px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: var(--dark);
}
.week-day-link small, .week-day-link > span { color: var(--muted); font-size: 11px; }
.week-day-link strong { font-size: 17px; }
.week-day-link.today, .week-day-link[aria-current="date"], .week-day-link[aria-pressed="true"] {
  border-color: #c78aa5;
  background: #fce3ed;
}
.week-scroll {
  position: relative;
  isolation: isolate;
  max-width: 100%;
  max-height: 70vh;
  max-height: min(70dvh, 760px);
  overflow: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff8fb;
}
.week-scroll:focus-visible { outline: 3px solid #b24b77; outline-offset: 3px; }
.week-grid {
  width: 100%;
  min-width: 700px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 3px;
  padding: 3px;
  text-align: left;
}
.week-grid th { padding: 10px 6px; font-size: 12px; color: #7f4e65; line-height: 1.4; }
.week-grid thead th { position: sticky; top: 0; z-index: 3; background: #fcebf2; text-align: center; }
.week-grid th small { display: block; margin-top: 3px; font-size: 10px; font-weight: 500; }
.week-grid .week-time-col {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 66px;
  padding: 10px 7px;
  background: #fcebf2;
  box-shadow: 3px 0 0 #fff8fb;
  vertical-align: top;
  text-align: left;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.week-grid thead .week-time-col { z-index: 4; }
.week-grid td { padding: 0; vertical-align: top; }
.week-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  min-height: 88px;
  height: 100%;
  padding: 10px 9px;
  border: 1px solid #f1dfe8;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  overflow-wrap: anywhere;
}
.week-cell.is-awake { border-color: #d3e3ed; background: #f9fcfe; }
.week-cell.has-mood { border-color: #e9c9d8; background: #fff8fb; box-shadow: inset 3px 0 0 var(--mood-color, #e6a7c0); }
.week-cell.has-conflict { border-style: dashed; }
.week-cell:hover { border-color: #b87591; }
.week-cell:focus-visible { outline-offset: -3px; }
.week-feeling { font-size: 12px; font-weight: 750; line-height: 1.35; }
.week-status { color: #785968; font-size: 10px; line-height: 1.4; }
.week-activity { display: block; padding-left: 5px; border-left: 3px solid var(--activity-color, #bed6e9); font-size: 11px; line-height: 1.45; color: #714c5f; }
.week-grid-caption { margin: 12px 1px 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* Color accompanies a written activity name; it is never the only label. */
.activity-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid #eddce4;
  border-left: 5px solid var(--activity-color, #b9d5e8);
  border-radius: 9px;
  background: #fff;
  color: #654052;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.activity-icon { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 20px; line-height: 1.25; flex-shrink: 0; }
.activity-selection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 11px 12px;
  margin: 4px 0 13px;
  border: 1px solid #dfebf2;
  border-radius: 13px;
  background: #f6fafd;
}
.activity-selection .mini-btn { flex-shrink: 0; }
.tracking-mode-heading { margin-top: 20px; margin-bottom: 4px; }
.day-notes-field { margin-top: 18px; }
.day-save-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.daily-time-group .timeline-hours { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.daily-time-group .timeline-hours span { font-size: 11px; }
.daily-time-group .time-slots { grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 4px; }
.daily-time-group .time-block { height: 48px; min-height: 44px; border-radius: 9px; }
.time-block.awake.has-activity { box-shadow: inset 0 -6px 0 var(--activity-color, #b9d5e8); }
.slot-activity-icon { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 21px; line-height: 1.25; padding-bottom: 3px; }

/* Hourly entries remain easy to select and edit on a phone. */
.hourly-list { display: grid; gap: 9px; margin-top: 13px; }
.hourly-card {
  display: grid;
  grid-template-columns: 91px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 78px;
  padding: 13px 14px;
  border: 1px solid #eadde4;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}
.hourly-card.has-mood { border-color: #e6bcd0; background: #fff8fb; }
.hourly-card:hover { border-color: #ba7595; }
.hourly-time { font-size: 12px; line-height: 1.45; color: #7e5268; font-weight: 700; font-variant-numeric: tabular-nums; }
.hourly-time small { display: block; font-size: 10px; font-weight: 500; }
.hourly-body { min-width: 0; }
.hourly-feeling { display: block; font-size: 14px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.hourly-activities { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.hourly-action { font-size: 12px; color: #913f65; font-weight: 700; }
.hourly-empty { padding: 16px; border: 1px dashed #e5c5d4; border-radius: 13px; background: #fff8fb; color: #795368; font-size: 13px; line-height: 1.55; }
.day-footer-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.day-footer-actions .button { flex: 1; min-width: 100px; }

/* Native dialogs keep keyboard focus inside; the close and save controls stay visible. */
.bloom-dialog {
  width: min(560px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: min(88dvh, 850px);
  padding: 0;
  border: 1px solid #e6c7d5;
  border-radius: 21px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 20px 80px rgba(84, 35, 57, .22);
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.bloom-dialog::backdrop { background: rgba(66, 30, 46, .44); }
.bloom-dialog .dialog-inner { padding: 20px; }
.bloom-dialog .dialog-top {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: -20px -20px 0;
  padding: 15px 20px 12px;
  border-bottom: 1px solid #f6e7ee;
  background: #fff;
}
.bloom-dialog .dialog-top h2 { min-width: 0; font-size: 23px; }
.bloom-dialog .dialog-top .icon-button { width: 44px; height: 44px; flex-shrink: 0; }
.dialog-subtitle { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 14px 0; }
.dialog-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 20px -20px -20px;
  padding: 13px 20px 16px;
  background: #fff;
  border-top: 1px solid var(--line);
}
.dialog-actions .button { min-height: 44px; }
.activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 15px 0; }
.activity-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  min-width: 0;
  padding: 12px 10px;
  border: 1px solid #ead1dc;
  border-left: 5px solid var(--activity-color, #bed6e9);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 650;
  text-align: left;
  overflow-wrap: anywhere;
}
.activity-option .activity-icon { font-size: 26px; }
.activity-option > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.activity-option:hover, .activity-option[aria-pressed="true"] { border-color: #ba7797; border-left-color: var(--activity-color, #bed6e9); background: #fff5f8; }
.custom-activity-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.custom-activity-form .form-field { margin-top: 12px; }
.custom-activity-form h3 { color: #7e4b63; line-height: 1.4; }
.activity-color-fieldset, .mood-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.activity-color-fieldset { margin-top: 15px; }
.activity-color-fieldset > legend { padding: 0; color: #815368; font-size: 12px; font-weight: 700; }
.activity-color-options { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 8px 0 13px; border: 0; }
.activity-color-options legend { width: 100%; padding: 0 0 5px; color: #815368; font-size: 12px; font-weight: 700; }
.color-option {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 0 106px;
  min-height: 44px;
  padding: 8px;
  border: 1px solid #ead4df;
  border-radius: 10px;
  color: #765165;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
}
.color-option input[type="radio"] { width: 17px; height: 17px; flex: 0 0 17px; margin: 0; }
.color-dot { width: 17px; height: 17px; flex-shrink: 0; border-radius: 50%; background: var(--activity-color, #bed6e9); border: 1px solid rgba(64, 44, 88, .12); }
.color-option:has(input:checked) { border-color: #c07f9f; background: #fff0f6; }
.mood-context { padding: 12px; border: 1px solid #e8dfef; border-radius: 12px; background: #fff3f7; color: #7f5369; font-size: 13px; line-height: 1.5; }
.mood-context .activity-chip { margin: 5px 4px 2px 0; }
.mood-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.mood-option { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 10px 12px; border: 1px solid #e8cddd; border-radius: 12px; background: #fff; color: #754058; font-size: 13px; line-height: 1.35; }
.mood-option::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--mood-color, #c9b4df); border: 1px solid rgba(64, 44, 88, .1); }
.mood-option:hover, .mood-option[aria-pressed="true"] { border-color: #bd7d9c; background: #fde6ef; }
.saved-mood-warning { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: #fff1f6; color: #805369; font-size: 12px; line-height: 1.5; }
.dialog-error { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: #fbecee; color: #8b3e57; font-size: 13px; line-height: 1.4; }
.dialog-error[hidden] { display: none; }
.bloom-dialog .form-field { margin-top: 15px; }
.bloom-dialog textarea { min-height: 92px; }
.bloom-dialog button:disabled, .hourly-card:disabled, .week-cell:disabled { cursor: not-allowed; opacity: .55; }

@media (max-width: 480px) {
  .week-nav { gap: 6px; }
  .week-nav h2 { font-size: 18px; }
  .week-dates { font-size: 11px; }
  .week-nav .today-btn { padding: 8px; font-size: 11px; }
  .week-day-links { gap: 4px; }
  .status-btn { padding: 10px 3px; }
  .activity-selection { padding: 10px; }
  .daily-time-group .time-slots { gap: 3px; }
  .hourly-card { grid-template-columns: 70px minmax(0, 1fr); gap: 5px 10px; padding: 12px; }
  .hourly-time { grid-row: 1 / 3; align-self: start; padding-top: 1px; }
  .hourly-action { grid-column: 2; }
  .hourly-feeling { font-size: 13px; }
  .hourly-activities .activity-chip { padding: 4px 7px; font-size: 11px; }
  .bloom-dialog .dialog-inner { padding: 16px; }
  .bloom-dialog .dialog-top { top: 0; margin: -16px -16px 0; padding: 12px 16px; }
  .bloom-dialog .dialog-top h2 { font-size: 21px; }
  .bloom-dialog .dialog-actions { bottom: 0; margin: 17px -16px -16px; padding: 12px 16px 16px; }
  .activity-option { padding: 10px 8px; gap: 7px; font-size: 13px; }
  .activity-option .activity-icon { font-size: 23px; }
  .mood-option { padding: 9px 10px; }
}

@media (max-width: 360px) {
  .app-shell { padding-left: 8px; padding-right: 8px; }
  .daily-time-group .time-slots { gap: 2px; }
  .week-nav .nav-group { gap: 3px; }
  .week-nav { gap: 5px; }
  .week-nav h2 { font-size: 16px; }
  .week-nav .today-btn { padding-left: 6px; padding-right: 6px; }
  .view-tab { font-size: 11px; }
  .activity-chip { font-size: 11px; }
  .dialog-actions .button { flex: 1 1 110px; }
}

@media (prefers-reduced-motion: reduce) {
  .week-scroll, .week-day-links { scroll-behavior: auto; }
}

/* Life in Bloom is the app; Sleep & Mood is reached through its menu. */
[hidden] { display: none !important; }
.app-header { gap: 12px; padding-bottom: 22px; }
.brand-name { font-size: 24px; letter-spacing: .025em; line-height: 1.2; color: #4b2e3c; }
.brand-caption { margin-top: 5px; color: #805969; font-size: 11px; line-height: 1.35; }
.app-header .icon-button { width: 44px; height: 44px; flex: 0 0 44px; }
.menu-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #ebcbd9;
  border-radius: 14px;
  background: #fce3ed;
  color: #8b4463;
}
.menu-toggle:hover, .menu-toggle[aria-expanded="true"] { border-color: #bc7292; background: #f8d6e4; }
.hamburger-lines { display: grid; gap: 4px; width: 18px; }
.hamburger-lines > span { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.app-menu {
  inset: 0 auto 0 0;
  width: min(360px, calc(100% - 28px));
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid #e8c5d4;
  border-radius: 0 22px 22px 0;
  background: #fff7fa;
  color: var(--ink);
  box-shadow: 12px 0 60px rgba(83, 31, 54, .2);
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.app-menu::backdrop { background: rgba(66, 30, 46, .44); }
.menu-inner { min-height: 100%; padding: calc(22px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); }
.menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu-heading h2 { min-width: 0; color: #4b2e3c; font-size: 22px; letter-spacing: .025em; line-height: 1.35; }
.menu-heading .icon-button { flex: 0 0 44px; width: 44px; height: 44px; }
.menu-section-label { margin: 29px 1px 10px; color: #8d5b72; font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.menu-sections { display: grid; gap: 8px; }
.menu-section-button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid #ecd2de;
  border-radius: 15px;
  background: #fff;
  color: #773c56;
  text-align: left;
}
.menu-section-button:hover { border-color: #bf7e9a; background: #fff0f6; }
.menu-section-button[aria-current="page"] { border-color: #bf7e9a; background: #fbe1ec; box-shadow: inset 3px 0 0 #a24c72; }
.menu-section-button strong { display: block; font-size: 16px; line-height: 1.4; }
.menu-section-button small { display: block; margin-top: 4px; color: #805969; font-size: 11px; line-height: 1.5; }
.menu-section-icon { font-size: 29px; text-align: center; }
.menu-chevron { font-size: 25px; }
.menu-tools { display: grid; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.menu-tool { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: #7f4962; font-size: 13px; line-height: 1.45; text-align: left; }
.menu-tool > span { flex: 0 0 20px; text-align: center; font-size: 20px; }
.menu-tool:hover { border-color: #c3829f; background: #fff1f6; }
.menu-note { margin: 23px 3px 0; color: #805969; font-size: 12px; line-height: 1.6; }
.help-dialog { max-height: calc(100vh - 28px); max-height: 88dvh; overflow-y: auto; overscroll-behavior-y: contain; }
.help-dialog .dialog-top .icon-button { width: 44px; height: 44px; flex: 0 0 44px; }
.month-nav .nav-btn { width: 44px; height: 44px; }
.month-nav .today-btn { min-height: 44px; }

/* Dated history and descriptive comparisons use recorded entries only. */
.month-insights { overflow-wrap: anywhere; }
.month-insights h3 { margin: 20px 0 9px; color: #713c53; font-size: 16px; line-height: 1.4; }
.insight-summary { margin: 8px 0 16px; color: #765264; font-size: 13px; line-height: 1.6; }
.insight-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 16px 0; }
.insight-metric { min-width: 0; padding: 13px 12px; border: 1px solid #f1d8e3; border-radius: 13px; background: #fff2f7; }
.insight-metric strong { display: block; margin: 5px 0 3px; color: #8c3e61; font-size: 24px; font-weight: 750; line-height: 1.25; font-variant-numeric: tabular-nums; }
.insight-metric small, .insight-metric > span { display: block; color: #7a5668; font-size: 11px; line-height: 1.45; }
.insight-pairs { display: grid; gap: 10px; margin: 13px 0; }
.insight-pair { display: grid; gap: 8px; min-width: 0; padding: 13px 14px; border: 1px solid #eed4e0; border-radius: 13px; background: #fffafc; }
.insight-pair strong { color: #713b55; font-size: 14px; line-height: 1.4; }
.insight-pair > header, .insight-pair-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 7px 12px; }
.insight-bar { width: 100%; height: 9px; overflow: hidden; border-radius: 20px; background: #f5e1ea; }
.insight-bar-fill { display: block; max-width: 100%; height: 100%; border-radius: inherit; background: var(--mood-color, #e6a4bf); }
.insight-comparison-text { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px 12px; margin: 0; color: #765264; font-size: 12px; line-height: 1.55; }
.insight-empty { padding: 16px; margin: 14px 0; border: 1px dashed #dfb9cb; border-radius: 13px; background: #fff7fa; color: #7e5369; font-size: 13px; line-height: 1.6; }
.insight-disclosure { margin-top: 14px; padding: 0 12px; border: 1px solid #efd8e2; border-radius: 12px; background: #fff9fb; color: #7a5367; font-size: 12px; line-height: 1.6; }
.insight-disclosure > summary { min-height: 44px; padding: 11px 0; color: #874a65; font-weight: 700; cursor: pointer; }
.insight-disclosure > summary:focus-visible { outline: 3px solid #b24b77; outline-offset: 3px; border-radius: 7px; }
.insight-disclosure > p, .insight-disclosure > ul { margin-top: 0; padding-bottom: 8px; }
.history-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; margin: 12px 0; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.history-scroll:focus-visible { outline: 3px solid #b24b77; outline-offset: 3px; }
.history-table { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 12px; line-height: 1.5; }
.history-table th { padding: 11px 12px; background: #fceaf2; color: #834d67; font-size: 11px; font-weight: 750; vertical-align: bottom; }
.history-table td { padding: 10px 12px; border-top: 1px solid #f1e1e8; vertical-align: middle; color: #6f4b5e; }
.history-table th:first-child, .history-table td:first-child { position: sticky; left: 0; z-index: 1; width: 116px; background: #fff; }
.history-table thead th:first-child { z-index: 2; background: #fceaf2; }
.history-table tbody th { padding: 10px 12px; border-top: 1px solid #f1e1e8; vertical-align: middle; }
.history-table td > small { display: block; margin-top: 3px; color: #7a5668; font-size: 10px; }
.history-date { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 44px; max-width: 100%; padding: 7px 9px; border: 1px solid #edd3df; border-radius: 9px; background: #fff8fb; color: #8d4164; font-size: 12px; font-weight: 700; text-align: left; }
.history-date small { font-size: 10px; font-weight: 500; color: #7f586c; }
.history-date:hover { border-color: #bd7897; background: #fdeaf2; }
.history-moods { display: flex; flex-wrap: wrap; gap: 5px; min-width: 150px; max-width: 350px; }
.history-mood { display: inline-block; max-width: 100%; padding: 4px 7px; border: 1px solid #efdce5; border-left: 3px solid var(--mood-color, #e6a4bf); border-radius: 8px; background: #fff7fa; color: #775068; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }

/* Plans are visibly separate from the moods and activities actually logged. */
.appointment-panel .panel-title-row { align-items: center; }
.appointment-panel .panel-title-row .button { flex-shrink: 0; }
.appointment-agenda { display: grid; gap: 9px; padding: 0; margin: 14px 0 0; list-style: none; }
.appointment-agenda > li { min-width: 0; }
.appointment-agenda-item {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 5px 12px;
  align-items: center;
  width: 100%;
  min-height: 82px;
  padding: 12px;
  border: 1px dashed #d6b4c4;
  border-left: 5px solid var(--appointment-color, #e3a7bf);
  border-radius: 12px;
  background: #fff9fb;
  color: var(--ink);
  text-align: left;
  overflow-wrap: anywhere;
}
.appointment-agenda-item:hover, .appointment-grid-item:hover { border-color: #b46b8e; border-left-color: var(--appointment-color, #e3a7bf); background: #fff0f6; }
.appointment-agenda-date { grid-column: 1; grid-row: 1 / 3; color: #80556a; font-size: 12px; line-height: 1.5; font-weight: 700; }
.appointment-agenda-title { grid-column: 2; grid-row: 1; min-width: 0; color: #6d3b53; font-size: 14px; font-weight: 750; line-height: 1.45; }
.appointment-agenda-time { grid-column: 2; grid-row: 2; color: #7b5768; font-size: 12px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.appointment-planned-label { display: inline-block; width: fit-content; max-width: 100%; padding: 3px 6px; border-radius: 6px; background: #f7e2ec; color: #864863; font-size: 10px; line-height: 1.35; font-weight: 750; letter-spacing: .035em; text-transform: uppercase; }
.appointment-agenda-item > .appointment-planned-label { grid-column: 3; grid-row: 1; justify-self: end; }
.appointment-repeat-label { grid-column: 3; grid-row: 2; max-width: 140px; color: #81576c; font-size: 11px; line-height: 1.45; }
.appointment-empty { padding: 15px 16px; margin: 12px 0 0; border: 1px dashed #dcbaca; border-radius: 13px; background: #fff9fb; color: #7a5367; font-size: 13px; line-height: 1.6; }
.week-cell { height: auto; }
.week-appointments { display: grid; gap: 5px; margin-bottom: 5px; }
.appointment-grid-item { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; min-height: 54px; padding: 8px 7px; border: 1px dashed #cfa7bb; border-left: 4px solid var(--appointment-color, #e3a7bf); border-radius: 9px; background: #fff6fa; color: #77445d; text-align: left; overflow-wrap: anywhere; }
.appointment-grid-title { display: block; font-size: 11px; line-height: 1.4; font-weight: 750; }
.appointment-grid-time { display: block; color: #785367; font-size: 10px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.appointment-time-note { grid-column: 1 / -1; display: block; width: fit-content; max-width: 100%; padding: 7px 9px; border: 1px solid #ebd2b8; border-radius: 8px; background: #fff3e4; color: #7a4a2e; font-size: 12px; line-height: 1.5; }
.appointment-scope, .appointment-repeat-fields { min-width: 0; margin: 16px 0; padding: 0; border: 0; }
.appointment-edit-fields, .appointment-color-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.appointment-color-fieldset { margin-top: 17px; }
.appointment-color-fieldset > legend { padding: 0; color: #75465d; font-size: 13px; line-height: 1.45; font-weight: 750; }
.appointment-scope > legend, .appointment-repeat-fields > legend { padding: 0; color: #75465d; font-size: 13px; line-height: 1.45; font-weight: 750; }
.appointment-scope-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.appointment-scope-options label { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px; border: 1px solid #e7ccd9; border-radius: 10px; color: #794b61; font-size: 13px; line-height: 1.4; cursor: pointer; }
.appointment-scope-options input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; }
.appointment-scope-options label:has(input:checked) { border-color: #bd7c9a; background: #fce8f1; }
.appointment-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 16px; }
.appointment-dialog .appointment-form-grid .form-field { min-width: 0; margin: 0; }
.appointment-form-grid .form-field:first-child, .appointment-form-grid .form-field:nth-child(2) { grid-column: 1 / -1; }
.appointment-dialog input, .appointment-dialog select, .appointment-dialog textarea { min-width: 0; max-width: 100%; font-size: 16px; }
.appointment-dialog input:not([type="checkbox"]):not([type="radio"]), .appointment-dialog select { min-height: 44px; }
.appointment-next-day { display: flex; align-items: center; gap: 9px; min-height: 44px; margin: 8px 0; color: #7c5068; font-size: 13px; line-height: 1.5; cursor: pointer; }
.appointment-next-day input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; }
.appointment-repeat-fields .form-field { min-width: 0; }
.appointment-repeat-fields input[type="number"] { width: 6.5rem; }
.appointment-interval-control { display: flex; align-items: center; gap: 9px; min-width: 0; }
.appointment-interval-control > span { color: #7c5068; font-size: 14px; line-height: 1.4; }
.appointment-weekdays { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; padding: 0; border: 0; }
.appointment-weekdays > legend { width: 100%; margin-bottom: 3px; color: #7c4f66; font-size: 12px; font-weight: 700; }
.appointment-weekdays label { display: inline-flex; align-items: center; gap: 6px; min-width: 54px; min-height: 44px; padding: 8px; border: 1px solid #e7ccd9; border-radius: 9px; color: #7d4d65; font-size: 12px; line-height: 1.4; cursor: pointer; }
.appointment-weekdays input { width: 17px; height: 17px; margin: 0; }
.appointment-weekdays label:has(input:checked) { border-color: #bc7797; background: #fbe4ee; }
.appointment-color-options { display: flex; flex-wrap: wrap; gap: 7px; margin: 9px 0 14px; }
.appointment-color-options .color-dot { background: var(--appointment-color, var(--activity-color, #e3a7bf)); }
.appointment-repeat-until { max-width: 270px; }
.appointment-notes textarea { min-height: 92px; resize: vertical; }
.appointment-form-hint, .appointment-scope-hint, .appointment-repeat-hint { margin: 9px 0; color: #7d5a6b; font-size: 12px; line-height: 1.55; }
.appointment-form-hint:empty { display: none; }
.appointment-dialog .button.danger, .appointment-dialog [data-appointment-delete] { border-color: #dca3b3; color: #9b385b; background: #fff4f7; }

@media (max-width: 600px) {
  .appointment-agenda-item { grid-template-columns: 83px minmax(0, 1fr); gap: 5px 10px; }
  .appointment-agenda-item > .appointment-planned-label { grid-column: 2; grid-row: 1; justify-self: start; }
  .appointment-agenda-date { grid-column: 1; grid-row: 1 / 4; }
  .appointment-agenda-title { grid-column: 2; grid-row: 2; }
  .appointment-agenda-time { grid-column: 2; grid-row: 3; }
  .appointment-repeat-label { grid-column: 2; grid-row: 4; max-width: none; }
}

@media (max-width: 480px) {
  .app-header { gap: 9px; }
  .week-jump { align-items: stretch; }
  .week-jump label { flex-basis: 100%; }
  .week-jump input { flex: 1 1 100%; width: 100%; }
  .brand-name { font-size: 20px; letter-spacing: .015em; }
  .brand-caption { font-size: 10px; }
  .menu-inner { padding-left: 17px; padding-right: 17px; }
  .menu-heading h2 { font-size: 20px; }
  .insight-metrics { gap: 6px; }
  .insight-metric { padding: 11px 9px; }
  .insight-metric strong { font-size: 21px; }
  .insight-metric small, .insight-metric > span { font-size: 10px; }
  .insight-pair { padding: 12px; }
  .appointment-panel .panel-title-row { gap: 10px; }
  .appointment-panel .panel-title-row h2 { font-size: 21px; }
  .appointment-form-grid, .appointment-scope-options { grid-template-columns: minmax(0, 1fr); }
  .appointment-form-grid .form-field { grid-column: 1; }
  .appointment-repeat-until { max-width: none; }
  .appointment-dialog .dialog-actions .button { flex: 1 1 100px; }
  .appointment-weekdays label { flex: 1 0 62px; justify-content: center; }
}

@media (max-width: 360px) {
  .app-header { gap: 7px; }
  .brand-name { font-size: 18px; }
  .brand-caption { font-size: 10px; }
  .insight-metrics { grid-template-columns: minmax(0, 1fr); }
  .insight-metric { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; }
  .insight-metric strong { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .insight-metric small, .insight-metric > span { font-size: 11px; }
  .appointment-agenda-item { grid-template-columns: 70px minmax(0, 1fr); padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-menu, .history-scroll { scroll-behavior: auto; }
}

/* Home and section navigation share one shell on desktop and iPhone. */
html { scroll-padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
.app-shell { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.home-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 44px;
  padding: 3px 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
}
.home-brand .brand-name, .home-brand .brand-caption { display: block; }
.home-brand:hover .brand-name { color: #8a3d60; }
#page-banner { margin-bottom: 20px; }
#page-heading { max-width: 100%; overflow-wrap: anywhere; }
#page-heading:focus-visible { outline: 2px solid #b24b77; outline-offset: 4px; border-radius: 4px; }
.bottom-nav {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  width: min(100%, 790px);
  padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  border: 1px solid #e7c6d5;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: #fff9fc;
  box-shadow: 0 -5px 25px rgba(92, 44, 64, .08);
}
.bottom-nav-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 56px;
  margin: 0;
  padding: 6px 2px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #765263;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
.bottom-nav-button svg { width: 23px; height: 23px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav-button:hover { background: #fcebf2; color: #87405f; }
.bottom-nav-button[aria-current="page"] { border-color: #d8a8bd; background: #f9dde8; color: #813755; }
.bottom-nav-button:focus-visible { outline-offset: -2px; }

/* Small useful pages: the dashboard, shopping checklist, and saved notes. */
.bloom-page { min-width: 0; }
.page-heading { min-width: 0; margin-bottom: 16px; }
.page-heading h2 { line-height: 1.3; }
.page-heading p { margin: 7px 0 0; color: #795266; font-size: 13px; line-height: 1.6; }
.page-kicker { display: block; margin: 0 0 6px; color: #8a4968; font-size: 11px; line-height: 1.45; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.home-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 148px;
  margin: 0;
  padding: 18px;
  border: 1px solid #ead0dc;
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow);
  text-align: left;
  overflow-wrap: anywhere;
}
.home-card:hover { border-color: #c284a1; background: #fff8fb; }
.home-card strong, .home-card h3 { font-size: 15px; line-height: 1.4; color: #743e56; }
.home-card p { margin: 0; color: #79596a; font-size: 12px; line-height: 1.55; }
.home-card .caption { margin-top: auto; color: #7d596c; }
.home-card .home-card-value { display: block; color: #8b3d60; font-size: 25px; font-weight: 750; letter-spacing: -.025em; line-height: 1.25; }
.page-actions, .section-links { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 15px; }
.page-actions .button, .section-links .button { min-height: 44px; }
.page-form { min-width: 0; }
.page-form .form-row { align-items: flex-end; }
.page-form .form-field { min-width: 0; }
.page-form .form-field > label, .page-form label.form-field { color: #794d63; font-size: 13px; font-weight: 700; line-height: 1.5; }
.page-form label.form-field { display: flex; flex-direction: column; gap: 6px; }
.page-form input:not([type="checkbox"]), .page-form select, .page-form textarea {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid #d9b4c6;
  border-radius: 11px;
  background: #fff;
  color: #563344;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.page-form textarea { min-height: 180px; resize: vertical; }
.page-form input::placeholder, .page-form textarea::placeholder { color: #806674; opacity: 1; }
.form-hint { display: block; margin: 8px 0; color: #775567; font-size: 12px; line-height: 1.55; font-weight: 400; }
.page-form .form-hint { letter-spacing: normal; text-transform: none; }
.page-form .page-actions { margin-top: 14px; }
.page-form + .shopping-list, .page-form + .notes-list { margin-top: 20px; }
.shopping-list, .notes-list { display: grid; gap: 10px; min-width: 0; margin: 16px 0 0; padding: 0; list-style: none; }
.shopping-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid #ecd4df;
  border-radius: 13px;
  background: #fff;
}
.shopping-item-main { display: flex; flex: 1 1 180px; align-items: center; gap: 11px; min-width: 0; min-height: 48px; cursor: pointer; }
.shopping-item-main input[type="checkbox"] { flex: 0 0 21px; width: 21px; height: 21px; margin: 0; accent-color: #a2476b; }
.shopping-item-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: #633d50; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.shopping-item-copy strong { font-weight: 700; }
.shopping-item-copy small { color: #7a5d6d; font-size: 12px; }
.shopping-item.is-checked { background: #fcf5f8; border-color: #eadbe2; }
.shopping-item.is-checked .shopping-item-copy strong { text-decoration: line-through; text-decoration-thickness: 1px; color: #7a606c; }
.item-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.item-actions .button { min-height: 44px; padding: 9px 11px; font-size: 12px; }
.button.danger { border-color: #dca3b3; color: #963a59; background: #fff4f7; }
.idea-card { min-width: 0; padding: 17px; border: 1px solid #ead0dc; border-radius: 15px; background: #fffafc; overflow-wrap: anywhere; }
.idea-card h3 { margin: 0 0 5px; color: #703c54; font-size: 17px; line-height: 1.45; }
.idea-card .caption { margin: 5px 0 0; }
.idea-body { max-width: 100%; margin: 13px 0; color: #624253; font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.idea-card .item-actions { margin-top: 12px; padding-top: 10px; border-top: 1px solid #f0dce5; }
.idea-details summary { min-height: 44px; padding: 12px 0; color: #743e56; cursor: pointer; font-weight: 650; }
.idea-details summary:focus-visible { outline: 3px solid #b24b77; outline-offset: 2px; border-radius: 5px; }
.note-delete-confirm { margin-top: 12px; padding: 12px; border: 1px solid #dca3b3; border-radius: 10px; background: #fff0f4; color: #813755; }
.note-delete-confirm p { margin: 0; }
.empty-state { margin: 14px 0; padding: 18px; border: 1px dashed #dcb6c8; border-radius: 14px; background: #fff7fa; color: #765064; font-size: 14px; line-height: 1.6; }
.empty-state h3, .empty-state strong { color: #743e56; }
.empty-state p { margin: 7px 0 0; }
.bloom-page .section-links { align-items: stretch; }
.bloom-page .section-links .button { display: inline-flex; align-items: center; justify-content: center; text-align: center; }

/* Appointment cards sit above observations and beside daily time groups. */
.week-appointments .appointment-grid-item { border-style: solid; border-color: #d4a5ba; border-left-color: var(--appointment-color, #e3a7bf); background: #fbe6ef; }
.week-appointments .appointment-grid-title { color: #66334b; font-size: 12px; }
.week-appointments .appointment-grid-time { color: #71465c; }
.week-appointments .appointment-planned-label { background: #fff8fb; color: #7b3c57; }
.week-grid td:target, .week-grid td.planned-focus { outline: 3px solid #ae567d; outline-offset: 1px; border-radius: 10px; }
.appointment-agenda-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 7px 3px 2px; }
.appointment-agenda-actions .button, .appointment-agenda-actions .mini-btn { min-height: 44px; padding: 9px 12px; font-size: 12px; }
.day-appointments { margin: 18px 0; }
.day-appointments h3 { color: #744059; font-size: 16px; line-height: 1.45; }
.time-group-plans { display: grid; gap: 7px; margin: 8px 0 11px; }
.appointment-day-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #d9b0c3;
  border-left: 5px solid var(--appointment-color, #e3a7bf);
  border-radius: 11px;
  background: #fff0f6;
  color: #704159;
  text-align: left;
  overflow-wrap: anywhere;
}
.appointment-day-item:hover { border-color: #ad6a89; border-left-color: var(--appointment-color, #e3a7bf); background: #fbe2ed; }
.appointment-day-item .appointment-grid-title { flex: 1 1 120px; font-size: 13px; }
.appointment-day-item .appointment-grid-time { font-size: 12px; }

@media (max-width: 480px) {
  .bottom-nav { gap: 3px; border-radius: 16px 16px 0 0; }
  .bottom-nav-button { font-size: 11px; }
  .home-grid { gap: 9px; }
  .home-card { min-height: 144px; padding: 13px 12px; border-radius: 15px; }
  .home-card strong, .home-card h3 { font-size: 14px; }
  .home-card .home-card-value { font-size: 23px; }
  .home-card p { font-size: 11px; }
  .page-form .form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .page-actions .button { flex: 1 1 120px; }
  .shopping-item { padding: 8px 10px; }
  .shopping-item-main { flex-basis: 100%; }
  .shopping-item .item-actions { width: 100%; }
  .idea-card { padding: 14px; }
  .section-links .button { flex: 1 1 130px; }
  .appointment-agenda-actions .button, .appointment-agenda-actions .mini-btn { flex: 1 1 115px; }
}

@media (max-width: 360px) {
  .bottom-nav { gap: 2px; }
  .bottom-nav-button { padding-left: 1px; padding-right: 1px; }
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .home-card { min-height: 130px; padding: 16px; }
}