:root {
  color-scheme: light;
  --ink: #17243a;
  --muted: #66758d;
  --page: #f3f6fb;
  --surface: #fff;
  --line: #dce4ef;
  --navy: #183b63;
  --blue: #1477c9;
  --blue-soft: #edf6ff;
  --purple: #7b45c5;
  --purple-soft: #f5efff;
  --gold: #f3b51b;
  --gold-ink: #805b00;
  --gold-soft: #fff7df;
  --danger: #c8475c;
  --shadow: 0 8px 24px rgba(28, 48, 77, .06);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink);
  background: radial-gradient(circle at 4% 0%, #e4f1ff 0, transparent 27rem), var(--page);
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #318bd2; outline-offset: 2px; }
.app-shell { width: min(100% - 36px, 1080px); margin: 0 auto; padding: max(22px, env(safe-area-inset-top)) 0 max(48px, env(safe-area-inset-bottom)); }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: #664b00; background: linear-gradient(145deg,#ffe58c,#ffc83d); box-shadow: 0 5px 14px #bd890027; font-size: 1.35rem; }
.eyebrow { margin: 0 0 4px; color: var(--muted); font-size: .76rem; font-weight: 800; letter-spacing: .095em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.45rem, 3.5vw, 2rem); line-height: 1.12; letter-spacing: -.035em; }
h2 { margin-bottom: 0; font-size: 1.32rem; letter-spacing: -.02em; }
h3 { font-size: 1rem; }
.icon-button { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--surface); font-size: 1.2rem; box-shadow: var(--shadow); }
.app-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 18px; padding: 5px; border: 1px solid var(--line); border-radius: 16px; background: #e8edf5; }
.app-tab { min-height: 45px; display: flex; justify-content: center; align-items: center; gap: 8px; border: 0; border-radius: 11px; color: #5b6c83; background: transparent; font-weight: 750; }
.app-tab > span { color: var(--blue); font-size: 1rem; }
.app-tab.is-active { color: #fff; background: var(--navy); box-shadow: 0 4px 10px #183b6333; }
.app-tab.is-active > span { color: #ffd35c; }
.tab-panel[hidden] { display: none; }
.status-row { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 15px; }
.device-status { min-width: 0; display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: .9rem; font-weight: 650; }
.status-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #a5afbd; box-shadow: 0 0 0 4px #e8edf4; }
.device-status.is-connected .status-dot { background: #22a56d; box-shadow: 0 0 0 4px #e2f5eb; }
.device-status.is-offline .status-dot { background: #d24d60; box-shadow: 0 0 0 4px #fbe9ed; }
.sound-button { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border: 1px solid #cbdced; border-radius: 12px; color: var(--navy); background: #fff; font-weight: 750; box-shadow: 0 3px 9px #1a38500b; }
.sound-button span { color: var(--blue); font-size: 1.15rem; }
.quick-stars, .child-card, .activity-section, .message-section, .planner-card { border: 1px solid var(--line); border-radius: 19px; background: var(--surface); box-shadow: var(--shadow); }
.quick-stars { margin-bottom: 17px; padding: 17px; border-color: #f0d77c; background: linear-gradient(125deg,#fffdf5,#fff7df); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quick-stars-heading { margin: 0 1px 12px; }
.quick-stars-heading h2 { font-size: 1.18rem; }
.sparkle { color: #d69a00; font-size: 1.4rem; }
.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.quick-action { min-height: 69px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid #e7e8eb; border-radius: 13px; color: var(--ink); background: #fff; text-align: left; font-weight: 700; box-shadow: 0 2px 6px #32290009; transition: transform .12s ease, box-shadow .12s ease; }
.quick-action:hover { transform: translateY(-1px); box-shadow: 0 5px 12px #32290012; }
.quick-action strong { color: var(--gold-ink); font-size: .88rem; white-space: nowrap; }
.quick-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--blue); font-size: 1.08rem; }
.quick-action--piano .quick-icon { background: var(--purple); }
.quick-action--homework .quick-icon { background: #24895f; }
.quick-action--job .quick-icon { background: #d78113; }
.children-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-bottom: 17px; }
.child-card { min-width: 0; position: relative; overflow: hidden; padding: 18px; }
.child-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--jacob); }
.child-card--gabi::before { background: var(--gabi); }
.child-topline { display: flex; align-items: center; gap: 12px; }
.avatar, .planner-avatar { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: var(--jacob); background: var(--jacob-soft); font-size: 1.2rem; font-weight: 850; }
.child-card--gabi .avatar { color: var(--gabi); background: var(--gabi-soft); }
.child-topline h2 { font-size: 1.3rem; }
.remaining { margin: 3px 0 0; color: var(--muted); font-size: .9rem; }
.star-count { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--jacob); font-size: 1.65rem; line-height: 1; font-variant-numeric: tabular-nums; }
.child-card--gabi .star-count { color: var(--gabi); }
.star-count span { color: var(--gold); font-size: 1.35rem; }
.stars { display: grid; grid-template-columns: repeat(10, minmax(0,1fr)); gap: 5px; margin: 16px 0; }
.star { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; color: #d3deea; background: #f1f5f9; font-size: clamp(.88rem, 2vw, 1.25rem); }
.star.is-earned { color: var(--gold); background: var(--gold-soft); }
.primary-action:disabled, .quiet-action:disabled { cursor: not-allowed; opacity: .48; }
.child-card.is-awarding { animation: award-pulse .42s ease; }
.child-card.is-special-award { animation: award-burst .75s ease; }
@keyframes award-pulse { 50% { transform: scale(1.012); box-shadow: 0 0 0 5px #e5f4ff, var(--shadow); } }
@keyframes award-burst { 35% { transform: scale(1.025) rotate(-.4deg); box-shadow: 0 0 0 7px #ffefb8, 0 12px 34px #daa00028; } }
.card-actions { display: flex; align-items: center; gap: 9px; }
.primary-action, .planner-save, .message-add { min-height: 45px; border: 0; border-radius: 11px; color: #fff; background: var(--navy); font-weight: 750; }
.primary-action { padding: 0 18px; }
.card-actions .primary-action { flex: 1; color: #fff; background: var(--jacob); }
.child-card--gabi .card-actions .primary-action { background: var(--gabi); }
.quiet-action { width: 45px; height: 45px; border: 0; border-radius: 11px; color: var(--muted); background: #eef2f7; font-size: 1.1rem; font-weight: 800; }
.reward-action { width: 100%; min-height: 44px; margin-top: 10px; border: 1px solid #f0d168; border-radius: 11px; color: var(--gold-ink); background: var(--gold-soft); font-weight: 800; }
.activity-section { margin-bottom: 15px; padding: 17px; }
.activity-section .section-heading { margin-bottom: 12px; }
.activity-section h2 { font-size: 1.1rem; }
.history-actions { display: flex; align-items: center; gap: 12px; }
.text-button { padding: 6px 0; border: 0; color: var(--navy); background: transparent; font-size: .88rem; font-weight: 750; }
.activity-list, .full-history-list, .display-message-list { margin: 0; padding: 0; list-style: none; }
.activity-list { display: grid; gap: 7px; }
.history-item { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 10px 11px; border: 1px solid #e9edf3; border-radius: 12px; background: #fbfcfe; }
.history-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: var(--gold-soft); font-size: 1rem; }
.history-copy { min-width: 0; display: grid; gap: 2px; }
.history-copy strong { font-size: .91rem; }
.history-copy > span { overflow: hidden; color: var(--muted); font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.history-copy time { color: #8995a7; font-size: .76rem; }
.history-amount { margin-left: auto; color: var(--gold-ink); font-size: .88rem; white-space: nowrap; }
.empty-activity { padding: 14px; border-radius: 11px; color: var(--muted); background: #f6f8fb; font-size: .9rem; }
.message-section { overflow: hidden; margin-bottom: 12px; }
.message-section summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; cursor: pointer; list-style: none; }
.message-section summary::-webkit-details-marker { display: none; }
.message-section summary > span { display: flex; align-items: center; gap: 9px; }
.message-section summary strong { font-size: 1rem; }
.message-section summary small { color: var(--muted); font-size: .82rem; }
.summary-icon { color: #c58d00; }
.message-body { padding: 0 16px 16px; }
.message-help { margin: 0 0 12px; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.message-form { display: flex; gap: 8px; }
.message-form input, .planner-card input, .planner-card textarea, .jingle-form input, .jingle-form select { min-width: 0; width: 100%; border: 1px solid #cfd9e6; border-radius: 10px; color: var(--ink); background: #fff; }
.message-form input { min-height: 44px; padding: 0 12px; }
.message-add { padding: 0 15px; white-space: nowrap; }
.emoji-picker { display: flex; gap: 7px; margin-top: 9px; }
.emoji-picker button { width: 39px; height: 39px; border: 1px solid var(--line); border-radius: 10px; background: #f7f9fc; font-size: 1.1rem; }
.display-message-list { display: grid; gap: 7px; margin-top: 10px; }
.empty-message { padding: 11px 12px; border-radius: 10px; color: var(--muted); background: #f6f8fb; font-size: .9rem; }
.display-message-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.planner-intro { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 8px 2px 15px; }
.planner-intro h2 { margin-bottom: 5px; font-size: 1.45rem; }
.planner-intro p:not(.eyebrow) { max-width: 620px; margin-bottom: 0; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.morning-chip { padding: 8px 12px; border: 1px solid #f0d778; border-radius: 999px; color: var(--gold-ink); background: var(--gold-soft); font-size: .84rem; font-weight: 800; white-space: nowrap; }
.day-tabs { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 7px; margin-bottom: 12px; }
.day-tab { min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 11px; color: #5c6b81; background: #fff; font-size: .85rem; font-weight: 750; text-transform: uppercase; }
.day-tab.is-active { border-color: var(--navy); color: #fff; background: var(--navy); box-shadow: 0 3px 9px #183b632c; }
.planner-card { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; padding: 18px; }
.planner-calendar { display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin:12px 0;padding:14px;border:1px solid #dfeaf3;border-radius:16px;background:#f8fbff; }.planner-calendar h2{margin:2px 0 0;font-size:1rem}.planner-calendar ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}.planner-calendar li{display:grid;gap:2px;padding:8px 10px;border-radius:10px;background:#fff;color:#3e5272;font-size:.86rem}.planner-calendar li span{color:var(--muted);font-size:.8rem}.planner-calendar-empty{color:var(--muted)}
.week-switcher{display:flex;align-items:center;gap:9px;margin:12px 0;padding:8px;border:1px solid var(--line);border-radius:15px;background:#fff}.week-switcher strong{flex:1;text-align:center;font-size:.92rem}.week-switcher button{min-width:38px;min-height:38px;border:1px solid var(--line);border-radius:10px;color:var(--navy);background:#f8fbff;font-weight:800}.week-switcher #current-week{padding:0 11px;font-size:.8rem}
.day-tab{position:relative;display:grid;justify-items:center;align-content:center;gap:2px;text-transform:none}.day-tab span{font-size:.72rem;text-transform:uppercase}.day-tab strong{font-size:.93rem}.day-tab i{position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:50%;background:#f0ac17}.day-tab.is-active i{background:#fff}
.planner-calendar{grid-template-columns:minmax(130px,.35fr) 1fr;align-items:start}.planner-calendar>div p:last-child{margin:5px 0 0;color:var(--muted);font-size:.8rem;line-height:1.35}.planner-calendar li{grid-template-columns:60px 1fr;align-items:center;gap:10px;padding:10px 12px}.planner-calendar li div{display:grid;gap:3px}.planner-calendar li strong{color:var(--ink);font-size:.9rem}.calendar-event-time{color:#0879e8!important;font-weight:800}.event-entry{grid-column:1/-1;border-top:1px solid #e4ebf3;padding-top:9px}.event-entry summary{padding:5px 0;color:#0879e8;font-size:.9rem;font-weight:750;cursor:pointer}.event-entry form{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:9px;padding-top:8px}.event-entry label{display:grid;gap:5px;color:#53647e;font-size:.86rem;font-weight:700}.event-entry input,.event-entry select{min-height:40px;width:100%;padding:7px 9px;border:1px solid #d7e1ec;border-radius:9px;background:#fff;color:var(--ink)}.event-entry .planner-save{grid-column:1/-1;min-height:42px}
.planner-day-heading, .planner-shared, .planner-child, .family-notes, .planner-save { grid-column: 1 / -1; }
.planner-day-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.planner-day-heading h2 { font-size: 1.25rem; }
.planner-day-heading > span { color: var(--muted); font-size: .83rem; }
.planner-shared { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.planner-card label { min-width: 0; display: grid; gap: 6px; color: #46566d; font-size: .88rem; font-weight: 700; }
.planner-card input, .planner-card textarea { padding: 11px 12px; font-size: .95rem; line-height: 1.4; }
.planner-card input { min-height: 45px; }
.planner-card textarea { min-height: 78px; resize: vertical; }
.planner-child { min-width: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin: 0; padding: 13px; border: 1px solid #b8d9f7; border-radius: 14px; background: #f5faff; }
.planner-child--gabi { border-color: #decaf4; background: #fcf9ff; }
.planner-child legend { padding: 0 5px; color: var(--jacob); font-size: 1rem; font-weight: 800; }
.planner-child--gabi legend { color: var(--purple); }
.planner-avatar { width: 26px; height: 26px; display: inline-grid; margin-right: 4px; border-radius: 8px; font-size: .86rem; vertical-align: middle; }
.family-notes { padding-top: 2px; }
.planner-save { grid-column: 1 / -1; min-height: 48px; }
.sheet { width: min(100% - 24px, 560px); max-height: min(88dvh, 840px); overflow: auto; padding: 0; border: 0; border-radius: 20px; color: var(--ink); background: #fff; box-shadow: 0 20px 70px #111b2b45; }
.sheet::backdrop, .celebration::backdrop { background: #0f1a2cb8; backdrop-filter: blur(4px); }
.sheet form, .sheet-content { padding: 22px; }
.sheet h2 { margin-bottom: 12px; font-size: 1.35rem; }
.sheet-handle { width: 42px; height: 4px; margin: 0 auto 18px; border-radius: 99px; background: #d8e0ea; }
.reason-list { display: grid; gap: 7px; max-height: 54dvh; overflow: auto; padding: 2px; }
.reason-heading { margin: 10px 0 2px; color: var(--muted); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.reason-list button, .child-choice, .cancel-button { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #f8fafd; font-weight: 700; }
.reason-list button { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 12px; text-align: left; }
.reason-list button strong { color: var(--gold-ink); white-space: nowrap; }
.cancel-button { width: 100%; margin-top: 10px; padding: 0 15px; }
.child-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.child-choice { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 66px; font-size: 1rem; }
.choice-avatar { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; color: var(--blue); background: var(--blue-soft); font-weight: 800; }
.child-choice--gabi .choice-avatar { color: var(--purple); background: var(--purple-soft); }
.jingle-list { display: grid; gap: 8px; margin: 14px 0; }
.jingle-item { display: flex; align-items: center; gap: 9px; }
.jingle-play { min-height: 45px; flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #f8fafd; text-align: left; }
.jingle-play strong { display: block; }
.jingle-play small { color: var(--muted); }
.jingle-delete { width: 42px; height: 42px; border: 0; border-radius: 10px; color: var(--danger); background: #fff0f2; font-size: 1.2rem; }
.jingle-form { display: grid; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #f8fafd; }
.jingle-form h3 { margin: 0; }
.jingle-form input, .jingle-form select { min-height: 42px; padding: 9px 10px; }
.jingle-name-row, .chime-options, .chime-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.field-help, .settings-note { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.5; }
.chime-actions { align-items: center; }
.chime-actions .primary-action, .chime-actions .cancel-button { margin: 0; }
.history-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 14px 0; }
.history-stat { padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: #f8fafd; text-align: center; }
.history-stat strong { display: block; font-size: 1.15rem; }
.history-stat span { color: var(--muted); font-size: .78rem; }
.full-history-list { display: grid; gap: 7px; max-height: 56dvh; overflow: auto; }
.setup-values { display: grid; gap: 7px; margin: 14px 0; }
.setup-values > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px; border-radius: 9px; background: #f4f7fb; font-size: .87rem; }
.setup-values span { color: var(--muted); }
.settings-note { margin-bottom: 13px; }
.settings-sheet form > button { width: 100%; margin-top: 9px; }
.settings-lead{margin:0 0 17px;color:var(--muted);line-height:1.5}.settings-section-title{margin:15px 0 8px;font-size:1rem}.settings-divider{width:100%;margin:18px 0;border:0;border-top:1px solid var(--line)}.connection-card{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:9px 0;padding:13px;border:1px solid var(--line);border-radius:14px;background:#f8fafd;text-align:left}.connection-card div{display:grid;gap:4px}.connection-card span{color:var(--muted);font-size:.8rem}.connection-card--action{cursor:pointer}.connection-card--action:hover{border-color:#8abcf6;background:#f4f9ff}.connection-state{flex:0 0 auto;padding:6px 9px;border-radius:999px;background:#fff1c6!important;color:#806000!important;font-weight:750}.connection-state--review{background:#e6f4ff!important;color:#0867a7!important}.calendar-field{display:grid;gap:6px;margin:13px 0}.calendar-field span{font-weight:750}.calendar-field input{width:100%;box-sizing:border-box;padding:12px;border:1px solid var(--line);border-radius:12px;font:inherit}
.celebration { width: min(100% - 24px, 480px); padding: 22px; border: 1px solid #f0d778; border-radius: 22px; color: var(--ink); background: #fff9e9; text-align: center; box-shadow: 0 20px 70px #111b2b45; }
.celebration-star { color: var(--gold); font-size: 3.6rem; }
.celebration h2 { margin: 5px 0; font-size: 1.55rem; }
.celebration-content > p:not(.eyebrow) { color: var(--muted); }
.celebration-actions { display: grid; gap: 8px; }
.toast { position: fixed; z-index: 20; inset: auto 16px max(18px,env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 32px); margin: auto; padding: 11px 15px; border-radius: 11px; color: #fff; background: #162943; box-shadow: 0 6px 20px #17243a35; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 700px) {
  .app-shell { width: min(100% - 28px, 560px); padding-top: max(17px,env(safe-area-inset-top)); }
  .children-grid { grid-template-columns: 1fr; gap: 11px; }
  .quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .planner-child { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .planner-card { gap: 11px; padding: 14px; }
  .planner-calendar{grid-template-columns:1fr;gap:8px}
}
@media (max-width: 460px) {
  .app-shell { width: min(100% - 22px, 420px); }
  .brand-mark { width: 40px; height: 40px; }
  .app-header { margin-bottom: 14px; }
  .app-tab { min-height: 43px; gap: 6px; font-size: .88rem; }
  .app-tab > span { display: none; }
  .quick-stars, .activity-section { padding: 13px; }
  .quick-action { min-height: 63px; grid-template-columns: 32px 1fr auto; gap: 7px; padding: 8px; font-size: .86rem; }
  .quick-icon { width: 31px; height: 31px; }
  .quick-action strong { font-size: .8rem; }
  .child-card { padding: 15px; }
  .planner-intro { align-items: flex-start; }
  .planner-intro p:not(.eyebrow) { font-size: .87rem; }
  .planner-shared, .planner-child { grid-template-columns: 1fr; }
  .day-tabs { gap: 4px; }
  .day-tab { min-height: 42px; font-size: .75rem; }
  .message-form { flex-direction: column; }
  .message-add { min-height: 42px; }
  .message-section summary small { display: none; }
  .history-actions { gap: 9px; }
  .text-button { font-size: .82rem; }
  .planner-day-heading > span { max-width: 120px; text-align: right; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Family Hub visual system inspired by the supplied mobile mockups */
:root { --ink:#101c42; --muted:#62708b; --page:#f0f6fd; --surface:#fff; --line:#e2eaf4; --navy:#0879e8; --blue:#0879e8; --purple:#8a35da; --shadow:0 8px 25px rgba(41,76,119,.09); }
body { background:radial-gradient(ellipse at 20% 0%,#e2f0ff 0,transparent 42rem),linear-gradient(160deg,#f2f7ff,#f8faff); }
.app-shell { width:min(100% - 28px,920px); padding-bottom:max(108px,calc(env(safe-area-inset-bottom) + 100px)); }
.app-header { margin:0 0 12px; }
.brand-mark { display:none; }
.brand-lockup { gap:0; }
.brand-lockup h1 { font-size:1.75rem; }
.brand-lockup .eyebrow { margin-bottom:2px; letter-spacing:.01em; text-transform:none; font-size:.86rem; font-weight:650; }
.today-date { margin:3px 0 0; color:#65728c; font-size:.92rem; }
.icon-button { width:44px;height:44px;border-radius:50%; }
.app-tabs { position:fixed; z-index:12; left:50%; bottom:max(10px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(calc(100% - 28px),560px); grid-template-columns:1fr 1fr; margin:0; padding:6px; border:1px solid #e0e8f1; border-radius:21px; background:rgba(255,255,255,.94); box-shadow:0 8px 26px rgba(39,74,115,.16); backdrop-filter:blur(16px); }
.app-tab { min-height:48px; border-radius:15px; font-size:.94rem; }
.app-tab.is-active { background:#0879e8; }
.status-row { min-height:50px; margin:0 0 14px; padding:5px 12px; border:1px solid #e2eaf4; border-radius:17px; background:white; box-shadow:var(--shadow); }
.device-status { font-size:.83rem; }
.sound-button { min-height:36px; border:0; box-shadow:none; }
.children-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.child-card { padding:12px; border-radius:19px; background:linear-gradient(145deg,#eef7ff,#ddecff); border-color:#d8eafc; }
.child-card--gabi { background:linear-gradient(145deg,#fbf2ff,#f2e5ff); border-color:#ead8fa; }
.child-card::before { display:none; }
.child-topline { display:grid; grid-template-columns:44px minmax(0,1fr); gap:5px 8px; align-items:center; }
.avatar { width:44px;height:44px;overflow:hidden;border-radius:50%;background:#cae5ff; }
.child-card--gabi .avatar { background:#eedbff; }
.avatar img { display:block;width:100%;height:100%;object-fit:cover;object-position:center 27%; }
.child-topline h2 { font-size:1.04rem; }
.remaining { grid-column:1 / -1; grid-row:2; min-height:1.1em; color:#586984; font-size:.77rem; }
.star-count { grid-column:1 / -1; grid-row:3; margin:1px 0 0; font-size:1.8rem; }
.star-count span { font-size:1.35rem; }
.progress-track { height:10px; overflow:hidden; margin:8px 0 10px; border-radius:999px; background:#d9e3ef; }
.progress-track span { display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0782f7,#31a3ff);transition:width .24s ease; }
.child-card--gabi .progress-track span { background:linear-gradient(90deg,#8b32df,#be65ef); }
.stars { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }
.card-actions { gap:6px; }
.card-actions .primary-action { min-height:40px;padding:0 8px;border-radius:12px;font-size:.84rem; }
.quiet-action { width:39px;height:40px;flex:0 0 auto; }
.reward-action { min-height:38px;font-size:.82rem; }
.today-overview { margin:0 0 14px;padding:14px;border:1px solid #e4eaf2;border-radius:20px;background:rgba(255,255,255,.9);box-shadow:var(--shadow); }
.today-heading { margin-bottom:10px; }
.today-heading h2 { font-size:1.12rem; }
.today-heading > span { color:var(--muted);font-size:.85rem; }
.today-rides { display:grid;gap:5px; }
.today-ride { min-height:43px;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:7px;padding:0 8px;border:1px solid #e7edf5;border-radius:12px;background:#fbfdff;font-size:.84rem; }
.today-ride-icon { font-size:1.12rem; }
.today-ride > span:last-child { color:#63718a; }
.today-empty { margin:0 0 9px;padding:10px;border-radius:11px;background:#f5f8fc;color:#697890;font-size:.82rem; }
.today-children { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px; }
.today-child { min-width:0;padding:10px;border-radius:14px;background:#f0f7ff;font-size:.78rem; }
.today-child--gabi { background:#faf3ff; }
.today-child-title { display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:.9rem; }
.today-child > div:not(.today-child-title) { display:grid;gap:2px;margin-top:5px; }
.today-child b { color:#586984;font-size:.73rem; }
.today-child > div > span { overflow-wrap:anywhere;color:#1b2b4e;line-height:1.25; }
.family-day{padding:17px}.family-day .today-heading{align-items:flex-end;margin-bottom:13px}.family-day .today-heading h2{font-size:1.35rem}.family-day>.eyebrow{margin-bottom:7px}.next-up-card{display:flex;align-items:center;gap:12px;margin-bottom:10px;padding:12px 14px;border-radius:15px;background:linear-gradient(110deg,#fff7dd,#fffdf7);border:1px solid #f0dfac}.next-up-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:12px;background:#ffedb2;color:#9b7000;font-size:1.15rem;font-weight:850}.next-up-card>div{display:grid;gap:2px}.next-up-card .eyebrow{margin:0;color:#907222;font-size:.68rem}.next-up-card strong{font-size:.98rem}.next-up-card>div>span{color:#64728a;font-size:.83rem;line-height:1.35}.today-avatar{width:30px;height:30px;overflow:hidden;border-radius:50%;background:#dceeff}.today-child--gabi .today-avatar{background:#f1e3ff}.today-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 27%}.today-stars{margin-left:auto;color:#9a7000;font-weight:800;white-space:nowrap}.today-child-title{min-width:0}.today-family-events{margin-top:12px;padding-top:11px;border-top:1px solid #e7edf5}.subsection-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.subsection-heading h3{margin:0;font-size:.92rem}.today-family-events ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}.today-family-events li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;background:#f7faff}.today-family-events li>div{display:grid;gap:2px}.today-family-events li strong{font-size:.85rem}.today-family-events li span:not(.event-dot){color:var(--muted);font-size:.77rem}.event-dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:#1688ed}.tomorrow-preview{margin-top:10px;padding:11px 12px;border-radius:13px;background:#f4f8fc}.tomorrow-preview p{margin:0;color:#4f617d;font-size:.82rem;line-height:1.4}.tomorrow-preview .subsection-heading>span{color:var(--muted);font-size:.8rem}
.school-updates { margin:0 0 14px;padding:14px;border:1px solid #dfeaf3;border-radius:20px;background:rgba(255,255,255,.9);box-shadow:var(--shadow); }
.school-updates .section-heading { margin-bottom:10px; }
.school-proposal { display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px;border-radius:14px;background:#f6faff;border:1px solid #e0ebf6; }
.school-proposal h3 { margin:1px 0 4px;font-size:1rem; }.school-proposal p { margin:0;color:#435676;font-size:.85rem;line-height:1.35; }.school-proposal small { display:block;margin-top:5px;color:var(--muted);font-size:.73rem; }
.proposal-actions { display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px; }.proposal-actions button { min-height:34px;padding:0 9px;border:1px solid #d7e4f0;border-radius:10px;color:#36506d;background:#fff;font-weight:700;font-size:.78rem; }.proposal-actions [data-approve-proposal] { border-color:#0879e8;color:#fff;background:#0879e8; }.school-empty { margin:0;padding:10px;border-radius:12px;background:#f6f9fc;color:#63718a;font-size:.84rem; }
.quick-stars { margin-bottom:14px; padding:14px;border:1px solid #f1e4bf;border-radius:20px;background:linear-gradient(130deg,#fffdf6,#fff6df); }
.quick-stars-heading { margin-bottom:10px; }
.quick-stars-heading .eyebrow { display:none; }
.quick-stars-heading h2 { font-size:1.08rem; }
.quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.quick-action { min-height:58px;grid-template-columns:32px 1fr auto;padding:8px;border-radius:13px; }
.activity-section { padding:14px;border-radius:19px; }
.message-section { border-radius:18px; }
.planner-intro { margin-top:2px; }
@media(max-width:420px) {
  .app-shell { width:calc(100% - 22px); }
  .children-grid { gap:8px; }
  .child-card { padding:10px; }
  .today-overview { padding:11px; }
  .today-child { padding:8px; }
  .school-proposal { grid-template-columns:1fr; }.proposal-actions { justify-content:flex-start; }
  .app-tabs { width:calc(100% - 22px); }
}
@media(min-width:700px) {
  .children-grid { gap:16px; }
  .child-card { padding:18px; }
  .child-topline { display:flex; }
  .remaining { min-height:0;grid-column:auto;grid-row:auto; }
  .star-count { margin-left:auto; }
  .stars { position:static;width:auto;height:auto;overflow:visible;clip:auto;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;margin:8px 0;white-space:normal; }
}
.chart-download { margin:0 0 13px;text-align:center; }
.chart-download a { color:#0879e8;text-decoration:none;font-size:.88rem;font-weight:750; }
.chart-download a:hover { text-decoration:underline; }
.display-window { color:#796000;font-size:.76rem;font-weight:700; }
.display-window > span { display:inline-grid;width:22px;height:22px;place-items:center;margin-right:4px;border-radius:7px;background:#fff0a9;color:#bf8700; }
@media(max-width:540px) {
  .status-row { flex-wrap:wrap; padding:9px 10px; }
  .display-window { display:flex;flex:1 0 100%;align-items:center;padding:8px 10px;border-radius:12px;background:#fff7dc;line-height:1.25; }
}
.tab-panel#star-tab:not([hidden]) { display:flex;flex-direction:column; }
#star-tab .today-overview { order:1; }
#star-tab .children-grid { order:2; }
#star-tab .quick-stars { order:3; }
#star-tab .school-updates { order:4; }
#star-tab .chart-download { order:5; }
#star-tab .activity-section { order:6; }
#star-tab .message-section { order:7; }
.quick-stars{box-shadow:0 12px 30px rgba(180,135,21,.10)}.school-updates{border-color:#d9e7f4}.activity-section,.message-section{box-shadow:0 10px 24px rgba(41,76,119,.07)}
.app-tabs { grid-template-columns:repeat(5,minmax(0,1fr)); }
.app-tab { min-height:48px;flex-direction:column;gap:1px;color:#61708a;font-size:.78rem; }
.app-tab > span { display:block;color:#416388;font-size:1.05rem;line-height:1.1; }
.app-tab small { font-size:.68rem;font-weight:650; }
.app-tab.is-active > span { color:#fff; }
.nav-add { width:50px;height:50px;align-self:center;justify-self:center;display:grid;place-items:center;margin:-12px 0 0;border:0;border-radius:50%;color:#fff;background:linear-gradient(145deg,#1188ff,#0068d7);box-shadow:0 7px 16px #0879e84a;font-size:2rem;line-height:1; }
@media(max-width:700px){.planner-calendar{grid-template-columns:1fr;gap:8px}.event-entry form{grid-template-columns:1fr 1fr}.event-entry label:first-child,.event-entry .planner-save{grid-column:1/-1}.week-switcher{gap:6px;padding:6px}.week-switcher button{min-width:34px}}
@media(max-width:420px) { .app-tab { min-height:46px; }.app-tab small {font-size:.63rem;} .nav-add{width:47px;height:47px;} }

/* Family Hub 2.0: one warm, deliberate control surface for the adults. */
:root { --ink:#102147; --muted:#62728c; --page:#eef5ff; --surface:#ffffff; --line:#dce7f5; --blue:#087cf0; --navy:#123d78; --purple:#8d3fda; --gold:#ffbb18; --shadow:0 16px 42px rgba(34,73,125,.10); }
body { background:radial-gradient(circle at 0 0,#dceeff 0,transparent 30rem),radial-gradient(circle at 100% 12%,#f6eaff 0,transparent 31rem),linear-gradient(160deg,#f3f8ff 0%,#f9fbff 62%,#edf6ff 100%); }
.app-shell { max-width:1020px; }
.app-header { margin-bottom:15px; }
.brand-lockup .eyebrow { color:#4d6e9a; font-weight:800; }
.brand-lockup h1 { font-size:clamp(1.7rem,4vw,2.35rem); }
.today-date { font-weight:650; }
.icon-button { border-color:#d7e5f5; background:rgba(255,255,255,.84); box-shadow:0 10px 28px rgba(39,83,137,.11); }
.status-row { border-color:#dce9f7; background:rgba(255,255,255,.82); box-shadow:none; }
.family-day { position:relative; overflow:hidden; padding:20px; border:1px solid #d9e7f7; border-radius:26px; background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(246,251,255,.92)); box-shadow:var(--shadow); }
.family-day::after { content:""; position:absolute; right:-88px; top:-88px; width:230px; height:230px; border-radius:50%; background:radial-gradient(circle,#c8e7ff 0 29%,rgba(200,231,255,.18) 30% 50%,transparent 51%); pointer-events:none; }
.family-day > * { position:relative; z-index:1; }
.family-day .today-heading { margin-bottom:15px; }
.family-day .today-heading h2 { font-size:1.58rem; letter-spacing:-.035em; }
.family-day .today-heading .eyebrow { color:#3571ae; }
.family-pulse { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0 0 14px; }
.pulse-item { display:flex; align-items:center; gap:9px; min-width:0; padding:10px; border:1px solid #e3ecf7; border-radius:15px; background:rgba(255,255,255,.78); }
.pulse-item > span { display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto; border-radius:10px; color:#0e6fc9; background:#dff0ff; font-size:.82rem; font-weight:900; }
.pulse-item--gabi > span { color:#8232c4; background:#f0e0ff; }
.pulse-item--family > span { color:#9b7000; background:#fff1bd; }
.pulse-item div { display:grid; min-width:0; gap:2px; }
.pulse-item b { overflow:hidden; color:#263f66; font-size:.73rem; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }
.pulse-item small { overflow:hidden; color:#61718a; font-size:.76rem; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.next-up-card { min-height:72px; margin-bottom:12px; padding:14px 15px; border:0; border-radius:18px; background:linear-gradient(110deg,#fff3c7,#fffaf0); box-shadow:inset 0 0 0 1px #f7e2a1; }
.next-up-icon { width:44px; height:44px; border-radius:14px; background:#ffdf71; color:#8d6100; }
.next-up-card strong { font-size:1.05rem; }
.today-rides { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:9px; }
.today-ride { min-height:48px; grid-template-columns:28px minmax(0,1fr); padding:8px 10px; border-color:#e1eaf5; background:rgba(255,255,255,.74); }
.today-ride > strong { font-size:.84rem; }
.today-ride > span:last-child { grid-column:2; font-size:.79rem; }
.today-children { gap:11px; margin-top:11px; }
.today-child { padding:13px; border:1px solid #dcebf9; border-radius:18px; background:linear-gradient(145deg,#edf8ff,#f8fcff); }
.today-child--gabi { border-color:#eadbfa; background:linear-gradient(145deg,#faf1ff,#fdfaff); }
.today-avatar { width:36px; height:36px; border-radius:12px; }
.today-child-title { margin-bottom:9px; font-size:1rem; }
.today-stars { padding:4px 7px; border-radius:999px; background:#fff0bd; font-size:.78rem; }
.today-child > div:not(.today-child-title) { margin-top:8px; }
.today-child b { color:#527092; font-size:.72rem; text-transform:uppercase; letter-spacing:.055em; }
.today-child > div > span { font-size:.86rem; line-height:1.35; }
.today-family-events { margin-top:14px; border-color:#e5edf6; }
.quick-stars { padding:17px; border:1px solid #f2e0a6; border-radius:23px; background:linear-gradient(125deg,#fffdf6,#fff3ce); box-shadow:0 16px 38px rgba(196,149,23,.10); }
.quick-stars-heading h2 { font-size:1.28rem; }
.quick-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.quick-action { min-height:76px; grid-template-columns:1fr; grid-template-rows:auto 1fr auto; justify-items:start; gap:5px; padding:11px; border-radius:16px; background:rgba(255,255,255,.78); }
.quick-icon { width:32px; height:32px; border-radius:11px; }
.quick-action strong { align-self:end; justify-self:end; padding:3px 6px; border-radius:7px; color:#9a7000; background:#fff3c8; }
.children-grid { gap:14px; }
.child-card { padding:17px; border-radius:24px; box-shadow:0 14px 34px rgba(51,100,155,.10); }
.child-card::before { display:block; opacity:.7; }
.child-topline h2 { font-size:1.25rem; }
.star-count { font-size:2.15rem; }
.card-actions .primary-action { min-height:45px; font-size:.9rem; }
.school-updates,.activity-section,.message-section { border-radius:23px; }
.school-updates { padding:17px; }
.school-proposal { padding:14px; border-radius:17px; }
.planner-intro { padding:18px 19px; border:1px solid #dbe9f8; border-radius:23px; background:linear-gradient(120deg,#e8f5ff,#f9f2ff); box-shadow:var(--shadow); }
.planner-intro h2 { font-size:1.5rem; }
.week-switcher { margin:14px 0 10px; border:0; border-radius:17px; background:rgba(255,255,255,.78); box-shadow:0 7px 20px rgba(48,86,131,.07); }
.week-switcher strong { color:#163e74; }
.week-switcher button { border-color:#dde9f5; background:#f7fbff; }
.day-tabs { gap:7px; padding:3px; overflow-x:auto; scrollbar-width:none; }
.day-tab { min-width:62px; min-height:58px; border-radius:15px; background:rgba(255,255,255,.72); }
.day-tab.is-active { background:linear-gradient(145deg,#087cf0,#0c68c2); }
.planner-calendar { margin:14px 0; padding:17px; border:1px solid #dce9f6; border-radius:23px; background:rgba(255,255,255,.86); box-shadow:0 10px 28px rgba(36,77,122,.07); }
.planner-calendar h2 { font-size:1.15rem; }
.planner-calendar li { border:1px solid #e2ebf6; border-radius:13px; background:#f8fbff; }
.event-entry { margin-top:4px; }
.event-entry summary { padding:9px 0 4px; font-size:.92rem; }
.event-templates { display:flex; flex-wrap:wrap; gap:7px; grid-column:1/-1; }
.event-templates button { min-height:35px; padding:0 10px; border:1px solid #cfe3fb; border-radius:999px; color:#126fca; background:#f3f9ff; font-size:.8rem; font-weight:750; }
.event-templates button:hover { background:#e5f3ff; }
.planner-card { padding:19px; border-radius:24px; box-shadow:var(--shadow); }
.planner-day-heading h2 { font-size:1.45rem; }
.planner-child { border-radius:18px; }
.planner-save { min-height:50px; border-radius:15px; }
@media (max-width:700px) { .family-pulse{grid-template-columns:1fr 1fr}.quick-grid{grid-template-columns:1fr 1fr}.today-rides{grid-template-columns:1fr}.planner-intro{padding:16px}.day-tabs{margin-right:-4px}.day-tab{min-width:50px} }
@media (max-width:420px) { .family-day{padding:15px}.family-day .today-heading h2{font-size:1.38rem}.pulse-item{padding:9px;gap:7px}.pulse-item > span{width:28px;height:28px}.pulse-item small{font-size:.7rem}.quick-action{min-height:70px}.today-child{padding:11px}.planner-calendar,.planner-card{padding:14px} }

/* Calendar-first planner final layout overrides */
.planner-calendar { grid-template-columns:minmax(170px,.55fr) 1fr; }
.routine-card { margin:14px 0 0; padding:16px; border:1px solid #e1e8f1; border-radius:22px; background:rgba(255,255,255,.78); box-shadow:0 8px 24px rgba(28,48,77,.045); }
.routine-card > .planner-day-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 2px 10px; padding:0 0 12px; border-bottom:1px solid #e6edf5; }
.routine-card > summary { list-style:none; cursor:pointer; }
.routine-card > summary::-webkit-details-marker { display:none; }
.routine-card > summary::after { content:"⌄"; flex:0 0 auto; color:#527196; font-size:1.1rem; font-weight:800; }
.routine-card[open] > summary::after { content:"⌃"; }
.routine-card .planner-day-heading h2 { margin:0; font-size:1.35rem; }
.routine-card .planner-day-heading > span { max-width:200px; padding:7px 10px; border-radius:999px; background:#edf6ff; color:#236ba8; font-size:.78rem; font-weight:750; text-align:center; }
.routine-holiday-note { margin:0 0 12px; padding:10px 12px; border-radius:13px; background:#f1f7fd; color:#546983; font-size:.84rem; line-height:1.45; }
.routine-holiday-note.is-holiday { background:#fff4d3; color:#785b16; }
.routine-card .planner-card { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.routine-card .planner-save { border-radius:14px; }
.routine-calendar-time { display:grid; grid-template-columns:auto minmax(120px,180px) minmax(120px,180px) 1fr; align-items:end; gap:10px; margin:0 0 14px; padding:12px; border:1px solid #dbe8f5; border-radius:15px; background:#f7fbff; }
.routine-calendar-time > span { color:#264f7d; font-size:.88rem; font-weight:800; }
.routine-calendar-time label { display:grid; gap:5px; color:#536a88; font-size:.75rem; font-weight:750; }
.routine-calendar-time input { min-height:40px; padding:8px 10px; border:1px solid #d6e2f0; border-radius:10px; background:#fff; color:var(--ink); }
.routine-calendar-time small { color:#61738d; font-size:.75rem; line-height:1.35; }
@media(max-width:700px) { .routine-calendar-time { grid-template-columns:1fr 1fr; align-items:start; }.routine-calendar-time > span,.routine-calendar-time small { grid-column:1/-1; } }
@media(max-width:700px) { .planner-calendar{grid-template-columns:1fr}.routine-card{padding:13px}.routine-card .planner-day-heading{align-items:flex-start}.routine-card .planner-day-heading>span{max-width:140px} }
@media(max-width:420px) { .routine-card .planner-day-heading h2{font-size:1.22rem}.routine-card .planner-day-heading>span{padding:6px 8px;font-size:.72rem} }

/* Family Hub navigation redesign */
.tab-panel#home-tab:not([hidden]), .tab-panel#stars-tab:not([hidden]), .tab-panel#routine-tab:not([hidden]) { display:flex; flex-direction:column; gap:16px; }
#home-tab .status-row { order:0; }
#home-tab .today-overview { order:1; }
.tab-intro { padding:4px 2px 0; }
.tab-intro h2 { margin:2px 0 6px; color:#122a55; font-size:1.65rem; }
.tab-intro p:last-child { margin:0; color:#5f7191; line-height:1.45; }
.routine-screen .routine-card { display:block; margin:0; }
.routine-screen .routine-card[open] summary { margin-bottom:12px; }
.routine-day-tabs { margin:0; }
.quick-add-sheet .sheet-content { display:grid; gap:16px; }
.quick-add-list { display:grid; gap:10px; }
.quick-add-list button { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:12px; width:100%; padding:14px; border:1px solid #dbe6f4; border-radius:18px; background:#f8fbff; color:#17305d; text-align:left; }
.quick-add-list button > span { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:linear-gradient(135deg,#e7f3ff,#f2eaff); color:#176de5; font-size:1.35rem; }
.quick-add-list strong, .quick-add-list small { display:block; }
.quick-add-list small { margin-top:3px; color:#667896; }
.quick-add-list b { font-size:1.45rem; color:#7a8aa5; }
.source-card { display:grid; gap:9px; margin:12px 0; padding:15px; border:1px solid #dbe6f4; border-radius:18px; background:#f8fbff; }
.source-card strong { color:#142c58; }
.source-card p { margin:0; color:#627493; line-height:1.45; }
.source-card .quiet-action { justify-self:start; }
.source-links a { color:#096fde; font-weight:700; }
.import-file { display:inline-flex; align-items:center; justify-content:center; width:max-content; padding:10px 13px; border-radius:12px; background:#e8f3ff; color:#0a68d1; font-weight:700; cursor:pointer; }
.import-file input { position:absolute; width:1px; height:1px; opacity:0; }
.source-inbox { margin-top:18px; }
.source-inbox .section-heading { margin-bottom:8px; }
.settings-sheet #open-sources { margin-top:8px; }
@media (max-width: 560px) { .quick-add-list button { padding:12px; } .tab-intro { padding-top:0; } }

/* Parent display studio */
.display-control-note { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; background:#edf4fc; color:#537092; font-size:.78rem; font-weight:700; white-space:nowrap; }
.display-studio-sheet .sheet-content { display:grid; gap:16px; }
.studio-section { padding:15px; border:1px solid #dbe6f4; border-radius:18px; background:#fbfdff; }
.studio-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.studio-heading h3 { margin:0; color:#142c58; }
.studio-heading p { margin:3px 0 0; color:#6b7c99; font-size:.9rem; }
.animation-list { display:grid; gap:9px; }
.animation-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-top:1px solid #e2eaf5; }
.animation-item:first-child { border-top:0; padding-top:0; }
.animation-item strong, .animation-item small { display:block; }
.animation-item strong { color:#193461; }
.animation-item small { margin-top:3px; color:#6b7c99; font-size:.8rem; }
.animation-item div:last-child { display:flex; gap:6px; }
.animation-editor { margin-top:13px; border-top:1px solid #e2eaf5; padding-top:12px; }
.animation-editor summary { cursor:pointer; color:#0c71df; font-weight:800; }
.animation-editor form { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.animation-editor label { display:grid; gap:5px; color:#526786; font-size:.82rem; font-weight:700; }
.animation-editor input, .animation-editor select { width:100%; box-sizing:border-box; min-height:40px; padding:8px 9px; border:1px solid #cbd9eb; border-radius:10px; background:#fff; color:#142c58; font:inherit; }
.animation-editor .planner-save { grid-column:1/-1; }
@media (max-width: 560px) { .studio-heading { align-items:center; } .animation-editor form { grid-template-columns:1fr; } }

.badge-controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.badge-controls label { display:grid; gap:5px; color:#526786; font-size:.82rem; font-weight:700; }
.badge-controls select { min-height:40px; padding:8px 9px; border:1px solid #cbd9eb; border-radius:10px; background:#fff; color:#142c58; font:inherit; }
.badge-controls .planner-save { grid-column:1/-1; }
.animation-filter-label { display:grid; gap:4px; color:#64748b; font-size:.72rem; font-weight:750; white-space:nowrap; }
.animation-filter-label select { min-height:34px; padding:5px 8px; border:1px solid #d7e2ee; border-radius:9px; color:#243b60; background:#fff; font:inherit; }
.history-actions select { min-height:32px; padding:5px 7px; border:1px solid #d9e2ed; border-radius:8px; color:#526782; background:#fff; font-size:.75rem; }
.calendar-view-switcher { display:flex; gap:5px; margin:0 0 10px; padding:3px; width:max-content; border:1px solid var(--line); border-radius:10px; background:#fff; }
.calendar-view-switcher button { min-height:30px; padding:0 11px; border:0; border-radius:7px; color:#687990; background:transparent; font-size:.78rem; font-weight:750; }
.calendar-view-switcher button.is-active { color:#126fe5; background:#eef5ff; }
@media (max-width:560px) { .badge-controls { grid-template-columns:1fr; } }

/* 2026 product refresh: content-first, calm, and deliberately compact. */
:root { --ink:#14213d; --muted:#64748b; --page:#f7f9fc; --surface:#fff; --line:#e4e9f0; --blue:#126fe5; --navy:#14213d; --purple:#8a3fd0; --gold:#f3b316; --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05); }
body { background:var(--page); }
.app-shell { width:min(100% - 32px,760px); padding:calc(env(safe-area-inset-top) + 20px) 0 calc(env(safe-area-inset-bottom) + 112px); }
.app-header { margin-bottom:18px; }.brand-lockup h1 { color:var(--ink); font-size:clamp(1.7rem,5vw,2.15rem); font-weight:760; letter-spacing:-.045em; }.brand-lockup .eyebrow { color:#55739d; font-size:.88rem; font-weight:720; letter-spacing:0; text-transform:none; }.today-date { margin-top:4px; color:var(--muted); font-size:.9rem; font-weight:600; }.icon-button { width:42px; height:42px; border-radius:50%; border-color:var(--line); box-shadow:var(--shadow); }
/* One clear navigation layer: it never masks the last item in a list. */
.app-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; z-index:30; left:50%; bottom:max(10px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(calc(100% - 24px),600px); margin:0; padding:6px; border:1px solid rgba(220,227,236,.92); border-radius:22px; background:rgba(255,255,255,.97); box-shadow:0 12px 34px rgba(20,33,61,.14); backdrop-filter:blur(18px); }.app-tab { min-height:52px; flex-direction:column; gap:3px; border-radius:16px; color:#65748b; font-size:.77rem; }.app-tab > span { display:block; color:currentColor; font-size:1.05rem; }.app-tab small { font-size:.7rem; font-weight:700; }.app-tab.is-active { color:var(--blue); background:#eef5ff; box-shadow:none; }.app-tab.is-active > span { color:var(--blue); }.nav-add { width:48px; height:48px; align-self:center; justify-self:center; margin:0; border:0; border-radius:16px; color:#fff; background:var(--blue); box-shadow:0 6px 14px rgba(18,111,229,.25); font-size:1.85rem; }
.tab-panel#home-tab:not([hidden]), .tab-panel#stars-tab:not([hidden]), .tab-panel#routine-tab:not([hidden]) { gap:14px; }.status-row { min-height:0; margin:0; padding:11px 12px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:none; }.device-status { font-size:.84rem; }.display-window { display:none; }.display-control-note { margin-left:auto; padding:0; color:#75839a; background:none; font-size:.78rem; }
/* Summary uses intentional grouping, not a collection of decorative panels. */
.family-day { padding:18px; border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:var(--shadow); }.family-day::after { display:none; }.family-day .today-heading { margin-bottom:13px; }.family-day .today-heading h2 { font-size:1.35rem; }.family-day .today-heading .eyebrow { color:#667c99; font-size:.72rem; }.family-pulse { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:12px; }.pulse-item { min-height:58px; padding:9px; gap:7px; border:1px solid #edf0f4; border-radius:13px; background:#fbfcfe; }.pulse-item > span { width:28px; height:28px; border-radius:9px; }.pulse-item b { font-size:.71rem; }.pulse-item small { font-size:.72rem; }.next-up-card { min-height:0; margin-bottom:11px; padding:12px; border:1px solid #f1e0a2; border-radius:15px; background:#fffaf0; box-shadow:none; }.next-up-icon { width:38px; height:38px; border-radius:11px; }.today-rides { grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }.today-ride { min-height:46px; padding:8px 9px; border-radius:12px; }.today-children { gap:10px; margin-top:10px; }.today-child { padding:11px; border-radius:14px; box-shadow:none; }.today-child-title { margin-bottom:6px; font-size:.95rem; }.today-child > div:not(.today-child-title) { margin-top:6px; }.today-family-events { margin-top:10px; padding-top:10px; }
/* Tabs are work surfaces: no duplicated title stacks or oversized landing cards. */
.tab-intro { padding:0 2px; }.tab-intro .eyebrow { margin:0 0 4px; color:#647b99; }.tab-intro p:last-child { max-width:580px; margin:0; color:var(--muted); font-size:.92rem; line-height:1.45; }.planner-intro { align-items:flex-start; margin:0 0 14px; padding:0 2px; border:0; border-radius:0; background:transparent; box-shadow:none; }.planner-intro h2 { margin:0 0 5px; color:var(--ink); font-size:1.35rem; letter-spacing:-.035em; }.planner-intro p:not(.eyebrow) { max-width:580px; font-size:.92rem; }.morning-chip { margin-top:4px; border-color:#d8e7fb; color:#26639d; background:#eef6ff; }.week-switcher { margin:0 0 10px; padding:5px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:none; }.week-switcher strong { color:var(--ink); font-size:.9rem; }.week-switcher button { border-color:transparent; background:#f4f7fb; }.day-tabs { gap:6px; margin:0 0 12px; padding:0; }.day-tab { min-width:0; min-height:54px; border-color:var(--line); border-radius:13px; background:var(--surface); }.day-tab.is-active { border-color:var(--blue); background:var(--blue); box-shadow:none; }.planner-calendar { margin:0; padding:15px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); }.planner-calendar h2 { font-size:1.08rem; }.planner-calendar li { padding:10px; border-color:#edf0f4; background:#fbfcfe; }.event-entry { margin-top:5px; }
/* Reward actions look like controls, not a miniature dashboard. */
.quick-stars { margin:0; padding:15px; border:1px solid #f1e1ae; border-radius:18px; background:#fffaf0; box-shadow:none; }.quick-stars-heading h2 { font-size:1.12rem; }.quick-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }.quick-action { min-height:86px; grid-template-columns:1fr; grid-template-rows:auto 1fr auto; justify-items:start; gap:5px; padding:10px; border-color:#ece7da; border-radius:13px; background:#fff; box-shadow:none; }.quick-action:hover { transform:none; box-shadow:inset 0 0 0 1px #c9ddf7; }.quick-action strong { justify-self:end; padding:2px 6px; border-radius:6px; background:#fff3c5; }.children-grid { gap:12px; margin:0; }.child-card { padding:14px; border-radius:18px; box-shadow:none; }.child-topline h2 { font-size:1.12rem; }.star-count { font-size:1.85rem; }.card-actions .primary-action { min-height:42px; border-radius:11px; }.quiet-action { width:42px; height:42px; border-radius:11px; }.activity-section { margin:0; padding:15px; border-radius:18px; box-shadow:none; }.chart-download { margin:0; }
/* Routine opens straight into editable contents; settings stay progressive. */
.routine-card { margin:0; padding:15px; border-color:var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); }.routine-card > .planner-day-heading { margin:0 0 12px; }.routine-card .planner-day-heading h2 { font-size:1.22rem; }.routine-card .planner-day-heading > span { background:#eef6ff; }.routine-calendar-time { margin-bottom:12px; border-color:#e4ebf4; background:#fafcff; }.planner-card { padding:0; border:0; border-radius:0; box-shadow:none; }.planner-child { border-radius:14px; }.planner-save { border-radius:12px; }
/* Sheets use a compact action-sheet hierarchy instead of oversized empty space. */
.sheet { border-radius:24px; }.sheet form,.sheet-content { padding:20px; }.sheet h2 { font-size:1.45rem; letter-spacing:-.035em; }.quick-add-list { gap:8px; }.quick-add-list button { padding:12px; border-radius:14px; background:#fff; }.quick-add-list button > span { width:38px; height:38px; border-radius:11px; background:#eef5ff; }.studio-section,.source-card { border-radius:14px; background:#fbfcfe; }
@media (max-width:700px) { .family-pulse { grid-template-columns:1fr 1fr; }.quick-grid { grid-template-columns:1fr 1fr; }.today-rides { grid-template-columns:1fr; }.planner-calendar { grid-template-columns:1fr; gap:8px; } }
@media (max-width:480px) { .app-shell { width:calc(100% - 24px); }.app-header { margin-bottom:14px; }.brand-lockup h1 { font-size:1.72rem; }.family-day { padding:14px; }.family-pulse { gap:6px; }.pulse-item { padding:8px; }.pulse-item small { font-size:.68rem; }.today-child { padding:9px; }.today-child > div > span { font-size:.8rem; }.planner-intro { margin-bottom:12px; }.planner-intro h2 { font-size:1.25rem; }.quick-action { min-height:76px; }.day-tab { min-height:50px; }.day-tab strong { font-size:.88rem; } }
.activity-time-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:-4px 0 8px; }
.activity-time-fields label { font-size:.78rem; }
.event-time-fields,.display-settings-form { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.event-time-fields label,.display-settings-form label { font-size:.8rem; }
/* Shared iPhone form and sheet rules: one control rhythm and no intrinsic overflow. */
input,select,textarea { min-width:0; max-width:100%; font-size:1rem; }
button { touch-action:manipulation; transition:background .15s,opacity .15s,transform .1s; }
button:active:not(:disabled) { transform:scale(.98); }
button:disabled { cursor:wait; opacity:.55; }
label { min-width:0; }
.sheet-content form { padding:0; }
.sheet form label,.sheet-content label { display:grid; gap:7px; margin-bottom:14px; font-size:.9rem; font-weight:600; color:var(--ink); }
.sheet input:not([type=checkbox]),.sheet select,.sheet textarea { width:100%; min-height:46px; padding:11px 12px; border:1px solid var(--line); border-radius:11px; background:#f8f9fc; color:var(--ink); }
.sheet input[type=checkbox] { width:23px; height:23px; accent-color:#007aff; }
.sheet { max-height:90dvh; overscroll-behavior:contain; border-radius:24px; }
.sheet-dismiss,.settings-sheet form > .sheet-dismiss { position:sticky; top:0; display:block; width:auto; min-height:44px; margin:0 0 8px auto; padding:8px 12px; border:0; background:#fff; border-radius:10px; color:#007aff; font-weight:600; z-index:2; }
.sheet-close,#calendar-cancel { display:none; }
.event-entry form { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.event-entry label { min-width:0; font-size:.9rem; }
.event-entry input,.event-entry select { min-height:46px; font-size:1rem; min-width:0; }
.event-time-fields { grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); }
.event-entry label:has(#family-event-title),.event-entry label:has(#family-event-location) { grid-column:1/-1; }
.event-entry summary { min-height:44px; display:flex; align-items:center; }
.calendar-month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; margin:14px 0; }
.month-weekday { padding:6px; text-align:center; font-size:.8rem; color:var(--muted); }
.month-day { min-width:0; min-height:82px; padding:6px 3px; display:flex; flex-direction:column; gap:4px; align-items:center; border:0; border-radius:8px; background:#f4f6fa; color:var(--ink); }
.month-day strong { width:25px; height:25px; display:grid; place-items:center; font-size:.85rem; }
.month-day span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.75rem; color:#075b9a; }
.month-day.is-today strong { background:#007aff; color:white; border-radius:50%; }
.outside-month { opacity:.4; }
.planner-calendar .week-agenda-day { display:block; background:transparent; padding:0; border:0; }
.week-agenda-day h3 { margin:18px 0 8px; font-size:1rem; }
.week-agenda-day ul { padding:0; display:grid; gap:5px; list-style:none; }
.pending-sync { color:#8a6300; font-size:.8rem; }
.shopping-home-link { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:54px; margin:0 0 16px; padding:14px 18px; border:1px solid var(--line); border-radius:16px; background:#fff; color:var(--ink); font-weight:650; text-align:left; }
.shopping-items .shopping-item { display:flex; align-items:center; gap:13px; min-height:54px; padding:12px 0; margin:0; border-bottom:1px solid var(--line); font-size:1rem; font-weight:400; }
.shopping-item:has(:checked) span { color:var(--muted); text-decoration:line-through; }
.shopping-add-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin-top:18px; }
.school-home-alert { padding:18px; margin-bottom:16px; background:#fff; border:1px solid #cddff4; border-radius:18px; }
.school-home-alert p { font-size:.95rem; line-height:1.5; white-space:pre-line; margin:12px 0 0; }
.school-action-summary { color:var(--muted); }
.home-school-item { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding-top:12px; margin-top:12px; }
.home-school-item span { min-width:0; }
.home-school-item small { display:block; color:var(--muted); margin-top:3px; }
.home-school-item button { flex-shrink:0; }
.app-tab svg,.icon-button svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media(prefers-reduced-motion:reduce) { button { transition:none; } }
.display-settings-form .planner-save { grid-column:1/-1; }
.planner-calendar-heading { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }

/* Shared mobile interaction layer. Text actions grow; only icon actions are square. */
:root { --blue:#007aff; --ink:#16243d; --muted:#5f6b7c; }
body.has-sheet { overflow:hidden; }
button,summary,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
input,select,textarea { box-sizing:border-box; width:100%; min-width:0; min-height:48px; font-size:1rem; line-height:1.35; border-radius:12px; }
input::-webkit-date-and-time-value { text-align:left; }
input[type=checkbox] { width:24px; min-height:24px; flex:0 0 24px; }
fieldset { min-width:0; }
.quiet-action { width:auto; height:auto; min-height:44px; padding:10px 14px; font-size:.9375rem; line-height:1.3; white-space:normal; }
.card-actions .quiet-action { width:44px; padding:8px; flex:0 0 44px; }
.text-button { min-height:44px; padding:8px 0; font-size:.9375rem; }
.primary-action,.planner-save { min-height:48px; line-height:1.35; padding:12px 16px; }
.app-shell { padding-bottom:calc(116px + env(safe-area-inset-bottom)); }
.app-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; gap:3px; padding:7px 8px calc(7px + env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; bottom:0; box-shadow:0 -4px 20px #17243a0c; }
.app-tab { min-width:0; min-height:58px; padding:7px 2px; gap:4px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.app-tab small { font-size:.875rem; line-height:1.2; }
.app-tab.is-active { box-shadow:none; border-radius:16px; }
.nav-add { justify-self:center; width:48px; height:48px; min-width:0; font-size:2rem; box-shadow:none; }
.nav-add { position:relative; display:grid; place-items:center; align-content:center; gap:0; line-height:1; }
.nav-add small { display:block; margin-top:-2px; font-size:.58rem; font-weight:800; letter-spacing:.02em; }
.sheet { width:min(calc(100% - 20px),600px); max-height:calc(var(--visual-height,90dvh) - 24px); border-radius:24px; overflow-x:hidden; scroll-padding:76px 0 32px; }
.sheet-content,.sheet > form { padding:16px 20px 24px; }
.sheet-dismiss { position:sticky; top:0; min-height:44px; grid-column:1/-1; justify-self:end; margin-left:auto; box-shadow:0 2px 0 #fff; }
.sheet h2 { font-size:1.5rem; line-height:1.15; margin:4px 0 16px; }
.sheet .sheet-handle { display:none; }
.sheet-feedback { grid-column:1/-1; padding:12px 14px; margin:0 0 12px; border-radius:12px; background:#edf6ff; color:#164d80; font-size:.9375rem; line-height:1.4; }
.sheet .field-help,.field-help { font-size:.875rem; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; }
.connection-card { align-items:flex-start; padding:16px; min-height:72px; }
.connection-card > div { min-width:0; }
.connection-card strong { font-size:1rem; }
.connection-card span { font-size:.875rem; line-height:1.4; overflow-wrap:anywhere; }
.connection-state { max-width:35%; white-space:normal; }
.event-entry form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; }
.event-entry form h2,.event-entry form .sheet-feedback,.event-entry form .form-error { grid-column:1/-1; }
.event-entry label { margin:0; }
.event-time-fields { gap:12px; }
.add-event-button { width:100%; min-height:48px; margin-top:16px; padding:12px 16px; background:#edf6ff; color:#0069d9; border:0; border-radius:12px; font-weight:650; }
.form-pair,.activity-time-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.planner-child > label,.planner-child > .activity-time-fields { grid-column:1/-1; }
.planner-child { gap:14px; }
.routine-calendar-time { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.routine-calendar-time > span,.routine-calendar-time > small { grid-column:1/-1; }
.routine-calendar-time small { font-size:.875rem; line-height:1.4; }
.save-status,.form-error { grid-column:1/-1; font-size:.9375rem; line-height:1.5; margin:4px 0; }
.form-error { color:#a32135; background:#fff0f2; padding:12px; border-radius:10px; }
.form-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; margin-top:18px; }
.form-actions > button { flex:1 1 150px; }
.source-card { padding:16px; margin:16px 0; overflow-wrap:anywhere; }
.school-connections fieldset { border:0; border-bottom:1px solid var(--line); padding:16px 0 20px; margin:0 0 16px; }
.school-connections legend { font-size:1rem; font-weight:700; padding:0; }
.school-check-actions { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.school-check-actions button { flex:1 1 160px; }
.sheet-content label.switch-row { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:1rem; }
.switch-row small { display:block; margin-top:5px; font-weight:400; font-size:.875rem; color:var(--muted); line-height:1.4; }
.school-inbox-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.school-inbox-toolbar p { margin:0; font-size:.9375rem; color:var(--muted); }
.school-report { border:1px solid var(--line); border-radius:16px; padding:16px; margin:12px 0; }
.school-report p { white-space:pre-line; font-size:.9375rem; line-height:1.5; margin:10px 0; overflow-wrap:anywhere; }
.report-heading { display:flex; gap:12px; justify-content:space-between; align-items:baseline; }
.report-heading small { font-size:.875rem; color:var(--muted); white-space:nowrap; }
.school-home-alert { border-left:4px solid #007aff; }
.school-home-alert .school-report { border:0; padding:8px 0; margin:0; }
.inbox-count { display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 6px; border-radius:12px; font-size:.875rem; color:#fff; background:#007aff; }
.school-proposal { display:block; margin:12px 0; padding:16px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.school-proposal h3 { font-size:1.0625rem; line-height:1.4; margin:6px 0; }
.school-proposal p { font-size:.9375rem; line-height:1.5; overflow-wrap:anywhere; }
.proposal-actions { display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.proposal-actions button { min-height:44px; padding:10px 14px; flex:1 1 120px; border:0; border-radius:10px; font-size:.9375rem; background:#edf6ff; color:#0069d9; }
.proposal-actions button:first-child { background:#f3f4f7; color:var(--muted); }
.original-notice { margin:12px 0 20px; border:1px solid var(--line); border-radius:12px; padding:12px; }
.original-notice summary { min-height:44px; display:flex; align-items:center; color:#0069d9; font-weight:600; }
.original-notice p { white-space:pre-line; line-height:1.5; font-size:.9375rem; }
.school-connection-error { padding:12px; border-radius:12px; background:#fff5df; }
.school-date-group,.proposal-date-group { margin:14px 0; }
.school-date-group h3,.proposal-date-group>h3 { margin:0 0 8px; color:#536988; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; }
.school-date-group ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.school-date-group li { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.school-date-group li>div { min-width:0; }.school-date-group li p { margin:3px 0; color:var(--muted); font-size:.84rem; line-height:1.35; }.school-date-group li small { color:var(--muted); font-size:.76rem; }
.school-item-status { flex:0 0 auto; padding:5px 8px; border-radius:9px; color:#64728a; background:#f2f5f8; font-size:.7rem; font-weight:750; }.school-item-status.is-candidate { color:#805f00; background:#fff3c7; }
.school-action-item { display:flex; align-items:center; gap:10px; margin:8px 0; padding:11px 12px; border:1px solid var(--line); border-radius:14px; background:#fff; }.school-action-item input { width:20px; height:20px; flex:0 0 auto; }.school-action-item span { display:grid; gap:3px; min-width:0; flex:1; }.school-action-item small { color:var(--muted); font-size:.78rem; }.school-action-item .text-button { flex:0 0 auto; }
.proposal-date-group { border-top:1px solid var(--line); padding-top:12px; }
.toast { bottom:calc(96px + env(safe-area-inset-bottom)); font-size:.9375rem; line-height:1.4; }
@media(max-width:430px) {
  .sheet-content,.sheet > form { padding:12px 16px 24px; }
  .app-tabs { width:100%; left:0; right:0; transform:none; }
  .week-switcher { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:6px; }
  .week-switcher #current-week { grid-column:1/-1; justify-self:end; }
  .planner-intro { display:block; }
  .planner-intro .morning-chip { display:inline-block; margin-top:8px; }
  .connection-card { flex-wrap:wrap; }
  .connection-state { max-width:100%; }
}
@media(max-width:360px) {
  .children-grid { grid-template-columns:1fr; }
  .form-pair,.event-entry form,.display-settings-form { grid-template-columns:minmax(0,1fr); }
  .form-pair label { margin-bottom:10px; }
  .app-tab small { font-size:.8125rem; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Family Hub v60: compact summaries and clear working controls */
[hidden]{display:none!important}
.planner-intro{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;margin:0 0 16px;background:none;border:none;box-shadow:none}
.planner-intro h2{font-size:1.25rem;margin:0}.planner-intro .eyebrow{display:none}
.home-rewards{display:grid;gap:8px;margin-bottom:16px}.home-rewards button{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;background:#fff8d9;color:#574006;border:1px solid #ead89a;border-radius:16px;padding:16px;min-height:48px;font-size:1rem}.home-rewards span{font-size:.875rem}
.event-sync{font-size:.875rem;display:block;margin-top:6px;color:#3c7461}.event-sync--error{color:#a13b28}.event-sync--pending{color:#876523}
.routine-preview{background:#f5f8fc;border:1px solid #dbe3ee;border-radius:16px;padding:16px;grid-column:1/-1}.routine-preview h3{margin:0 0 12px;font-size:1rem}.routine-preview ul{padding-left:20px;margin:0;display:grid;gap:10px}.routine-preview li{line-height:1.5;font-size:1rem;overflow-wrap:anywhere}
.health-row{display:grid;gap:6px;border-bottom:1px solid #e2e7ed;padding:16px 0}.health-row strong{font-size:1rem}.health-row small{font-size:.875rem;color:#607089}.backup-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #e2e7ed}.backup-row span{font-size:.875rem}#backup-confirm{padding:16px;border:1px solid #dfc37a;border-radius:16px;background:#fff9e9;margin-top:16px}
input[type=range]{width:100%;min-height:44px;accent-color:#087af0}.calendar-event-time{font-size:.875rem!important}.today-child b,.pulse-item small,.field-help{font-size:.875rem!important}.form-pair>*{min-width:0}.sheet input,.sheet textarea,.sheet select{max-width:100%;box-sizing:border-box}.sheet .form-actions{display:flex;flex-wrap:wrap;gap:12px}.sheet .form-actions>*{flex:1 1 140px}.sheet .primary-action{min-height:48px}
@media(max-width:380px){.planner-intro{align-items:flex-start;flex-direction:column}.today-children{grid-template-columns:1fr}.home-rewards button{align-items:flex-start;flex-direction:column}.backup-row{flex-wrap:wrap}}

/* Compact, stable controls for family planning and recovery. */
.hub-save-status { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px;margin:-8px 0 14px;padding:0 4px;color:var(--muted);font-size:.78rem; }
.hub-save-status[data-phase="error"],.hub-save-status[data-phase="offline"],.hub-save-status[data-phase="pending"] { padding:10px 12px;border-radius:12px;background:#fff6dc;color:#75540b; }
.hub-save-status button { flex:none;min-height:44px; }
.calendar-tools { display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;margin:16px 0 6px; }
.calendar-tools label,.routine-copy label { display:grid;gap:5px;min-width:0;color:var(--muted);font-size:.78rem;font-weight:600; }
.calendar-tools .calendar-search { grid-column:1/-1; }
.calendar-tools input,.calendar-tools select,.routine-copy select { box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid #d7e2ec;border-radius:12px;background:#fff;color:#173554;font:inherit;font-size:16px; }
#calendar-filter-summary { margin:6px 2px 12px; }
.event-title-button { display:block;max-width:100%;padding:4px 0;min-height:44px;border:0;background:transparent;color:#173554;text-align:left;font:inherit;font-weight:700;overflow-wrap:anywhere; }
.event-details-list { margin:12px 0 22px; }
.event-details-list div { padding:12px 0;border-bottom:1px solid #e5ebf1; }
.event-details-list dt { font-size:.78rem;color:var(--muted);margin-bottom:5px; }
.event-details-list dd { margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45; }
.event-detail-actions { display:grid;gap:12px; }
.event-entry textarea { box-sizing:border-box;width:100%;min-width:0;border:1px solid #d7e2ec;border-radius:12px;padding:12px;font:inherit;font-size:16px;resize:vertical; }
.overlap-notice { margin:12px 0;padding:12px;background:#fff5da;color:#76540b;border-radius:12px;font-size:.88rem;line-height:1.45; }
.routine-copy { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid #e1e8ef; }
#routine-copy-description { white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5; }
.calendar-tools input:focus-visible,.calendar-tools select:focus-visible,.event-title-button:focus-visible { outline:3px solid #78b8f8;outline-offset:3px; }
@media(max-width:380px){.routine-copy {grid-template-columns:1fr;} .calendar-tools {gap:8px;} }
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;} }
/* Family tab: five destinations; quick add stays within reach in the header. */
.app-header { gap:10px; }.brand-lockup { flex:1;min-width:0; }.app-header .nav-add { width:42px;height:42px;flex:none;font-size:1.6rem; }.app-header .icon-button { flex:none; }
.family-jumps { display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px; }.family-jumps a { padding:10px 14px;background:#edf3f9;border-radius:20px;color:#315374;text-decoration:none;font-size:.85rem; }
.family-section { margin:0 0 18px;padding:18px;border:1px solid #e1e8ef;border-radius:20px;background:#fff;scroll-margin-top:16px; }.family-section h2 { margin:0 0 12px;font-size:1.2rem; }.family-section .sheet-content { padding:0; }.family-section p { line-height:1.5; }.family-week { display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.8rem;margin-bottom:12px; }.weekly-source { padding:12px 0;border-top:1px solid #e8edf3; }.weekly-source h3 {margin:0 0 10px;font-size:1rem;}.weekly-source ul {padding-left:18px;}.weekly-source li {margin:0 0 16px;}.weekly-source li p {margin:4px 0;font-size:.88rem;}.weekly-source small {color:#66768b;}
.family-ask { background:linear-gradient(135deg,#f4f8ff,#fbf7ff); border-color:#d9e6f6; }.family-ask-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; margin:12px 0 8px; }.family-ask-form input { min-height:46px; border:1px solid #d6e1ef; border-radius:13px; padding:0 13px; background:#fff; font:inherit; }.family-ask-answer { margin:10px 0 0; padding:12px 13px; border-radius:13px; background:#fff; color:#263d5e; white-space:pre-line; line-height:1.45; }.ask-prompts { display:flex; flex-wrap:wrap; gap:7px; }.ask-prompts .quiet-action { min-height:34px; padding:0 11px; border-radius:10px; font-size:.78rem; }.section-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:#7c4fc8; background:#eee5ff; }.family-executive-summary { margin:0 0 12px; padding:13px 14px; border-left:3px solid #287fe1; border-radius:10px; background:#f3f8ff; color:#263d5e; font-weight:650; }
.pulse-item,.today-child,.next-up-card,.home-event-link { font:inherit; text-align:left; cursor:pointer; }.pulse-item { width:100%; border:1px solid #edf0f4; }.today-child { width:100%; border:1px solid #dce8f4; color:inherit; }.next-up-card { width:100%; border:1px solid #f1e0a2; color:inherit; }.home-event-link { display:flex; align-items:center; gap:10px; width:100%; padding:0; border:0; background:transparent; color:inherit; }.home-event-link:hover strong,.pulse-item:hover b,.today-child:hover strong,.next-up-card:hover strong { color:var(--blue); }
.family-ask-answer { white-space:pre-line; }.family-ask-insight { margin:8px 0 0; padding:9px 11px; border-radius:10px; color:#5a4a78; background:#f2ebff; font-size:.82rem; line-height:1.35; }.home-ask-action { margin-top:9px; }.assistant-action { min-height:40px; border-color:#cddff2; background:#f5f9ff; color:#1766b0; }
.family-ask-follow-up { margin:8px 0 0; padding:9px 11px; border-radius:10px; color:#355b7b; background:#eef7ff; font-size:.84rem; line-height:1.4; }
.home-ask-suggestions { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.home-ask-memory { margin:8px 0 0; padding:9px 11px; border-radius:10px; color:#39634b; background:#edf8ef; font-size:.82rem; line-height:1.35; }
.calendar-routine { margin-top:16px; padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.tab-badge { display:inline-grid; place-items:center; min-width:17px; height:17px; margin-left:4px; padding:0 4px; border-radius:99px; background:#e48b22; color:#fff; font-size:.65rem; line-height:1; }
.app-tabs { grid-template-columns:repeat(5,minmax(0,1fr)); }.nav-add--bottom { position:static; width:54px; height:54px; align-self:center; justify-self:center; margin:0; transform:translateY(-4px); box-shadow:0 10px 24px rgba(23,111,211,.28); }.nav-add--bottom small { position:absolute; top:56px; color:var(--muted); font-size:.68rem; font-weight:700; }.app-header .nav-add { display:none; }
.school-log { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }.school-log summary { cursor:pointer; color:#2b5f93; font-weight:750; }.school-log-item { margin:10px 0; padding:11px 12px; border:1px solid var(--line); border-radius:13px; background:#f8fafc; }.school-log-item strong,.school-log-item small { display:block; }.school-log-item small { margin-top:3px; color:var(--muted); font-size:.76rem; }.school-log-item p { margin:6px 0 0; color:var(--muted); font-size:.84rem; line-height:1.4; }
.practice-item { display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid #e8edf3; }.practice-item input {width:22px;height:22px;flex:none;margin:2px 0;}.practice-item span {display:grid;gap:4px;}.practice-item small {color:#66768b;}.practice-item:has(input:checked) strong {text-decoration:line-through;color:#66768b;}.practice-add-form {display:grid;gap:12px;margin-top:18px;}.practice-add-form label {display:grid;gap:5px;font-size:.83rem;}.practice-add-form input,.practice-add-form select {width:100%;min-width:0;box-sizing:border-box;padding:12px;border:1px solid #d7e2ec;border-radius:12px;background:white;font-size:16px;}
.family-idea-cards {display:grid;gap:14px;}.idea-card {padding:16px;border-radius:16px;background:#edf6ff;}.idea-gabi {background:#f7efff;}.idea-child {display:flex;align-items:center;gap:10px;}.idea-child img {width:44px;height:44px;object-fit:contain;}.idea-child small {margin-left:auto;color:#65748b;}.idea-card h3 {font-size:1.1rem;margin-bottom:6px;}.idea-card p {margin:0 0 14px;font-size:.9rem;}.shower-card {background:#eff8f6;}
@media(min-width:600px){.family-idea-cards{grid-template-columns:1fr 1fr;}}

/* Family Hub pro shell: calm hierarchy, native-feeling controls and safe mobile spacing. */
:root { --hub-navy:#10294d; --hub-blue:#1976d2; --hub-bg:#f4f7fb; --hub-border:#dfe8f2; --hub-muted:#657792; --hub-gold:#f5c84b; }
body { background:var(--hub-bg); color:var(--hub-navy); }
.app-shell { max-width:760px; padding-bottom:calc(118px + env(safe-area-inset-bottom)); }
.app-header { padding-top:calc(16px + env(safe-area-inset-top)); margin-bottom:10px; }
.app-header h1 { letter-spacing:-.035em; }
.app-header .brand-lockup small { color:#4d6d95; }
.hub-save-status { font-size:.76rem; }
.family-section { border-color:var(--hub-border); border-radius:22px; box-shadow:0 6px 20px rgba(32,73,117,.045); }
.family-section > .subsection-heading { margin-bottom:10px; }
.subsection-heading h2 { letter-spacing:-.02em; }
.family-ask { border-radius:22px; box-shadow:0 8px 26px rgba(61,80,131,.07); }
.family-ask .field-help { max-width:56ch; }
.family-pulse { gap:10px; }
.pulse-item { border-radius:16px; padding:12px; background:#fbfdff; }
.today-children { gap:10px; }
.today-child { border-radius:18px; padding:14px; background:#fafdff; }
.today-child img { width:46px; height:46px; }
.today-rides { border-radius:18px; }
.next-up-card { border-radius:18px; }
.home-events { gap:8px; }
.home-event-link { padding:11px 12px; border-radius:14px; background:#f8fbff; }
.section-heading { margin-bottom:12px; }
.calendar-routine { border-color:var(--hub-border); border-radius:22px; box-shadow:0 6px 20px rgba(32,73,117,.045); }
.calendar-tools { background:#fbfdff; border:1px solid var(--hub-border); border-radius:18px; padding:12px; }
.event-entry { border-radius:16px; }
.app-tabs { position:fixed; z-index:30; left:50%; bottom:calc(10px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(720px,calc(100% - 24px)); padding:8px 10px 9px; border:1px solid rgba(210,222,235,.95); border-radius:26px; background:rgba(255,255,255,.94); box-shadow:0 12px 34px rgba(28,61,98,.16); backdrop-filter:blur(18px); }
.app-tab { min-height:52px; border-radius:16px; }
.app-tab[aria-selected="true"] { background:#eaf3ff; color:#0f72d2; }
.nav-add--bottom { width:56px; height:56px; border:4px solid #fff; border-radius:50%; background:var(--hub-blue); color:#fff; }
.nav-add--bottom small { color:var(--hub-blue); }
.more-sheet .sheet-content, .quick-add-sheet .sheet-content { max-height:min(78vh,680px); overflow:auto; }
.sheet-heading-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.sheet-heading-row h2 { margin-bottom:0; }
.sheet-x { display:grid; place-items:center; width:40px; height:40px; flex:none; border:1px solid var(--hub-border); border-radius:50%; background:#f7faff; color:var(--hub-navy); font-size:1.55rem; line-height:1; }
.quick-add-list { display:grid; gap:9px; margin-top:18px; }
.quick-add-list button, .more-row { display:flex; align-items:center; gap:13px; width:100%; min-height:64px; padding:12px 13px; border:1px solid var(--hub-border); border-radius:17px; background:#fbfdff; color:var(--hub-navy); text-align:left; }
.quick-add-list button > span, .more-icon { display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:12px; background:#e9f2ff; color:#1476d5; font-size:1.15rem; }
.quick-add-list button div, .more-row > span:nth-child(2) { display:grid; gap:3px; min-width:0; flex:1; }
.quick-add-list small, .more-row small { color:var(--hub-muted); font-size:.8rem; line-height:1.3; }
.quick-add-list b, .more-row i { color:#7c91ad; font-size:1.4rem; font-style:normal; }
.more-group { display:grid; gap:9px; margin-top:18px; }
.more-group > .eyebrow { margin:0 4px; }
.more-row { min-height:60px; }
.more-row > b { display:grid; place-items:center; min-width:22px; height:22px; padding:0 5px; border-radius:99px; background:#f3c54a; color:#614c05; font-size:.72rem; }
.shopping-add-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.shopping-add-form input { min-width:0; min-height:46px; border:1px solid var(--hub-border); border-radius:13px; padding:0 13px; background:#fff; font:inherit; font-size:16px; }
.shopping-items { display:grid; gap:7px; }
.shopping-item { border-radius:14px; }
.practice-add-form { padding-top:14px; border-top:1px solid var(--hub-border); }
.family-section h2 { letter-spacing:-.02em; }
.tab-panel { min-width:0; }
@media(max-width:430px){ .app-shell{padding-left:12px;padding-right:12px}.family-section{padding:16px}.app-tabs{width:calc(100% - 16px);bottom:calc(7px + env(safe-area-inset-bottom));}.app-tab small{font-size:.72rem}.app-header h1{font-size:1.75rem}.family-ask-form{grid-template-columns:minmax(0,1fr) 46px}.quick-add-list button,.more-row{min-height:60px} }
@media(max-width:360px){.app-shell{padding-left:8px;padding-right:8px}.app-tabs{width:calc(100% - 10px);padding-left:4px;padding-right:4px}.app-tab{padding-left:3px;padding-right:3px}.app-tab small{font-size:.66rem}.nav-add--bottom{width:52px;height:52px}.family-section{padding:14px}}

/* Family intelligence: calm, structured information and inspectable actions. */
.intelligence-summary { font-weight: 650; margin-bottom: 1rem; }
.intelligence-block { margin-block: .85rem; }
.intelligence-block h3 { font-size: 1rem; margin: 0 0 .4rem; }
.intelligence-block ul { padding-left: 1.2rem; margin: .4rem 0; }
.intelligence-block li { margin-block: .35rem; }
.intelligence-block--warning,.intelligence-warning { border-left: 3px solid #bb721c; padding-left: .8rem; }
.intelligence-insight,.intelligence-action-card,.intelligence-memory { padding: .9rem; border: 1px solid rgba(70,80,100,.16); border-radius: 14px; margin-block: .7rem; }
.intelligence-action-card details { font-size: .9rem; overflow-wrap: anywhere; margin-bottom: .7rem; }
.intelligence-action-card details p { white-space: pre-wrap; }
.intelligence-conversation { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .8rem; margin-block: .6rem; }
.intelligence-insight button,.intelligence-memory button,.intelligence-action-card button { min-height: 44px; margin-right: .4rem; }
#family-memory-form label { display: grid; gap: .4rem; margin-block: .8rem; }
#family-memory-form textarea { min-height: 100px; }
#family-memory-list details { overflow-wrap: anywhere; }
#home-ask-answer { white-space: normal; }
#home-ask-answer details { font-size: .85rem; margin-top: 1rem; }

/* Home: Needs you / Done for you */
.intelligence-brief{display:grid;gap:12px;margin:0 0 12px}
.intelligence-needs,.intelligence-done{border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:var(--surface)}
.intelligence-needs{border-left:6px solid #d9480f}
.intelligence-done{border-left:6px solid #1f9d63}
.intelligence-needs h3,.intelligence-done h3{margin:0 0 8px;font-size:15px;letter-spacing:.02em}
.intelligence-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0}
.intelligence-ontrack{margin:0;font-weight:700;color:#1c6b45}

/* Home: next family action */
.home-next{margin:0 0 12px;padding:14px 16px;border-radius:18px;background:var(--blue-soft);border:1px solid var(--line)}
.home-next .eyebrow{margin:0 0 4px}
.home-next-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.home-next-row strong{font-size:22px;color:var(--navy)}
.home-next-time{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--navy)}
.home-next .field-help{margin:4px 0 0}

/* Devices */
.devices-list{display:grid;gap:10px;margin:12px 0}
.device-card{display:flex;align-items:center;gap:14px;width:100%;min-height:68px;padding:12px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:inherit;font:inherit;text-align:left;cursor:pointer}
.device-card strong{display:block;font-size:18px}
.device-card small{display:block;color:var(--muted);margin-top:2px}
.device-card i{margin-left:auto;font-style:normal;color:var(--muted);font-size:22px}
.device-dot{flex:none;width:14px;height:14px;border-radius:50%;background:#9aa6b8}
.device-dot[data-status="online"],.device-dot[data-status="connected"]{background:#1f9d63}
.device-dot[data-status="quiet"]{background:#e0a100}
.device-dot[data-status="not-connected"]{background:#c8d0dc}
.devices-sheet label{display:block;margin:10px 0}
.devices-sheet textarea,.devices-sheet select,.devices-sheet input:not([type=checkbox]):not([type=range]){width:100%;box-sizing:border-box}
.devices-sheet input[type=range]{width:100%}
.toggle-row{display:flex!important;align-items:center;gap:10px;min-height:44px}
.toggle-row input{width:22px;height:22px;flex:none}
.day-picks{border:0;padding:0;margin:12px 0}
.day-picks legend{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.day-picks div{display:flex;gap:6px;flex-wrap:wrap}
.day-pick{display:inline-flex!important;align-items:center;gap:6px;margin:0!important;padding:8px 12px;border:1px solid var(--line);border-radius:999px}
.rooms-grid{display:grid;gap:4px}
.room-row{display:grid;grid-template-columns:1fr 84px 84px;align-items:center;gap:8px;min-height:44px;border-bottom:1px solid var(--line)}
.room-row input{width:22px;height:22px;justify-self:center}
.room-head{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);min-height:28px}
.room-head span+span{text-align:center}
.room-off{opacity:.55}
.queue-list{margin:6px 0 12px;padding-left:20px}
.queue-list li{padding:2px 0}
.quiet-action.danger{color:#b42318;border-color:#f0b6b0}
output{float:right;font-variant-numeric:tabular-nums;color:var(--muted)}

/* Child identity colours. These were referenced by the child cards, avatars and star counts but never defined. */
:root { --jacob: var(--blue); --jacob-soft: #e9f3fd; --gabi: var(--purple); --gabi-soft: #f1e3ff; }