/* Family HQ: light theme. Dark theme comes in build step 11; keep colors in tokens. */
:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-muted: #f8f9fb;
  --border: #e3e6eb;
  --text: #1d2330;
  --text-muted: #5b6472;
  --accent: #2563eb;
  --accent-soft: #e6eefd;
  --accent-text: #1e40af;
  --school: #0f8a5f;
  --school-soft: #e3f5ec;
  --today: #2563eb;
  --now: #e11d48;
  --danger: #c81e1e;
  --ok: #0f8a5f;
  --warn: #b45309;
  --shadow: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.08);
  --shadow-strong: 0 20px 40px rgb(16 24 40 / 0.18);
  --backdrop: rgb(16 24 40 / 0.35);
  --on-accent: #ffffff; /* text on accent, avatar and other strong colours */
  --today-col: #fafcff;
  --warm-bg: #fff7ed; /* waiting / attention / countdown */
  --warm-bg-2: #fef3c7;
  --warm-border: #fdba74;
  --warm-text: #9a3412;
  --amber: #f59e0b; /* adult view frame, temperature bar */
  --cool: #60a5fa;
  --rain: #2563eb;
  --toast-bg: #1d2330;
  --toast-text: #ffffff;
  --radius: 14px;
  --gap: 14px;
  --hour-height: 52px;
  --tap: 44px;

  color-scheme: light;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  color: var(--text);
}

/* Dark theme: chosen under ⚙️ Screen (Auto follows the device; "Dark at
   night" switches at 7pm and 7am). The page sets data-theme on <html>. */
:root[data-theme='dark'] {
  --bg: #0e131a;
  --surface: #171e28;
  --surface-muted: #1d2632;
  --border: #2b3644;
  --text: #e7ecf3;
  --text-muted: #9aa7b6;
  --accent: #4d8bff;
  --accent-soft: #1b2d4d;
  --accent-text: #a7c5ff;
  --school: #3cc893;
  --school-soft: #12382a;
  --today: #4d8bff;
  --now: #fb7185;
  --danger: #f87171;
  --ok: #3cc893;
  --warn: #fbbf24;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.3);
  --shadow-strong: 0 20px 40px rgb(0 0 0 / 0.5);
  --backdrop: rgb(0 0 0 / 0.6);
  --today-col: #172235;
  --warm-bg: #33240f;
  --warm-bg-2: #3a2f10;
  --warm-border: #a16207;
  --warm-text: #fcd34d;
  --amber: #f59e0b;
  --cool: #60a5fa;
  --rain: #7cb0ff;
  --toast-bg: #e7ecf3;
  --toast-text: #0e131a;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
}

button {
  font: inherit;
  color: inherit;
}

/* Any text in a box truncates instead of overflowing. */
.truncate,
.chip,
.agenda-title,
.agenda-meta,
.tg-event-title,
.tg-event-time,
.cal-title,
.panel-title,
.placeholder {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding: var(--gap);
  gap: var(--gap);
}

/* Header */
.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap);
  padding: 0 4px;
}

