:root {
  --bg: #0a0e1a;
  --card: rgba(255, 255, 255, 0.055);
  --card-strong: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.09);
  --text: #f3f5fa;
  --muted: #a9b2c6;
  --faint: #6f7a91;
  --accent: #8fb8ff;
  --accent-ink: #0b1430;
  --good: #8fe3a8;
  --radius: 26px;
  --gap: clamp(12px, 1.8vw, 20px);
  --display: "Outfit", system-ui, sans-serif;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: filter 3s ease;
}
body.night { filter: brightness(0.4) saturate(0.7); }

/* Soft moving colour glow behind everything */
.aurora {
  position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 35% at 15% 10%, rgba(124, 92, 255, 0.28), transparent 70%),
    radial-gradient(35% 30% at 90% 20%, rgba(0, 180, 216, 0.20), transparent 70%),
    radial-gradient(45% 40% at 70% 95%, rgba(255, 120, 170, 0.16), transparent 70%),
    radial-gradient(40% 40% at 10% 85%, rgba(80, 200, 140, 0.12), transparent 70%);
  animation: drift 60s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(4%, -3%) rotate(6deg); } }

/* Painted landscape (scenery.js). A soft dark veil keeps text readable on bright skies,
   and the cards become frosted glass so the scene shows through. */
