:root {
  color-scheme: light;
  --bg: #f5f7f4;
  --surface: #ffffff;
  --surface-soft: #f8fbf8;
  --ink: #172726;
  --muted: #687672;
  --line: #dfe7e1;
  --teal: #2f8f89;
  --teal-dark: #1d6864;
  --yellow: #efbd57;
  --shadow: 0 18px 45px rgba(31, 47, 45, 0.08);
  --radius: 8px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.45; }
button, input, select { font: inherit; }
button { cursor: pointer; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.04; }
h2 { margin-bottom: 0; font-size: 18px; line-height: 1.2; }
strong, span, small, b, h1, h2, h3, p, button, input, select, textarea {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px; color: white; background: linear-gradient(180deg, rgba(0, 117, 111, 0.94), rgba(4, 54, 57, 0.99)); }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; color: white; background: linear-gradient(135deg, var(--teal), #8fbc5c); border-radius: var(--radius); font-weight: 800; }
.brand strong, .brand small { display: block; }
.brand small { color: rgba(255,255,255,.72); font-weight: 700; }
.nav-list { display: grid; gap: 6px; margin-top: 32px; }
.nav-item { min-height: 42px; padding: 0 14px; color: rgba(255,255,255,.85); text-align: left; background: transparent; border: 0; border-radius: var(--radius); font-weight: 800; }
.nav-item.is-active, .nav-item:hover { color: white; background: rgba(43, 172, 161, .78); }
.sidebar-card { position: absolute; right: 18px; bottom: 22px; left: 18px; padding: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); }
.sidebar-card strong { display: block; margin: 4px 0; font-size: 28px; }
.sidebar-card small { color: rgba(255,255,255,.75); }
.mini-meter { height: 8px; margin-top: 14px; overflow: hidden; background: rgba(255,255,255,.16); border-radius: 999px; }
.mini-meter span { display: block; width: 72%; height: 100%; background: linear-gradient(90deg, #65d1c6, var(--yellow)); }

.main { min-width: 0; padding: 24px; }
.topbar { display: grid; grid-template-columns: auto minmax(190px, 1fr) minmax(240px, 440px) auto auto; align-items: center; gap: 16px; margin-bottom: 22px; }
.mobile-menu { display: none; width: 42px; min-height: 42px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.eyebrow, .label { margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.search { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; color: var(--muted); background: rgba(255,255,255,.82); border: 1px solid var(--line); border-radius: var(--radius); }
.search input { width: 100%; min-width: 0; color: var(--ink); background: transparent; border: 0; outline: 0; }
.family-stack { display: flex; align-items: center; }
.family-stack span { display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; margin-left: -8px; background: var(--teal); border: 2px solid var(--bg); border-radius: 999px; }
.family-stack img { width: 100%; height: 100%; object-fit: cover; }
.add-button, .secondary-button, .primary-action, .icon-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 14px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 800; }
.add-button, .primary-action { color: white; background: var(--teal-dark); border-color: var(--teal-dark); }
.icon-action { width: 38px; padding: 0; }

.view { display: none; }
.view.is-active { display: block; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .9fr) 310px; grid-template-areas: "today attention rail" "children children rail"; gap: 16px; }
.panel { min-width: 0; padding: 18px; background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.panel-heading.compact { margin-bottom: 10px; }
.today-panel { grid-area: today; }
.attention-panel { grid-area: attention; }
.right-rail { display: grid; grid-area: rail; gap: 16px; align-content: start; }
.segmented { display: inline-grid; grid-auto-flow: column; padding: 3px; background: #eef3ef; border: 1px solid var(--line); border-radius: var(--radius); }
.segmented button { min-height: 30px; padding: 0 10px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; font-size: 13px; font-weight: 800; }
.segmented button.is-active { color: var(--ink); background: white; box-shadow: 0 2px 10px rgba(23,39,38,.08); }

.timeline, .attention-list, .grocery-row, .task-board, .meal-grid, .document-list, .family-grid, .invite-summary { display: grid; gap: 10px; }
.timeline-item { display: grid; grid-template-columns: 74px 4px minmax(0, 1fr); gap: 14px; min-height: 84px; }
.timeline-time { color: var(--muted); font-weight: 800; }
.timeline-rail { width: 4px; border-radius: 999px; }
.event-card, .attention-card, .day-event, .board-card, .meal-card, .doc-card, .person-card, .invite-summary article { display: grid; gap: 10px; padding: 14px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.event-top, .attention-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.event-card p, .dinner-card p { margin: 0; color: var(--muted); }
.meta-row, .owner-row, .account-row, .invite-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; color: var(--teal-dark); background: #e6f2ee; border-radius: 999px; font-size: 12px; font-weight: 800; }
.chip.yellow { color: #7a5311; background: #fff1cf; }
.owner-pill { color: white; }
.attention-card { border-left: 4px solid #e5745f; }
.attention-card.is-done { opacity: .58; }
.check-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
.check-row input { width: 18px; height: 18px; }

.children-strip { display: grid; grid-area: children; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.children-strip article { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.avatar, .person-photo { width: 46px; height: 46px; object-fit: cover; border-radius: var(--radius); }
.photo-avatar { border: 2px solid white; border-radius: 999px; }
.status-dot { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.children-strip dl { display: grid; grid-column: 1 / -1; width: 100%; margin: 4px 0 0; border-top: 1px solid var(--line); }
.children-strip dl div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.children-strip dt, .children-strip dd { margin: 0; min-width: 0; font-size: 13px; }
.children-strip dt { font-weight: 800; }
.children-strip dd { color: var(--muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.prep-card ul { display: grid; gap: 0; padding: 0; margin: 12px 0 0; list-style: none; }
.prep-card li, .load-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.load-row { grid-template-columns: 52px minmax(0, 1fr) 24px; }
.load-row div { height: 8px; overflow: hidden; background: #e4ece6; border-radius: 999px; }
.load-row i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--yellow)); }

.workbench-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
.week-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; }
.day-column, .board-column { display: grid; gap: 10px; align-content: start; padding: 12px; background: #f6faf8; border: 1px solid var(--line); border-radius: var(--radius); }
.day-column h3, .board-column h3 { margin: 0; font-size: 14px; }
.task-board, .meal-grid, .document-list, .family-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
.documents-panel { background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,248,.94)); }
.documents-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding: 18px;
  color: white;
  background: linear-gradient(135deg, #234f4d, #2f8f89 62%, #4b80a7);
  border-radius: var(--radius);
  box-shadow: 0 18px 38px rgba(35,79,77,.16);
}
.documents-hero .label { color: rgba(255,255,255,.72); }
.documents-hero h2 { margin: 4px 0 6px; font-size: clamp(24px, 3vw, 34px); }
.documents-hero p { max-width: 620px; margin: 0; color: rgba(255,255,255,.82); font-weight: 700; }
.documents-hero .secondary-button { color: var(--teal-dark); background: white; border-color: rgba(255,255,255,.6); }
.document-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.document-tools button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--muted);
  background: #f6faf8;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 800;
}
.document-tools button.is-active { color: white; background: var(--teal-dark); border-color: var(--teal-dark); }
.doc-card { align-content: start; background: white; }
.doc-card strong { font-size: 17px; line-height: 1.2; }
.doc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.doc-card p { margin: 0; color: var(--muted); }
.doc-status {
  display: inline-flex;
  justify-self: start;
  min-height: 26px;
  padding: 3px 8px;
  color: #7a5311;
  background: #fff1cf;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.doc-meta {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.doc-meta div {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px;
}
.doc-meta dt,
.doc-meta dd { margin: 0; font-size: 13px; }
.doc-meta dt { color: var(--muted); font-weight: 800; }
.doc-meta dd { font-weight: 800; }
.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.attachment-list span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 26px;
  padding: 0 8px;
  color: var(--teal-dark);
  background: #e6f2ee;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.mini-upload,
.file-upload {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  color: var(--teal-dark);
  background: #e6f2ee;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 800;
}
.mini-upload input,
.file-upload input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}
.tasks-panel, .calendar-panel, .meals-panel { background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,248,.94)); }
.tasks-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: -2px 0 22px;
  padding: 18px;
  color: white;
  background: linear-gradient(135deg, #1d6864, #2f8f89 58%, #8f80b5);
  border-radius: var(--radius);
  box-shadow: 0 18px 38px rgba(29,104,100,.18);
}
.calendar-hero { background: linear-gradient(135deg, #1d6864, #2f8f89 58%, #4b80a7); }
.meals-hero { background: linear-gradient(135deg, #1d6864, #2f8f89 58%, #87b65d); }
.tasks-hero .label { color: rgba(255,255,255,.72); }
.tasks-hero h2 { margin: 4px 0 6px; font-size: clamp(24px, 3vw, 36px); }
.tasks-hero p { max-width: 560px; margin: 0; color: rgba(255,255,255,.8); font-weight: 700; }
.task-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 8px;
  min-width: min(360px, 100%);
}
.task-stats span {
  display: grid;
  gap: 2px;
  min-height: 72px;
  padding: 10px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 800;
}
.task-stats strong { display: block; color: white; font-size: 26px; line-height: 1; }
.calendar-board {
  grid-template-columns: repeat(5, minmax(280px, 1fr));
  gap: 12px;
}
.calendar-day {
  border-top: 4px solid var(--day-colour, var(--teal));
  box-shadow: 0 10px 26px rgba(31,47,45,.05);
}
.calendar-day-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.calendar-day-head h3 {
  color: var(--day-colour, var(--teal-dark));
  font-size: 18px;
}
.calendar-day-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.calendar-event {
  border-left: 4px solid var(--day-colour, var(--teal));
  background: white;
}
.calendar-event-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: start;
}
.calendar-event strong {
  flex: 1 1 150px;
  min-width: 0;
  font-size: 16px;
  line-height: 1.2;
}
.calendar-event .chip { flex: 0 0 auto; }
.calendar-person {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.calendar-person span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.calendar-event small { color: var(--muted); font-weight: 800; }
.meal-board {
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 12px;
}
.meal-day {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 12px;
  background: #f6faf8;
  border: 1px solid var(--line);
  border-top: 4px solid var(--meal-colour, var(--teal));
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(31,47,45,.05);
}
.meal-day h3 {
  margin: 0;
  color: var(--meal-colour, var(--teal-dark));
  font-size: 18px;
}
.rich-meal-card {
  border-left: 4px solid var(--meal-colour, var(--teal));
  background: white;
}
.meal-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}
.meal-card-top strong { font-size: 17px; }
.rich-meal-card p { margin: 0; color: var(--muted); font-weight: 700; }
.meal-meta {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.meal-meta div {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
}
.meal-meta dt,
.meal-meta dd { margin: 0; font-size: 13px; }
.meal-meta dt { color: var(--muted); font-weight: 800; }
.meal-meta dd { font-weight: 800; }
.board-column {
  border-top: 4px solid var(--task-colour, var(--teal));
  box-shadow: 0 10px 26px rgba(31,47,45,.05);
}
.board-column h3 {
  color: var(--task-colour, var(--teal-dark));
  font-size: 18px;
}
.board-card {
  border-left: 4px solid var(--task-colour, var(--teal));
  background: white;
}
.board-card strong { font-size: 17px; }
.board-card.is-done {
  opacity: .58;
  background: #f6faf8;
}
.board-card.is-done strong { text-decoration: line-through; }
.task-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}
.task-check-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.task-check-row input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
}
.task-edit-button {
  min-height: 30px;
  padding: 0 10px;
  color: var(--teal-dark);
  background: #e6f2ee;
  border: 0;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 800;
}
.task-detail-preview {
  display: grid;
  gap: 2px;
  color: var(--ink);
}
.task-detail-preview span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-empty {
  min-height: 118px;
  padding: 14px;
  color: var(--muted);
  background: rgba(255,255,255,.62);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  font-weight: 800;
}
.task-owner-row {
  display: grid;
  grid-template-columns: auto minmax(128px, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.task-owner-row select {
  min-height: 34px;
  min-width: 0;
  padding: 0 8px;
  color: var(--ink);
  background: #f6faf8;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 800;
}
.rich-person { grid-template-columns: 70px minmax(0, 1fr); align-items: start; }
.rich-person .person-photo { width: 70px; height: 70px; }
.person-color { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 800; }
.person-color input, .background-controls input { width: 44px; height: 34px; padding: 2px; background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.login-details { display: grid; grid-column: 1 / -1; gap: 10px; padding: 12px; background: #f6faf8; border: 1px solid var(--line); border-radius: var(--radius); }
.login-details label, .quick-add label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
.login-details input, .login-details select, .quick-add input, .quick-add select, .quick-add textarea, .invite-link-row input { width: 100%; min-width: 0; min-height: 38px; padding: 0 10px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.quick-add textarea { padding-block: 10px; resize: vertical; }
.photo-upload, .invite-link-row button { display: inline-flex; justify-content: center; align-items: center; min-height: 34px; padding: 0 10px; color: var(--teal-dark); background: #e6f2ee; border: 0; border-radius: var(--radius); font-size: 12px; font-weight: 800; }
.photo-upload { grid-column: 1 / -1; }
.photo-upload input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.background-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.background-controls label { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 8px; padding: 10px; color: var(--muted); background: #f6faf8; border: 1px solid var(--line); border-radius: var(--radius); font-size: 12px; font-weight: 800; }
.invite-card { border-left: 4px solid var(--yellow); }
.invite-output { display: block; padding: 12px; color: var(--teal-dark); background: #e6f2ee; border-radius: var(--radius); overflow-wrap: anywhere; }

.quick-add { width: min(480px, calc(100% - 32px)); padding: 0; border: 0; border-radius: var(--radius); box-shadow: 0 30px 90px rgba(23,39,38,.26); }
.quick-add::backdrop { background: rgba(23,39,38,.42); }
.quick-add form { display: grid; gap: 16px; padding: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
[contenteditable="true"] { min-width: 1ch; outline: 0; border-radius: 4px; }
[contenteditable="true"]:focus { background: #fff5d9; box-shadow: 0 0 0 3px rgba(239,189,87,.28); }

@media (max-width: 1180px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 310px; grid-template-areas: "today rail" "attention rail" "children children"; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; width: min(280px, 86vw); transform: translateX(-102%); transition: transform 180ms ease; }
  .app.menu-open .sidebar { transform: translateX(0); }
  .main { padding: 16px; }
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mobile-menu { display: inline-flex; align-items: center; justify-content: center; }
  .search, .family-stack { grid-column: 1 / -1; }
  .dashboard-grid, .workbench-grid { grid-template-columns: 1fr; grid-template-areas: "today" "attention" "children" "rail"; }
  .children-strip, .task-board, .meal-grid, .document-list, .family-grid { grid-template-columns: 1fr; }
  .week-grid { grid-template-columns: repeat(5, 170px); }
  .calendar-board { grid-template-columns: repeat(5, 280px); }
  .tasks-hero { display: grid; }
  .documents-hero { display: grid; }
  .task-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body { font-size: 14px; }
  .panel { padding: 14px; }
  .timeline-item { grid-template-columns: 58px 3px minmax(0, 1fr); gap: 10px; }
  .children-strip article { grid-template-columns: 46px minmax(0, 1fr); }
  .children-strip .status-dot { grid-column: 2; justify-self: start; }
  .form-row, .background-controls { grid-template-columns: 1fr; }
  .tasks-hero { padding: 14px; }
  .documents-hero { padding: 14px; }
  .task-stats span { min-height: 58px; }
  .task-stats strong { font-size: 22px; }
}