.brand {
  margin: 0;
  white-space: nowrap;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.clock {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.clock-time {
  font-size: 1.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.clock-date {
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* Dashboard grid: calendar left, side column right, widgets along the bottom. */
.dashboard {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    'calendar side'
    'bottom side';
  gap: var(--gap);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  min-width: 0;
  min-height: 0;
}

.panel-title {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.placeholder {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.muted {
  color: var(--text-muted);
}

.calendar {
  grid-area: calendar;
  display: flex;
  flex-direction: column;
  padding: 12px;
}

.side {
  grid-area: side;
  display: grid;
  grid-template-rows: auto minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
  min-height: 0;
}

.bottom {
  grid-area: bottom;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.4fr);
  gap: var(--gap);
}

.bottom .panel {
  min-height: 92px;
}

/* Buttons */
.btn {
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.btn:active {
  background: var(--surface-muted);
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.btn.primary:active {
  background: var(--accent-text);
}

.btn.danger {
  color: var(--danger);
}

.btn.danger.confirm {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--on-accent);
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn.icon {
  padding: 0;
  font-size: 1.6rem;
  line-height: 1;
}

/* Calendar toolbar */
.cal-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 0 4px 10px;
}

.cal-nav {
  display: flex;
  gap: 6px;
}

.cal-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
}

.segmented {
  display: flex;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}

.segmented button {
  min-height: calc(var(--tap) - 6px);
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  touch-action: manipulation;
}

.segmented button[aria-selected='true'] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.cal-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  touch-action: pan-y;
}

/* Event chips (month view and all-day rows) */
.chip {
  display: block;
  flex-shrink: 0;
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.chip.timed::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--dot, var(--accent));
  vertical-align: 1px;
}

.chip.timed.school::before {
  background: var(--dot, var(--school));
}

/* An event for someone shows their colour. */
.chip.all-day.has-person {
  box-shadow: inset 4px 0 0 var(--dot);
  padding-left: 9px;
}

.chip .chip-time {
  color: var(--text-muted);
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}

.chip.all-day {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
}

.chip.all-day.school {
  background: var(--school-soft);
  color: var(--school);
}

.more {
  display: block;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  padding: 1px 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
}

/* Month view */
.month {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.month-weekdays,
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.month-weekdays div {
  padding: 4px 8px 6px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.month-grid {
  grid-auto-rows: minmax(0, 1fr);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.month-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 4px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
}

.month-cell.other-month {
  background: var(--surface-muted);
}

.month-cell.other-month .day-num {
  color: var(--text-muted);
}

.day-num {
  align-self: flex-start;
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  margin-bottom: 2px;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.month-cell.today .day-num {
  background: var(--today);
  color: var(--on-accent);
}

.cell-events {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

/* Week and day views (time grid) */
.tg {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  --cols: 7;
}

.tg-head,
.tg-allday,
.tg-grid {
  display: grid;
  grid-template-columns: 56px repeat(var(--cols), minmax(0, 1fr));
}

.tg-head {
  border-bottom: 1px solid var(--border);
}

.tg-head-day {
  padding: 4px 6px 8px;
  text-align: center;
  cursor: pointer;
  min-width: 0;
}

.tg-head-dow {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.tg-head-day .day-num {
  align-self: auto;
  margin: 2px auto 0;
  font-size: 1.15rem;
  min-width: 34px;
  height: 34px;
  border-radius: 17px;
}

.tg-head-day.today .day-num {
  background: var(--today);
  color: var(--on-accent);
}

.tg-allday {
  border-bottom: 1px solid var(--border);
}

.tg-allday-label,
.tg-hour-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: right;
  padding-right: 8px;
}

.tg-allday-label {
  padding-top: 6px;
}

.tg-allday-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px;
  min-width: 0;
  border-left: 1px solid var(--border);
}

.tg-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.tg-grid {
  position: relative;
  height: calc(var(--hour-height) * 24);
}

.tg-hours {
  position: relative;
}

.tg-hour-label {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
}

.tg-col {
  position: relative;
  border-left: 1px solid var(--border);
  background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 100% var(--hour-height);
  min-width: 0;
}

.tg-col.today {
  background-color: var(--today-col);
}

.tg-event {
  position: absolute;
  overflow: hidden;
  padding: 3px 6px;
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-text);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.tg-event.has-person {
  border-left-color: var(--dot);
  border-left-width: 5px;
}

.tg-event.school {
  border-left-color: var(--dot, var(--school));
  background: var(--school-soft);
  color: var(--school);
}

.tg-event-title {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.25;
}

.tg-event-time {
  font-size: 0.74rem;
  opacity: 0.85;
  line-height: 1.25;
}

.tg-now {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--now);
  z-index: 2;
  pointer-events: none;
}

.tg-now::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--now);
}

/* Agenda */
.agenda {
  display: flex;
  flex-direction: column;
}

.agenda-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.agenda-day {
  margin: 10px 0 4px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

.agenda-day:first-child {
  margin-top: 0;
}

.agenda-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.agenda-time {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

.agenda-item.school .agenda-time {
  color: var(--school);
}

.agenda-body {
  min-width: 0;
}

.agenda-item {
  grid-template-columns: 64px minmax(0, 1fr) auto;
}

.agenda-who {
  display: flex;
  gap: 2px;
  align-self: center;
}

.agenda-who .avatar {
  width: 22px;
  height: 22px;
  font-size: 0.65rem;
}

.agenda-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
}

.agenda-meta {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Grocery list and to-dos */
.list-panel {
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.link-btn {
  flex: none;
  border: 0;
  background: transparent;
  padding: 4px 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-text);
  cursor: pointer;
}

.list-items {
  flex: 1;
  min-height: 0;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

.list-item {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
}

.list-check {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: 40px;
  margin-left: -8px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.list-check::before {
  content: '';
  width: 22px;
  height: 22px;
  border: 2px solid var(--text-muted);
  border-radius: 50%;
}

.list-item.done .list-check::before {
  border-color: var(--ok);
  background: var(--ok)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 16px no-repeat;
}

.list-text {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  font-size: 0.95rem;
  cursor: pointer;
}

.list-item.done .list-text {
  color: var(--text-muted);
  text-decoration: line-through;
}

.list-empty {
  margin: 4px 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--person, var(--text-muted));
  color: var(--avatar-ink, var(--on-accent));
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.list-item.done .avatar {
  opacity: 0.5;
}

.list-add {
  display: flex;
  align-items: center;
  gap: 6px;
}

.list-add input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  font-size: 0.95rem;
  color: inherit;
  background: var(--surface-muted);
}

.list-add input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  background: var(--surface);
}

.assign-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.assign-btn:empty::before {
  content: '';
  width: 24px;
  height: 24px;
  border: 2px dashed var(--text-muted);
  border-radius: 50%;
}

.add-btn {
  min-height: 40px;
  min-width: 40px;
  padding: 0;
  font-size: 1.3rem;
}

.btn.small {
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.9rem;
}

/* Person picker (item dialog) and family settings */
.person-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.person-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  max-width: 100%;
  padding: 0 14px 0 8px;
  border: 2px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  font-weight: 600;
  cursor: pointer;
}

.person-choice[aria-checked='true'],
.person-choice[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.person-choice .name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.family-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.family-row .field {
  margin: 0;
}

.family-row .birthday-field {
  flex: 0 0 180px;
}

.family-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.family-row-head .pin-btn {
  margin-left: auto;
  min-height: var(--tap);
  padding-inline: 8px;
}

.family-role {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.swatch {
  width: 34px;
  height: 34px;
  border: 3px solid transparent;
  border-radius: 50%;
  background: var(--person);
  cursor: pointer;
}

.swatch[aria-checked='true'] {
  border-color: var(--surface);
  box-shadow: 0 0 0 2px var(--text);
}

/* Chores and points */
.panel-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

#approve-open-top {
  display: none;
}

.btn.attention {
  background: var(--warm-bg);
  border-color: var(--warm-border);
  color: var(--warn);
}

.kid-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.kid-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-left: 5px solid var(--person);
  border-radius: 12px;
  background: var(--surface-muted);
  text-align: left;
  cursor: pointer;
}

.kid-tile .avatar {
  width: 36px;
  height: 36px;
  font-size: 1rem;
}

.kid-name {
  display: block;
  font-weight: 700;
}

.kid-sub {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.kid-points {
  font-size: 1.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--person);
  line-height: 1;
  text-align: right;
}

.kid-points small {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.dialog-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dialog-head .avatar {
  width: 36px;
  height: 36px;
  font-size: 1rem;
}

.dialog-head .event-dialog-title {
  margin: 0;
}

.chore-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.chore-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 72px;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.chore-btn .chore-name {
  max-width: 100%;
  font-size: 1.05rem;
  font-weight: 700;
}

.chore-btn .chore-state {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-text);
}

.chore-btn.pending {
  border-color: var(--warm-border);
  background: var(--warm-bg);
}

.chore-btn.pending .chore-state {
  color: var(--warn);
}

.chore-btn.approved {
  border-color: var(--ok);
  background: var(--school-soft);
  cursor: default;
}

.chore-btn.approved .chore-state {
  color: var(--ok);
}

.chore-btn.confirm {
  border-color: var(--danger);
}

.helpers-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.helpers-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.dialog-section {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 16px 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.dialog-section-note {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  color: var(--accent-text);
}

/* Prize cards (in a kid's dialog) */
.prize-btn {
  position: relative;
  overflow: hidden;
}

.prize-btn .prize-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: var(--border);
}

.prize-btn .prize-bar span {
  display: block;
  height: 100%;
  background: var(--person, var(--accent));
}

.prize-btn.locked .chore-name {
  color: var(--text-muted);
}

.prize-btn.ready {
  border-color: var(--person, var(--accent));
}

.prize-btn.ready .chore-state {
  color: var(--text);
}

.approve-row.prize .approve-what strong::before {
  content: '';
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.35em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 7v14%22 /%3E %3Cpath d=%22M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8%22 /%3E %3Cpath d=%22M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5%22 /%3E %3Crect x=%223%22 y=%227%22 width=%2218%22 height=%224%22 rx=%221%22 /%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 7v14%22 /%3E %3Cpath d=%22M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8%22 /%3E %3Cpath d=%22M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5%22 /%3E %3Crect x=%223%22 y=%227%22 width=%2218%22 height=%224%22 rx=%221%22 /%3E%3C/svg%3E") center / contain no-repeat;
}

.approve-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 55vh;
  overflow-y: auto;
}

.approve-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.approve-what {
  min-width: 0;
}

.approve-what strong,
.approve-what span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.approve-what span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.btn.ok {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--on-accent);
}

.manage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.manage-row input {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stepper output {
  min-width: 52px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* PIN keypad */
.pin-dialog {
  width: min(360px, calc(100vw - 32px));
}

.pin-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  min-height: 20px;
  margin: 14px 0 6px;
}

.pin-dots span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text);
}

.pin-dots .empty {
  background: transparent;
  border: 2px solid var(--border);
}

.pin-dialog .form-error {
  text-align: center;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.keypad button {
  min-height: 60px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-muted);
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.keypad button:active {
  background: var(--border);
}

.keypad .ok-key {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-size: 1.1rem;
}

.keypad button:disabled {
  opacity: 0.4;
}

/* Tidy-up streak and timer */
.streak-panel,
.tidy-panel {
  display: flex;
  flex-direction: column;
}

.streak-body {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.streak-count {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.streak-count span {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--warn);
  font-variant-numeric: tabular-nums;
}

.streak-count small {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.streak-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.streak-week {
  display: flex;
  gap: 6px;
}

.streak-day {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
}

.streak-day.done {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--on-accent);
}

.streak-day.late {
  border-color: var(--warm-border);
  color: var(--warn);
}

.streak-day.missed {
  border-style: dashed;
}

.streak-day.today {
  border-color: var(--accent);
  color: var(--accent-text);
}

.streak-note {
  margin: 0;
  max-width: 100%;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.streak-note.reward {
  color: var(--warn);
  font-weight: 700;
}

.tidy-panel-btn {
  flex: 1;
  min-height: 52px;
  width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-muted);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tidy-panel-btn.start {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-size: 1.1rem;
}

.tidy-panel-btn.running {
  background: var(--warm-bg);
  border-color: var(--warm-border);
  color: var(--warn);
  font-variant-numeric: tabular-nums;
}

.tidy-panel-btn.running.met {
  background: var(--school-soft);
  border-color: var(--ok);
  color: var(--ok);
}

.tidy-panel-btn.done {
  background: var(--school-soft);
  border-color: var(--ok);
  color: var(--ok);
  cursor: default;
}

.tidy-panel-btn:disabled {
  color: var(--text-muted);
  cursor: default;
}

.tidy-dialog {
  width: min(620px, calc(100vw - 32px));
}

.tidy-clock {
  margin: 4px 0 16px;
  text-align: center;
}

.tidy-time {
  display: block;
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.tidy-time.met {
  color: var(--ok);
}

.tidy-hint {
  margin: 8px 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
}

.tidy-bar {
  height: 10px;
  margin-top: 8px;
  border-radius: 5px;
  background: var(--border);
  overflow: hidden;
}

.tidy-bar-fill {
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform-origin: left;
  transition: transform 0.25s linear;
}

.tidy-bar-fill.met {
  background: var(--ok);
}

.tidy-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.tidy-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  min-width: 0;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  font-size: 1.15rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.tidy-item::before {
  content: '';
  flex: none;
  width: 28px;
  height: 28px;
  border: 2px solid var(--text-muted);
  border-radius: 50%;
}

.tidy-item[aria-pressed='true'] {
  border-color: var(--ok);
  background: var(--school-soft);
}

.tidy-item[aria-pressed='true']::before {
  border-color: var(--ok);
  background: var(--ok)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 20px no-repeat;
}

.tidy-result {
  text-align: center;
}

.tidy-result-emoji {
  font-size: 4rem;
  line-height: 1.2;
}

.tidy-result-text {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.tidy-result-reward {
  margin: 0 0 8px;
  padding: 10px;
  border-radius: 12px;
  background: var(--warm-bg);
  color: var(--warn);
  font-size: 1.2rem;
  font-weight: 800;
}

/* Sound */
.sound-btn {
  min-width: 44px;
  padding: 0 8px;
  font-size: 1.1rem;
}

.sound-dialog {
  width: min(440px, calc(100vw - 32px));
}

.sound-dialog .form-note {
  margin-bottom: 14px;
}

.field input.volume-slider {
  padding: 0;
  border: 0;
  background: transparent;
}

.volume-slider {
  width: 100%;
  height: var(--tap);
  accent-color: var(--accent);
  cursor: pointer;
}

/* Adult view */
.status-pill > .adult-btn.on {
  color: var(--text);
}

body.adult-view .status-pill > .adult-btn {
  background: var(--warm-bg);
  border-color: var(--amber);
  color: var(--warn);
}

/* A frame around the whole screen while adult-only things are showing. */
body.adult-view::after {
  content: '';
  position: fixed;
  inset: 0;
  border: 4px solid var(--amber);
  pointer-events: none;
  z-index: 10;
}

.adult-toggle {
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  font-size: 1rem;
  opacity: 0.5;
  cursor: pointer;
}

.adult-toggle[aria-pressed='true'] {
  opacity: 1;
  border-color: var(--amber);
  background: var(--warm-bg);
}

.pin-remember {
  font-size: 0.85rem;
  font-weight: 500;
}

/* Weather */
.weather-btn {
  margin-left: auto;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  font-size: 1.15rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.weather-btn + .countdown {
  margin-left: 12px;
}

.event-dialog.weather-dialog {
  width: min(720px, calc(100vw - 32px));
}

.weather-dialog .dialog-actions {
  flex-wrap: wrap;
}

.weather-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.weather-head .event-dialog-title {
  margin: 0;
  min-width: 0;
}

.weather-now {
  display: flex;
  align-items: center;
  gap: 16px;
}

.weather-now .big-emoji {
  font-size: 4rem;
  line-height: 1;
}

.weather-now .big-temp {
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.weather-now .now-label {
  font-size: 1.2rem;
  font-weight: 700;
}

.weather-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 14px 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.weather-facts strong {
  color: var(--text);
}

.weather-hours {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.weather-hour {
  flex: 0 0 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-muted);
  font-variant-numeric: tabular-nums;
}

.weather-hour .h-time {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
}

.weather-hour .h-emoji {
  font-size: 1.5rem;
}

.weather-hour .h-temp {
  font-weight: 800;
}

.rain {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--rain);
  white-space: nowrap;
}

.weather-day {
  display: grid;
  grid-template-columns: 70px 40px minmax(0, 1fr) 48px 40px minmax(60px, 1.2fr) 40px;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}

.weather-day .d-name {
  font-weight: 700;
}

.weather-day .d-emoji {
  font-size: 1.6rem;
  text-align: center;
}

.weather-day .d-low {
  color: var(--text-muted);
  text-align: right;
}

.weather-day .d-high {
  font-weight: 800;
}

.temp-bar {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--border);
}

.temp-bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cool), var(--amber));
}

.weather-search {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.weather-search .field {
  margin: 0;
}

.check-row {
  display: flex;
  gap: 18px;
  margin: 8px 0;
}

.weather-results {
  margin: 0;
  padding: 0;
  list-style: none;
}

.weather-results button {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  text-align: left;
  font-weight: 600;
  cursor: pointer;
}

.weather-credit {
  font-size: 0.8rem;
  color: var(--text-muted);
}

@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
  .weather-day {
    grid-template-columns: 44px 30px 46px 32px minmax(30px, 1fr) 32px;
    gap: 6px;
  }

  .weather-day .d-label {
    display: none;
  }

  .weather-head {
    flex-wrap: wrap;
  }
}

/* School emails */
.event-dialog.school-dialog {
  width: min(860px, calc(100vw - 32px));
}

.school-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.school-head .event-dialog-title {
  margin: 0;
}

.school-query {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.school-query .field {
  margin: 0;
}

.school-manual {
  margin: 6px 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.school-manual summary {
  font-weight: 700;
  cursor: pointer;
  min-height: 32px;
  display: flex;
  align-items: center;
}

.file-btn {
  display: inline-flex;
  align-items: center;
}

.school-message {
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.school-message-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--school-soft);
}

.school-message-head .what {
  flex: 1;
  min-width: 0;
}

.school-message-head strong,
.school-message-head span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.school-message-head span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.school-links {
  padding: 6px 14px 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.school-cand {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}

.school-cand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.school-cand-row input[type='text'] {
  flex: 1 1 220px;
}

.school-cand-row input {
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  min-width: 0;
}

.school-cand-row .check {
  min-height: 40px;
  margin: 0;
}

.school-cand-from {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.school-cand-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.school-cand-actions .spacer {
  flex: 1;
}

.for-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.school-cand .person-choice {
  min-height: 34px;
  padding: 0 10px 0 4px;
  font-size: 0.85rem;
}

.school-cand .person-choice .avatar {
  width: 22px;
  height: 22px;
  font-size: 0.75rem;
}

/* Countdowns to fun days */
.countdown {
  margin-left: auto;
  min-height: 40px;
  max-width: 34vw;
  padding: 0 16px;
  border: 2px solid var(--warm-border);
  border-radius: 20px;
  background: linear-gradient(90deg, var(--warm-bg), var(--warm-bg-2));
  color: var(--warm-text);
  font-size: 1.05rem;
  font-weight: 800;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.countdown + .clock {
  margin-left: 16px;
}

.countdown.fresh {
  animation: countdown-in 0.4s ease-out;
}

@keyframes countdown-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* Toasts: what just changed on another screen */
.toasts {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(560px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  box-shadow: var(--shadow-strong);
  pointer-events: auto;
  cursor: pointer;
  animation: toast-in 0.25s ease-out;
}

.toast-icon {
  flex: none;
  font-size: 1.3rem;
  line-height: 1.1;
}

.toast-body {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.toast-title {
  font-weight: 500;
}

.toast-detail {
  color: var(--text-muted);
}

/* Phones: a banner across the top, like the phone's own notifications. */
@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
  .toasts {
    top: calc(8px + env(safe-area-inset-top));
    width: calc(100vw - 16px);
  }
}

.toast.leaving {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s, transform 0.3s;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.time-inline {
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
}

/* Event detail dialog */
.event-dialog {
  background: var(--surface);
  width: min(440px, calc(100vw - 32px));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-strong);
  color: var(--text);
}

.event-dialog::backdrop {
  background: var(--backdrop);
}

.event-dialog-title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  overflow-wrap: anywhere;
}

.event-dialog-row {
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}

#event-notes {
  white-space: pre-line;
}

.event-dialog-row:empty {
  display: none;
}

.dialog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.dialog-actions .spacer {
  flex: 1;
}

/* Sync dot and adult lock, paired in one small pill beside the clock. */
.status-pill {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
}

.status-pill > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 34px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
}

.status-pill > button + button {
  border-left: 1px solid var(--border);
}

.status-pill > button:hover {
  background: var(--surface-muted);
}

.sync-status::before {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-muted);
}

.sync-status.ok::before {
  background: var(--ok);
}

.sync-status.warn::before {
  background: var(--warn);
}

.sync-status.error::before {
  background: var(--danger);
}

/* Notifications bell: a red count when anything is waiting. */
.inbox-btn {
  position: relative;
}

.inbox-count {
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.inbox-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.inbox-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.inbox-item.problem {
  border-color: var(--amber);
  background: var(--warm-bg);
}

.inbox-icon {
  flex: none;
  font-size: 1.2rem;
}

.inbox-text {
  flex: 1;
  min-width: 0;
}

.app-version {
  margin-right: auto;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Add / edit form */
.edit-dialog {
  width: min(520px, calc(100vw - 32px));
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  min-width: 0;
  flex: 1;
}

.field > span {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  color: inherit;
  background: var(--surface);
}

.field textarea {
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.field-row {
  display: flex;
  gap: 10px;
}

.time-field {
  flex: 0 0 150px;
}

.edit-form-all-day .time-field {
  display: none;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  margin-bottom: 8px;
  font-weight: 600;
  cursor: pointer;
}

.check input {
  flex: none;
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
}

.form-note {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.form-error {
  margin: 0;
  font-size: 0.9rem;
  color: var(--danger);
}

.form-error:empty {
  display: none;
}

/* Narrow screens (adult phones): stack everything. */
@media (max-width: 900px) {
  /* Chore name and kid get the full width; the buttons go underneath. */
  .approve-row {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  }

  .approve-what {
    grid-column: 2 / -1;
  }

  .approve-row .btn {
    grid-row: 2;
  }

  .approve-row .btn:first-of-type {
    grid-column: 1 / 3;
  }

  .app {
    height: auto;
    min-height: 100dvh;
  }

  .dashboard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: 'calendar' 'side' 'bottom';
  }

  .calendar {
    height: 75dvh;
  }

  .side {
    grid-template-rows: auto;
  }

  .agenda {
    max-height: 50dvh;
  }

  .bottom {
    grid-template-columns: minmax(0, 1fr);
  }

  .chores-panel .panel-head {
    flex-wrap: wrap;
  }

  .topbar {
    flex-wrap: wrap;
  }

  .clock-date {
    display: none;
  }

  .weather-btn {
    margin-left: 0;
  }

  .countdown {
    order: 10;
    flex: 1 0 100%;
    max-width: none;
    margin-left: 0;
  }

  .cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .cal-title {
    flex: 1 0 100%;
    order: -1;
  }

  .segmented button {
    padding: 0 10px;
  }
}

/* Portrait: a wall screen mounted on its side. The calendar goes across the
   top; agenda and lists sit side by side below it; streak and timer, then
   chores, along the bottom. Phones keep their own stacked layout. */
@media (min-width: 901px) {
  :root[data-layout='portrait'] .topbar {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  :root[data-layout='portrait'] .dashboard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.45fr) minmax(0, 1fr) auto;
    grid-template-areas: 'calendar' 'side' 'bottom';
  }

  :root[data-layout='portrait'] .side {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }

  :root[data-layout='portrait'] .agenda {
    grid-row: span 2;
  }

  :root[data-layout='portrait'] .bottom {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  :root[data-layout='portrait'] .chores-panel {
    grid-column: 1 / -1;
  }

  :root[data-layout='portrait'] .countdown {
    max-width: 50vw;
  }
}

/* The wall display (⚙️ Screen → "This is the wall display", or ?kiosk=1):
   no text selection or long-press menus, no pull-to-refresh or double-tap
   zoom, and the mouse pointer hides when nobody is using it. */
:root[data-kiosk] body {
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

:root[data-kiosk] input,
:root[data-kiosk] textarea {
  -webkit-user-select: text;
  user-select: text;
}

:root[data-kiosk].pointer-idle,
:root[data-kiosk].pointer-idle * {
  cursor: none !important;
}

.screen-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 12px;
}

.screen-choices .check {
  margin: 0;
}

/* ---------- Pairing (online) ---------- */

.pair-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--bg);
}

.pair-screen[hidden] {
  display: none;
}

.pair-card {
  width: min(440px, 100%);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-strong);
}

.pair-card h1 {
  margin: 0 0 8px;
  font-size: 1.5rem;
}

.pair-card p {
  color: var(--text-muted);
  line-height: 1.45;
}

#pair-code {
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.device-list {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.device-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  border-bottom: 1px solid var(--border);
}

.device-row .device-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-row .device-meta {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
}

.pair-code {
  margin: 4px 0 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg);
  text-align: center;
}

.pair-code strong {
  display: block;
  font-size: 2rem;
  letter-spacing: 0.14em;
}

/* ---------- Notes for the home screen ---------- */

.note-dialog {
  width: min(480px, calc(100vw - 32px));
}

.note-dialog textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  font: inherit;
  font-size: 1.1rem;
}

.notes-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  margin-top: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: auto;
}

.notes-dialog::backdrop {
  background: var(--backdrop);
}

.notes-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.note-card {
  padding: 24px 28px;
  border: 1px solid var(--warm-border);
  border-radius: 18px;
  background: var(--warm-bg);
  color: var(--warm-text);
  box-shadow: var(--shadow-strong);
}

.note-for {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.note-text {
  margin: 8px 0 12px;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.25;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
}

.note-foot {
  display: flex;
  align-items: center;
  gap: 12px;
}

.note-meta {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
}

.texting-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}

.texting-options .check {
  margin: 0;
  font-weight: 500;
}

.system-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.system-problem {
  color: var(--warm-text);
}

.pair-whose {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 12px;
}

.pair-whose-label {
  font-weight: 600;
}

.pair-code-note {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
}

/* A parent's own trusted device: unlocked, without the warning frame. */
body.adult-trusted .adult-btn {
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Phones: the weekday names fit their narrow columns ("MON", not "M…"). */
@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
  .month-weekdays div {
    padding: 4px 2px 6px;
    letter-spacing: 0;
    text-align: center;
  }
}

/* ---------- Settings: one dialog, a tab for each kind ---------- */

.settings-dialog {
  width: min(920px, calc(100vw - 24px));
  height: min(760px, calc(100dvh - 24px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-strong);
  overflow: hidden;
}

.settings-dialog[open] {
  display: flex;
  flex-direction: column;
}

.settings-dialog::backdrop {
  background: var(--backdrop);
}

.settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 22px;
  border-bottom: 1px solid var(--border);
}

.settings-head h2 {
  margin: 0;
  font-size: 1.25rem;
}

.settings-x {
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
}

.settings-x:hover {
  background: var(--bg);
}

.settings-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
}