.scenery { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none; }
.scenery svg { width: 100%; height: 100%; display: block; }
.scenery::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 8, 20, .28), rgba(5, 8, 20, .5)); }
.scenery .cloud { animation: cloud-drift linear infinite; }
@keyframes cloud-drift { from { transform: translateX(-30%); } to { transform: translateX(130%); } }
body.scenic .scenery { display: block; }
body.scenic .aurora { display: none; }
body.scenic .card {
  background: linear-gradient(160deg, rgba(14, 19, 36, .62), rgba(10, 14, 28, .52));
  border-color: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
body.scenic .photo { background: #111626; }
body.scenic .clock, body.scenic .head { text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }

#app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  gap: var(--gap);
  padding: var(--gap);
  /* Landscape layout */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  grid-template-areas:
    "head    head    head"
    "clock   events  lists"
    "weather events  lists"
    "photo   events  lists";
  transition: transform 1s ease;
}
/* Tasks and shopping share the right-hand column equally. */
.lists-col { grid-area: lists; display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }
.lists-col > .card { flex: 1 1 0; }
.head { grid-area: head; }
.clock { grid-area: clock; }
.weather { grid-area: weather; }
.photo { grid-area: photo; }
.events { grid-area: events; }
.tasks { grid-area: tasks; }
.shopping { grid-area: shopping; }

.card {
  background: linear-gradient(160deg, var(--card-strong), var(--card));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(14px, 1.8vw, 22px);
  min-height: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
h1, h2, h3 { font-family: var(--display); margin: 0; }
h2 { font-size: clamp(17px, 1.8vw, 22px); font-weight: 600; letter-spacing: .01em; }
.scroll { overflow-y: auto; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }

/* ---------- Header ---------- */
.head { display: flex; align-items: center; gap: 16px; }
.head-title { flex: 1; min-width: 0; }
.head h1 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; letter-spacing: -.01em;
  background: linear-gradient(90deg, #fff, #c7d6ff 60%, #ffc9e0); -webkit-background-clip: text; background-clip: text; color: transparent; }
#greeting { margin: 2px 0 0; color: var(--muted); font-size: clamp(13px, 1.4vw, 16px); }
.head-actions { display: flex; align-items: center; gap: 12px; }
.status { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 4px rgba(255,255,255,.05); }
.status.ok { background: var(--good); }
.status.err { background: #ff8a8a; }

.family { display: flex; gap: 6px; }
.avatar {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 15px; color: #0b1020;
  box-shadow: 0 0 0 2px var(--bg), 0 4px 10px rgba(0,0,0,.3);
}
.avatar .badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #fff; color: #0b1020; font-size: 11px; font-weight: 700; display: grid; place-items: center; font-family: "Inter", sans-serif;
}

.apps { display: flex; gap: 8px; }
.app-btn {
  display: flex; align-items: center; gap: 8px; padding: 10px 18px 10px 14px; border-radius: 99px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; font-weight: 600; font-size: clamp(14px, 1.4vw, 16px);
  box-shadow: 0 6px 18px rgba(99, 102, 241, .4);
}
.app-btn:active { transform: scale(.97); }
.app-btn svg { width: 20px; height: 20px; }

/* ---------- Clock ---------- */
.clock { display: flex; flex-direction: column; justify-content: center; padding: 0 4px; }
.time { font-family: var(--display); font-size: clamp(72px, 10vw, 150px); font-weight: 200; line-height: .95; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.time small { font-size: .28em; font-weight: 400; color: var(--muted); margin-left: .25em; letter-spacing: 0; }
.date { font-family: var(--display); font-size: clamp(18px, 2.2vw, 28px); font-weight: 300; color: var(--muted); margin-top: 6px; }

/* ---------- Weather (background follows the conditions) ---------- */
.weather { display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.weather::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .9; transition: background 2s; }
.weather { isolation: isolate; }
.weather[data-sky="clear-day"]::before { background: linear-gradient(150deg, rgba(255,190,90,.35), rgba(80,140,255,.15)); }
.weather[data-sky="clear-night"]::before { background: linear-gradient(150deg, rgba(70,70,180,.35), rgba(20,20,60,.2)); }
.weather[data-sky="cloud"]::before { background: linear-gradient(150deg, rgba(150,170,210,.22), rgba(60,70,100,.15)); }
.weather[data-sky="rain"]::before { background: linear-gradient(150deg, rgba(70,130,230,.35), rgba(30,50,110,.2)); }
.weather[data-sky="snow"]::before { background: linear-gradient(150deg, rgba(210,230,255,.3), rgba(120,150,200,.15)); }
.weather[data-sky="storm"]::before { background: linear-gradient(150deg, rgba(120,90,200,.35), rgba(40,30,80,.25)); }
.weather-now { display: flex; align-items: center; gap: 14px; }
.wx-icon svg { width: clamp(60px, 7vw, 88px); height: auto; display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.3)); }
.wx-temp { font-family: var(--display); font-size: clamp(44px, 5.4vw, 66px); font-weight: 300; line-height: 1; }
.wx-desc { color: var(--text); opacity: .85; font-size: clamp(14px, 1.4vw, 17px); margin-top: 4px; }
.wx-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.wx-meta span { background: rgba(255,255,255,.08); border-radius: 99px; padding: 4px 10px; font-size: clamp(12px, 1.15vw, 14px); color: var(--text); }
.wx-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.wx-day { background: rgba(255,255,255,.07); border-radius: 16px; padding: 8px 4px; text-align: center; font-size: clamp(12px, 1.2vw, 14px); }
.wx-day svg { width: 32px; height: 32px; display: block; margin: 3px auto; }
.wx-day .hi { font-weight: 600; }
.wx-day .lo { color: var(--muted); }
.wx-day .rain { color: #9cc7ff; font-size: .85em; }

/* ---------- Photo frame ---------- */
.photo { position: relative; overflow: hidden; padding: 0; min-height: 180px; background: #111626; }
.photo .layer {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.6s ease;
  pointer-events: none; -webkit-user-drag: none; /* let swipes reach the frame */
}
.photo .layer.show { opacity: 1; animation: kenburns 32s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.0); } to { transform: scale(1.08) translate(-1%, -1%); } }
.photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, rgba(0,0,0,.45)); pointer-events: none; }
.photo-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--muted); gap: 8px;
  background: radial-gradient(80% 80% at 30% 20%, rgba(139,92,246,.25), transparent), radial-gradient(70% 70% at 80% 90%, rgba(255,140,180,.18), transparent); }
