Files
NestQuest-UI-Design/index.html
orchestrator-agent 334aae5a1e design: Sunday-first Schedule week, multi-pattern presence, task Start date
Schedule (1f): the weekday header is S M T W T F S, the month grid is padded
for Sunday-first (Sep 2026 starts Tuesday), the anchor reads "Sunday, Sep 6",
and the single "Presence pattern" card becomes a multi-pattern "Presence
patterns" list (one child shown with two patterns) with an Add affordance.

Tasks (1e): the edit sheet gains a Start date field between Due time and Window.

Regenerates admin-1e-tasks and admin-1f-schedule (img/ and
design/examples/img/). The design-doc HTML (index.html and NestQuest Mockups.dc.html)
is edited in place; the doc's icon set has no plain "calendar", so the Start
date field is a plain value box.
2026-09-25 11:34:02 -04:00

674 lines
75 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<template id="__bundler_thumbnail"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="#3B3AB8"/><text x="50" y="64" text-anchor="middle" font-family="Georgia,serif" font-size="44" font-weight="700" fill="#fff">N</text></svg></template>
<x-dc>
<helmet data-dc-atomics><meta name="design_doc_mode" content="canvas">
<link rel="stylesheet" href="_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/fonts.css">
<link rel="stylesheet" href="_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/colors.css">
<link rel="stylesheet" href="_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/typography.css">
<link rel="stylesheet" href="_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/tokens/spacing.css">
<link rel="stylesheet" href="_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Cinzel+Decorative:wght@400;700;900&display=swap">
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<script src="_ds/cubecraft-creations-design-system-0c419cc5-3d04-4723-b89f-49ceceba3c44/_ds_bundle.js"></script>
<style>
body{margin:0;background:#f0eee9;font-family:Nunito,system-ui,sans-serif}
a{color:#3B3AB8}a:hover{color:#A035CC}
.dv-turn{padding:40px 44px 32px;border-bottom:1px solid rgba(0,0,0,.08);scroll-margin-top:16px}
.dv-thd{display:flex;align-items:baseline;gap:10px;margin:0 0 20px}
.dv-tid{font:600 10px ui-monospace,Menlo,monospace;padding:3px 7px;background:#1a1a1a;color:#fff;border-radius:4px;text-decoration:none}
.dv-tname{font:600 13px/1.2 Nunito,system-ui,sans-serif;color:#1a1a1a}
.dv-opts{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.dv-opt{flex:none;display:flex;flex-direction:column;gap:9px;scroll-margin-top:16px}
.dv-oid{font:600 10.5px ui-monospace,Menlo,monospace;padding:3px 7px;background:rgba(0,0,0,.08);color:#1a1a1a;border-radius:5px;text-decoration:none}
.dv-olabel{display:flex;align-items:baseline;gap:8px;font:400 11px/1.3 Nunito,system-ui,sans-serif;color:rgba(0,0,0,.55)}
.dv-card{max-width:100%;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden}
.dv-opt:target .dv-oid{background:#2a78d6;color:#fff}
.dv-next{margin:22px 0 0;font:12px/1.5 Nunito,system-ui,sans-serif;color:rgba(0,0,0,.5)}
</style></helmet>
<section class="dv-turn" id="t1">
<div class="dv-thd"><a class="dv-tid" href="#t1">1</a><span class="dv-tname">Kids' DAKOS wall panel — 1920×1080, full tabletop</span></div>
<div class="dv-opts">
<div class="dv-opt" id="1a"><div class="dv-olabel"><a class="dv-oid" href="#1a">1a</a>Attract state — The Party</div>
<div class="dv-card" data-screen-label="Panel: The Party">
<div style="width:1920px;height:1080px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 25% 10%,rgba(255,255,255,.5),transparent 55%),radial-gradient(ellipse at 85% 90%,rgba(120,86,44,.28),transparent 60%),repeating-linear-gradient(93deg,rgba(150,115,70,.05) 0 2px,transparent 2px 6px),repeating-linear-gradient(2deg,rgba(150,115,70,.04) 0 3px,transparent 3px 7px),linear-gradient(#f0e4c7,#ddcca3);box-shadow:inset 0 0 200px rgba(80,52,20,.35)">
<div style="position:absolute;inset:26px;border:2px solid rgba(92,62,26,.45);border-radius:14px;pointer-events:none"></div>
<div style="position:absolute;inset:36px;border:1px solid rgba(92,62,26,.28);border-radius:8px;pointer-events:none"></div>
<div style="position:absolute;top:64px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:10px">
<div style="display:flex;align-items:center;gap:22px">
<div style="width:64px;height:1px;background:linear-gradient(90deg,transparent,rgba(92,62,26,.6))"></div>
<img src="design/assets/nestquest-mark.png" alt="" style="height:124px;width:auto;display:block;filter:drop-shadow(0 3px 0 rgba(92,62,26,.18))">
<img src="design/assets/nestquest-wordmark.png" alt="NestQuest" style="height:78px;width:auto;display:block;filter:drop-shadow(0 3px 0 rgba(92,62,26,.18))">
<div style="width:64px;height:1px;background:linear-gradient(90deg,rgba(92,62,26,.6),transparent)"></div>
</div>
<div style="font:600 21px/1 Cinzel,serif;letter-spacing:.3em;text-transform:uppercase;color:#6b5433">The Party · Monday, September 14</div>
</div>
<div style="position:absolute;top:262px;left:110px;right:110px;display:grid;grid-template-columns:repeat(3,1fr);gap:56px">
<div style="display:flex;flex-direction:column;align-items:center;gap:26px;padding:44px 28px 40px;border-radius:20px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 6px 0 rgba(92,62,26,.18),inset 0 2px 0 rgba(255,255,255,.7)">
<div style="width:188px;height:214px;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);background:linear-gradient(135deg,#4a49a8,#8b3fae);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:34px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.22)">
<div style="font:700 82px/1 'Cinzel Decorative',Cinzel,serif;color:#fff">D</div></div>
<div style="font:700 48px/1 Cinzel,serif;letter-spacing:.02em;color:#2b1f14">Declan</div>
<div style="display:flex;align-items:center;gap:12px;padding:12px 26px;border-radius:9999px;background:#e8f4ea;border:1px solid rgba(22,120,60,.35)">
<i data-lucide="check-circle" style="width:22px;height:22px;color:#157a3c"></i>
<span style="font:600 19px/1 Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;color:#146b36">Home today</span></div>
<div style="font:700 26px/1 Nunito;color:#6b5433">3 of 7 quests claimed</div>
<div style="width:100%;height:16px;border-radius:9999px;background:rgba(92,62,26,.18);overflow:hidden;border:1px solid rgba(92,62,26,.25)">
<div style="width:43%;height:100%;background:linear-gradient(90deg,#4a49a8,#8b3fae)"></div></div>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:26px;padding:44px 28px 40px;border-radius:20px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 6px 0 rgba(92,62,26,.18),inset 0 2px 0 rgba(255,255,255,.7)">
<div style="width:188px;height:214px;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);background:linear-gradient(135deg,#4a49a8,#8b3fae);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:34px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.22)">
<div style="font:700 82px/1 'Cinzel Decorative',Cinzel,serif;color:#fff">J</div></div>
<div style="font:700 48px/1 Cinzel,serif;letter-spacing:.02em;color:#2b1f14">Jordyn</div>
<div style="display:flex;align-items:center;gap:12px;padding:12px 26px;border-radius:9999px;background:#e8f4ea;border:1px solid rgba(22,120,60,.35)">
<i data-lucide="check-circle" style="width:22px;height:22px;color:#157a3c"></i>
<span style="font:600 19px/1 Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;color:#146b36">Home today</span></div>
<div style="font:700 26px/1 Nunito;color:#6b5433">5 of 5 quests claimed</div>
<div style="width:100%;height:16px;border-radius:9999px;background:rgba(92,62,26,.18);overflow:hidden;border:1px solid rgba(92,62,26,.25)">
<div style="width:100%;height:100%;background:linear-gradient(90deg,#4a49a8,#8b3fae)"></div></div>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:26px;padding:44px 28px 40px;border-radius:20px;background:linear-gradient(#f2ecdd,#e6dcc6);border:2px dashed rgba(92,62,26,.34);box-shadow:inset 0 2px 0 rgba(255,255,255,.5)">
<div style="width:188px;height:214px;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);background:linear-gradient(135deg,#6b6b7a,#7a7286);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:34px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.18)">
<div style="font:700 82px/1 'Cinzel Decorative',Cinzel,serif;color:#fff">C</div></div>
<div style="font:700 48px/1 Cinzel,serif;letter-spacing:.02em;color:#4d4433">Chloe</div>
<div style="display:flex;align-items:center;gap:12px;padding:12px 26px;border-radius:9999px;background:rgba(92,62,26,.1);border:1px solid rgba(92,62,26,.3)">
<i data-lucide="tent" style="width:22px;height:22px;color:#6b5433"></i>
<span style="font:600 19px/1 Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;color:#6b5433">On travels</span></div>
<div style="font:700 26px/1 Nunito;color:#5c452a">Returns Sunday, Sep 21</div>
<div style="width:100%;height:16px;border-radius:9999px;background:rgba(92,62,26,.12);border:1px solid rgba(92,62,26,.2)"></div>
</div>
</div>
<div style="position:absolute;bottom:150px;left:0;right:0;text-align:center;font:600 27px/1 Nunito;color:#5c452a">Tap your crest to open your Quest Log</div>
<div style="position:absolute;bottom:46px;left:46px;right:46px;height:84px;border-radius:14px;background:rgba(43,31,20,.9);display:flex;align-items:center;justify-content:center;gap:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)">
<i data-lucide="cloud-sun" style="width:40px;height:40px;color:#e9dcbd"></i>
<span style="font:800 38px/1 Nunito;color:#f7efdb">64°</span>
<span style="width:1px;height:38px;background:rgba(233,220,189,.3)"></span>
<span style="font:600 26px/1 Nunito;color:#d8c9a6">Partly cloudy · high 71° · low 52°</span>
<span style="width:1px;height:38px;background:rgba(233,220,189,.3)"></span>
<span style="font:600 26px/1 Nunito;color:#d8c9a6">Rain moving in after 6 PM</span>
</div>
</div>
</div></div>
<div class="dv-opt" id="1b"><div class="dv-olabel"><a class="dv-oid" href="#1b">1b</a>Declan's Quest Log — mid-day</div>
<div class="dv-card" data-screen-label="Panel: Quest Log">
<div style="width:1920px;height:1080px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 25% 10%,rgba(255,255,255,.5),transparent 55%),radial-gradient(ellipse at 85% 90%,rgba(120,86,44,.28),transparent 60%),repeating-linear-gradient(93deg,rgba(150,115,70,.05) 0 2px,transparent 2px 6px),linear-gradient(#f0e4c7,#ddcca3);box-shadow:inset 0 0 200px rgba(80,52,20,.35)">
<div style="position:absolute;inset:26px;border:2px solid rgba(92,62,26,.45);border-radius:14px;pointer-events:none"></div>
<div style="position:absolute;top:56px;left:62px;right:62px;display:flex;align-items:center;gap:30px">
<div style="width:96px;height:110px;flex:none;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);background:linear-gradient(135deg,#4a49a8,#8b3fae);display:flex;justify-content:center;padding-top:14px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.22)">
<div style="font:700 44px/1 'Cinzel Decorative',Cinzel,serif;color:#fff">D</div></div>
<div style="flex:1;min-width:0">
<div style="font:700 56px/1.08 'Cinzel Decorative',Cinzel,serif;letter-spacing:.01em;color:#2b1f14">Declan's Quest Log</div>
<div style="margin-top:10px;font:600 20px/1 Cinzel,serif;letter-spacing:.24em;text-transform:uppercase;color:#6b5433">Monday, September 14 · 3 of 7 claimed</div>
</div>
<div style="flex:none;display:flex;align-items:center;gap:18px;padding:18px 30px;border-radius:14px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 4px 0 rgba(92,62,26,.16)">
<div style="width:44px;height:44px;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:linear-gradient(135deg,#4a49a8,#8b3fae);display:grid;place-items:center;color:#fff;font:700 19px Cinzel,serif">4</div>
<div><div style="font:700 28px/1 Cinzel,serif;letter-spacing:.02em;color:#2b1f14">4 quests left</div>
<div style="font:600 22px/1.2 Nunito;color:#5c452a">Party progress · 8 of 12 today</div></div>
</div>
</div>
<div style="position:absolute;top:236px;left:62px;right:62px;display:grid;grid-template-columns:repeat(3,1fr);gap:34px">
<div style="display:flex;flex-direction:column;gap:24px">
<div style="display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:2px solid rgba(92,62,26,.35)">
<i data-lucide="sunrise" style="width:34px;height:34px;color:#6b5433"></i>
<div style="flex:1"><div style="font:700 32px/1 Cinzel,serif;letter-spacing:.04em;color:#2b1f14">Morning</div>
<div style="font:600 21px/1.4 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a">Until 11:59 AM</div></div>
<div style="font:700 26px/1 Cinzel,serif;color:#5c452a">3/4</div>
</div>
<div style="position:relative;display:flex;align-items:center;gap:20px;padding:22px;border-radius:12px;background:linear-gradient(#f0e8d3,#e6dcc2);border:1px solid rgba(120,88,48,.3);opacity:.82">
<div style="width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(92,62,26,.16)"><i data-lucide="scissors" style="width:34px;height:34px;color:#7a6242"></i></div>
<div style="flex:1;min-width:0"><div style="font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#6f6455;text-decoration:line-through">Brush hair</div>
<div style="font:600 22px/1.3 Nunito;color:#5c452a">Claimed 7:12 AM</div></div>
<div style="position:absolute;right:16px;top:-12px;width:78px;height:78px;border-radius:50%;transform:rotate(-9deg);background:radial-gradient(circle at 35% 30%,#a8283a,#6d1322);box-shadow:0 4px 10px rgba(60,10,20,.4),inset 0 0 0 4px rgba(255,255,255,.14);display:grid;place-items:center">
<i data-lucide="check" style="width:38px;height:38px;color:rgba(255,235,235,.95)"></i></div>
</div>
<div style="position:relative;display:flex;align-items:center;gap:20px;padding:22px;border-radius:12px;background:linear-gradient(#f0e8d3,#e6dcc2);border:1px solid rgba(120,88,48,.3);opacity:.82">
<div style="width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(92,62,26,.16)"><i data-lucide="smile" style="width:34px;height:34px;color:#7a6242"></i></div>
<div style="flex:1;min-width:0"><div style="font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#6f6455;text-decoration:line-through">Brush teeth</div>
<div style="font:600 22px/1.3 Nunito;color:#5c452a">Claimed 7:15 AM</div></div>
<div style="position:absolute;right:16px;top:-12px;width:78px;height:78px;border-radius:50%;transform:rotate(6deg);background:radial-gradient(circle at 35% 30%,#a8283a,#6d1322);box-shadow:0 4px 10px rgba(60,10,20,.4),inset 0 0 0 4px rgba(255,255,255,.14);display:grid;place-items:center">
<i data-lucide="check" style="width:38px;height:38px;color:rgba(255,235,235,.95)"></i></div>
</div>
<div style="position:relative;display:flex;align-items:center;gap:20px;padding:22px;border-radius:12px;background:linear-gradient(#f0e8d3,#e6dcc2);border:1px solid rgba(120,88,48,.3);opacity:.82">
<div style="width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(92,62,26,.16)"><i data-lucide="spray-can" style="width:34px;height:34px;color:#7a6242"></i></div>
<div style="flex:1;min-width:0"><div style="font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#6f6455;text-decoration:line-through">Put on deodorant</div>
<div style="font:600 22px/1.3 Nunito;color:#5c452a">Claimed 7:16 AM</div></div>
<div style="position:absolute;right:16px;top:-12px;width:78px;height:78px;border-radius:50%;transform:rotate(-4deg);background:radial-gradient(circle at 35% 30%,#a8283a,#6d1322);box-shadow:0 4px 10px rgba(60,10,20,.4),inset 0 0 0 4px rgba(255,255,255,.14);display:grid;place-items:center">
<i data-lucide="check" style="width:38px;height:38px;color:rgba(255,235,235,.95)"></i></div>
</div>
<div style="display:flex;align-items:center;gap:22px;padding:22px 22px;border-radius:12px;min-height:116px;background:linear-gradient(#fdf7e6,#f2e7c9);border:1px solid rgba(120,88,48,.38);box-shadow:0 3px 0 rgba(120,88,48,.2),inset 0 1px 0 rgba(255,255,255,.7)">
<div style="width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#4a49a8,#8b3fae)"><i data-lucide="bird" style="width:34px;height:34px;color:#fff"></i></div>
<div style="flex:1;min-width:0"><div style="font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#2b1f14">Fill bird feeder</div>
<div style="font:700 22px/1.3 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#8f1526">Overdue · due 9:00 AM</div></div>
<div style="flex:none;display:flex;align-items:center;gap:10px;min-width:150px;height:72px;padding:0 24px;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));box-shadow:0 3px 0 rgba(40,20,60,.35)"><i data-lucide="check" style="width:30px;height:30px;color:#fff"></i><span style="font:700 24px/1 Cinzel,serif;letter-spacing:.06em;color:#fff">Complete</span></div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:24px">
<div style="display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:2px solid rgba(92,62,26,.35)">
<i data-lucide="sun" style="width:34px;height:34px;color:#6b5433"></i>
<div style="flex:1"><div style="font:700 32px/1 Cinzel,serif;letter-spacing:.04em;color:#2b1f14">Afternoon</div>
<div style="font:600 21px/1.4 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a">12:00 – 5:00 PM</div></div>
<div style="font:700 26px/1 Cinzel,serif;color:#5c452a">0/1</div>
</div>
<div style="display:flex;align-items:center;gap:22px;padding:22px 22px;border-radius:12px;min-height:116px;background:linear-gradient(#fdf7e6,#f2e7c9);border:1px solid rgba(120,88,48,.38);box-shadow:0 3px 0 rgba(120,88,48,.2),inset 0 1px 0 rgba(255,255,255,.7)">
<div style="width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#4a49a8,#8b3fae)"><i data-lucide="dog" style="width:34px;height:34px;color:#fff"></i></div>
<div style="flex:1;min-width:0"><div style="font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#2b1f14">Clean dog poop</div>
<div style="font:600 22px/1.3 Nunito;color:#5c452a">Due by 5:00 PM</div></div>
<div style="flex:none;display:flex;align-items:center;gap:10px;min-width:150px;height:72px;padding:0 24px;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));box-shadow:0 3px 0 rgba(40,20,60,.35)"><i data-lucide="check" style="width:30px;height:30px;color:#fff"></i><span style="font:700 24px/1 Cinzel,serif;letter-spacing:.06em;color:#fff">Complete</span></div>
</div>
<div style="margin-top:6px;padding:26px 24px;border-radius:12px;border:1px dashed rgba(92,62,26,.32);background:rgba(255,255,255,.24)">
<div style="font:600 21px/1.4 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a">Party roll-up</div>
<div style="margin-top:10px;font:600 23px/1.45 Nunito;color:#6b5433">Jordyn has finished her log. Chloe is on travels until Sunday.</div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:24px">
<div style="display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:2px solid rgba(92,62,26,.35)">
<i data-lucide="moon" style="width:34px;height:34px;color:#6b5433"></i>
<div style="flex:1"><div style="font:700 32px/1 Cinzel,serif;letter-spacing:.04em;color:#2b1f14">Evening</div>
<div style="font:600 21px/1.4 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a">5:00 – 9:00 PM</div></div>
<div style="font:700 26px/1 Cinzel,serif;color:#5c452a">0/3</div>
</div>
<div style="display:flex;align-items:center;gap:22px;padding:22px 22px;border-radius:12px;min-height:116px;background:linear-gradient(#fdf7e6,#f2e7c9);border:1px solid rgba(120,88,48,.38);box-shadow:0 3px 0 rgba(120,88,48,.2),inset 0 1px 0 rgba(255,255,255,.7)">
<div style="width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#4a49a8,#8b3fae)"><i data-lucide="smile" style="width:34px;height:34px;color:#fff"></i></div>
<div style="flex:1;min-width:0"><div style="font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#2b1f14">Brush teeth</div>
<div style="font:600 22px/1.3 Nunito;color:#5c452a">Due by 9:00 PM</div></div>
<div style="flex:none;display:flex;align-items:center;gap:10px;min-width:150px;height:72px;padding:0 24px;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));box-shadow:0 3px 0 rgba(40,20,60,.35)"><i data-lucide="check" style="width:30px;height:30px;color:#fff"></i><span style="font:700 24px/1 Cinzel,serif;letter-spacing:.06em;color:#fff">Complete</span></div>
</div>
<div style="display:flex;align-items:center;gap:22px;padding:22px 22px;border-radius:12px;min-height:116px;background:linear-gradient(#fdf7e6,#f2e7c9);border:1px solid rgba(120,88,48,.38);box-shadow:0 3px 0 rgba(120,88,48,.2),inset 0 1px 0 rgba(255,255,255,.7)">
<div style="width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#4a49a8,#8b3fae)"><i data-lucide="cat" style="width:34px;height:34px;color:#fff"></i></div>
<div style="flex:1;min-width:0"><div style="font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#2b1f14">Stack cat food</div>
<div style="font:600 22px/1.3 Nunito;color:#5c452a">Due by 8:00 PM</div></div>
<div style="flex:none;display:flex;align-items:center;gap:10px;min-width:150px;height:72px;padding:0 24px;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));box-shadow:0 3px 0 rgba(40,20,60,.35)"><i data-lucide="check" style="width:30px;height:30px;color:#fff"></i><span style="font:700 24px/1 Cinzel,serif;letter-spacing:.06em;color:#fff">Complete</span></div>
</div>
<div style="display:flex;align-items:center;gap:22px;padding:22px 22px;border-radius:12px;min-height:116px;background:linear-gradient(#fdf7e6,#f2e7c9);border:1px solid rgba(120,88,48,.38);box-shadow:0 3px 0 rgba(120,88,48,.2),inset 0 1px 0 rgba(255,255,255,.7)">
<div style="width:64px;height:64px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#4a49a8,#8b3fae)"><i data-lucide="droplets" style="width:34px;height:34px;color:#fff"></i></div>
<div style="flex:1;min-width:0"><div style="font:700 30px/1.15 Cinzel,serif;letter-spacing:.01em;color:#2b1f14">Fill cat fountains</div>
<div style="font:600 22px/1.3 Nunito;color:#5c452a">Due by 8:00 PM</div></div>
<div style="flex:none;display:flex;align-items:center;gap:10px;min-width:150px;height:72px;padding:0 24px;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));box-shadow:0 3px 0 rgba(40,20,60,.35)"><i data-lucide="check" style="width:30px;height:30px;color:#fff"></i><span style="font:700 24px/1 Cinzel,serif;letter-spacing:.06em;color:#fff">Complete</span></div>
</div>
</div>
</div>
<div style="position:absolute;bottom:46px;left:46px;right:46px;height:84px;border-radius:14px;background:rgba(43,31,20,.9);display:flex;align-items:center;justify-content:center;gap:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)">
<i data-lucide="cloud-sun" style="width:40px;height:40px;color:#e9dcbd"></i>
<span style="font:800 38px/1 Nunito;color:#f7efdb">64°</span>
<span style="width:1px;height:38px;background:rgba(233,220,189,.3)"></span>
<span style="font:600 26px/1 Nunito;color:#d8c9a6">Partly cloudy · high 71° · low 52°</span>
<span style="width:1px;height:38px;background:rgba(233,220,189,.3)"></span>
<span style="font:600 26px/1 Nunito;color:#d8c9a6">Rain moving in after 6 PM</span>
</div>
</div>
</div></div>
<div class="dv-opt" id="1c"><div class="dv-olabel"><a class="dv-oid" href="#1c">1c</a>Quest complete — all sealed</div>
<div class="dv-card" data-screen-label="Panel: Quest complete">
<div style="width:1920px;height:1080px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 26%,rgba(255,255,255,.7),transparent 52%),radial-gradient(ellipse at 85% 90%,rgba(120,86,44,.3),transparent 60%),repeating-linear-gradient(93deg,rgba(150,115,70,.05) 0 2px,transparent 2px 6px),linear-gradient(#f2e7cc,#dccca2);box-shadow:inset 0 0 220px rgba(80,52,20,.4)">
<div style="position:absolute;inset:26px;border:2px solid rgba(92,62,26,.45);border-radius:14px;pointer-events:none"></div>
<div style="position:absolute;inset:36px;border:1px solid rgba(92,62,26,.28);border-radius:8px;pointer-events:none"></div>
<div style="position:absolute;top:96px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:34px">
<div style="width:168px;height:168px;border-radius:50%;transform:rotate(-6deg);background:radial-gradient(circle at 35% 28%,#a8283a,#661020);box-shadow:0 10px 24px rgba(60,10,20,.42),inset 0 0 0 7px rgba(255,255,255,.15);display:grid;place-items:center">
<i data-lucide="check" style="width:86px;height:86px;color:rgba(255,238,238,.95)"></i></div>
<div style="font:900 86px/1 'Cinzel Decorative',Cinzel,serif;letter-spacing:.01em;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));-webkit-background-clip:text;background-clip:text;color:transparent">Quest complete</div>
<div style="font:600 34px/1.4 Nunito;color:#6b5433;max-width:1000px;text-align:center;text-wrap:pretty">Declan cleared all 7 quests for Monday, September 14. Every seal set before the evening bell.</div>
</div>
<div style="position:absolute;top:540px;left:200px;right:200px;display:grid;grid-template-columns:repeat(4,1fr);gap:26px">
<div style="padding:28px 24px;border-radius:16px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 5px 0 rgba(92,62,26,.16);text-align:center">
<div style="font:900 58px/1 Cinzel,serif;color:#2b1f14">7</div>
<div style="margin-top:8px;font:600 18px/1.3 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a">Quests claimed</div></div>
<div style="padding:28px 24px;border-radius:16px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 5px 0 rgba(92,62,26,.16);text-align:center">
<div style="font:900 58px/1 Cinzel,serif;color:#2b1f14">6</div>
<div style="margin-top:8px;font:600 18px/1.3 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a">On time</div></div>
<div style="padding:28px 24px;border-radius:16px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 5px 0 rgba(92,62,26,.16);text-align:center">
<div style="font:900 58px/1 Cinzel,serif;color:#2b1f14">1</div>
<div style="margin-top:8px;font:600 18px/1.3 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a">Late</div></div>
<div style="padding:28px 24px;border-radius:16px;background:linear-gradient(#fcf6e6,#f1e6ca);border:2px solid rgba(92,62,26,.4);box-shadow:0 5px 0 rgba(92,62,26,.16);text-align:center">
<div style="font:900 58px/1 Cinzel,serif;color:#2b1f14">12/12</div>
<div style="margin-top:8px;font:600 18px/1.3 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#5c452a">The Party</div></div>
</div>
<div style="position:absolute;bottom:174px;left:0;right:0;text-align:center;font:600 25px/1 Nunito;color:#5c452a">Returning to The Party in 12 seconds</div>
<div style="position:absolute;bottom:46px;left:46px;right:46px;height:84px;border-radius:14px;background:rgba(43,31,20,.9);display:flex;align-items:center;justify-content:center;gap:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)">
<i data-lucide="cloud-moon" style="width:40px;height:40px;color:#e9dcbd"></i>
<span style="font:800 38px/1 Nunito;color:#f7efdb">58°</span>
<span style="width:1px;height:38px;background:rgba(233,220,189,.3)"></span>
<span style="font:600 26px/1 Nunito;color:#d8c9a6">Light rain · low 52°</span>
<span style="width:1px;height:38px;background:rgba(233,220,189,.3)"></span>
<span style="font:600 26px/1 Nunito;color:#d8c9a6">Clearing by morning</span>
</div>
</div>
</div></div>
<div class="dv-opt" id="1j"><div class="dv-olabel"><a class="dv-oid" href="#1j">1j</a>Confirm step — no undo for kids</div>
<div class="dv-card" data-screen-label="Panel: Confirm">
<div style="width:1920px;height:1080px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 25% 10%,rgba(255,255,255,.5),transparent 55%),radial-gradient(ellipse at 85% 90%,rgba(120,86,44,.28),transparent 60%),linear-gradient(#f0e4c7,#ddcca3)">
<div style="position:absolute;inset:26px;border:2px solid rgba(92,62,26,.45);border-radius:14px"></div>
<div style="position:absolute;inset:0;background:rgba(30,20,10,.62)"></div>
<div style="position:absolute;top:196px;left:460px;width:1000px;padding:64px 68px 56px;border-radius:20px;background:radial-gradient(ellipse at 30% 10%,rgba(255,255,255,.6),transparent 60%),linear-gradient(#f7ecd2,#e6d7b2);border:3px solid rgba(92,62,26,.5);box-shadow:0 26px 60px rgba(20,10,0,.5),inset 0 2px 0 rgba(255,255,255,.7)">
<div style="display:flex;align-items:center;gap:26px">
<div style="width:104px;height:104px;flex:none;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple))"><i data-lucide="dog" style="width:56px;height:56px;color:#fff"></i></div>
<div style="min-width:0"><div style="font:600 21px/1 Cinzel,serif;letter-spacing:.24em;text-transform:uppercase;color:#5c452a">Afternoon quest</div>
<div style="margin-top:12px;font:700 58px/1.05 'Cinzel Decorative',Cinzel,serif;color:#2b1f14">Clean dog poop</div></div>
</div>
<div style="margin-top:40px;font:600 32px/1.45 Nunito;color:#3f2f1c;text-wrap:pretty">Mark this quest complete? Once the seal is set, only a parent can undo it.</div>
<div style="margin-top:44px;display:flex;gap:24px">
<div style="flex:1;height:108px;display:flex;align-items:center;justify-content:center;gap:14px;border-radius:12px;background:rgba(92,62,26,.1);border:2px solid rgba(92,62,26,.45)"><i data-lucide="x" style="width:34px;height:34px;color:#3f2f1c"></i><span style="font:700 30px/1 Cinzel,serif;letter-spacing:.06em;color:#3f2f1c">Not yet</span></div>
<div style="flex:2;height:108px;display:flex;align-items:center;justify-content:center;gap:16px;border-radius:12px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));box-shadow:0 5px 0 rgba(40,20,60,.4)"><i data-lucide="check" style="width:38px;height:38px;color:#fff"></i><span style="font:700 32px/1 Cinzel,serif;letter-spacing:.06em;color:#fff">Complete</span></div>
</div>
</div>
<div style="position:absolute;bottom:46px;left:46px;right:46px;height:84px;border-radius:14px;background:rgba(43,31,20,.94);display:flex;align-items:center;justify-content:center;gap:26px">
<i data-lucide="cloud-sun" style="width:40px;height:40px;color:#e9dcbd"></i>
<span style="font:800 38px/1 Nunito;color:#f7efdb">64°</span>
<span style="width:1px;height:38px;background:rgba(233,220,189,.3)"></span>
<span style="font:600 26px/1 Nunito;color:#d8c9a6">Partly cloudy · high 71° · low 52°</span>
</div>
</div>
</div></div>
</div>
<div class="dv-thd" style="margin:46px 0 20px"><a class="dv-tid" href="#t1">1</a><span class="dv-tname">Parent admin — 390×844 phone, plain words, compact density</span></div>
<div class="dv-opts">
<div class="dv-opt" id="1d"><div class="dv-olabel"><a class="dv-oid" href="#1d">1d</a>Today overview</div>
<div class="dv-card" data-screen-label="Admin: Today (compact)">
<div style="width:390px;height:844px;position:relative;overflow:hidden;background:#F4F4F6;font-family:Nunito,system-ui,sans-serif">
<div style="height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 5px;background:#fff;font:700 13px Nunito;color:#18181D"><span>9:41</span><span style="display:flex;gap:6px;align-items:center"><i data-lucide="wifi" style="width:15px;height:15px"></i><i data-lucide="battery-full" style="width:19px;height:19px"></i></span></div>
<div style="padding:10px 20px 14px;background:#fff;border-bottom:1px solid #E4E4EA;display:flex;align-items:center;justify-content:space-between">
<div style="display:flex;align-items:center;gap:12px;min-width:0"><img src="design/assets/nestquest-mark.png" alt="NestQuest" style="width:40px;height:auto;flex:none;display:block">
<div><div style="font:800 24px/1.1 Nunito;letter-spacing:-.02em;color:#18181D">Today</div>
<div style="font:600 12px/1.4 Nunito;color:#52525E">Monday, September 14 · cycle day 3 of 14</div></div></div>
<div style="width:36px;height:36px;border-radius:8px;background:#F4F4F6;display:grid;place-items:center"><i data-lucide="settings" style="width:19px;height:19px;color:#52525E"></i></div></div>
<div style="padding:14px 16px 92px;display:flex;flex-direction:column;gap:10px">
<div style="display:flex;gap:8px">
<div style="flex:1;padding:12px;border-radius:8px;background:#fff;border:1px solid #E4E4EA"><div style="font:800 22px/1 Nunito;color:var(--brand-blue)">8</div><div style="font:600 10px/1.3 Nunito;letter-spacing:.08em;text-transform:uppercase;color:#52525E">Done</div></div>
<div style="flex:1;padding:12px;border-radius:8px;background:#fff;border:1px solid #E4E4EA"><div style="font:800 22px/1 Nunito;color:#18181D">4</div><div style="font:600 10px/1.3 Nunito;letter-spacing:.08em;text-transform:uppercase;color:#52525E">Remaining</div></div>
<div style="flex:1;padding:12px;border-radius:8px;background:#fff;border:1px solid #E4E4EA"><div style="font:800 22px/1 Nunito;color:#DC2626">1</div><div style="font:600 10px/1.3 Nunito;letter-spacing:.08em;text-transform:uppercase;color:#52525E">Overdue</div></div>
</div>
<div style="border-radius:8px;background:#fff;border:1px solid #E4E4EA;overflow:hidden">
<div style="display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid #EDEDF1">
<div style="width:30px;height:30px;flex:none;border-radius:7px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));display:grid;place-items:center;font:800 13px Nunito;color:#fff">D</div>
<div style="flex:1;min-width:0"><div style="font:700 14px/1.2 Nunito;color:#18181D">Declan</div><div style="font:600 11px/1.3 Nunito;color:#52525E">3 of 7 · 1 overdue</div></div>
<div style="width:82px;height:6px;border-radius:9999px;background:#EDEDF1;overflow:hidden"><div style="width:43%;height:100%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple))"></div></div>
</div>
<div style="display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid #EDEDF1">
<div style="width:30px;height:30px;flex:none;border-radius:7px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));display:grid;place-items:center;font:800 13px Nunito;color:#fff">J</div>
<div style="flex:1;min-width:0"><div style="font:700 14px/1.2 Nunito;color:#18181D">Jordyn</div><div style="font:600 11px/1.3 Nunito;color:#15803D">5 of 5 · all done</div></div>
<div style="width:82px;height:6px;border-radius:9999px;background:#EDEDF1;overflow:hidden"><div style="width:100%;height:100%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple))"></div></div>
</div>
<div style="display:flex;align-items:center;gap:10px;padding:11px 13px">
<div style="width:30px;height:30px;flex:none;border-radius:7px;background:#9898A8;display:grid;place-items:center;font:800 13px Nunito;color:#fff">C</div>
<div style="flex:1;min-width:0"><div style="font:700 14px/1.2 Nunito;color:#52525E">Chloe</div><div style="font:600 11px/1.3 Nunito;color:#52525E">Away · returns Sep 21</div></div>
<span style="font:600 10px/1 Nunito;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:9999px;background:#F4F4F6;color:#3C3C46;border:1px solid #E4E4EA">override</span>
</div>
</div>
<div style="font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E;margin-top:4px">Needs attention</div>
<div style="border-radius:8px;background:#fff;border:1px solid #E4E4EA;overflow:hidden">
<div style="display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid #EDEDF1">
<i data-lucide="bird" style="width:18px;height:18px;color:#52525E"></i>
<div style="flex:1;min-width:0"><div style="font:700 13px/1.2 Nunito;color:#18181D">Fill bird feeder · Declan</div><div style="font:600 11px/1.3 Nunito;color:#DC2626">Overdue since 9:00 AM</div></div>
<span style="font:700 11px/1 Nunito;color:var(--brand-blue)">Mark done</span></div>
<div style="display:flex;align-items:center;gap:10px;padding:11px 13px">
<i data-lucide="smile" style="width:18px;height:18px;color:#52525E"></i>
<div style="flex:1;min-width:0"><div style="font:700 13px/1.2 Nunito;color:#18181D">Brush teeth · Jordyn</div><div style="font:600 11px/1.3 Nunito;color:#52525E">Completed 7:04 AM from panel</div></div>
<span style="font:700 11px/1 Nunito;color:var(--brand-purple)">Undo</span></div>
</div>
<div style="display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border-radius:8px;background:#DBEAFE;border:1px solid rgba(37,99,235,.3)">
<i data-lucide="info" style="width:16px;height:16px;flex:none;color:#1D4ED8;margin-top:1px"></i>
<div style="font:600 11.5px/1.45 Nunito;color:#1E3A8A">Undo is admin-only. A panel tap can never reverse a completion.</div></div>
</div>
<div style="position:absolute;bottom:0;left:0;right:0;height:70px;background:#fff;border-top:1px solid #E4E4EA;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding-bottom:12px">
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="house" style="width:21px;height:21px;color:var(--brand-blue)"></i><span style="font:700 10px Nunito;color:var(--brand-blue)">Today</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="list-checks" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">Tasks</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="calendar-days" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">Schedule</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="history" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">History</span></div>
</div>
</div>
</div></div>
<div class="dv-opt" id="1e"><div class="dv-olabel"><a class="dv-oid" href="#1e">1e</a>Task definitions + edit sheet</div>
<div class="dv-card" data-screen-label="Admin: Tasks">
<div style="width:390px;height:844px;position:relative;overflow:hidden;background:#F4F4F6;font-family:Nunito,system-ui,sans-serif">
<div style="height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 5px;background:#fff;font:700 13px Nunito;color:#18181D"><span>9:41</span><span style="display:flex;gap:6px;align-items:center"><i data-lucide="wifi" style="width:15px;height:15px"></i><i data-lucide="battery-full" style="width:19px;height:19px"></i></span></div>
<div style="padding:10px 20px 12px;background:#fff;border-bottom:1px solid #E4E4EA;display:flex;align-items:center;justify-content:space-between">
<div><div style="font:800 24px/1.1 Nunito;letter-spacing:-.02em;color:#18181D">Tasks</div><div style="font:600 12px/1.4 Nunito;color:#52525E">7 definitions · 3 children</div></div>
<div style="display:flex;align-items:center;gap:6px;padding:9px 13px;border-radius:8px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple))"><i data-lucide="plus" style="width:15px;height:15px;color:#fff"></i><span style="font:700 13px Nunito;color:#fff">New</span></div></div>
<div style="padding:12px 16px 0;display:flex;gap:7px">
<span style="font:700 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#18181D;color:#fff">All</span>
<span style="font:600 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#fff;border:1px solid #E4E4EA;color:#3C3C46">Declan</span>
<span style="font:600 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#fff;border:1px solid #E4E4EA;color:#3C3C46">Jordyn</span>
<span style="font:600 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#fff;border:1px solid #E4E4EA;color:#3C3C46">Chloe</span>
</div>
<div style="margin:12px 16px;border-radius:8px;background:#fff;border:1px solid #E4E4EA;overflow:hidden">
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1"><i data-lucide="scissors" style="width:17px;height:17px;color:#52525E"></i><div style="flex:1;min-width:0"><div style="font:700 13.5px/1.2 Nunito;color:#18181D">Brush hair</div><div style="font:600 11px/1.3 Nunito;color:#52525E">Declan · daily · morning</div></div><i data-lucide="chevron-right" style="width:16px;height:16px;color:#70707E"></i></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1"><i data-lucide="smile" style="width:17px;height:17px;color:#52525E"></i><div style="flex:1;min-width:0"><div style="font:700 13.5px/1.2 Nunito;color:#18181D">Brush teeth</div><div style="font:600 11px/1.3 Nunito;color:#52525E">All three · daily · morning + evening</div></div><i data-lucide="chevron-right" style="width:16px;height:16px;color:#70707E"></i></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1"><i data-lucide="spray-can" style="width:17px;height:17px;color:#52525E"></i><div style="flex:1;min-width:0"><div style="font:700 13.5px/1.2 Nunito;color:#18181D">Put on deodorant</div><div style="font:600 11px/1.3 Nunito;color:#52525E">Declan · daily · morning</div></div><i data-lucide="chevron-right" style="width:16px;height:16px;color:#70707E"></i></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1;background:#EBEBF8"><i data-lucide="dog" style="width:17px;height:17px;color:var(--brand-blue)"></i><div style="flex:1;min-width:0"><div style="font:700 13.5px/1.2 Nunito;color:#18181D">Clean dog poop</div><div style="font:700 11px/1.3 Nunito;color:var(--brand-blue)">Editing</div></div><i data-lucide="chevron-down" style="width:16px;height:16px;color:var(--brand-blue)"></i></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1"><i data-lucide="bird" style="width:17px;height:17px;color:#52525E"></i><div style="flex:1;min-width:0"><div style="font:700 13.5px/1.2 Nunito;color:#18181D">Fill bird feeder</div><div style="font:600 11px/1.3 Nunito;color:#52525E">Declan · every 2 days · afternoon</div></div><i data-lucide="chevron-right" style="width:16px;height:16px;color:#70707E"></i></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1"><i data-lucide="droplets" style="width:17px;height:17px;color:#52525E"></i><div style="flex:1;min-width:0"><div style="font:700 13.5px/1.2 Nunito;color:#18181D">Fill cat fountains</div><div style="font:600 11px/1.3 Nunito;color:#52525E">Declan · daily · evening</div></div><i data-lucide="chevron-right" style="width:16px;height:16px;color:#70707E"></i></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px"><i data-lucide="cat" style="width:17px;height:17px;color:#70707E"></i><div style="flex:1;min-width:0"><div style="font:700 13.5px/1.2 Nunito;color:#52525E">Stack cat food</div><div style="font:600 11px/1.3 Nunito;color:#70707E">Chloe · weekly Sun · inactive</div></div><i data-lucide="chevron-right" style="width:16px;height:16px;color:#70707E"></i></div>
</div>
<div style="position:absolute;bottom:0;left:0;right:0;border-radius:20px 20px 0 0;background:#fff;box-shadow:0 -8px 28px rgba(9,9,11,.18);padding:14px 18px 24px">
<div style="width:38px;height:4px;border-radius:9999px;background:#E4E4EA;margin:0 auto 14px"></div>
<div style="font:800 19px/1.2 Nunito;color:#18181D">Clean dog poop</div>
<div style="margin-top:14px;display:flex;flex-direction:column;gap:11px">
<div><div style="font:700 10px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E;margin-bottom:5px">Assigned child</div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA"><span style="font:700 13.5px Nunito;color:#18181D">Declan</span><i data-lucide="chevron-down" style="width:15px;height:15px;color:#52525E"></i></div></div>
<div style="display:flex;gap:9px">
<div style="flex:1"><div style="font:700 10px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E;margin-bottom:5px">Repeats</div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA"><span style="font:700 13.5px Nunito;color:#18181D">Daily</span><i data-lucide="chevron-down" style="width:15px;height:15px;color:#52525E"></i></div></div>
<div style="flex:1"><div style="font:700 10px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E;margin-bottom:5px">Due time</div>
<div style="padding:11px 12px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;font:700 13.5px Nunito;color:#18181D">5:00 PM</div></div>
</div>
<div><div style="font:700 10px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E;margin-bottom:5px">Start date</div>
<div style="padding:11px 12px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;font:700 13.5px Nunito;color:#18181D">Sep 14, 2026</div></div>
<div><div style="font:700 10px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E;margin-bottom:5px">Window</div>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:6px">
<span style="text-align:center;font:600 12px/1 Nunito;padding:10px 0;border-radius:8px;border:1px solid #E4E4EA;color:#3C3C46">Morning</span>
<span style="text-align:center;font:700 12px/1 Nunito;padding:10px 0;border-radius:8px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));color:#fff">Afternoon</span>
<span style="text-align:center;font:600 12px/1 Nunito;padding:10px 0;border-radius:8px;border:1px solid #E4E4EA;color:#3C3C46">Evening</span></div></div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-radius:8px;background:#F4F4F6">
<div><div style="font:700 13px/1.2 Nunito;color:#18181D">Skip on away days</div><div style="font:600 10.5px/1.3 Nunito;color:#52525E">No instance when the child is absent</div></div>
<div style="width:42px;height:24px;flex:none;border-radius:9999px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));position:relative"><div style="position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#fff"></div></div></div>
<div style="display:flex;gap:9px;margin-top:2px">
<div style="flex:1;text-align:center;padding:13px 0;border-radius:8px;border:1px solid #E4E4EA;font:700 14px Nunito;color:#3C3C46">Cancel</div>
<div style="flex:2;text-align:center;padding:13px 0;border-radius:8px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));font:700 14px Nunito;color:#fff">Save changes</div></div>
</div>
</div>
</div>
</div></div>
<div class="dv-opt" id="1f"><div class="dv-olabel"><a class="dv-oid" href="#1f">1f</a>Schedule + custody cycle</div>
<div class="dv-card" data-screen-label="Admin: Schedule">
<div style="width:390px;height:844px;position:relative;overflow:hidden;background:#F4F4F6;font-family:Nunito,system-ui,sans-serif">
<div style="height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 5px;background:#fff;font:700 13px Nunito;color:#18181D"><span>9:41</span><span style="display:flex;gap:6px;align-items:center"><i data-lucide="wifi" style="width:15px;height:15px"></i><i data-lucide="battery-full" style="width:19px;height:19px"></i></span></div>
<div style="padding:10px 20px 12px;background:#fff;border-bottom:1px solid #E4E4EA">
<div style="font:800 24px/1.1 Nunito;letter-spacing:-.02em;color:#18181D">Schedule</div>
<div style="font:600 12px/1.4 Nunito;color:#52525E">2-week cycle · anchor Sunday, Sep 6</div></div>
<div style="padding:14px 16px 92px;display:flex;flex-direction:column;gap:10px">
<div style="padding:13px;border-radius:8px;background:#fff;border:1px solid #E4E4EA">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:11px">
<span style="font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#3C3C46">September 2026</span>
<div style="display:flex;gap:12px"><i data-lucide="chevron-left" style="width:17px;height:17px;color:#52525E"></i><i data-lucide="chevron-right" style="width:17px;height:17px;color:#52525E"></i></div></div>
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font:700 10px/1 Nunito;color:#70707E;text-align:center;margin-bottom:6px"><span>S</span><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span></div>
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:4px">
<div style="aspect-ratio:1"></div><div style="aspect-ratio:1"></div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">1</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">2</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">3</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">4</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">5</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">6</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">7</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">8</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">9</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">10</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">11</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">12</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">13</div>
<div style="aspect-ratio:1;border-radius:6px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));display:grid;place-items:center;font:800 12px Nunito;color:#fff">14</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">15</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">16</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">17</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">18</div>
<div style="aspect-ratio:1;border-radius:6px;background:#FEF3C7;display:grid;place-items:center;font:700 12px Nunito;color:#92400E;border:1px solid rgba(217,119,6,.4)">19</div>
<div style="aspect-ratio:1;border-radius:6px;background:#FEF3C7;display:grid;place-items:center;font:700 12px Nunito;color:#92400E;border:1px solid rgba(217,119,6,.4)">20</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">21</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">22</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">23</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">24</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">25</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">26</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">27</div>
<div style="aspect-ratio:1;border-radius:6px;background:#F4F4F6;display:grid;place-items:center;font:600 12px Nunito;color:#52525E">28</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">29</div>
<div style="aspect-ratio:1;border-radius:6px;background:#EBEBF8;display:grid;place-items:center;font:700 12px Nunito;color:#201F7A">30</div>
</div>
<div style="display:flex;flex-wrap:wrap;gap:12px;margin-top:12px">
<span style="display:flex;align-items:center;gap:6px;font:600 10.5px Nunito;color:#3C3C46"><span style="width:11px;height:11px;border-radius:3px;background:#EBEBF8;border:1px solid #CDCDF0"></span>Chloe + Jordyn home</span>
<span style="display:flex;align-items:center;gap:6px;font:600 10.5px Nunito;color:#3C3C46"><span style="width:11px;height:11px;border-radius:3px;background:#F4F4F6;border:1px solid #E4E4EA"></span>Away week</span>
<span style="display:flex;align-items:center;gap:6px;font:600 10.5px Nunito;color:#3C3C46"><span style="width:11px;height:11px;border-radius:3px;background:#FEF3C7;border:1px solid rgba(217,119,6,.5)"></span>Override</span>
</div>
</div>
<div style="padding:13px;border-radius:8px;background:#fff;border:1px solid #E4E4EA">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px"><span style="font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#3C3C46">Presence patterns</span><span style="font:700 11.5px Nunito;color:var(--brand-blue)">Add</span></div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #EDEDF1"><span style="font:700 13px Nunito;color:#18181D">Chloe · Custody</span><span style="font:600 12px Nunito;color:#52525E">Away · every 2 weeks</span></div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #EDEDF1"><span style="font:700 13px Nunito;color:#18181D">Chloe · School term</span><span style="font:600 12px Nunito;color:#52525E">Home · every week</span></div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #EDEDF1"><span style="font:700 13px Nunito;color:#18181D">Jordyn · Custody</span><span style="font:600 12px Nunito;color:#52525E">Away · every 2 weeks</span></div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:9px 0"><span style="font:700 13px Nunito;color:#18181D">Declan</span><span style="font:600 12px Nunito;color:#52525E">Every day</span></div>
</div>
<div style="padding:13px;border-radius:8px;background:#fff;border:1px solid #E4E4EA">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px"><span style="font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#3C3C46">Overrides</span><span style="font:700 11.5px Nunito;color:var(--brand-blue)">Add</span></div>
<div style="display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #EDEDF1"><i data-lucide="calendar-x" style="width:16px;height:16px;color:#D97706"></i><div style="flex:1;min-width:0"><div style="font:700 13px/1.2 Nunito;color:#18181D">Chloe away · Sep 14 – 20</div><div style="font:600 11px/1.3 Nunito;color:#52525E">Traded week · beats the pattern</div></div><i data-lucide="trash-2" style="width:15px;height:15px;color:#70707E"></i></div>
<div style="display:flex;align-items:center;gap:9px;padding:9px 0"><i data-lucide="calendar-check" style="width:16px;height:16px;color:#15803D"></i><div style="flex:1;min-width:0"><div style="font:700 13px/1.2 Nunito;color:#18181D">Jordyn home · Sep 19 – 20</div><div style="font:600 11px/1.3 Nunito;color:#52525E">Birthday weekend</div></div><i data-lucide="trash-2" style="width:15px;height:15px;color:#70707E"></i></div>
</div>
</div>
<div style="position:absolute;bottom:0;left:0;right:0;height:70px;background:#fff;border-top:1px solid #E4E4EA;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding-bottom:12px">
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="house" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">Today</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="list-checks" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">Tasks</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="calendar-days" style="width:21px;height:21px;color:var(--brand-blue)"></i><span style="font:700 10px Nunito;color:var(--brand-blue)">Schedule</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="history" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">History</span></div>
</div>
</div>
</div></div>
<div class="dv-opt" id="1g"><div class="dv-olabel"><a class="dv-oid" href="#1g">1g</a>History + CSV export</div>
<div class="dv-card" data-screen-label="Admin: History">
<div style="width:390px;height:844px;position:relative;overflow:hidden;background:#F4F4F6;font-family:Nunito,system-ui,sans-serif">
<div style="height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 5px;background:#fff;font:700 13px Nunito;color:#18181D"><span>9:41</span><span style="display:flex;gap:6px;align-items:center"><i data-lucide="wifi" style="width:15px;height:15px"></i><i data-lucide="battery-full" style="width:19px;height:19px"></i></span></div>
<div style="padding:10px 20px 12px;background:#fff;border-bottom:1px solid #E4E4EA;display:flex;align-items:center;justify-content:space-between">
<div><div style="font:800 24px/1.1 Nunito;letter-spacing:-.02em;color:#18181D">History</div><div style="font:600 12px/1.4 Nunito;color:#52525E">Append-only event log · last 14 days</div></div>
<div style="display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:8px;border:1px solid #E4E4EA;background:#fff"><i data-lucide="download" style="width:15px;height:15px;color:#3C3C46"></i><span style="font:700 12px Nunito;color:#3C3C46">CSV</span></div></div>
<div style="padding:14px 16px 92px;display:flex;flex-direction:column;gap:12px">
<div style="display:flex;gap:8px">
<div style="flex:1;padding:11px 12px;border-radius:8px;background:#fff;border:1px solid #E4E4EA"><div style="font:800 20px/1 Nunito;color:#18181D">91%</div><div style="font:600 10px/1.3 Nunito;letter-spacing:.08em;text-transform:uppercase;color:#52525E">On time</div></div>
<div style="flex:1;padding:11px 12px;border-radius:8px;background:#fff;border:1px solid #E4E4EA"><div style="font:800 20px/1 Nunito;color:#18181D">128</div><div style="font:600 10px/1.3 Nunito;letter-spacing:.08em;text-transform:uppercase;color:#52525E">Completed</div></div>
<div style="flex:1;padding:11px 12px;border-radius:8px;background:#fff;border:1px solid #E4E4EA"><div style="font:800 20px/1 Nunito;color:#18181D">7</div><div style="font:600 10px/1.3 Nunito;letter-spacing:.08em;text-transform:uppercase;color:#52525E">Missed</div></div>
</div>
<div style="display:flex;gap:7px">
<span style="font:700 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#18181D;color:#fff">All events</span>
<span style="font:600 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#fff;border:1px solid #E4E4EA;color:#3C3C46">Reversals</span>
<span style="font:600 11px/1 Nunito;padding:7px 12px;border-radius:9999px;background:#fff;border:1px solid #E4E4EA;color:#3C3C46">Missed</span>
</div>
<div style="font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E">Today</div>
<div style="border-radius:8px;background:#fff;border:1px solid #E4E4EA;overflow:hidden">
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1"><span style="width:7px;height:7px;border-radius:50%;flex:none;background:#16A34A"></span><div style="flex:1;min-width:0"><div style="font:700 12.5px/1.25 Nunito;color:#18181D">Brush teeth · Jordyn</div><div style="font:600 10.5px/1.3 Nunito;color:#52525E">completed · panel (Jordyn) · on time</div></div><span style="font:600 11px Nunito;color:#52525E">7:04 AM</span></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1"><span style="width:7px;height:7px;border-radius:50%;flex:none;background:#16A34A"></span><div style="flex:1;min-width:0"><div style="font:700 12.5px/1.25 Nunito;color:#18181D">Brush hair · Declan</div><div style="font:600 10.5px/1.3 Nunito;color:#52525E">completed · panel (Declan) · on time</div></div><span style="font:600 11px Nunito;color:#52525E">7:12 AM</span></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1"><span style="width:7px;height:7px;border-radius:50%;flex:none;background:#A035CC"></span><div style="flex:1;min-width:0"><div style="font:700 12.5px/1.25 Nunito;color:#18181D">Stack cat food · Declan</div><div style="font:600 10.5px/1.3 Nunito;color:#7D28A0">uncompleted · joshua (admin)</div></div><span style="font:600 11px Nunito;color:#52525E">8:31 AM</span></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px"><span style="width:7px;height:7px;border-radius:50%;flex:none;background:#DC2626"></span><div style="flex:1;min-width:0"><div style="font:700 12.5px/1.25 Nunito;color:#18181D">Fill bird feeder · Declan</div><div style="font:600 10.5px/1.3 Nunito;color:#B91C1C">missed · nightly sweep</div></div><span style="font:600 11px Nunito;color:#52525E">12:00 AM</span></div>
</div>
<div style="font:700 11px/1 Nunito;letter-spacing:.1em;text-transform:uppercase;color:#52525E">Sunday, Sep 13</div>
<div style="border-radius:8px;background:#fff;border:1px solid #E4E4EA;overflow:hidden">
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #EDEDF1"><span style="width:7px;height:7px;border-radius:50%;flex:none;background:#16A34A"></span><div style="flex:1;min-width:0"><div style="font:700 12.5px/1.25 Nunito;color:#18181D">Fill cat fountains · Declan</div><div style="font:600 10.5px/1.3 Nunito;color:#52525E">completed · panel (Declan) · late 22 min</div></div><span style="font:600 11px Nunito;color:#52525E">8:22 PM</span></div>
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px"><span style="width:7px;height:7px;border-radius:50%;flex:none;background:#16A34A"></span><div style="flex:1;min-width:0"><div style="font:700 12.5px/1.25 Nunito;color:#18181D">Clean dog poop · Jordyn</div><div style="font:600 10.5px/1.3 Nunito;color:#52525E">completed · joshua (admin) · on time</div></div><span style="font:600 11px Nunito;color:#52525E">4:48 PM</span></div>
</div>
<div style="display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border-radius:8px;background:#F4F4F6;border:1px solid #E4E4EA">
<i data-lucide="lock" style="width:15px;height:15px;flex:none;color:#3C3C46;margin-top:1px"></i>
<div style="font:600 11px/1.45 Nunito;color:#3C3C46">Events are never edited or deleted. A reversal is its own row.</div></div>
</div>
<div style="position:absolute;bottom:0;left:0;right:0;height:70px;background:#fff;border-top:1px solid #E4E4EA;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding-bottom:12px">
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="house" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">Today</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="list-checks" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">Tasks</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="calendar-days" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">Schedule</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="history" style="width:21px;height:21px;color:var(--brand-blue)"></i><span style="font:700 10px Nunito;color:var(--brand-blue)">History</span></div>
</div>
</div>
</div></div>
</div>
<div class="dv-thd" style="margin:46px 0 20px"><a class="dv-tid" href="#t1">1</a><span class="dv-tname">Parent admin — roomy density, same screens for comparison</span></div>
<div class="dv-opts">
<div class="dv-opt" id="1h"><div class="dv-olabel"><a class="dv-oid" href="#1h">1h</a>Today overview · roomy (compare to <a class="dv-oid" href="#1d">1d</a>)</div>
<div class="dv-card" data-screen-label="Admin: Today (roomy)">
<div style="width:390px;height:844px;position:relative;overflow:hidden;background:#F4F4F6;font-family:Nunito,system-ui,sans-serif">
<div style="height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 5px;background:#fff;font:700 13px Nunito;color:#18181D"><span>9:41</span><span style="display:flex;gap:6px;align-items:center"><i data-lucide="wifi" style="width:15px;height:15px"></i><i data-lucide="battery-full" style="width:19px;height:19px"></i></span></div>
<div style="padding:16px 22px 20px;background:#fff;border-bottom:1px solid #E4E4EA">
<div style="font:700 11px/1 Nunito;letter-spacing:.14em;text-transform:uppercase;color:#52525E">Monday, September 14</div>
<div style="margin-top:6px;font:800 32px/1.05 Nunito;letter-spacing:-.02em;color:#18181D">8 of 12 done</div>
<div style="margin-top:12px;height:10px;border-radius:9999px;background:#EDEDF1;overflow:hidden"><div style="width:67%;height:100%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple))"></div></div>
<div style="margin-top:10px;font:600 13px/1.4 Nunito;color:#52525E">1 overdue · cycle day 3 of 14</div>
</div>
<div style="padding:18px 20px 92px;display:flex;flex-direction:column;gap:16px">
<div style="padding:18px;border-radius:12px;background:#fff;border:1px solid #E4E4EA;box-shadow:0 4px 12px rgba(0,0,0,.06)">
<div style="display:flex;align-items:center;gap:14px">
<div style="width:48px;height:48px;flex:none;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));display:grid;place-items:center;font:800 20px Nunito;color:#fff">D</div>
<div style="flex:1;min-width:0"><div style="font:800 19px/1.2 Nunito;color:#18181D">Declan</div><div style="font:600 13px/1.4 Nunito;color:#52525E">Home every day</div></div>
<div style="text-align:right"><div style="font:800 19px/1 Nunito;color:#18181D">3/7</div><div style="font:600 11px/1.3 Nunito;color:#B91C1C">1 overdue</div></div>
</div>
<div style="margin-top:14px;height:8px;border-radius:9999px;background:#EDEDF1;overflow:hidden"><div style="width:43%;height:100%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple))"></div></div>
<div style="margin-top:14px;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:8px;background:#FEE2E2">
<div style="min-width:0"><div style="font:700 13.5px/1.2 Nunito;color:#18181D">Fill bird feeder</div><div style="font:600 11.5px/1.3 Nunito;color:#B91C1C">Overdue since 9:00 AM</div></div>
<span style="font:700 12.5px Nunito;color:var(--brand-blue)">Mark done</span></div>
</div>
<div style="padding:18px;border-radius:12px;background:#fff;border:1px solid #E4E4EA;box-shadow:0 4px 12px rgba(0,0,0,.06)">
<div style="display:flex;align-items:center;gap:14px">
<div style="width:48px;height:48px;flex:none;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));display:grid;place-items:center;font:800 20px Nunito;color:#fff">J</div>
<div style="flex:1;min-width:0"><div style="font:800 19px/1.2 Nunito;color:#18181D">Jordyn</div><div style="font:600 13px/1.4 Nunito;color:#52525E">Home this week</div></div>
<div style="text-align:right"><div style="font:800 19px/1 Nunito;color:#18181D">5/5</div><div style="font:600 11px/1.3 Nunito;color:#15803D">All done</div></div>
</div>
<div style="margin-top:14px;height:8px;border-radius:9999px;background:#EDEDF1;overflow:hidden"><div style="width:100%;height:100%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple))"></div></div>
</div>
<div style="padding:18px;border-radius:12px;background:#fff;border:1px solid #E4E4EA">
<div style="display:flex;align-items:center;gap:14px">
<div style="width:48px;height:48px;flex:none;border-radius:10px;background:#9898A8;display:grid;place-items:center;font:800 20px Nunito;color:#fff">C</div>
<div style="flex:1;min-width:0"><div style="font:800 19px/1.2 Nunito;color:#3C3C46">Chloe</div><div style="font:600 13px/1.4 Nunito;color:#52525E">Away until Sunday, Sep 21</div></div>
<span style="font:600 10px/1 Nunito;letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;border-radius:9999px;background:#F4F4F6;color:#3C3C46;border:1px solid #E4E4EA">override</span>
</div>
</div>
</div>
<div style="position:absolute;bottom:0;left:0;right:0;height:70px;background:#fff;border-top:1px solid #E4E4EA;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding-bottom:12px">
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="house" style="width:21px;height:21px;color:var(--brand-blue)"></i><span style="font:700 10px Nunito;color:var(--brand-blue)">Today</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="list-checks" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">Tasks</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="calendar-days" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">Schedule</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:3px"><i data-lucide="history" style="width:21px;height:21px;color:#70707E"></i><span style="font:600 10px Nunito;color:#52525E">History</span></div>
</div>
</div>
</div></div>
<div class="dv-opt" id="1i"><div class="dv-olabel"><a class="dv-oid" href="#1i">1i</a>Presence overrides · roomy</div>
<div class="dv-card" data-screen-label="Admin: Presence overrides">
<div style="width:390px;height:844px;position:relative;overflow:hidden;background:#F4F4F6;font-family:Nunito,system-ui,sans-serif">
<div style="height:50px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 5px;background:#fff;font:700 13px Nunito;color:#18181D"><span>9:41</span><span style="display:flex;gap:6px;align-items:center"><i data-lucide="wifi" style="width:15px;height:15px"></i><i data-lucide="battery-full" style="width:19px;height:19px"></i></span></div>
<div style="padding:14px 22px 18px;background:#fff;border-bottom:1px solid #E4E4EA;display:flex;align-items:center;gap:12px">
<i data-lucide="chevron-left" style="width:22px;height:22px;color:#3C3C46"></i>
<div><div style="font:800 24px/1.1 Nunito;letter-spacing:-.02em;color:#18181D">Presence override</div><div style="font:600 12px/1.4 Nunito;color:#52525E">Beats the custody pattern for these dates</div></div></div>
<div style="padding:18px 20px;display:flex;flex-direction:column;gap:16px">
<div style="padding:18px;border-radius:12px;background:#fff;border:1px solid #E4E4EA;box-shadow:0 4px 12px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:16px">
<div><div style="font:700 11px/1 Nunito;letter-spacing:.12em;text-transform:uppercase;color:#52525E;margin-bottom:8px">Child</div>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px">
<span style="text-align:center;font:700 13px/1 Nunito;padding:13px 0;border-radius:8px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));color:#fff">Chloe</span>
<span style="text-align:center;font:600 13px/1 Nunito;padding:13px 0;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;color:#3C3C46">Jordyn</span>
<span style="text-align:center;font:600 13px/1 Nunito;padding:13px 0;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;color:#3C3C46">Declan</span>
</div></div>
<div><div style="font:700 11px/1 Nunito;letter-spacing:.12em;text-transform:uppercase;color:#52525E;margin-bottom:8px">Status for these dates</div>
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:8px">
<span style="text-align:center;font:700 13px/1 Nunito;padding:14px 0;border-radius:8px;background:#18181D;color:#fff">Away</span>
<span style="text-align:center;font:600 13px/1 Nunito;padding:14px 0;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;color:#3C3C46">Home</span>
</div></div>
<div style="display:flex;gap:10px">
<div style="flex:1"><div style="font:700 11px/1 Nunito;letter-spacing:.12em;text-transform:uppercase;color:#52525E;margin-bottom:8px">From</div>
<div style="padding:13px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;font:700 14px Nunito;color:#18181D">Sep 14, 2026</div></div>
<div style="flex:1"><div style="font:700 11px/1 Nunito;letter-spacing:.12em;text-transform:uppercase;color:#52525E;margin-bottom:8px">Through</div>
<div style="padding:13px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;font:700 14px Nunito;color:#18181D">Sep 20, 2026</div></div>
</div>
<div><div style="font:700 11px/1 Nunito;letter-spacing:.12em;text-transform:uppercase;color:#52525E;margin-bottom:8px">Reason (optional)</div>
<div style="padding:13px;border-radius:8px;border:1px solid #E4E4EA;background:#FAFAFA;font:600 14px Nunito;color:#18181D">Traded week</div></div>
</div>
<div style="padding:16px 18px;border-radius:12px;background:#FEF3C7;border:1px solid rgba(217,119,6,.35)">
<div style="display:flex;align-items:flex-start;gap:10px">
<i data-lucide="alert-circle" style="width:17px;height:17px;flex:none;color:#92400E;margin-top:2px"></i>
<div><div style="font:700 13.5px/1.3 Nunito;color:#92400E">This removes 5 upcoming tasks</div>
<div style="margin-top:5px;font:600 12px/1.5 Nunito;color:#78350F">Chloe's instances for Sep 14–20 will not be generated. Completed days are untouched.</div></div>
</div></div>
<div style="display:flex;gap:10px">
<div style="flex:1;text-align:center;padding:15px 0;border-radius:8px;border:1px solid #E4E4EA;background:#fff;font:700 14.5px Nunito;color:#3C3C46">Cancel</div>
<div style="flex:2;text-align:center;padding:15px 0;border-radius:8px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));font:700 14.5px Nunito;color:#fff">Save override</div>
</div>
</div>
</div>
</div></div>
</div>
<p class="dv-next">Try: "go compact everywhere" · "make the seals smaller on <a class="dv-oid" href="#1b">1b</a>" · "darker parchment on the panel" · "add the schedule + history screens in roomy too"</p>
</section>
</x-dc>
<script type="text/x-dc" data-dc-script>
class Component extends DCLogic {
componentDidMount() { this.icons(); }
componentDidUpdate() { this.icons(); }
icons() {
const run = () => { if (window.lucide) window.lucide.createIcons(); else setTimeout(run, 120); };
run();
}
renderVals() { return {}; }
}
</script>
</body>
</html>