.settings-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  overflow-y: auto;
}

.settings-tabs button {
  flex: none;
  min-height: var(--tap);
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.settings-tabs button[aria-selected='true'] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.settings-tabs button[hidden],
.settings-panel[hidden] {
  display: none;
}

.settings-panels {
  --pad-x: 22px;
  --pad-b: 24px;
  min-height: 0;
  overflow-y: auto;
  padding: 18px var(--pad-x) var(--pad-b);
}

.settings-panel-title {
  margin: 0 0 6px;
  font-size: 1.15rem;
}

/* The ✕ at the top closes Settings, so the panels don't need their own Done. */
.settings-panel .panel-done {
  display: none;
}

/* Phones: full screen, with the tabs in a row across the top. */
@media (max-width: 700px) {
  .settings-dialog {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .settings-head {
    padding-top: calc(10px + env(safe-area-inset-top));
  }

  .settings-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  /* The list of pages, then one page at a time. */
  .settings-dialog[data-view='list'] .settings-panels,
  .settings-dialog[data-view='page'] .settings-tabs {
    display: none;
  }

  .settings-tabs {
    border-right: 0;
    padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
  }

  .settings-tabs button {
    min-height: 52px;
    padding: 0 14px;
    background: var(--surface);
  }

  .settings-tabs button::after {
    content: '\203A';
    margin-left: auto;
    color: var(--text-muted);
    font-size: 1.4rem;
  }

  .settings-dialog[data-view='page'] .settings-back {
    display: grid;
  }

  .settings-dialog[data-view='page'] .settings-head {
    padding-left: 8px;
  }

  .settings-panels {
    --pad-x: 16px;
    --pad-b: calc(24px + env(safe-area-inset-bottom));
    padding: 16px var(--pad-x) var(--pad-b);
  }
}

/* Screen dimming: a black layer over the whole screen. */
.dim-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0);
  transition: background-color 2s ease;
  cursor: none;
}

.dim-overlay.on {
  background: rgba(0, 0, 0, var(--dim, 0.75));
}

/* The saying and rules while dimmed */
.dim-saying {
  position: absolute;
  width: min(760px, 80vw);
  color: rgba(255, 255, 255, 0.78);
  transition: top 4s ease, left 4s ease;
}

.dim-time {
  margin-bottom: 18px;
  font-size: 1.4rem;
  font-weight: 700;
  opacity: 0.8;
}

.dim-quote {
  margin-bottom: 22px;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.2;
}

.dim-rules {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.35rem;
}

.dim-rules li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dim-rules .icon {
  width: 1.6rem;
  height: 1.6rem;
}

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

/* Notifications: its own window, one column. */
.inbox-dialog {
  width: min(760px, calc(100vw - 24px));
}

.inbox-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 22px 24px;
}

.doc-progress {
  margin: 10px 0 0;
  font-weight: 600;
}

/* The version, at the bottom of Settings' tab list (in the header on phones). */
.version-status {
  margin: auto 0 0;
  padding: 12px 10px 4px;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.settings-head .app-version {
  display: none;
}

@media (max-width: 700px) {
  .version-status {
    display: none;
  }

  .settings-head .app-version {
    display: inline;
  }
}

/* ---------- Phones ---------- */

.topbar-break,
.phone-tabs {
  display: none;
}

.cell-dots,
.month-picked,
.week-list {
  display: none;
}

@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
  /* Header: name, sync and lock, then icon buttons; weather and the
     countdown on a slim second row. The phone shows its own clock. */
  .topbar {
    gap: 8px;
    row-gap: 8px;
    padding: 0;
  }

  .brand {
    font-size: 1.3rem;
  }

  #note-open {
    margin-left: auto;
  }

  .topbar .btn-label,
  .topbar .clock {
    display: none;
  }

  .topbar > .btn.small {
    min-width: 40px;
    padding: 0 10px;
  }

  .topbar-break {
    display: block;
    flex-basis: 100%;
    height: 0;
    order: 9;
  }

  .weather-btn {
    order: 10;
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.95rem;
  }

  .countdown {
    order: 11;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    min-height: 34px;
    margin-left: 0;
    padding: 0 12px;
    font-size: 0.9rem;
  }

  .weather-btn + .countdown {
    margin-left: 0;
  }

  /* Calendar: the title, then the arrows and the views. */
  .calendar,
  .calendar[data-view='month'],
  .calendar[data-view='week'] {
    height: auto;
  }

  .calendar[data-view='day'] {
    height: 70dvh;
  }

  .cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .cal-title {
    order: -1;
    flex: 1 0 100%;
    font-size: 1.2rem;
  }

  /* Chevrons and "Today" as plain icons and text, not boxed buttons. */
  .cal-nav {
    gap: 0;
  }

  .cal-nav .btn {
    border-color: transparent;
    background: none;
    box-shadow: none;
  }

  .cal-nav .btn.icon {
    min-width: 40px;
    padding: 0;
    color: var(--text);
  }

  #cal-today {
    padding: 0 6px;
    color: var(--accent-text);
    font-weight: 700;
  }

  .segmented button {
    padding: 0 8px;
    font-size: 0.9rem;
  }

  .segmented button {
    padding: 0 9px;
  }

  /* Month: small cells with a dot per event. */
  .month {
    display: block;
  }

  .month-grid.phone {
    grid-auto-rows: 48px;
  }

  .month-grid.phone .month-cell {
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 4px 0 0;
    border-top: 0;
    border-left: 0;
    background: none;
    font: inherit;
    color: inherit;
  }

  .month-grid.phone .month-cell.other-month {
    background: var(--surface-muted);
  }

  .month-grid.phone .day-num {
    align-self: center;
    min-width: 30px;
    height: 30px;
    margin: 0;
  }

  .month-grid.phone .month-cell.picked:not(.today) .day-num {
    background: var(--accent-soft);
    color: var(--accent-text);
  }

  .cell-dots {
    display: flex;
    gap: 3px;
  }

  .cell-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dot, var(--accent));
  }

  .cell-dot.school {
    background: var(--school);
  }

  .month-picked {
    display: block;
    margin-top: 12px;
  }

  .month-picked-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
  }

  .month-picked-head .agenda-day {
    margin: 0;
  }

  /* Week: the seven days as a list. */
  .week-list {
    display: block;
  }

  .week-list-day {
    display: block;
    width: 100%;
    margin: 12px 0 2px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    text-align: left;
    cursor: pointer;
  }

  .week-list-day:first-child {
    margin-top: 4px;
  }

  .week-list-day.today {
    color: var(--accent-text);
  }

  .week-list-none {
    margin: 0;
    padding: 4px 0 6px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.9rem;
  }

  /* Chore and prize names wrap instead of being cut off. */
  .chore-btn .chore-name {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Phones: one section at a time, with tabs along the bottom. */
@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
  .app {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .app[data-phone-tab='calendar'] [data-phone-section]:not([data-phone-section='calendar']),
  .app[data-phone-tab='lists'] [data-phone-section]:not([data-phone-section='lists']),
  .app[data-phone-tab='chores'] [data-phone-section]:not([data-phone-section='chores']) {
    display: none;
  }

  /* The chores tab leads with the kids' tiles. */
  .chores-panel {
    order: -1;
  }

  /* Empty containers of other tabs' sections take no space. */
  .app[data-phone-tab='chores'] .side,
  .app:not([data-phone-tab='chores']) .bottom {
    display: none;
  }

  /* Rows of other tabs' sections collapse instead of stretching. */
  .dashboard {
    display: flex;
    flex-direction: column;
    flex: none;
    min-height: 0;
  }

  /* Room for the + button at the end of the calendar tab. */
  .app[data-phone-tab='calendar'] {
    padding-bottom: calc(150px + env(safe-area-inset-bottom));
  }

  /* + Event floats above the tabs, as phone apps do. */
  #cal-add {
    position: fixed;
    right: 16px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    z-index: 40;
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 50%;
    font-size: 1.8rem;
    font-weight: 400;
    box-shadow: var(--shadow-strong);
  }

  #cal-add .btn-label {
    display: none;
  }

  .phone-tabs {
    position: fixed;
    inset: auto 0 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .phone-tabs button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 52px;
    padding: 4px 0;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
  }

  .phone-tabs button[aria-current='true'] {
    background: var(--accent-soft);
    color: var(--accent-text);
  }

  .phone-tab-icon {
    font-size: 1.35rem;
    line-height: 1.2;
  }

  .phone-tabs .inbox-count {
    position: absolute;
    top: 2px;
    left: calc(50% + 10px);
    margin: 0;
  }
}