.photo-empty-icon { width: 56px; height: 56px; margin: 0 auto; color: #c9b8ff; }
.photo-empty p { margin: 0; font-family: var(--display); font-size: 18px; }
.photo.has-photos .photo-empty { display: none; }
.photo-actions { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; gap: 8px; opacity: .85; }
.photo-actions .pill.subtle { background: rgba(10, 14, 26, .6); }
.photo { touch-action: pan-y; } /* horizontal swipes go to the slideshow */
.photo-nav {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; display: none; place-items: center;
  background: rgba(10, 14, 26, .45); color: #fff; font-size: 30px; line-height: 1; padding-bottom: 4px;
}
.photo-nav.prev { left: 10px; }
.photo-nav.next { right: 10px; }
.photo-nav:active { background: rgba(10, 14, 26, .7); }
.photo.many-photos .photo-nav { display: grid; }
.photo.has-photos { cursor: zoom-in; }

/* Full-screen photo viewer */
.viewer { position: fixed; inset: 0; z-index: 950; background: rgba(0, 0, 0, .96); display: grid; place-items: center; touch-action: pan-y; }
.viewer[hidden] { display: none; }
.viewer img { max-width: 100vw; max-height: 100vh; object-fit: contain; pointer-events: none; -webkit-user-drag: none; opacity: 0; }
.viewer img.in { animation: viewer-in .35s ease forwards; }
@keyframes viewer-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.viewer.loading::after { content: ""; position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.viewer-nav, .viewer-close { position: absolute; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12); border-radius: 50%; }
.viewer-nav { top: 50%; transform: translateY(-50%); width: 60px; height: 60px; font-size: 40px; padding-bottom: 6px; }
.viewer-nav.prev { left: 18px; }
.viewer-nav.next { right: 18px; }
.viewer-close { top: 18px; right: 18px; width: 52px; height: 52px; font-size: 22px; }
.viewer-nav:active, .viewer-close:active { background: rgba(255,255,255,.25); }
.viewer-count { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.75); font-weight: 600; }
.photo-count {
  position: absolute; left: 14px; bottom: 16px; z-index: 2; font-size: 13px; font-weight: 600;
  color: rgba(255, 255, 255, .85); text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.pill { padding: 8px 14px; border-radius: 99px; background: rgba(255,255,255,.9); color: #0b1020; font-weight: 600; font-size: 14px; }
.pill.subtle { background: rgba(255,255,255,.1); color: var(--text); }
.pill:active { transform: scale(.97); }

/* ---------- Events ---------- */
.events { display: flex; flex-direction: column; gap: 12px; }
#events { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.day-group h3 { margin: 0 0 6px; font-size: 13px; color: var(--faint); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-family: "Inter", sans-serif; }
.day-group.today h3 { color: var(--accent); }
.event { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.04); margin-bottom: 6px; }
.event .bar { width: 4px; align-self: stretch; border-radius: 3px; flex: none; }
.event .when { width: 4.4em; flex: none; color: var(--muted); font-variant-numeric: tabular-nums; font-size: clamp(13px, 1.3vw, 15px); }
.event .title { font-size: clamp(15px, 1.6vw, 19px); font-weight: 500; }
.event .where { color: var(--faint); font-size: 13px; margin-top: 2px; }
.event.past { opacity: .4; }
.empty { color: var(--faint); font-size: clamp(14px, 1.3vw, 16px); padding: 4px 2px; }

/* ---------- Lists ---------- */
.list { display: flex; flex-direction: column; gap: 10px; }
.list-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.list-head > div { display: flex; align-items: center; gap: 4px; }
.ghost { background: none; color: var(--faint); font-size: 13px; padding: 6px 8px; border-radius: 10px; }
.ghost:active { background: var(--card-strong); }
.add { display: flex; gap: 8px; }
.add input, .add select {
  font: inherit; font-size: 16px; color: var(--text);
  background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 12px; min-width: 0; user-select: text;
}
.add input:focus, .add select:focus { outline: 2px solid rgba(143,184,255,.5); outline-offset: 1px; }
.add input { flex: 1; }
.add select { flex: none; max-width: 38%; }
.add select option { background: #1a2033; }
.add button[type=submit] { width: 44px; flex: none; border-radius: 14px; background: linear-gradient(135deg, #a5c4ff, #7c9cff); color: var(--accent-ink); font-size: 24px; line-height: 1; font-weight: 600; }
.items { list-style: none; margin: 0; padding: 0; flex: 1; }
.items li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: clamp(15px, 1.6vw, 18px); animation: pop .25s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(4px); } }
.items li:last-child { border-bottom: 0; }
.check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--faint); flex: none; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.items li.done .check { background: var(--good); border-color: var(--good); }
.items li.done .check::after { content: ""; width: 6px; height: 12px; border: solid #0b1220; border-width: 0 3px 3px 0; transform: translateY(-2px) rotate(45deg); }
.items li.done .text { color: var(--faint); text-decoration: line-through; }
.items .text { flex: 1; overflow-wrap: anywhere; }
.items .avatar { width: 28px; height: 28px; font-size: 12px; box-shadow: none; flex: none; }
.del { background: none; color: var(--faint); font-size: 22px; width: 32px; height: 32px; border-radius: 10px; flex: none; }
.del:active { background: var(--card-strong); }

/* ---------- Reminders ---------- */
.next-reminder { margin: 4px 0 0; font-size: clamp(13px, 1.4vw, 15px); color: #ffd58a; font-weight: 500; }
.next-reminder:empty { display: none; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--card-strong); border: 1px solid var(--line); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:active { transform: scale(.95); }

dialog.rem-dialog { width: min(560px, 94vw); max-height: 90vh; padding: 22px; }
.rem-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.rem-dialog .ghost { font-size: 20px; width: auto; background: none; color: var(--faint); padding: 4px 8px; }
#rem-form input, #rem-form select {
  width: 100%; font: inherit; font-size: 17px; padding: 11px 12px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(0,0,0,.3); color: var(--text); margin: 0; color-scheme: dark;
}
#rem-form select option { background: #1a2033; }
.rem-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.rem-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
#rem-form .rem-add { margin-top: 14px; }
.rem-list { margin-top: 16px; max-height: 40vh; overflow-y: auto; }
.rem-list .when { font-variant-numeric: tabular-nums; font-weight: 600; color: #ffd58a; flex: none; min-width: 3.2em; }
.rem-list .sub { display: block; font-size: 13px; color: var(--faint); }

/* Full-screen alarm */
body.alarming { filter: none !important; }
.alarm {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px; text-align: center; color: #fff;
  background: radial-gradient(120% 80% at 50% 30%, #7c3aed 0%, #3b1a7a 45%, #0a0e1a 100%);
  animation: alarm-pulse 1.6s ease-in-out infinite;
}
.alarm[hidden] { display: none; }
@keyframes alarm-pulse { 50% { background-color: #000; filter: brightness(1.15); } }
.alarm-bell { width: clamp(90px, 16vw, 150px); color: #ffd58a; animation: ring 1s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(0); } }
.alarm-time { font-family: var(--display); font-size: clamp(64px, 14vw, 140px); font-weight: 300; line-height: 1; letter-spacing: -.03em; }
.alarm-title { font-family: var(--display); font-size: clamp(34px, 6.5vw, 72px); font-weight: 700; line-height: 1.1; max-width: 90vw; overflow-wrap: anywhere; }
.alarm-who { display: flex; align-items: center; gap: 10px; font-size: clamp(18px, 2.6vw, 26px); color: rgba(255,255,255,.85); }
.alarm-who:empty { display: none; }
.alarm-who .avatar { width: 46px; height: 46px; font-size: 17px; }
.alarm-actions { display: flex; gap: 16px; margin-top: 18px; flex-wrap: wrap; justify-content: center; }
.alarm-btn { min-width: 200px; padding: 20px 28px; border-radius: 99px; font-size: clamp(18px, 2.4vw, 24px); font-weight: 700; }
.alarm-btn.dismiss { background: #fff; color: #2a1260; }
.alarm-btn.snooze { background: rgba(255,255,255,.15); color: #fff; border: 2px solid rgba(255,255,255,.5); }
.alarm-btn:active { transform: scale(.97); }

[hidden] { display: none !important; }

/* ---------- Banners (bins, school, birthdays, weather, notes) ---------- */
.banners { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.banners:empty { display: none; }
.banner {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px;
  font-size: clamp(12px, 1.25vw, 14px); font-weight: 500; background: rgba(255,255,255,.08); border: 1px solid var(--line);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: pop .3s ease;
}
.banner.warn { background: rgba(255, 180, 80, .18); border-color: rgba(255, 180, 80, .45); color: #ffd9a0; }
.banner.info { background: rgba(110, 170, 255, .16); border-color: rgba(110, 170, 255, .4); color: #cfe2ff; }
.banner.party { background: linear-gradient(90deg, rgba(255,120,190,.35), rgba(140,110,255,.35)); border-color: rgba(255,160,210,.6); color: #fff; }
.banner.note { background: rgba(143, 227, 168, .14); border-color: rgba(143, 227, 168, .4); color: #d4f7de; }

/* ---------- Tabs ---------- */
.tabbed { display: flex; flex-direction: column; gap: 10px; }
.tabs { display: flex; gap: 4px; background: rgba(0,0,0,.22); padding: 4px; border-radius: 14px; }
.tab { padding: 7px 12px; border-radius: 10px; background: none; color: var(--muted); font-family: var(--display); font-size: clamp(14px, 1.5vw, 17px); font-weight: 600; }
.tab.active { background: rgba(255,255,255,.12); color: var(--text); }
.pane { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
#events.pane, #buses.pane { overflow-y: auto; gap: 16px; }

/* ---------- Chore stars ---------- */
.stars { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; flex: none; }
.stars::-webkit-scrollbar { display: none; }
.star-chip { flex: none; }
.stars:empty { display: none; }
.star-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 99px; background: rgba(255,255,255,.06); }
.star-chip .avatar { width: 26px; height: 26px; font-size: 11px; box-shadow: none; }
.star-n { font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.star-n small { color: var(--faint); font-weight: 500; }
.star-bar { width: 44px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.star-bar i { display: block; height: 100%; border-radius: 3px; transition: width .6s ease; }
.star-chip.won { background: linear-gradient(90deg, rgba(255,200,90,.3), rgba(255,140,190,.25)); box-shadow: 0 0 0 1px rgba(255,210,120,.6); }
.star-reward { font-size: 12px; color: var(--faint); flex: none; }
.stars { cursor: pointer; }

/* Star history */
dialog.stars-dialog { width: min(640px, 94vw); max-height: 92vh; display: flex; flex-direction: column; }
dialog.stars-dialog:not([open]) { display: none; }
.star-hero { padding: 14px 16px; border-radius: 16px; font-size: 18px; background: linear-gradient(90deg, rgba(255,200,90,.25), rgba(255,140,190,.2)); border: 1px solid rgba(255,210,120,.45); }
.star-chart { display: flex; gap: 10px; align-items: flex-end; height: 150px; padding: 6px 0; }
.star-week { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.star-week .bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.star-week i { flex: 1; max-width: 18px; min-height: 2px; border-radius: 5px 5px 2px 2px; position: relative; }
.star-week i span { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 11px; font-style: normal; color: var(--muted); }
.star-week small { font-size: 11px; color: var(--faint); white-space: nowrap; }
.star-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 14px; }
.star-legend span, .star-table td:first-child { display: inline-flex; align-items: center; gap: 6px; }
.star-legend .avatar, .star-table .avatar, .star-log .avatar { width: 24px; height: 24px; font-size: 10px; box-shadow: none; }
.star-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.star-table th { text-align: right; font-weight: 500; color: var(--faint); font-size: 12px; padding: 4px; }
.star-table td { padding: 7px 4px; border-top: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.star-table td:first-child { text-align: left; }
.star-log { list-style: none; padding: 0; margin: 0; }
.star-log li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.star-log li > span:not(.avatar) { flex: 1; }
.star-log small { display: block; color: var(--faint); font-size: 12px; }
.star-log b { color: #ffc56b; font-size: 13px; }

/* Add event & voice */
.tab-add { margin-left: auto; padding: 7px 12px; border-radius: 10px; background: rgba(143,184,255,.18); color: var(--accent); font-weight: 600; font-size: 14px; }
.tab-add:active { transform: scale(.97); }
#event-form input, #event-form select, #voice-form input {
  width: 100%; font: inherit; font-size: 17px; padding: 11px 12px; border-radius: 14px; margin: 0;
  border: 1px solid var(--line); background: rgba(0,0,0,.3); color: var(--text); color-scheme: dark; user-select: text;
}
#event-form > input { margin-bottom: 2px; }
#event-form select option { background: #1a2033; }
#event-form .rem-add { margin-top: 12px; }
.voice-btn { background: linear-gradient(135deg, rgba(139,92,246,.35), rgba(99,102,241,.35)); }
dialog.voice-dialog { width: min(600px, 94vw); }
.voice-row { display: flex; gap: 12px; align-items: center; }
.voice-mic { width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #8b5cf6, #6366f1); box-shadow: 0 6px 18px rgba(99,102,241,.45); }
.voice-mic svg { width: 28px; height: 28px; }
.voice-mic.listening { animation: listen 1.2s ease-in-out infinite; }
@keyframes listen { 50% { box-shadow: 0 0 0 14px rgba(139,92,246,.25); } }
.voice-result { margin-top: 12px; font-size: clamp(17px, 2vw, 20px); font-family: var(--display); min-height: 1.4em; color: #c9d8ff; }
.voice-examples { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: 14px; color: var(--faint); }

/* ---------- Meals (The Family Table) & notes ---------- */
.meal-nav { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.meal-nav .ghost { font-size: 24px; width: 40px; height: 34px; padding: 0; color: var(--muted); }
.meal-title { font-family: var(--display); font-weight: 600; font-size: clamp(15px, 1.5vw, 17px); text-align: center; }
.meal-title span { color: var(--faint); font-weight: 400; font-size: .85em; margin-left: 6px; }
.meals li[data-recipe], .meals li[data-stock] { cursor: pointer; }
.meal-icon { font-size: 22px; width: 30px; text-align: center; flex: none; }
.meal-kind { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 600; }
.meals .meal-extra { font-size: clamp(13px, 1.3vw, 15px); color: var(--muted); }
.chev { color: var(--faint); font-size: 22px; flex: none; }
.items .sub { display: block; font-size: 13px; color: var(--faint); margin-top: 2px; }
.note-icon { background: rgba(255,255,255,.1); }

/* Recipe viewer */
dialog.recipe-dialog { width: min(680px, 94vw); max-height: 92vh; display: flex; flex-direction: column; }
dialog.recipe-dialog:not([open]) { display: none; }
.recipe-meta { font-size: 13px; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.recipe-dialog h2 { font-size: clamp(22px, 3vw, 30px); }
.recipe-body { overflow-y: auto; flex: 1; min-height: 0; padding-right: 4px; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.45; user-select: text; }
.recipe-body h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 16px 0 8px; font-family: "Inter", sans-serif; }
.ingredients { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 24px; }
.ingredients li { padding: 5px 0 5px 18px; position: relative; break-inside: avoid; }
.ingredients li::before { content: ""; position: absolute; left: 2px; top: .85em; width: 7px; height: 7px; border-radius: 50%; background: #ffc56b; }
.ingredients.stock li { cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.ingredients.stock li span { color: var(--accent); font-size: 13px; }
.ingredients.stock li.added span { color: var(--good); }
.ingredients.stock li.added span::before { content: "✓ "; }
.steps { padding-left: 0; margin: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 8px 0 8px 44px; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 7px; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #a5c4ff, #7c9cff); color: var(--accent-ink); font-weight: 700; display: grid; place-items: center; font-size: 15px; }
.recipe-tip { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 197, 107, .12); border: 1px solid rgba(255, 197, 107, .35); }
.recipe-tip b { color: #ffc56b; margin-right: 4px; }
.recipe-dialog .rem-add { margin-top: 14px; flex: none; }
.hint { font-size: 13px; color: var(--faint); margin: 8px 0 0; }
@media (max-width: 600px) { .ingredients { columns: 1; } }

/* Settings */
dialog.settings-dialog { width: min(640px, 94vw); max-height: 92vh; }
#settings-form { display: flex; flex-direction: column; max-height: calc(92vh - 44px); }
.settings-body { overflow-y: auto; flex: 1; min-height: 0; padding-right: 4px; }
.settings-body section { padding: 14px 0; border-bottom: 1px solid var(--line); }
.settings-body h3 { font-size: 16px; margin: 0 0 10px; }
.settings-body h3 small { font-weight: 400; color: var(--faint); font-size: 13px; margin-left: 6px; }
.toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.toggle { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.switch { width: 44px; height: 26px; border-radius: 13px; background: rgba(255,255,255,.15); position: relative; flex: none; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle input:checked + .switch { background: #7c9cff; }
.toggle input:checked + .switch::after { transform: translateX(18px); }
.rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.row-item, .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row { justify-content: space-between; color: var(--muted); font-size: 15px; }
.row-item label { display: flex; align-items: center; gap: 6px; color: var(--faint); font-size: 13px; }
.settings-body input, .settings-body select {
  font: inherit; font-size: 16px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(0,0,0,.3); color: var(--text); color-scheme: dark; user-select: text; min-width: 0;
}
.settings-body select option { background: #1a2033; }
.row-item input[name="name"] { flex: 1; min-width: 120px; }
.row-item[data-kind="bins"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.04); }
.row-item[data-kind="bins"] input[name="name"] { grid-column: 1 / 3; }
.row-item[data-kind="bins"] .del { grid-column: 3; grid-row: 1; }
.row-item[data-kind="bins"] label input { flex: 1; min-width: 0; }
.row input, .row select { width: 52%; }
#settings-form .rem-add { margin-top: 14px; flex: none; }
#rem-cancel-edit { width: 100%; margin-top: 6px; }
@media (max-width: 600px) { .toggles { grid-template-columns: 1fr; } }

/* ---------- Buses ---------- */
.bus { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 16px; background: rgba(255,255,255,.04); margin-bottom: 6px; }
.bus-no { min-width: 2.6em; padding: 4px 8px; border-radius: 8px; background: #ffd25e; color: #1a1300; font-weight: 700; text-align: center; font-family: var(--display); }
.bus-to { flex: 1; font-size: clamp(15px, 1.5vw, 18px); display: flex; align-items: center; gap: 8px; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(143,227,168,.25); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.bus-when { text-align: right; display: flex; flex-direction: column; }
.bus-when b { font-family: var(--display); font-size: clamp(16px, 1.7vw, 20px); }
.bus-when small { color: var(--faint); font-size: 12px; }
.bus-credit { color: var(--faint); font-size: 11px; text-align: right; }

/* ---------- Bedside night clock ---------- */
.night-clock {
  position: fixed; inset: 0; z-index: 900; background: #000; color: #b9a3ff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
}
.night-clock > * { transform: translate(var(--dx, 0), var(--dy, 0)); transition: transform 4s ease; }
.night-time { font-family: var(--display); font-size: clamp(110px, 24vw, 260px); font-weight: 200; line-height: .9; letter-spacing: -.04em; opacity: .55; font-variant-numeric: tabular-nums; }
.night-time small { font-size: .25em; margin-left: .2em; }
.night-date { font-family: var(--display); font-size: clamp(20px, 3vw, 32px); font-weight: 300; opacity: .4; }
.night-info { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; font-size: clamp(16px, 2vw, 22px); color: #ffcf8a; opacity: .55; }
.night-hint { position: absolute; bottom: 24px; left: 0; right: 0; transform: none; font-size: 13px; color: #fff; opacity: .18; }

/* ---------- Toast & dialog ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: #fff; color: #0b1020; padding: 12px 20px; border-radius: 99px; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transition: opacity .3s, transform .3s; max-width: 90vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
dialog { background: #161b2c; color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; width: min(420px, 90vw); }
dialog::backdrop { background: rgba(0, 0, 0, .7); }
dialog p { color: var(--muted); }
#key-dialog input { width: 100%; font: inherit; font-size: 18px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.3); color: var(--text); margin-bottom: 12px; }
#key-dialog button, .rem-add { width: 100%; padding: 12px; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* ---------- Portrait tablet (wall-mounted upright) ----------
   Chosen by width, not orientation, so the on-screen keyboard (which shortens the
   viewport) doesn't flip the layout while someone is typing. */
@media (max-width: 900px) {
  #app {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas:
      "head   head"
      "clock  weather"
      "photo  events"
      "tasks  shopping";
  }
  .lists-col { display: contents; }
  .time { font-size: 15.5vw; }
  .date { font-size: 3.5vw; }
  .family { display: none; } /* task counts show on the task rows instead */
}
@media (min-width: 700px) and (max-width: 900px) {
  .family { display: flex; }
}

/* ---------- Phones: stack and scroll ---------- */
@media (max-width: 600px) {
  body { overflow: auto; }
  #app {
    height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "head" "clock" "weather" "photo" "events" "tasks" "shopping";
  }
  .photo { height: 56vw; }
  .lists-col { display: contents; }
  .family { display: none; }
  .events, .list { max-height: 75vh; }
  .time { font-size: 22vw; }
  .date { font-size: 5vw; }
}