:root{--bg:#F3F2EE;--card:#fff;--ink:#1D2026;--mute:#6B6F76;--line:#E4E2DC;--tile:#F1F0EC;--blue:#2F6FDE;--green:#1E9E6A;
  font-family:Inter,"Segoe UI",Roboto,system-ui,sans-serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#15171B;--card:#1F2228;--ink:#ECEDEF;--mute:#9AA0A8;--line:#30343B;--tile:#272B32;color-scheme:dark}}
:root[data-theme=dark]{--bg:#15171B;--card:#1F2228;--ink:#ECEDEF;--mute:#9AA0A8;--line:#30343B;--tile:#272B32;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}
small{color:var(--mute);font-size:.8em}.label{letter-spacing:.06em;font-weight:600}.grow{flex:1}
.row{display:flex;align-items:center;gap:8px;justify-content:space-between}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.example{border:1px dashed var(--mute);border-radius:6px;font-size:11px;padding:2px 6px;color:var(--mute);letter-spacing:.04em;white-space:nowrap}
.pill{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 14px;font-size:14px;color:var(--mute);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pill i{width:9px;height:9px;border-radius:50%;background:#aaa}.pill.synced i{background:var(--green)}.pill.pending i{background:#E0A020}.pill.offline i{background:#C0392B}
.av{--c:#888;background:var(--c);color:#fff;border-radius:50%;display:inline-grid;place-items:center;font-weight:600;width:40px;height:40px;font-size:15px;flex:none}
.av.sm{width:26px;height:26px;font-size:11px}.av.lg{width:56px;height:56px;font-size:20px}
.shape{color:var(--c);font-size:.8em}
.next{background:var(--blue);color:#fff;border:0}.next small{color:#DCE6FB;letter-spacing:.06em}.next h2{margin:4px 0 2px;font-size:22px}.next p{margin:0;font-size:15px}
/* wall 1920x1080 */
.wall{height:100vh;padding:28px 36px;display:flex;flex-direction:column;gap:24px;overflow:hidden}
.top{display:flex;align-items:center;gap:28px}.clock{font-size:96px;font-weight:300;letter-spacing:-2px;line-height:1}
.date b{display:block;font-size:30px;font-weight:500}.date small{font-size:18px}.weather{font-size:20px;color:var(--mute)}.weather b{font-size:30px;color:var(--ink);font-weight:500}
.top .example{font-size:14px}.top .pill{font-size:18px;padding:10px 20px}
.sq{width:88px;height:88px;border-radius:18px;border:1px solid var(--line);background:var(--card);font-size:34px;display:grid;place-items:center}
.grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr) 1.18fr;gap:22px;min-height:0}
.lane{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:16px;min-height:0}
.lane header{display:flex;gap:14px;align-items:center}.lane .av{width:76px;height:76px;font-size:26px}.lane h3{margin:0;font-size:32px;font-weight:600}.lane header small{font-size:18px}
.evs{display:flex;flex-direction:column;gap:12px;flex:1;overflow:hidden}
.ev{background:var(--tile);border-left:6px solid var(--c);border-radius:12px;padding:12px 16px}.ev small{display:block;font-size:18px}.ev b{font-size:26px;font-weight:600}
.chores .label{display:block;border-bottom:1px solid var(--line);padding-bottom:10px;font-size:16px}
.chore{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}.chore:last-child{border:0}
.check{width:80px;height:80px;border-radius:14px;border:4px solid var(--c);background:transparent;font-size:40px;color:#fff;flex:none}
.chore.done .check,.kchore.done .check{background:var(--c)}
.chore .emoji{font-size:44px}.chore .ct b{font-size:24px;font-weight:500;display:block}
.alldone{color:var(--green);font-weight:700;font-size:24px}
aside{display:flex;flex-direction:column;gap:22px;min-height:0}aside .card{border-radius:22px;padding:22px 26px}
aside .next h2{font-size:38px}aside .next p{font-size:22px}aside .next small{font-size:17px}
aside h2{margin:6px 0;font-size:36px}aside .label{font-size:16px}.grocery{flex:1}.gi{font-size:26px;padding:12px 0;border-bottom:1px solid var(--line)}.grocery>small{display:block;margin-top:12px;font-size:18px}
/* phone */
.phone{max-width:520px;margin:0 auto;padding:16px 16px 96px;display:flex;flex-direction:column;gap:12px}
.ptop{display:flex;justify-content:space-between;align-items:flex-start}.ptop h1{margin:0;font-size:22px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:5px 10px 5px 5px;display:flex;align-items:center;gap:5px;font-weight:600;font-size:14px;white-space:nowrap;min-height:44px}
.chip.all{padding:0 14px}.chip.on{background:var(--ink);color:var(--bg)}
.pev{display:grid;grid-template-columns:84px 1fr auto;align-items:center;background:var(--tile);border-left:6px solid var(--c);border-radius:10px;padding:12px;margin-top:8px}
.pev b{font-size:16px}.pev .tag{color:var(--c);font-weight:600;font-size:13px}
.phone .chore .check{width:56px;height:56px;font-size:28px}.phone .chore .emoji{font-size:36px}.phone .chore .ct b{font-size:17px;font-weight:600}.phone .chore small{color:var(--c);font-weight:600}
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--card);border-top:1px solid var(--line);padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
.tabs a{flex:1;text-align:center;font-size:11px;color:var(--mute)}.tabs a span{display:block;font-size:24px}.tabs a.on{color:var(--blue);font-weight:700}
/* PIN */
.pin{max-width:420px;margin:0 auto;padding:20px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;min-height:100vh;text-align:center}
.pin>.row{width:100%}.lock{width:64px;height:64px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-size:30px}
.pin h1{margin:0;font-size:24px}.pin p{white-space:pre-line;color:var(--mute);margin:0}.avs{display:flex;gap:8px}.avs .av{width:34px;height:34px;font-size:12px}
.dots{display:flex;gap:16px;margin:8px}.dots i{width:20px;height:20px;border-radius:50%;border:2px solid var(--ink)}.dots i.on{background:var(--ink)}
.keys{display:grid;grid-template-columns:repeat(3,84px);gap:14px 26px}.keys button{width:84px;height:84px;border-radius:50%;border:1px solid var(--line);background:var(--card);font-size:32px;font-weight:500}
.keys .bk{border:0;background:none}.foot{margin-top:auto}.btn{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:14px 24px;font-weight:600}
.btn.primary{background:var(--blue);color:#fff;border:0}.link{color:var(--blue);text-decoration:underline;font-weight:600}
.pin input{font-size:28px;letter-spacing:6px;text-align:center;width:240px;padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
/* kid chores */
.kid{max-width:520px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:12px}.kid h1{margin:0;font-size:28px}
.round{width:52px;height:52px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-size:24px}
.stars{text-align:center}.stars span{font-size:44px;opacity:.25;filter:grayscale(1)}.stars span.on{opacity:1;filter:none}
.bar{height:18px;background:var(--line);border-radius:9px;overflow:hidden;margin-top:8px}.bar i{display:block;height:100%;background:var(--c);width:0}
.stars h2{margin:10px 0 0;color:var(--c)}
.kchore{display:flex;align-items:center;gap:20px;background:var(--card);border:1px solid var(--line);border-left:8px solid var(--c);border-radius:18px;padding:16px 16px 16px 20px;min-height:106px}
.kchore .emoji{font-size:64px}.kchore b{flex:1;color:var(--mute);font-weight:600}.kchore .check{width:76px;height:76px}
/* modal PIN on wall + lockout */
.modalwrap{position:relative}.scrim{position:fixed;inset:0;background:rgba(120,120,120,.45);backdrop-filter:blur(4px)}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--card);border-radius:28px;width:760px;padding:28px 40px;min-height:0;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal .keys{grid-template-columns:repeat(3,120px);gap:16px 36px}.modal .keys button{width:120px;height:96px;border-radius:48px}
.pinpad,.lockout{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.lockout .hour{width:72px;height:72px;border-radius:50%;background:#C8392B;display:grid;place-items:center;font-size:34px}
.lockout h1{margin:0}.count{color:#C8392B;font-size:44px;font-weight:700}.dots.red i{border:0;background:#E7B3AC}
.keys.off button{opacity:.4;cursor:not-allowed}
.notice{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--tile);border:1px solid var(--line);border-radius:14px;padding:10px 16px;font-weight:600;font-size:14px}
.btn.wide{width:100%;text-align:center;display:block}button.link{background:none;border:0}
/* chores board */
.grid.four{grid-template-columns:repeat(4,1fr)}.board .bar{margin:0}.stars-n{color:var(--c);font-size:30px}
.board .chore .check{width:64px;height:64px;font-size:30px}.board .chore .emoji{font-size:38px}.board .chore .ct{flex:1}.board .chore .ct b{font-size:21px}
.chore.done .ct b{color:var(--mute);font-weight:500}.ok{display:inline-block;background:#F7D774;color:#5A4500;border-radius:6px;font-size:12px;padding:1px 6px;font-style:normal}
.chore.waiting .check{opacity:.45}.plus{color:#B88A00;font-weight:700}
.approve{pointer-events:none;background:#F7D774;color:#3A2E00;border-radius:18px;padding:26px 30px;font-size:22px;font-weight:700}.approve b{background:#3A2E00;color:#F7D774;border-radius:999px;padding:2px 10px;margin-left:6px}
.pboard{display:flex;flex-direction:column;gap:12px}.pboard .lane{padding:14px}.pboard .lane .av{width:44px;height:44px;font-size:15px}.pboard h3{font-size:20px}
.pboard .chore .check{width:52px;height:52px;font-size:26px}.pboard .chore .emoji{font-size:30px}.pboard .chore .ct b{font-size:16px}
/* month */
.mgrid{flex:1;display:grid;grid-template-columns:3fr 1.25fr;gap:22px;min-height:0}
.month{display:flex;flex-direction:column;gap:8px}.month h2{margin:0;font-size:34px}.legend span{color:var(--c);font-weight:600;margin-left:12px}
.dow,.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.days{flex:1}.dow small{font-weight:600;padding-left:6px}
.day{background:var(--tile);border:2px solid transparent;border-radius:12px;padding:6px 8px;text-align:left;display:flex;flex-direction:column;gap:4px;min-height:0;overflow:hidden}
.day.out{opacity:.5}.day .n{font-weight:600;font-size:20px}.day.today .n{background:var(--blue);color:#fff;border-radius:50%;width:34px;height:34px;display:grid;place-items:center}
.day.sel{border-color:var(--ink)}.mev{background:color-mix(in srgb,var(--c) 22%,transparent);border-left:4px solid var(--c);border-radius:4px;font-size:13px;padding:2px 6px;white-space:nowrap;overflow:hidden}
.selday{display:flex;flex-direction:column;gap:10px}.selday h2{margin:0;font-size:32px}.selday .ev b{font-size:24px;display:block}.who{color:var(--c)!important;font-weight:600}
.phone .month h2{font-size:22px}.phone .day{min-height:52px;padding:4px}.phone .day .n{font-size:15px}.phone .day.today .n{width:26px;height:26px}.phone .selday h2{font-size:22px}.phone .selday .ev b{font-size:17px}
/* groceries */
.glist{display:flex;flex-direction:column}.gitem{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:26px}
.gitem .check{width:56px;height:56px;font-size:28px;--c:#1E9E6A}.gitem.done span{text-decoration:line-through;color:var(--mute)}.gitem.done .check{background:var(--c)}
.wall .glist{flex:1;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-content:start}.wall .glist>.row{grid-column:1/-1}
.phone .gitem{font-size:18px}.phone .gitem .check{width:44px;height:44px;font-size:22px}
/* routines */
.grid.r1{grid-template-columns:1fr}.grid.r2{grid-template-columns:1fr 1fr}.wall .kchore{min-height:120px}.wall .kchore b{font-size:30px;color:var(--ink)}
/* screensaver + night dim */
.saver{height:100vh;background:#0B0C0F;color:#ECEDEF;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
.saver .clock{font-size:240px;font-weight:200}.sdate{font-size:40px;color:#9AA0A8}.snext{display:flex;flex-direction:column;gap:12px;font-size:32px}.snext b{color:var(--c)}
html.nightdim body{filter:brightness(.55) sepia(.25)}
.setup-addr{font-weight:600;color:var(--blue)!important;word-break:break-all}
/* invite / join (design v1b) and wall settings */
.flow{display:flex;flex-direction:column;gap:12px;min-height:100vh;padding:14px 16px 16px}.flow h1{margin:0;font-size:24px}
.flow .crumb,.flow .mu{color:var(--mute)}.flow p{margin:0}.back{min-height:48px;display:flex;align-items:center;color:var(--mute)}
.mrow{display:flex;gap:12px;align-items:center;min-height:64px;text-align:left;width:100%;color:inherit;font:inherit}.mrow.sel{border:2px solid var(--blue)}
.mrow[disabled]{opacity:.45}.mrow .ct,.srow .ct{display:flex;flex-direction:column;flex:1}.mrow small,.srow small{color:var(--mute)}
.tog{width:52px;height:32px;border-radius:16px;background:var(--line);position:relative;border:0;flex:none}.tog::after{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#fff}
.tog.on{background:var(--blue)}.tog.on::after{left:23px}
.codecard{display:flex;flex-direction:column;gap:10px;align-items:center}.code{font:700 40px ui-monospace,Menlo,monospace;letter-spacing:4px}.ttl{color:#C98A12;font-weight:700}
.steps{display:flex;flex-direction:column;gap:8px}.step{display:flex;gap:10px;line-height:1.45}.step>b{flex:none;width:20px}.c{text-align:center}
.fld{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:14px}.fld small{font-weight:400;color:var(--mute)}
.fld input{min-height:52px;border:1.5px solid var(--line);border-radius:12px;padding:0 12px;font-size:16px;background:var(--card);color:var(--ink)}
.fld input.codein{font:700 24px ui-monospace,Menlo,monospace;letter-spacing:3px;text-align:center;min-height:60px}.fld input.bad{border-color:#D64545}
.alert{border:2px solid #D64545;background:#D645451A;color:#D64545;border-radius:14px;padding:12px;font-weight:700}
.ok .big{font-size:36px;color:#1E9E6A}.ok{display:flex;flex-direction:column;gap:6px;align-items:center;padding:18px}
.btn.wide[disabled]{background:var(--line);color:var(--mute)}a.btn.wide{text-align:center}
.settings{display:flex;flex-direction:column;gap:12px;max-width:900px;margin:24px auto;width:100%}.srow{display:flex;gap:14px;align-items:center;min-height:72px}
.srow .emoji{font-size:26px}.note{font-size:18px;font-weight:600;border-left:6px solid var(--blue)}
.setupform{display:flex;flex-direction:column;gap:12px}.setupform code{font:600 12px ui-monospace,Menlo,monospace;word-break:break-all}
.setupcode{font:700 44px ui-monospace,Menlo,monospace;letter-spacing:6px;text-align:center;padding:14px 0}
/* MD wall fixes: equal-width lanes (minmax(0,1fr), not 1fr), docked 420px panel (340px at 1280-1599), compact headers, '+N more' */
.grid.today{grid-template-columns:repeat(var(--n,4),minmax(0,1fr)) 420px}.grid.today aside{min-width:0;overflow:hidden}.grid.today aside h2{overflow-wrap:anywhere}
.lane header>div{min-width:0}.lane h3,.lane header small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evs .more{flex:none;min-height:40px;display:flex;align-items:center;font-size:18px;font-weight:600;color:var(--mute)}.chores{flex:none}.lane .chore{min-width:0}.lane .chore .ct{min-width:0;overflow-wrap:break-word}
@media (max-width:1599.98px){.wall{padding:20px 24px;gap:16px}.clock{font-size:72px;white-space:nowrap}.sq{width:64px;height:64px;font-size:26px}
 .grid.today{grid-template-columns:repeat(var(--n,4),minmax(0,1fr)) 340px;gap:14px}.lane{padding:14px;gap:10px;border-radius:18px}
 .lane .av{width:48px;height:48px;font-size:17px}.lane h3{font-size:22px}.lane header small{font-size:14px}
 .lane .chore{gap:8px;padding:8px 0}.lane .chore .emoji{font-size:28px}.lane .chore .ct b{font-size:17px}.lane .chore .check{width:48px;height:48px;font-size:24px;border-width:3px}.ev{padding:8px 12px}.ev small{font-size:15px}.ev b{font-size:20px}.check{width:56px;height:56px;font-size:28px}
 aside{gap:14px}aside .card{padding:16px 18px}aside .next h2,aside h2{font-size:26px}.gi{font-size:20px;padding:8px 0}}
/* phone add/edit */
.ptop .sq.add{width:48px;height:48px;font-size:24px;border-radius:14px;flex:none}a.pev{color:inherit;text-decoration:none}
.chore .edit,.gitem .edit{margin-left:auto;min-width:48px;min-height:48px;display:grid;place-items:center;color:var(--mute);text-decoration:none;font-size:20px}
.chips.wrap{flex-wrap:wrap;margin:0;padding:0}.chips a.chip{text-decoration:none;padding:8px 14px}.chips a.chip:not(.on){color:inherit}.flow .row .fld{flex:1}
/* MD: every lane's 'Chores left' block is the same height, so the columns line up */
.grid.today .lane .chores{flex:none;height:262px;overflow:hidden}
@media (max-width:1599.98px){.grid.today .lane .chores{height:176px}}