/* Previous / next: drawn chevrons. */
.chevron {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* + Event: 📎 Upload, and the import window */
.edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.edit-head .event-dialog-title {
  margin: 0;
}

#doc-upload[hidden] {
  display: none;
}

.doc-progress {
  margin: 6px 0 10px;
  font-size: 0.9rem;
  font-weight: 600;
}

.doc-progress[hidden] {
  display: none;
}

.event-dialog.import-dialog {
  width: min(720px, calc(100vw - 32px));
}

.import-all[hidden] {
  display: none;
}

.import-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 52dvh;
  margin: 8px 0;
  overflow-y: auto;
}

.import-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.import-row.off .import-fields {
  opacity: 0.45;
}

.import-row > .import-pick {
  width: 22px;
  height: 22px;
  margin-top: 10px;
  accent-color: var(--accent);
}

.import-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.import-fields input[type='text'],
.import-when input[type='date'],
.import-when input[type='time'] {
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  color: inherit;
  background: var(--surface);
}

.import-title {
  width: 100%;
  font-weight: 600;
}

.import-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.import-when input[hidden] {
  display: none;
}

.import-when .check {
  margin: 0;
}

.import-from {
  margin: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* + Event: how it repeats */
.repeat-custom,
.repeat-end {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.repeat-custom[hidden],
.repeat-end[hidden],
.repeat-weekdays[hidden],
#repeat-monthly[hidden] {
  display: none;
}

.repeat-every {
  display: flex;
  align-items: center;
  gap: 8px;
}

.repeat-every input,
.repeat-end input[type='number'],
.repeat-end input[type='date'],
.repeat-custom select {
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  color: inherit;
  background: var(--surface);
}

.repeat-every input,
.repeat-end input[type='number'] {
  width: 4.5em;
}

.repeat-weekdays {
  display: flex;
  gap: 6px;
}

.weekday-choice {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.weekday-choice[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.repeat-end .check {
  margin: 0;
  gap: 8px;
}

.repeat-end-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.repeat-end .check input[type='date'] {
  width: auto;
  min-width: 160px;
  height: auto;
}

.repeat-end .check input[type='number'] {
  width: 5em;
  height: auto;
}

/* Settings → Calendars */
.cal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.cal-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.cal-name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 600;
}

.cal-name input[type='text'] {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  color: inherit;
  background: var(--surface);
}

.cal-swatch {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot, var(--accent));
}

.agenda-who .cal-swatch {
  align-self: center;
}

.cal-link {
  margin: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cal-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 0.9rem;
}

.cal-setting {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.cal-setting input[type='color'] {
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

.cal-setting select {
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  color: inherit;
  background: var(--surface);
}

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

.cal-status.problem {
  color: var(--warm-text);
}

.cal-link-form {
  display: flex;
  gap: 8px;
}

.cal-link-form input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  color: inherit;
  background: var(--surface);
}

/* Event details: a card with its colour down the left edge, and the pencil
   and close icons at the top right. */
.event-dialog.event-card {
  border-left: 8px solid var(--card-accent, var(--accent));
}

.event-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.event-card-head .event-dialog-title {
  flex: 1;
  min-width: 0;
  margin: 4px 0 8px;
  overflow-wrap: anywhere;
}

.event-card-actions {
  display: flex;
  gap: 4px;
  margin: -8px -10px 0 0;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.icon-btn[hidden] {
  display: none;
}

/* Settings → Family: the avatar is the colour picker. */
.avatar-btn {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.avatar-btn::after {
  content: '';
  position: absolute;
  right: -6px;
  bottom: -4px;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  --pal: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z%22 /%3E %3Ccircle cx=%2213.5%22 cy=%226.5%22 r=%22.5%22 fill=%22currentColor%22 /%3E %3Ccircle cx=%2217.5%22 cy=%2210.5%22 r=%22.5%22 fill=%22currentColor%22 /%3E %3Ccircle cx=%226.5%22 cy=%2212.5%22 r=%22.5%22 fill=%22currentColor%22 /%3E %3Ccircle cx=%228.5%22 cy=%227.5%22 r=%22.5%22 fill=%22currentColor%22 /%3E%3C/svg%3E");
}

.avatar-btn[aria-expanded='true'] .avatar {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text);
}

/* Lists and the agenda scroll inside their boxes: a soft shadow at the top or
   bottom edge shows there's more to scroll to (it fades once you reach the end). */
.list-items,
.agenda-list {
  background:
    linear-gradient(var(--surface) 30%, transparent) top / 100% 28px no-repeat local,
    linear-gradient(transparent, var(--surface) 70%) bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.18), transparent) top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.18), transparent) bottom / 100% 10px no-repeat scroll;
}

/* Week and day views: how many events are above or below what's in view. */
.tg {
  position: relative;
}

.tg-more {
  position: absolute;
  left: 50%;
  z-index: 3;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--accent-text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  transform: translateX(-50%);
  cursor: pointer;
}

.tg-more.bottom {
  bottom: 8px;
}

.tg-more[hidden] {
  display: none;
}

/* Settings → Family: a bigger avatar to tap; colours someone has are marked. */
.avatar-btn .avatar {
  width: 40px;
  height: 40px;
  font-size: 1rem;
}

.swatch.taken {
  opacity: 0.45;
}

.swatch.taken[aria-checked='true'] {
  opacity: 1;
}

/* Long forms: their buttons stay in view at the bottom while scrolling. */
.event-dialog > form > .dialog-actions,
.event-dialog > .dialog-actions,
.settings-panel .dialog-actions {
  position: sticky;
  bottom: -20px;
  z-index: 2;
  margin-bottom: -20px;
  padding: 12px 0 20px;
  background: var(--surface);
}

.settings-panel .dialog-actions {
  bottom: -24px;
  margin-bottom: -24px;
  padding-bottom: 24px;
}

/* Checkboxes drawn the same in light and dark (dark mode's native ones look
   disabled when unticked). */
.check input[type='checkbox'] {
  appearance: none;
  display: inline-grid;
  place-content: center;
  margin: 0;
  border: 2px solid var(--text-muted);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
}

.check input[type='checkbox']:checked,
.check input[type='checkbox']:indeterminate {
  border-color: var(--accent);
  background: var(--accent);
}

.check input[type='checkbox']:checked::after {
  content: '';
  width: 6px;
  height: 11px;
  border: solid var(--on-accent);
  border-width: 0 2.5px 2.5px 0;
  transform: translateY(-1px) rotate(45deg);
}

.check input[type='checkbox']:indeterminate::after {
  content: '';
  width: 10px;
  height: 2.5px;
  background: var(--on-accent);
}

.check input[type='checkbox']:disabled {
  opacity: 0.5;
  cursor: default;
}

/* A clear ring around whatever has keyboard focus. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

select:disabled {
  opacity: 0.5;
}

.segmented[hidden] {
  display: none;
}

/* Bigger tap targets in the top bar on touch screens. */
@media (pointer: coarse) {
  .topbar > .btn.small,
  .status-pill > button {
    min-height: 44px;
    min-width: 44px;
  }

  .status-pill {
    min-height: 44px;
    border-radius: 22px;
  }

  .segmented button {
    min-height: 44px;
  }
}

/* Next-5-weeks month view: a line marks the start of each month. */
.month-cell.first-of-month {
  box-shadow: inset 0 3px 0 var(--accent);
}

.family-welcome {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
}

.family-welcome[hidden] {
  display: none;
}

/* Tap to enlarge */
.agenda,
.list-panel {
  position: relative;
}

.more-count {
  color: var(--accent-text);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}

.more-count[hidden] {
  display: none;
}

/* A soft fade where the list is cut off. */
.agenda.has-more .agenda-list,
.list-panel.has-more .list-items {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  scrollbar-width: none;
}

.agenda.has-more .agenda-list::-webkit-scrollbar,
.list-panel.has-more .list-items::-webkit-scrollbar {
  display: none;
}

.agenda .panel-title,
.list-panel .panel-title {
  user-select: none;
}

.event-dialog.expand-dialog {
  width: min(560px, calc(100vw - 32px));
}

.expand-body {
  max-height: 60dvh;
  margin: 6px 0 10px;
  overflow-y: auto;
}

.expand-body .list-items,
.expand-body .list-item {
  list-style: none;
}

.expand-dialog .list-add {
  display: flex;
  gap: 8px;
}

.expand-dialog .list-add input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  color: inherit;
  background: var(--surface);
}

.expand-dialog .list-add[hidden] {
  display: none;
}

/* The top-bar buttons are icons only (their names are in tooltips and for screen readers). */
.topbar .btn-label {
  display: none;
}

.topbar > .btn.small {
  min-width: 40px;
  padding: 0 10px;
  font-size: 1.05rem;
}

/* Icons (Lucide, from the sprite in index.html) */
.icon {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.22em;
}

button > .icon:only-child {
  vertical-align: middle;
}

.icon.lock-mark {
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.2em;
  vertical-align: -0.12em;
  opacity: 0.8;
}

.avatar .icon {
  width: 60%;
  height: 60%;
  stroke-width: 2.5;
  vertical-align: baseline;
}

.avatar-btn::after {
  background: var(--surface) var(--pal) center / 12px no-repeat;
}

.phone-tab-icon .icon {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}

.toast-icon .icon,
.inbox-icon .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.weather-btn .icon,
.countdown .icon {
  vertical-align: -0.25em;
}

.big-emoji .icon {
  width: 3rem;
  height: 3rem;
  stroke-width: 1.6;
}

.h-emoji .icon,
.d-emoji .icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke-width: 1.8;
}

.tidy-result-emoji .icon {
  width: 4rem;
  height: 4rem;
  stroke-width: 1.5;
}

.settings-tabs button .icon {
  margin-right: 0.15em;
}

.inbox-count {
  vertical-align: top;
}

/* Events that span several days: one bar across them */
.month-grid.weeks {
  display: flex;
  flex-direction: column;
  grid-auto-rows: auto;
}

.month-week {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  flex: 1 1 0;
  min-height: 0;
}

.month-week .cell-events {
  margin-top: calc(var(--cell-lanes, 0) * 22px);
}

.span-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.span-bar {
  position: absolute;
  height: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--dot, var(--accent)) 22%, var(--surface));
  box-shadow: inset 4px 0 0 var(--dot, var(--accent));
  padding-left: 11px;
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 20px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  pointer-events: auto;
}

.span-bar.school {
  --dot: var(--school);
}

.span-bar .chip-time {
  color: var(--text-muted);
  font-weight: 500;
}

.span-bar.carries-in {
  left: 0 !important;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: none;
  padding-left: 14px;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
}

.span-bar.carries-on {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
}

.span-bar.carries-in.carries-on {
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}

/* Week view: the bars sit in the all-day row, right of the hours gutter. */
.tg-allday {
  position: relative;
}

.tg-span-layer {
  left: 56px;
  right: 0;
  bottom: auto;
}

.tg-allday-cell {
  padding-top: calc(3px + var(--lanes, 0) * 22px);
}

/* Holidays: a tinted day (a few key ones also get an illustration). */
.month-cell.holiday-day {
  background: color-mix(in srgb, var(--holiday, #d97706) 11%, var(--surface));
}

.month-cell.holiday-day.other-month {
  background: color-mix(in srgb, var(--holiday, #d97706) 6%, var(--surface-muted));
}

.month-cell {
  position: relative;
}

/* Settings → Holidays */
.holiday-group {
  margin-bottom: 14px;
}

.holiday-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.holiday-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.holiday-row.off .holiday-name,
.holiday-row.off .holiday-date {
  color: var(--text-muted);
  text-decoration: line-through;
}

.holiday-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.holiday-show {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  font-weight: 600;
}

.holiday-icon {
  display: inline-grid;
  color: var(--accent-text);
}

.holiday-date {
  flex: 0 1 190px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.holiday-count {
  margin: 0;
  font-size: 0.85rem;
}

.holiday-about {
  margin: 6px 0 2px 34px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.holiday-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.holiday-add input[type='text'],
.holiday-add input[type='date'],
.holiday-add select {
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  color: inherit;
  background: var(--surface);
}

.holiday-add input[type='text'] {
  flex: 1 1 180px;
  min-width: 0;
}

.icon-btn.small {
  width: 34px;
  height: 34px;
}

.hidden-event {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* Files kept with an event */
.file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.file-list:empty {
  display: none;
}

.file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.file-name {
  flex: 1;
  min-width: 0;
}

.event-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.event-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-muted);
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
}

.event-file.photo img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
}

.event-file.pdf {
  padding: 10px 14px;
  font-weight: 600;
}

.event-files[hidden],
.import-keep[hidden] {
  display: none;
}

.import-keep {
  margin: 4px 0;
}

.clip-mark {
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.3em;
  vertical-align: -0.1em;
  opacity: 0.7;
}

.event-dialog.file-dialog {
  width: min(900px, calc(100vw - 24px));
}

.file-view {
  max-height: 78dvh;
  overflow: auto;
  text-align: center;
}

.file-image {
  max-width: 100%;
  max-height: 74dvh;
  border-radius: 8px;
}

.file-frame {
  width: 100%;
  height: 74dvh;
  border: 0;
  border-radius: 8px;
}

.file-btn .icon {
  margin-right: 0.3em;
}

/* Routines (see below for the board) */
.routine-count {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.routine-leave,
.routine-leave-line {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.routine-leave-line {
  margin: 2px 0 0;
  font-size: 1.15rem;
}

.routine-leave.soon,
.routine-leave-line.soon,
.leave-btn.soon {
  color: var(--warm-text);
}

.routine-leave.urgent,
.routine-leave-line.urgent,
.routine-leave.late,
.routine-leave-line.late {
  color: var(--danger, #dc2626);
}

.routine-leave.ready,
.routine-leave-line.ready {
  color: var(--ok);
}

.leave-btn {
  margin-left: auto;
  min-height: 40px;
  max-width: 40vw;
  padding: 0 16px;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: var(--surface-muted);
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.leave-btn[hidden] {
  display: none;
}

.leave-btn + .countdown {
  margin-left: 12px;
}

.leave-btn.soon {
  border-color: var(--warm-border);
  background: linear-gradient(90deg, var(--warm-bg), var(--warm-bg-2));
}

.leave-btn.urgent,
.leave-btn.late {
  border-color: var(--danger, #dc2626);
  background: color-mix(in srgb, var(--danger, #dc2626) 14%, var(--surface));
  color: var(--danger, #dc2626);
}

.leave-btn.late {
  animation: leave-pulse 1s ease-in-out infinite;
}

.leave-btn.ready {
  border-color: var(--ok);
  background: var(--school-soft);
  color: var(--ok);
}

@keyframes leave-pulse {
  50% {
    transform: scale(1.04);
  }
}

.routine-edit {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.routine-edit-times {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.routine-edit-steps {
  display: grid;
  gap: 8px;
}

.no-school-row {
  margin: 8px 0 12px;
}

@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
  .leave-btn {
    max-width: none;
    margin-left: 0;
    flex: 1 1 100%;
  }

}

/* The saying of the day, above the agenda, and the family rules */
.rules-dialog {
  width: min(560px, calc(100vw - 32px));
}

.rules-quote {
  margin: 8px 0 16px;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.rules-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rules-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-muted);
  font-size: 1.1rem;
  font-weight: 700;
}

.rules-list .icon {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--accent);
}

/* Moods: a kid's check-in (private), and the parents' history */
.mood-open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tap);
  margin: 0 0 4px;
  padding: 0 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface-muted);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.mood-open.done {
  border-color: var(--ok);
  color: var(--ok);
}

.mood-dialog {
  width: min(640px, calc(100vw - 24px));
}

.mood-faces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.mood-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 104px;
  padding: 8px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}

.mood-face .icon {
  width: 44px;
  height: 44px;
}

.mood-happy .icon,
.mood-excited .icon {
  color: #d97706;
}

.mood-calm .icon {
  color: #0f8a5f;
}

.mood-tired .icon {
  color: #7c3aed;
}

.mood-worried .icon {
  color: #2563eb;
}

.mood-sad .icon {
  color: #4f46e5;
}

.mood-angry .icon {
  color: #dc2626;
}

.mood-tips {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding-left: 22px;
  font-size: 1.05rem;
}

.mood-calm {
  text-align: center;
}

.mood-breath {
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
  margin: 16px auto;
  border-radius: 50%;
  background: var(--accent-soft, #dbeafe);
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 800;
  transform: scale(0.6);
  transition: transform 4s ease-in-out;
}

.mood-breath.in {
  transform: scale(1);
}

.mood-breath.out {
  transform: scale(0.6);
}

.mood-breath:not(.in):not(.out) {
  transform: scale(0.8);
}

.mood-kid {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-left: 5px solid var(--person);
  border-radius: 12px;
}

.mood-kid-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.mood-kid-head .avatar {
  width: 32px;
  height: 32px;
}

.mood-grid {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 4px;
}

.mood-day {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.mood-day-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

.mood-dot {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 34px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border);
}

button.mood-dot {
  cursor: pointer;
}

.mood-dot .icon {
  width: 70%;
  height: 70%;
}

.mood-dot.empty {
  background: var(--surface-muted);
  border: 1px dashed var(--border);
}

.mood-dot.good {
  background: var(--school-soft);
  color: var(--ok);
}

.mood-dot.low {
  background: #ede9fe;
  color: #6d28d9;
}

.mood-dot.hard {
  background: #fee2e2;
  color: #b91c1c;
}

.mood-detail {
  margin: 8px 0 0;
  min-height: 1.4em;
}

@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
  .mood-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    row-gap: 8px;
  }
}

a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}

/* Illustrations (public/art.js): in a day's corner and beside the month's title */
.cell-art {
  position: absolute;
  top: 3px;
  right: 4px;
  width: 30px;
  height: 30px;
  pointer-events: none;
}

.cell-art svg,
.title-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.title-art {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-left: 10px;
  vertical-align: -9px;
}


/* ---------- Buttons in Settings: one set ----------
   Primary (filled): Save, Done. Secondary (outlined): + Add, Export.
   Quiet (text): Revert, Cancel. Destructive (red). Icon: a square.
   All 44px tall; nothing is a different size from its neighbours. */
.settings-panels .btn,
.settings-panels .btn.small {
  min-height: var(--tap);
  padding: 0 16px;
  font-size: 0.95rem;
}

.settings-panels .btn.icon {
  width: var(--tap);
  padding: 0;
}

.btn.quiet {
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
}

.btn.danger {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}

.btn:disabled {
  opacity: 1;
  background: var(--surface-muted);
  border-color: var(--surface-muted);
  color: var(--text-muted);
}

.btn.primary:disabled {
  background: var(--surface-muted);
  border-color: var(--surface-muted);
  color: var(--text-muted);
}

.settings-panels input[type='text'],
.settings-panels input[type='time'],
.settings-panels input[type='date'],
.settings-panels select {
  min-height: var(--tap);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
  font: inherit;
}

/* The save bar: sticky at the bottom of a settings form */
.save-bar {
  position: sticky;
  bottom: calc(-1 * var(--pad-b));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px calc(-1 * var(--pad-x)) calc(-1 * var(--pad-b));
  padding: 12px var(--pad-x) calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.save-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.save-bar[data-state='dirty'] .save-status {
  color: var(--warn);
  font-weight: 700;
}

.save-bar[data-state='saved'] .save-status {
  color: var(--ok);
  font-weight: 700;
}

.save-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--warn);
}

.save-bar[data-state='saved'] .btn[data-save] {
  background: var(--school-soft);
  border-color: var(--ok);
  color: var(--ok);
}

/* Rows you can drag: a grip, the fields, then the trash */
.edit-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  background: var(--surface);
  border-radius: 12px;
}

.edit-row.no-icon {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.edit-row.no-grip {
  grid-template-columns: minmax(0, 1fr) auto;
}

.edit-row > input {
  min-width: 0;
}

.grip {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.grip:focus-visible {
  outline: 2px solid var(--accent);
}

.grip:active {
  cursor: grabbing;
}

.sort-shifting {
  transition: transform 0.18s ease;
}

.sort-lifted {
  position: relative;
  z-index: 5;
  transform-origin: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  outline: 2px solid var(--accent);
  transition: box-shadow 0.15s;
}

.routine-edit > .edit-row {
  margin-bottom: 0;
}

/* Choosing an icon from a grid */
.icon-picker {
  position: relative;
}

.icon-picker .icon-pick .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.icon-grid {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(6, 44px);
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.icon-grid[hidden] {
  display: none;
}

.icon-opt {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.icon-opt .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.icon-opt:hover,
.icon-opt.on {
  background: var(--accent-soft);
  border-color: var(--accent);
}

@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
  .icon-grid {
    grid-template-columns: repeat(5, 44px);
    right: auto;
    left: -140px;
  }
}

/* ---------- The kids' board: chores and points, routines, the saying ---------- */
.bottom {
  grid-template-columns: minmax(0, 1fr);
}

:root[data-layout='portrait'] .bottom {
  grid-template-columns: minmax(0, 1fr);
}

.bottom .panel {
  min-height: 0;
}

.kids-board {
  display: grid;
  grid-template-columns: minmax(200px, 0.7fr) minmax(0, 2.6fr);
  gap: 12px;
  align-items: stretch;
}

.kids-board:not(:has(.quote-card)) {
  grid-template-columns: minmax(0, 1fr);
}

.kid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  align-content: start;
}

.quote-card {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px 16px;
  border: 1px solid var(--warm-border);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--warm-bg), var(--warm-bg-2));
  color: var(--warm-text);
}

.quote-title {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.quote-text {
  font-size: 1.35rem;
  line-height: 1.25;
}

.quote-card .link-btn {
  justify-self: start;
  color: inherit;
  text-decoration: underline;
}

.kid-card {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-top: 6px solid var(--person);
  border-radius: 14px;
  background: var(--surface-muted);
}

.kid-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.kid-card-head .avatar {
  width: 40px;
  height: 40px;
}

.kid-card-name {
  display: grid;
  min-width: 0;
  margin-right: auto;
  font-size: 1.15rem;
}

.kid-card-name small {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.kid-card .kid-points {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.kid-card .kid-points small {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.kid-done-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--ok);
  border-radius: 999px;
  background: var(--school-soft);
  color: var(--ok);
  font-size: 0.85rem;
  font-weight: 700;
}

.flame {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #d97706;
  font-weight: 800;
}

.mood-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}

.mood-btn.checked {
  border-color: var(--ok);
  color: var(--ok);
}

.kid-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chore-chip,
.step-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.chore-chip .chore-state {
  color: var(--accent-text);
  font-weight: 800;
}

.chore-chip.pending {
  border-color: var(--warm-border);
  background: var(--warm-bg);
  color: var(--warn);
}

.chore-chip.approved,
.step-chip.on {
  border-color: var(--ok);
  background: var(--school-soft);
  color: var(--ok);
}

.chore-chip.approved {
  cursor: default;
}

.chore-chip.confirm {
  border-color: var(--danger);
  background: var(--danger);
  color: var(--on-accent);
}

.chore-chip.confirm .chore-state {
  color: inherit;
}

.step-chip .icon,
.chore-chip .icon {
  width: 1rem;
  height: 1rem;
}

.kid-routine {
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.kid-routine-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.kid-routine-head .routine-count {
  margin-left: auto;
}

/* Together: the tidy-up streak and timer in one strip */
.together-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 10px 16px;
}

.together-panel .panel-title {
  margin: 0;
}

.together-panel .streak-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.together-panel .tidy-panel-btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 280px;
  margin-left: auto;
}

/* The morning: the routine board takes the side column */
.routines-board {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
}

.routines-board[hidden] {
  display: none;
}

.dashboard.routine-live .chores-panel {
  display: none;
}

/* The side column is out of the way during a routine; a list brought up over it stays. */
.dashboard.routine-live .side {
  display: contents;
}

.dashboard.routine-live .side > :not(.routine-popup) {
  display: none;
}

.routine-card {
  display: grid;
  gap: 10px;
}

.routine-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.2rem;
}

.routine-card-head .icon {
  width: 24px;
  height: 24px;
}

.routine-cols {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 12px;
}

.routine-col {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 2px solid var(--border);
  border-top: 6px solid var(--person);
  border-radius: 14px;
}

.routine-col.done {
  border-color: var(--ok);
  border-top-color: var(--ok);
}

.routine-col-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.routine-col-head .mood-btn {
  margin-left: auto;
}

.routine-col-name {
  display: grid;
  min-width: 0;
  font-size: 1.15rem;
}

.routine-col-name small {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.ring {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--border) 0);
}

.ring b {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface);
  font-size: 0.85rem;
}

.routine-done {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--school-soft);
  color: var(--ok);
  font-weight: 800;
}

.routine-steps {
  display: grid;
  gap: 8px;
}

.routine-step {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 6px 12px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.routine-step .icon {
  flex: none;
  width: 28px;
  height: 28px;
}

.routine-step[aria-pressed='true'] {
  border-color: var(--ok);
  background: var(--school-soft);
  color: var(--ok);
}

.routine-step[aria-pressed='true'] .routine-step-label {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
  .kids-board {
    grid-template-columns: minmax(0, 1fr);
  }

  .kid-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .routines-board {
    order: -1;
  }

  .routine-cols {
    gap: 8px;
  }

  .routine-col {
    padding: 6px;
  }

  .routine-step {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 74px;
    font-size: 0.95rem;
    text-align: center;
  }

  .together-panel .tidy-panel-btn {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .routine-card-head .routine-leave {
    display: none; /* the top bar already says it */
  }

  .routine-col-head {
    gap: 6px;
  }

  .routine-col-name strong {
    white-space: nowrap;
  }

  .ring {
    width: 44px;
    height: 44px;
  }

  .ring b {
    width: 34px;
    height: 34px;
    font-size: 0.75rem;
  }
}

/* ---------- Settings, cleaned up (the wall display is untouched) ---------- */
.settings-dialog {
  border-radius: 22px;
}

.settings-tabs {
  gap: 14px;
  padding: 14px;
}

.settings-group {
  display: grid;
  gap: 2px;
}

.settings-group[hidden] {
  display: none;
}

.settings-group-title {
  margin: 0;
  padding: 6px 12px;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.settings-tabs button {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-tabs button[aria-selected='true'] {
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.14);
  color: var(--accent);
}

.settings-panel-title {
  font-size: 1.4rem;
}

/* Switches instead of checkboxes */
.settings-panels input[type='checkbox'] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  margin: 0;
  border: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--text-muted) 40%, var(--surface));
  cursor: pointer;
  transition: background 0.15s;
}

.settings-panels input[type='checkbox']::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.3);
  transition: left 0.15s;
}

.settings-panels input[type='checkbox']:checked {
  background: var(--accent);
}

.settings-panels input[type='checkbox']:checked::after {
  left: 21px;
}

.settings-panels input[type='checkbox']:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.settings-panels input[type='checkbox']:disabled {
  opacity: 0.5;
}

.settings-panels .check {
  align-items: center;
  gap: 12px;
}

/* A setting with a name, a line saying what it does, and a switch on the right */
.setting-row {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.setting-row > span {
  display: grid;
  flex: 1;
  min-width: 0;
}

.setting-row b {
  font-weight: 600;
}

.setting-row small,
.field-help {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 400;
}

.field-help {
  display: block;
  margin-top: 6px;
}

/* Choices as cards and as a segmented control, instead of radio buttons */
.opt-cards {
  display: grid;
  gap: 10px;
}

.opt-cards.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.opt-cards.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.opt-card {
  position: relative;
  display: grid;
  gap: 4px;
  justify-items: start;
  align-content: start;
  padding: 10px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
}

.opt-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.opt-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.opt-card:has(input:checked)::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
}

.opt-card:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.opt-card b {
  margin-top: 4px;
  font-size: 0.95rem;
}

.opt-card small {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.25;
}

.opt-thumb {
  display: block;
  width: 84px;
  height: 54px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: #f0f2f7;
  background-repeat: no-repeat;
}

.opt-thumb.t-auto {
  background: linear-gradient(135deg, #fff 50%, #1b2230 50%);
}

.opt-thumb.t-light {
  background: linear-gradient(90deg, #dde2ec 0 28%, #fff 28%);
}

.opt-thumb.t-dark {
  background: linear-gradient(90deg, #344054 0 28%, #1b2230 28%);
}

.opt-thumb.t-night {
  background: linear-gradient(90deg, #fff 50%, #1b2230 50%);
}

.opt-thumb.l-land,
.opt-thumb.l-auto {
  background:
    linear-gradient(#c7cfdf, #c7cfdf) 4px 4px / 52px 28px no-repeat,
    linear-gradient(#c7cfdf, #c7cfdf) 60px 4px / 20px 28px no-repeat,
    linear-gradient(#c7cfdf, #c7cfdf) 4px 36px / 76px 12px no-repeat,
    #f0f2f7;
}

.opt-thumb.l-auto {
  border-style: dashed;
}

.opt-thumb.l-port {
  width: 40px;
  background:
    linear-gradient(#c7cfdf, #c7cfdf) 4px 4px / 32px 24px no-repeat,
    linear-gradient(#c7cfdf, #c7cfdf) 4px 32px / 32px 9px no-repeat,
    linear-gradient(#c7cfdf, #c7cfdf) 4px 44px / 32px 6px no-repeat,
    #f0f2f7;
}

.seg-group {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text-muted) 16%, var(--surface));
}

.seg-opt {
  position: relative;
  cursor: pointer;
}

.seg-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.seg-opt span {
  display: block;
  padding: 9px 16px;
  border-radius: 9px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.seg-opt:has(input:checked) span {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.16);
}

.seg-opt:has(input:focus-visible) span {
  outline: 2px solid var(--accent);
}

/* ---------- Routines in Settings: summary cards, then an editor ---------- */
.rcards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.rcard {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 4px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 6px 16px rgba(16, 24, 40, 0.06);
}

.rcard.paused .tile,
.rcard.paused .rmain {
  opacity: 0.55;
}

.tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
}

.tile .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.rmain {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rmain b {
  font-size: 1.05rem;
}

.rmain small {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.rmeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 6px;
}

.rmeta .steps {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.kidsx {
  display: inline-flex;
}

.kidsx .avatar {
  width: 26px;
  height: 26px;
  margin-right: -6px;
  border: 2px solid var(--surface);
  font-size: 0.75rem;
}

.day-dots {
  display: inline-flex;
  gap: 4px;
}

.day-dots i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-muted) 16%, var(--surface));
  color: var(--text-muted);
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 700;
}

.day-dots i.on {
  background: var(--accent);
  color: var(--on-accent);
}

.redit {
  display: grid;
  gap: 18px;
  margin-bottom: 14px;
}

.redit .back {
  justify-self: start;
  padding-left: 6px;
}

.redit-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.redit-head .icon-pick {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
}

.redit-name {
  flex: 1;
  min-width: 0;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
}

.redit-sec {
  display: grid;
  gap: 10px;
}

.redit-sec h4 {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.tm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tm {
  display: grid;
  gap: 2px;
  min-width: 140px;
  padding: 8px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text-muted) 12%, var(--surface));
}

.tm small {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.tm input[type='time'] {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

.tm.acc {
  background: var(--accent-soft);
}

.timeline {
  margin-top: 4px;
}

.tl-bar {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--text-muted) 16%, var(--surface));
}

.tl-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 35%, var(--surface));
}

.tl-bar b {
  position: absolute;
  top: -5px;
  width: 4px;
  height: 20px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--accent);
}

.tl-keys {
  display: flex;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.tl-keys .tl-end {
  margin-left: auto;
}

.day-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.day-btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-muted) 16%, var(--surface));
  color: var(--text-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.day-btn[aria-pressed='true'] {
  background: var(--accent);
  color: var(--on-accent);
}

@media (max-width: 700px) {
  .settings-group {
    gap: 6px;
  }

  .settings-group-title {
    padding: 10px 4px 2px;
  }

  .settings-tabs button[aria-selected='true'] {
    background: var(--surface);
    box-shadow: none;
    color: inherit;
  }

  .opt-cards.four,
  .opt-cards.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The older checkbox look (.check) is replaced by the switch in Settings. */
.settings-panels .check input[type='checkbox'] {
  display: block;
  place-content: normal;
  width: 46px;
  height: 28px;
  border: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--text-muted) 40%, var(--surface));
}

.settings-panels .check input[type='checkbox']:checked {
  border: 0;
  background: var(--accent);
}

.settings-panels .check input[type='checkbox']::after,
.settings-panels .check input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.3);
  transform: none;
}

.settings-panels .check input[type='checkbox']:checked::after {
  left: 21px;
}

.tl-keys span {
  white-space: nowrap;
}

.tl-mark {
  position: relative;
  height: 20px;
  margin-top: 2px;
}

.tl-mark span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .rcard > .btn.icon {
    display: none; /* the whole card opens the editor */
  }
}

/* ---------- Notes: write on the note itself; it lands as a sticky note ---------- */
.note-dialog {
  width: min(560px, calc(100vw - 24px));
}

.note-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 1.15rem;
}

.note-hint {
  flex: 1;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.note-paper,
.note-card {
  --paper: #fff0a8;
  --paper-edge: #ecd76a;
  --paper-ink: #3d3300;
  --paper-sub: #6b5d12;
}

.note-paper[data-color='green'],
.note-card[data-color='green'] {
  --paper: #d6f0e0;
  --paper-edge: #9fd3b5;
  --paper-ink: #0f3a25;
  --paper-sub: #2f6a4a;
}

.note-paper[data-color='blue'],
.note-card[data-color='blue'] {
  --paper: #dbe8ff;
  --paper-edge: #a9c4f5;
  --paper-ink: #12306b;
  --paper-sub: #3b5a9b;
}

.note-paper[data-color='grey'],
.note-card[data-color='grey'] {
  --paper: #e4e6ea;
  --paper-edge: #b5bac4;
  --paper-ink: #1f2430;
  --paper-sub: #4a5160;
}

.note-paper[data-color='pink'],
.note-card[data-color='pink'] {
  --paper: #ffe0ea;
  --paper-edge: #f3aac0;
  --paper-ink: #5c1230;
  --paper-sub: #96405f;
}

.note-paper {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--paper-edge);
}

.note-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.note-to {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.note-to small {
  color: var(--paper-sub);
  font-weight: 700;
}

.note-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 3px 12px 3px 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.1);
  color: var(--paper-ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.note-chip:first-of-type {
  padding-left: 12px;
}

.note-chip .avatar {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
}

.note-chip[aria-pressed='true'] {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--accent);
  color: var(--accent-text);
}

.note-colors {
  display: flex;
  gap: 8px;
  padding-top: 6px;
}

.note-dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  cursor: pointer;
}

.note-dot[data-color='yellow'] {
  background: #fff0a8;
}

.note-dot[data-color='green'] {
  background: #d6f0e0;
}

.note-dot[data-color='blue'] {
  background: #dbe8ff;
}

.note-dot[data-color='pink'] {
  background: #ffe0ea;
}

.note-dot[aria-checked='true'] {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--paper-ink);
}

.note-dialog textarea {
  width: 100%;
  min-height: 130px;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: var(--paper-ink);
  font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive, system-ui;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.3;
  resize: none;
}

.note-dialog textarea:focus {
  outline: 0;
}

.note-dialog textarea::placeholder {
  color: var(--paper-sub);
  opacity: 0.6;
}

.note-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
}

.from-wrap {
  position: relative;
}

.from-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 3px 12px 3px 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--paper-ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.from-pill:not(:has(.avatar)) {
  padding-left: 12px;
}

.from-pill .avatar {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
}

.from-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 5;
  display: grid;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.from-menu[hidden] {
  display: none;
}

.from-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.from-menu button[aria-selected='true'] {
  background: var(--accent-soft);
  color: var(--accent);
}

.from-menu .avatar {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
}

.note-count {
  margin-left: auto;
  color: var(--paper-sub);
  font-size: 0.8rem;
}

.btn.round {
  width: 46px;
  padding: 0;
  border-radius: 50%;
}

/* On the wall: a sticky note, tilted a little, with tape */
.note-card {
  position: relative;
  padding: 30px 28px 22px;
  border: 0;
  border-radius: 4px;
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 14px 30px rgba(16, 24, 40, 0.3);
  font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive, system-ui;
}

.note-card.tilt-a {
  transform: rotate(-1.2deg);
}

.note-card.tilt-b {
  transform: rotate(1.2deg);
}

.note-tape {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 96px;
  height: 24px;
  margin-left: -48px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.note-card .note-for {
  color: var(--paper-sub);
  font-family: system-ui, sans-serif;
}

.note-card .note-text {
  color: var(--paper-ink);
}

.note-card .note-meta {
  color: var(--paper-sub);
  font-family: system-ui, sans-serif;
}

.note-card .btn.gotit {
  min-height: 48px;
  border: 0;
  background: #fff;
  color: var(--paper-ink);
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.notes-list {
  gap: 30px;
  padding: 18px 10px;
}

/* Month cells: a holiday's name sits beside the date number, so it takes no
   line from the day's events. A longer holiday gets a tinted header strip on
   each of its days (not a tinted cell), with "begins" and "ends" on the ends. */
.cell-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.cell-head.has-art {
  padding-right: 32px;
}

.cell-head .day-num {
  flex: none;
}

.holiday-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--holiday, #d97706) 62%, var(--text));
}

.month-cell.holiday-strip .cell-head {
  margin: -4px -4px 0;
  padding: 4px 4px 0;
  background: color-mix(in srgb, var(--holiday, #d97706) 16%, var(--surface));
}

.month-cell.holiday-strip .cell-head.has-art {
  padding-right: 36px;
}

.month-cell.holiday-strip.other-month .cell-head {
  background: color-mix(in srgb, var(--holiday, #d97706) 10%, var(--surface-muted));
}

.month-cell.holiday-strip .cell-head .day-num {
  margin-bottom: 4px;
}

.month-grid.weeks .month-cell .cell-head + .cell-events {
  margin-top: 0;
}

/* Bin days: pick-ups drawn as a small bin at the bottom right of a day. */
.cell-bins {
  position: absolute;
  right: 5px;
  bottom: 4px;
  display: inline-flex;
  gap: 2px;
  pointer-events: none;
}

.bin-icon {
  display: block;
  width: 20px;
  height: 24px;
}

.bin-icon svg,
.bin-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.bin-mark {
  display: inline-block;
  vertical-align: -3px;
  width: 14px;
  height: 17px;
  margin-right: 4px;
}

.month-grid.phone .month-cell {
  position: relative;
}

.month-grid.phone .bin-icon {
  width: 12px;
  height: 14px;
}

.month-grid.phone .cell-bins {
  right: 2px;
  bottom: 2px;
}

/* Settings → Bin days */
.bin-rule {
  display: grid;
  grid-template-columns: 28px 1fr minmax(0, 220px);
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.bin-rule-body {
  display: grid;
  gap: 2px;
}

.bin-rule-body small,
.bin-switch small {
  display: block;
  color: var(--text-muted);
}

.bin-switch {
  justify-content: space-between;
}

@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
  .bin-rule {
    grid-template-columns: 28px 1fr;
  }

  .bin-rule input {
    grid-column: 1 / -1;
  }
}

/* Room for the bin so it never covers the end of an event's name. */
.month-cell.has-bins .cell-events {
  padding-right: 24px;
}

.bin-marks {
  display: inline-flex;
  vertical-align: top;
}

.brand .greeting-icon {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.35em;
  vertical-align: -0.15em;
  color: var(--amber);
}

/* The greeting: the name after "Good morning" is dropped on phones. */
.family-name {
  display: grid;
  gap: 4px;
  max-width: 320px;
  margin-bottom: 14px;
}

@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
  .brand .greeting-tail {
    display: none;
  }
}

/* Family contribution: a strip beside Together. Rings fill as the day goes;
   there are no per-child numbers and no ranking. */
.contribution-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 10px 16px;
}

.contribution-panel[hidden] {
  display: none;
}

.contribution-panel .panel-title {
  margin: 0;
}

.ring {
  --size: 48px;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(var(--ring-color, var(--ok, #12805c)) calc(var(--p) * 1%), var(--border) 0);
  font-size: calc(var(--size) / 4);
  font-weight: 700;
  position: relative;
  isolation: isolate;
}

.ring::before {
  content: '';
  z-index: -1;
  position: absolute;
  inset: calc(var(--size) / 7);
  border-radius: 50%;
  background: var(--surface);
}

.ring {
  color: var(--text);
}

.contribution-kids {
  display: flex;
  align-items: center;
  gap: 18px;
}

.contribution-kid {
  --ring-color: var(--person, var(--accent));
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 2px 8px;
  max-width: 130px;
}

.contribution-kid .ring {
  grid-row: span 2;
}

.contribution-kid .avatar {
  width: 22px;
  height: 22px;
  font-size: 0.75rem;
}

.contribution-kid small {
  color: var(--text-muted);
}

.good-days {
  display: flex;
  align-items: center;
  gap: 8px;
}

.good-days small,
.contribution-note {
  color: var(--text-muted);
}

.good-dots {
  display: inline-flex;
  gap: 5px;
}

.good-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px dashed var(--border);
  box-sizing: border-box;
}

.good-dot.good {
  background: var(--ok, #12805c);
  border: 0;
}

.good-dot.past {
  background: var(--surface-muted);
  border: 1.5px solid var(--border);
}

.good-dot.now {
  border: 2px solid var(--accent);
}

.contribution-note {
  margin-left: auto;
}

/* Giving a well done */
button.contribution-kid {
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  padding: 2px 4px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}

button.contribution-kid:hover {
  background: var(--surface-muted);
}

.award-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 8px 0;
}

.award-type {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.award-type:active {
  background: var(--accent-soft, var(--surface-muted));
}

.award-dialog input[type='text'] {
  width: 100%;
  min-height: var(--tap);
  padding: 0 12px;
  margin-bottom: 8px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.award-today {
  display: grid;
  gap: 6px;
  margin: 8px 0;
}

.award-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.award-row small {
  color: var(--text-muted);
}

/* Settings → Contribution */
.targets {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 6px;
}

.targets .tm input {
  max-width: 90px;
}

.preset-row {
  display: grid;
  grid-template-columns: auto 130px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.mix {
  display: flex;
  height: 24px;
  max-width: 320px;
  border-radius: 8px;
  overflow: hidden;
}

.mix i {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 700;
}

.mix-routine {
  background: #1d4ed8;
}

.mix-chore {
  background: #0f6b4b;
}

.mix-together {
  background: #b45309;
}

.targets .tm {
  display: grid;
  gap: 4px;
}

.targets input {
  min-height: 40px;
  padding: 0 8px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

/* Contribution and Together: two cards in one row on a wide landscape screen,
   stacked on portrait and phones. */
.strips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.strips > .panel {
  flex: 1 1 420px;
  min-width: 0;
}

.strips > .contribution-panel[hidden] {
  display: none;
}

:root[data-layout='portrait'] .strips > .panel {
  flex-basis: 100%;
}

@media (max-width: 900px) {
  .strips > .panel {
    flex-basis: 100%;
  }
}

/* Sick day / missed bus */
.day-body {
  display: grid;
  gap: 12px;
  min-width: min(360px, 80vw);
}

.day-bus {
  display: grid;
  gap: 8px;
}

.day-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.day-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid var(--warm-border);
  background: var(--warm-bg);
  color: var(--warm-text);
  font: inherit;
  font-size: 0.85rem;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* What to wear: under the Get dressed step and in the weather overview */
.routine-dress,
.weather-dress {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.95rem;
}

.weather-dress {
  margin: 10px 0;
}

/* Categories */
.cat-mark {
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.25em;
  vertical-align: -0.1em;
  opacity: 0.8;
}

.cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 8px;
}

.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 3px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

.cat-chip[aria-pressed='true'] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
}

/* Day view: the day before and after beside it, greyed out. Tap a neighbour's
   heading, or swipe, to move there. */
.tg-peeking .tg-head,
.tg-peeking .tg-allday,
.tg-peeking .tg-grid {
  grid-template-columns: 56px minmax(0, 0.5fr) minmax(0, 1.7fr) minmax(0, 0.5fr);
}

.tg-peeking .peek {
  opacity: 0.45;
  filter: grayscale(1);
}

.tg-peeking .tg-col.peek,
.tg-peeking .tg-allday-cell.peek {
  pointer-events: none;
}

@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
  .tg-peeking .tg-head,
  .tg-peeking .tg-allday,
  .tg-peeking .tg-grid {
    grid-template-columns: 40px minmax(0, 0.25fr) minmax(0, 1.8fr) minmax(0, 0.25fr);
  }
}

/* Library books */
.library-dialog {
  width: min(560px, 94vw);
}

.library-alert {
  display: grid;
  gap: 2px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--warm-border);
  background: var(--warm-bg);
  color: var(--warm-text);
  font-weight: 600;
}

.library-list {
  display: grid;
  gap: 12px;
  margin-bottom: 8px;
}

.library-group {
  border: 1px solid var(--border);
  border-left: 4px solid var(--person, var(--accent));
  border-radius: 10px;
  padding: 8px 10px;
  display: grid;
  gap: 4px;
}

.library-group-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.library-book {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
}

.library-book .library-title {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.library-book.returned .library-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.library-book.overdue .library-due {
  color: var(--danger);
  font-weight: 700;
}

.library-return {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
}

.library-return[aria-pressed='true'] {
  color: var(--ok);
  border-color: var(--ok);
}

.library-add {
  display: grid;
  gap: 10px;
}

.inbox-count.late {
  background: var(--danger);
}

/* Settings polish: the title takes focus (no ring on the close button), switches
   and small fields get a full-size tap area, and the dialog's own prompts. */
.settings-head h2:focus {
  outline: none;
}

.settings-panels input[type='checkbox'] {
  position: relative;
}

.settings-panels input[type='checkbox']::before {
  content: '';
  position: absolute;
  inset: -9px -6px;
}

.settings-panels input[type='time'],
.settings-panels input[type='number'] {
  min-height: var(--tap);
}

#discard-dialog {
  width: min(380px, calc(100vw - 24px));
}

/* Settings → Data & backup */
.settings-panel[data-panel='data'] > .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

/* Settings pages while loading, and when they can't load */
.settings-panel[aria-busy='true'] {
  cursor: progress;
}

.panel-state.loading {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.panel-state.error {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--warm-border);
  border-radius: 12px;
  background: var(--warm-bg);
  color: var(--warm-text);
}

.panel-state.error p {
  margin: 0;
}

.settings-panel[data-state='error'] > *:not(.panel-state) {
  display: none;
}

/* The back button is only for phones, on a page of Settings. */
.settings-back {
  display: none;
  flex: none;
}

.settings-head h2 {
  flex: 1;
  min-width: 0;
}

/* Settings → Library: who, which library, and the day */
.library-day-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(150px, auto);
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.library-day-row > span:not(.avatar) {
  display: grid;
}

@media (max-width: 700px) {
  .library-day-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .library-day-row select {
    grid-column: 1 / -1;
  }
}

.settings-group-title[hidden] {
  display: none;
}

/* Settings → Notifications */
.notify-person {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.notify-person-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notify-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.notify-actions:not(:has(button:not([hidden]))) {
  display: none;
}

/* A tap area of at least 44 px around the small colour button (the look doesn't change). */
.avatar-btn::before {
  content: '';
  position: absolute;
  inset: -6px;
}

/* People who ask their device for less motion get none. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Settings → About */
.about-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 18px;
  margin: 12px 0;
}

.about-facts dt {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.about-facts dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Chore and prize rules under each row */
.manage-item {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.manage-item .manage-row {
  margin-bottom: 0;
}

.manage-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 0 0 4px;
}

.manage-days {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.manage-days small {
  margin-right: 4px;
  color: var(--text-muted);
}

.day-chip {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  position: relative;
}

.day-chip::before {
  content: '';
  position: absolute;
  inset: -6px;
}

.day-chip[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* Settings → Family: adding and removing people */
.family-add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.family-add-row .field {
  flex: 1 1 180px;
}

.remove-person {
  color: var(--danger);
}

.remove-person.confirm {
  font-weight: 700;
}

.clear-options {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}

/* ---------- iPhone polish ---------- */

/* No grey flash on tap, no double-tap zoom on controls, and text that doesn't
   resize itself when the phone turns sideways. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button,
a,
summary,
label,
select {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* A phone turned sideways has a notch and a home bar: keep content clear of them. */
.app {
  padding-left: max(var(--gap), env(safe-area-inset-left));
  padding-right: max(var(--gap), env(safe-area-inset-right));
}

@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
  /* Header, two tidy rows:
       greeting, lock, bell, settings
       weather, note, library, the countdown (when there is one) */
  .topbar {
    gap: 8px;
  }

  .brand {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.25rem;
  }

  .status-pill {
    order: 1;
  }

  #inbox-open {
    order: 2;
  }

  #settings-open {
    order: 3;
  }

  #note-open {
    order: 11;
    margin-left: 0;
  }

  #library-btn {
    order: 12;
  }

  .leave-btn {
    order: 13;
  }

  .countdown {
    order: 14;
  }

  /* The category filter is one row you slide sideways, not three rows of chips. */
  .cat-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--gap) * -1);
    padding-inline: var(--gap);
    scrollbar-width: none;
  }

  .cat-filter::-webkit-scrollbar {
    display: none;
  }

  .cat-chip {
    flex: none;
  }

  /* The tab bar is solid, so nothing shows through behind the labels. */
  .phone-tabs {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* A kid's card: name, points and the three small buttons stay on one line. */
  .kid-card-head {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .kid-card-name {
    flex: 1 1 0;
    margin-right: 0;
  }

  .kid-card-name strong {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kid-points {
    flex: none;
    display: grid;
    justify-items: end;
    gap: 2px;
    font-size: 1.4rem;
  }

  .kid-card-head .mood-btn {
    flex: none;
    width: 40px;
    height: 40px;
  }

  .quote-text {
    font-size: 1.1rem;
  }

  .quote-card {
    padding: 10px 14px;
  }

  /* "all day" stays on one line in the day and week grids. */
  .tg-allday-label {
    white-space: nowrap;
    font-size: 0.7rem;
  }

  /* iOS zooms the page in when you tap a field with text under 16px. */
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}

/* A phone turned sideways uses the phone layout too (it is short, not narrow),
   with the header on one line and slimmer tabs. */
@media (max-height: 500px) and (orientation: landscape) {
  .topbar-break {
    display: none;
  }

  .brand {
    flex: 0 1 auto;
  }

  .countdown {
    flex: 0 1 auto;
    max-width: 26%;
  }


  .app {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }

  .app[data-phone-tab='calendar'] {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .phone-tabs {
    padding-top: 4px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
  }

  .phone-tabs button {
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
  }

  #cal-add {
    bottom: calc(60px + env(safe-area-inset-bottom));
  }
}

/* Settings → Categories: icon, name and remove on one line */
.category-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.category-row input {
  min-width: 0;
  width: 100%;
}

.library-day-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.library-day-controls select {
  flex: 1 1 140px;
  min-width: 0;
}

.library-day-controls .tm {
  flex: 1 1 140px;
}

/* Settings → Library, one block per child and library: who, then the controls under it */
.library-day-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.library-day-row .library-day-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.library-day-row .library-day-controls select,
.library-day-row .library-day-controls .tm {
  flex: none;
  width: 100%;
  min-width: 0;
}

.library-day-row .library-day-controls .tm input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ---------- On-screen keyboard (keyboard.js) ---------- */
/* A card that rises over the bottom of the screen. The page behind is never resized. */
.osk {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(760px, 100vw);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 10px max(10px, env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 28px rgba(16, 24, 40, 0.22);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.osk[hidden] {
  display: none;
}
.osk.float {
  left: 0;
  transform: none;
  width: min(620px, 92vw);
  border-bottom: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.32);
  padding-top: 18px;
}
.osk-bar,
.osk-row {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.osk-row .osk-key:not(.fn):not(.space):not(.go) {
  max-width: 64px;
}
.osk-handle {
  display: none;
}
.osk.float .osk-handle {
  display: block;
  position: absolute;
  top: 5px;
  left: 50%;
  width: 56px;
  height: 6px;
  margin-left: -28px;
  border-radius: 9px;
  background: var(--border);
  cursor: grab;
}
.osk.float .osk-handle::before {
  content: '';
  position: absolute;
  inset: -10px -30px;
}
.osk-peek {
  display: flex;
  flex-direction: column;
  padding: 6px 12px;
  background: var(--surface-muted, var(--bg));
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-size: 1.1rem;
  overflow: hidden;
}
.osk-peek[hidden] {
  display: none;
}
.osk-peek small {
  color: var(--text-muted);
}
.osk-peek span {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.osk-key,
.osk-sug {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  padding: 0 4px;
  font: inherit;
  font-size: 1.15rem;
  color: var(--text);
  background: var(--surface-muted, var(--surface));
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
  cursor: pointer;
}
.osk-key:active,
.osk-sug:active:not(:disabled) {
  background: var(--accent-soft, var(--border));
}
.osk-key.fn {
  flex: 1.4 1 0;
  font-size: 0.95rem;
  background: var(--border);
}
.osk-key.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.osk-key.space {
  flex: 5 1 0;
}
.osk-key.go {
  flex: 2 1 0;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}
.osk-sug {
  min-height: 38px;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.osk-sug:disabled {
  visibility: hidden;
}
.osk-bar .osk-key {
  flex: 0 0 52px;
  min-height: 38px;
}
.osk-emoji {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
.osk-key.emo {
  font-size: 1.4rem;
}
.osk-tabs .osk-key {
  min-height: 38px;
}
.osk-tabs .osk-key.on {
  background: var(--accent-soft, var(--border));
  color: inherit;
  border-color: var(--accent);
}

/* ---------- One card for chores, points and the family ---------- */
/* Landscape: the side column (today's thought, agenda, lists) runs the full
   height; the calendar and this card share the left column. */
.quote-slot:empty {
  display: none;
}

.bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  min-width: 0;
}

.bottom .panel {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Contribution and Together become one strip at the foot of the card. */
.bottom .strips {
  align-items: center;
  gap: 10px 24px;
  padding: 10px 14px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.bottom .strips > .panel {
  flex: 1 1 360px;
}

.bottom .strips .together-panel .tidy-panel-btn {
  min-width: 240px;
}

/* Keep the strip to a line or two: smaller rings, no "so far today" note. */
.bottom .strips .contribution-panel,
.bottom .strips .together-panel {
  flex-wrap: wrap;
  gap: 10px 14px;
}

.bottom .strips .contribution-main .ring {
  --size: 44px !important;
  font-size: 0.7rem;
}

.bottom .strips .contribution-kid .ring {
  --size: 30px !important;
}

.bottom .strips .contribution-kid .avatar,
.bottom .strips .contribution-note {
  display: none;
}

.bottom .strips .contribution-kids {
  gap: 8px;
}

.bottom .strips .good-days {
  flex-wrap: wrap;
  gap: 2px 8px;
}

.bottom .strips .together-panel .streak-count {
  flex: none;
}

.bottom .strips .together-panel .streak-count span {
  font-size: 1.6rem;
}

.bottom .strips .together-panel .tidy-panel-btn {
  min-width: 0;
  padding-inline: 14px;
}

.bottom .strips .streak-note {
  display: none;
}

.bottom .strips > .panel {
  flex: 1 1 auto;
}

.bottom .strips .contribution-panel .panel-title,
.bottom .strips .together-panel .panel-title {
  line-height: 1.15;
}

.bottom .strips .contribution-panel .panel-title,
.bottom .strips .together-panel .panel-title {
  white-space: nowrap;
  overflow: visible;
}

@media (min-width: 601px) {
  .bottom .strips .contribution-panel .panel-title,
  .bottom .strips .together-panel .panel-title {
    flex: 0 0 12em;
  }
}

.bottom .strips .good-days > small:first-child {
  display: none;
}

.bottom .strips .together-panel .tidy-panel-btn {
  white-space: nowrap;
  margin-left: auto;
}

.bottom .strips .together-panel .streak-info {
  flex: 0 1 auto;
}

/* ---------- Display pictures ---------- */
.avatar.pic {
  overflow: hidden;
  border: 2px solid var(--person, var(--text-muted));
  background: color-mix(in srgb, var(--person, var(--text-muted)) 16%, var(--surface));
  box-sizing: border-box;
}

.avatar.pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar.emoji {
  font-size: 1.3em;
  line-height: 1;
}

/* ---------- A kid on the wall screen: picture, name, points, progress ---------- */
.kid-card.compact {
  gap: 6px;
  padding: 8px 12px 10px;
}

.kid-open {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.kid-open .avatar {
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
}

.kid-chevron {
  display: inline-grid;
  color: var(--text-muted);
}

.kid-progress {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.kid-progress small {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.kid-bar {
  flex: 1 1 80px;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}

.kid-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ok);
}

/* A kid's page: the chores window */
.kid-page-head .avatar {
  width: 56px;
  height: 56px;
  font-size: 1.5rem;
}

.kid-page-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}

.kid-page-actions .mood-open {
  margin: 0;
}

.chore-extra:empty {
  display: none;
}

.chore-extra {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

/* ---------- Choosing a picture ---------- */
.picture-dialog {
  width: min(520px, calc(100vw - 24px));
}

.picture-tabs {
  display: flex;
  margin-bottom: 12px;
}

.picture-tabs button {
  flex: 1;
}

.picture-stage {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-height: 260px;
  align-content: center;
}

.crop-wrap {
  position: relative;
  width: 240px;
  height: 240px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-muted);
  touch-action: none;
  cursor: grab;
}

.crop-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* The circle that will be kept; the corners are dimmed. */
.crop-wrap::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.crop-zoom {
  width: 240px;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
  width: 100%;
}

.avatar-grid button {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--person, var(--accent)) 16%, var(--surface));
  font-size: 1.7rem;
  cursor: pointer;
  touch-action: manipulation;
}

.avatar-grid button[aria-pressed='true'] {
  border-color: var(--person, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--person, var(--accent)) 40%, transparent);
}

.picture-preview .avatar {
  width: 72px;
  height: 72px;
  font-size: 1.8rem;
}

/* ---------- Arranged dashboard (arrange.js): two columns of cards ---------- */
.arrange-col {
  display: none;
}

.dashboard[data-arranged] {
  grid-template-columns: var(--arrange-cols, 1fr 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: none;
}

.dashboard[data-arranged] .arrange-col {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
  min-height: 0;
}

.dashboard[data-arranged] .side {
  display: none;
}

.dashboard[data-arranged] .arrange-col > * {
  min-height: 0;
}

.dashboard[data-arranged] [data-arrange-hidden] {
  display: none !important;
}

.dashboard[data-arranged][data-left-empty] {
  grid-template-columns: minmax(0, 1fr);
}

.dashboard[data-arranged][data-left-empty] .arrange-col[data-col='left'],
.dashboard[data-arranged][data-right-empty]:not(.routine-live) .arrange-col[data-col='right'] {
  display: none;
}

.dashboard[data-arranged][data-right-empty]:not(.routine-live) {
  grid-template-columns: minmax(0, 1fr);
}

/* While the morning routine is on, the right-hand column is the routine. */
.dashboard[data-arranged].routine-live .arrange-col[data-col='right'] > :not(.routines-board):not(.routine-popup) {
  display: none;
}

.dashboard[data-arranged][data-hide-family] .bottom .strips {
  display: none;
}

.dashboard[data-arranged] .routines-board {
  flex: 1 1 0;
}

/* The editor: a small picture of the screen */
.arrange-dialog {
  width: min(820px, calc(100vw - 24px));
}

.arrange-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, 720px);
  aspect-ratio: 16 / 10;
  margin: 0 auto 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  user-select: none;
  -webkit-user-select: none;
}

.mini-top {
  display: flex;
  flex: none;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.mini-body {
  position: relative;
  display: grid;
  flex: 1;
  min-height: 0;
}

.mini-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.mini-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 6px 28px 6px 8px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  cursor: grab;
  touch-action: none;
  overflow: hidden;
}

.mini-card.dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.mini-hide {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}

.mini-hsplit,
.mini-vsplit {
  position: relative;
  flex: none;
  touch-action: none;
}

.mini-hsplit {
  height: 10px;
  cursor: row-resize;
}

.mini-vsplit {
  cursor: col-resize;
}

.mini-hsplit::after,
.mini-vsplit::after {
  content: '';
  position: absolute;
  border-radius: 99px;
  background: var(--border);
}

.mini-hsplit::after {
  left: 30%;
  right: 30%;
  top: 3px;
  height: 4px;
}

.mini-vsplit::after {
  top: 30%;
  bottom: 30%;
  left: 3px;
  width: 4px;
}

.mini-hsplit:hover::after,
.mini-vsplit:hover::after {
  background: var(--accent);
}

.mini-drop {
  position: absolute;
  height: 4px;
  border-radius: 99px;
  background: var(--accent);
  pointer-events: none;
}

.mini-drop[hidden] {
  display: none;
}

.mini-empty {
  display: grid;
  flex: 1;
  place-items: center;
  border: 2px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.arrange-hidden {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 0;
  margin-bottom: 8px;
}

.arrange-hidden:empty {
  display: none;
}

/* ---------- Routine mode: sick day, and the agenda and lists on request ---------- */
.routine-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.routine-tools .btn {
  flex: 1 1 auto;
  justify-content: center;
}

.routine-col {
  min-width: 0;
}

.routine-col-head {
  flex-wrap: wrap;
}

.routine-col-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.routine-col-head .routine-col-actions .mood-btn {
  margin-left: 0;
}

.routine-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15, 23, 42, 0.45);
}

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

.routine-popup {
  position: fixed;
  z-index: 90;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 24px));
  max-height: min(80dvh, 640px);
  padding-top: 18px;
  transform: translate(-50%, -50%);
  overflow: auto;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.4);
}

.dashboard[data-arranged] [data-arrange-hidden].routine-popup {
  display: flex !important;
}

.routine-popup .list-items,
.routine-popup .agenda-list {
  flex: 1 1 auto;
  min-height: 80px;
  overflow-y: auto;
}

.routine-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.mood-sick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
}

/* ---------- The kids' page: every child side by side ---------- */
.chore-dialog {
  width: min(1120px, calc(100vw - 24px));
}

.kid-panes {
  display: grid;
  grid-template-columns: repeat(var(--panes, 2), minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.kid-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--border);
  border-top: 6px solid var(--person);
  border-radius: 16px;
  background: var(--surface-muted);
}

.kid-pane.opened {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--person) 38%, transparent);
}

.kid-pane-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kid-pane-head .avatar {
  width: 56px;
  height: 56px;
  font-size: 1.5rem;
}

.kid-pane-head .event-dialog-title {
  margin: 0;
}

.kid-pane .dialog-section {
  margin: 6px 0 0;
}

.kid-pane .form-note {
  margin: 0;
}

.kid-pane .kid-page-actions {
  grid-template-columns: 1fr;
  margin: 0;
}

.kid-pane .chore-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

@media (max-width: 760px) {
  .kid-panes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A routine that is on stands out: their colour, big steps, at the top. */
.kid-routine {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 3px solid var(--person);
  border-radius: 18px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--person) 16%, var(--surface)), var(--surface) 70%);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--person) 28%, transparent);
}

.kid-routine-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.3rem;
}

.kid-routine-head strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.kid-routine-head .routine-count {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--person);
  color: var(--avatar-ink, var(--on-accent));
  font-size: 0.95rem;
  font-weight: 800;
}

.kid-routine .routine-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.kid-routine .routine-step {
  min-height: 72px;
  font-size: 1.3rem;
}

.kid-routine .routine-step .icon {
  width: 30px;
  height: 30px;
}

/* The way back to a routine takeover, in the top bar while the normal screen is showing */
.routine-resume {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: var(--tap);
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  animation: routine-pulse 2.4s ease-in-out infinite;
}

.routine-resume[hidden] {
  display: none;
}

@keyframes routine-pulse {
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 28%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .routine-resume {
    animation: none;
  }
}

/* A routine that was not finished: bring it back up to finish */
.kid-late-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 2px 12px;
  border: 2px solid var(--warm-border);
  border-radius: 999px;
  background: var(--warm-bg);
  color: var(--warm-text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
}

.kid-routine.late {
  border-color: var(--warm-border);
  background: linear-gradient(140deg, var(--warm-bg), var(--surface) 75%);
  box-shadow: none;
}

.kid-routine.late .routine-count {
  background: var(--warm-border);
  color: var(--warm-text);
}