:root{--paper:#f3eee5;--ink:#343431;--muted:#89847c;--green:#625b51;--line:#ddd5c9;--peach:#f1e0d2;--yellow:#e9c875}
body{background:#e4ded4;color:#343431}.app-shell{background:#f3eee5}.brand-mark,.day.selected,.add-button,.submit-task{background:#625b51}.welcome h1 em{color:#625b51}.day.selected{color:#eee8df}.day.today:not(.selected){border-color:#9e9281}.filter.active{background:#e5ddcf;color:#45423e;border-color:#e5ddcf}.claim-button{border-color:#d8ccbc;color:#514b43;background:#f5f0e7}.claim-button:hover{background:#ece4d7}.complete-button{border-color:#ded6ca;color:#89847d}.done-card .complete-button{background:#625b51;border-color:#625b51}.ritual-card{background:#e9e0d2}.ritual-card .eyebrow{color:#817669}.ritual-ornament{color:#c4b49d}.task-modal{background:#f3eee5}.close-modal{background:#e7ded1;color:#514d47}.preset.chosen{border-color:#887b69;background:#ebe3d7;color:#514b43}.preset span{color:inherit}.add-button{box-shadow:0 4px 10px #625b5122}
.tone-blue{background:#e3ebf0;color:#50748a}.tone-red{background:#f2e2df;color:#a75e51}.tone-yellow{background:#f2e9ce;color:#a28739}.tone-purple{background:#ebe4ef;color:#77618d}
.prototype-note{display:flex;align-items:center;gap:8px;color:#756e64;font-size:9px;line-height:1.4;padding:9px 11px;margin-top:13px;background:#ebe2d5;border-radius:10px}.prototype-note span{flex:none;font-size:8px;letter-spacing:.12em;font-weight:700;color:#766249}.prototype-note button{border:0;background:transparent;padding:0;color:#625b51;font:700 9px var(--sans);text-decoration:underline;cursor:pointer;white-space:nowrap}
.pair-modal{max-width:440px}.pair-modal form{display:grid;gap:9px;margin:14px 0}.pair-modal input{width:100%;height:44px;border:1px solid #ded5c8;background:#fffaf2;border-radius:10px;padding:10px 12px;color:var(--ink)}.pair-modal .submit-task{width:100%;margin:4px 0 0}.pair-divider{text-align:center;font-size:8px;letter-spacing:.12em;color:#9a8f80;margin:17px 0}.pair-code{font-size:25px;letter-spacing:.14em;text-align:center;font-weight:700;color:#625b51;background:#e9e0d2;border-radius:12px;padding:17px 8px;overflow-wrap:anywhere}.pair-error{padding:9px 11px;border-radius:9px;background:#f1e3da;color:#875648;font-size:11px}.pair-status p{font-size:11px;line-height:1.5;color:#777066}
.welcome h1{font-family:var(--sans);font-weight:400;font-size:34px;line-height:1.18;letter-spacing:-.055em;color:#393632;margin-top:17px}
.welcome h1 em{font-style:normal;font-weight:400;color:#987b5b}
.ritual-card h3{font-family:var(--sans);font-weight:400;font-size:19px;line-height:1.28;letter-spacing:-.035em;color:#393632}
.day-heading h2{font-family:var(--sans);font-weight:500;letter-spacing:-.045em}
.task-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.preset span{height:22px;display:grid;place-items:center;margin:0 auto 4px}
.preset span svg{height:20px;width:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.task-actions{flex-wrap:wrap;justify-content:flex-end;max-width:130px}.cant-button{width:25px;height:25px;display:grid;place-items:center;border:1px solid #eadbd6;border-radius:50%;background:#f7efec;color:#8b5149;font:400 18px/1 var(--sans);padding:0;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}.cant-button:hover{background:#efe0dc;border-color:#d8bdb5}.cant-button:focus-visible{outline:2px solid #8b5149;outline-offset:2px}.needs-help-card{border-color:#e4cfc5}.help-note{font-size:9px;color:#986656;margin-top:5px}.activity-note{display:flex;gap:10px;align-items:flex-start;background:#f1e3da;border:1px solid #e8d3c7;border-radius:13px;padding:11px 12px;margin:0 0 2px}.activity-icon{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#a76756;color:#fff;font-weight:700;font-size:12px}.activity-note strong{display:block;font-size:10px;color:#55423d;line-height:1.4}.activity-note p{margin:3px 0;color:#65554e;font-size:10px;line-height:1.4}.activity-note small{font-size:8px;color:#9a7c6e}.reason-intro{font-size:11px;line-height:1.5;color:#777066;margin:-6px 0 18px}.reason-modal textarea{width:100%;min-height:96px;resize:vertical;border:1px solid #ded5c8;background:#fffaf2;border-radius:11px;padding:11px;font:11px/1.5 var(--sans);color:var(--ink);outline:none;margin-bottom:12px}.reason-modal textarea:focus{border-color:#8e8170;box-shadow:0 0 0 3px #625b5115}.reason-modal .submit-task{margin-top:0}
@media(max-width:390px){.task-card{grid-template-columns:37px minmax(0,1fr) auto;gap:7px;padding:10px 9px}.task-actions{max-width:92px;gap:4px}.cant-button{width:23px;height:23px;font-size:17px}.owner-pill{font-size:8px;padding-right:5px}.task-name{font-size:11px}.task-meta{flex-wrap:wrap;gap:4px}}
.ritual-ornament{width:40px;height:40px;flex:none;display:grid;place-items:center;margin-right:15px;align-self:center;line-height:1;opacity:1;color:#9a876d}
.ritual-ornament svg{display:block;width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
#reason-backdrop{align-items:center}
.reason-modal{margin:auto}
@media(max-width:600px){
  #reason-backdrop{height:100dvh;min-height:100dvh;align-items:center;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .reason-modal{width:100%;max-height:calc(100dvh - 32px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  input,select,textarea{font-family:var(--sans)!important;font-size:16px!important;line-height:1.35}
  input,select{height:44px}
}

/* Clearer, more contemporary household planner styling */
:root{--paper:#f7f3eb;--ink:#292925;--line:#e2dbd0;--green:#565149}
body{background:#faf7f1;color:#292925}
.app-shell{background:linear-gradient(180deg,#faf7f1 0%,#f5f0e7 100%);box-shadow:0 18px 60px #443c3010}
.topbar{padding-top:max(20px,env(safe-area-inset-top));padding-bottom:18px}
.brand{font-size:12px;font-weight:650;letter-spacing:.015em}
.brand-mark{box-shadow:0 5px 14px #514b401c}
.welcome{padding-top:12px}
.date-label,.eyebrow{letter-spacing:.14em}
.welcome h1{font-size:clamp(34px,9vw,39px);font-weight:450;line-height:1.12;letter-spacing:-.06em}
.welcome h1 em{color:#887254}
.welcome-copy{font-size:12px;color:#746f66}
.week-strip{gap:8px;margin-top:20px}
.day{height:67px;border-radius:17px;background:#fdfbf7;border-color:#ebe5dc;box-shadow:0 2px 8px #493d2b08;transition:transform .16s ease,background .16s ease}
.day:active{transform:scale(.96)}
.day.selected{background:#4c4942;border-color:#4c4942;box-shadow:0 6px 15px #4c494226}
.prototype-note{font-size:10px;padding:11px 13px;border:1px solid #e4d9c8;background:#f0e8dc;border-radius:14px}
.prototype-note span{color:#575044}
.day-heading{margin-top:24px;align-items:flex-end}
.day-heading h2{font-size:24px;font-weight:560;letter-spacing:-.055em;color:#242420}
.task-count{display:inline-flex;align-items:center;min-height:28px;padding:3px 10px;margin-left:5px;border-radius:999px;background:#e9e2d7;color:#181816;font:600 16px/1 var(--sans);letter-spacing:-.015em;vertical-align:2px}
.add-button{height:39px;border-radius:13px;padding:0 12px;box-shadow:0 5px 13px #4c494220}
.filters{gap:7px;margin:17px 0 12px}
.filter{border-radius:999px;padding:8px 13px;background:#f9f6f0;border-color:#e7e0d5;font-size:10px}
.filter.active{background:#ded5c8;color:#292722}
.task-list{gap:9px}
.task-card{grid-template-columns:42px minmax(0,1fr) auto;gap:12px;border:1px solid #e9e2d8;border-radius:17px;background:#fffdf9;padding:13px;box-shadow:0 4px 13px #382f2108;transition:transform .16s ease,box-shadow .16s ease}
.task-card:active{transform:scale(.992)}
.task-icon{width:42px;height:42px;border-radius:14px}
.task-icon svg{width:21px;height:21px;stroke-width:1.7}
.task-name{font-size:13px;font-weight:620;letter-spacing:-.025em;color:#282824}
.task-meta{font-size:9px;color:#746f65;gap:6px;margin-top:6px}
.task-actions{max-width:150px;gap:6px}
.claim-button{font-size:9px;border-radius:999px;padding:8px 10px}
.owner-pill{font-size:9px;border-radius:999px;background:#f1ece4;padding:4px 8px 4px 4px;color:#3e3a34}
.complete-button{width:25px;height:25px;border-radius:9px}
.ritual-card{margin-top:20px;border:1px solid #e7ded0;border-radius:18px;padding:18px;background:linear-gradient(135deg,#eee6d8,#e9e0d1)}
.ritual-card h3{font-size:19px}
.ritual-card p:last-child{font-size:10px}
.member-heading{font:600 15px var(--sans);color:#33302b;margin:22px 0 10px}
.member-list{display:grid;gap:9px}
.member-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px;border:1px solid #e6ded2;background:#fffaf3;border-radius:14px}
.member-name{display:flex;align-items:center;gap:9px;min-width:0}
.member-avatar{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:12px;background:#e6ddd0;color:#514a40;font-size:13px;font-weight:700}
.member-name-input{width:min(34vw,160px)!important;height:34px!important;padding:0 8px!important;font-size:14px!important;font-weight:600!important;background:#fffdf9!important}
.member-name small{display:block;color:#8a8174;font-size:9px;margin:3px 0 0 3px}
.member-buttons{display:flex;gap:5px;align-items:center}
.member-save,.member-remove{border:0;background:#e9e2d8;color:#403c35;border-radius:9px;padding:8px 9px;font:600 10px var(--sans);cursor:pointer}
.member-remove{background:#f1e4df;color:#8b5547}
.custom-hint{font-size:10px;color:#817a70;margin:-12px 0 13px}
.custom-preset{border-style:dashed;background:#f5f0e8;color:#625b51}
.custom-preset span svg{stroke:currentColor}
@media(max-width:390px){.day-heading h2{font-size:22px}.task-count{font-size:15px}.task-card{grid-template-columns:37px minmax(0,1fr) auto;gap:8px;padding:11px 9px}.task-icon{width:37px;height:37px}.task-actions{max-width:106px}.task-name{font-size:12px}.member-row{padding:9px}.member-save,.member-remove{padding:8px 7px}}
.task-swipe{position:relative;overflow:hidden;border-radius:17px;touch-action:pan-y}
.task-swipe .task-card{position:relative;z-index:1;width:100%;transition:transform .2s ease;touch-action:pan-y}
.task-reveal{position:absolute;inset:0 0 0 auto;display:flex;align-items:stretch;gap:6px;padding:7px;background:#e8e0d4;border-radius:17px}
.task-reveal button{min-width:55px;border:0;border-radius:11px;background:#d9d0c3;color:#39362f;font:600 10px var(--sans);cursor:pointer}
.task-reveal .delete-task{background:#a76050;color:#fff}
.task-swipe.revealed .task-card{transform:translateX(-132px)}
.more-task-button{width:23px;height:23px;flex:none;border:1px solid #e2dbd0;border-radius:8px;background:#f6f1e9;color:#686156;font:700 9px/1 var(--sans);letter-spacing:1px;cursor:pointer}
footer{justify-content:center;text-align:center}
.topbar-tools{display:flex;align-items:center;gap:10px}
.appearance-control{position:relative}
.appearance-button{width:32px;height:32px;display:grid;place-items:center;border:1px solid #e5ded2;border-radius:50%;background:#f5f0e7;color:#514b43;font:500 17px/1 var(--sans);cursor:pointer}
.appearance-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:8;width:190px;padding:8px;border:1px solid #e3dbcf;border-radius:15px;background:#fffdf8;box-shadow:0 12px 32px #2e281b20}
.appearance-menu[hidden]{display:none}
.appearance-menu p{margin:4px 8px 7px;color:#8b8173;font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.appearance-menu button{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;border-radius:9px;background:transparent;padding:9px 8px;color:#39362f;font:500 11px var(--sans);text-align:left;cursor:pointer}
.appearance-menu button[aria-pressed="true"]{background:#eee7dc;color:#433d33;font-weight:700}
.appearance-menu button span{color:#928879;font-size:9px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){.app-shell{width:100%;max-width:none;min-height:100dvh;padding-bottom:calc(28px + env(safe-area-inset-bottom))}.topbar{height:auto;min-height:calc(env(safe-area-inset-top) + 46px);padding-top:env(safe-area-inset-top);padding-bottom:8px}}

/* Night appearance, chosen per phone */
body[data-theme="dark"]{background:#22231f;color:#eee9df;color-scheme:dark}
body[data-theme="dark"] .app-shell{background:#22231f;color:#eee9df;box-shadow:none}
body[data-theme="dark"] .brand,body[data-theme="dark"] .day-heading h2,body[data-theme="dark"] .task-name,body[data-theme="dark"] .empty-state strong,body[data-theme="dark"] .ritual-card h3{color:#f0eadf}
body[data-theme="dark"] .brand-mark,body[data-theme="dark"] .day.selected,body[data-theme="dark"] .add-button,body[data-theme="dark"] .submit-task{background:#b99b70;color:#211f1a}
body[data-theme="dark"] .avatar{border-color:#22231f}
body[data-theme="dark"] .welcome h1{color:#f0eadf}
body[data-theme="dark"] .welcome h1 em{color:#c7ad85}
body[data-theme="dark"] .date-label,body[data-theme="dark"] .eyebrow{color:#b8ad9d}
body[data-theme="dark"] .welcome-copy,body[data-theme="dark"] .task-meta,body[data-theme="dark"] footer{color:#aaa398}
body[data-theme="dark"] .welcome{border-color:#3d3d37}
body[data-theme="dark"] .day{background:#2c2d28;border-color:#3b3c35;color:#d4cec3}
body[data-theme="dark"] .day span:last-child{color:#f0eadf}
body[data-theme="dark"] .day.selected span:last-child{color:#211f1a}
body[data-theme="dark"] .day.today:not(.selected){border-color:#b99b70}
body[data-theme="dark"] .prototype-note{background:#302f2a;border-color:#454138;color:#d1c8ba}
body[data-theme="dark"] .prototype-note span,body[data-theme="dark"] .prototype-note button{color:#d8bd91}
body[data-theme="dark"] .task-count{background:#3b3932;color:#f2eadc}
body[data-theme="dark"] .filter{background:#2a2b26;border-color:#41413a;color:#c3bcaf}
body[data-theme="dark"] .filter.active{background:#514b40;border-color:#514b40;color:#fff6e8}
body[data-theme="dark"] .task-card,body[data-theme="dark"] .empty-state{background:#2b2c27;border-color:#3c3d36;color:#e8e2d7}
body[data-theme="dark"] .owner-pill{background:#393831;color:#dfd6c7}
body[data-theme="dark"] .claim-button{background:#35382f;border-color:#545648;color:#d1d6c3}
body[data-theme="dark"] .complete-button{border-color:#55534a;color:#c8c0b3}
body[data-theme="dark"] .done-card .complete-button{background:#b99b70;color:#211f1a;border-color:#b99b70}
body[data-theme="dark"] .ritual-card{background:#30352e;border-color:#43483f}
body[data-theme="dark"] .ritual-card .eyebrow,body[data-theme="dark"] .ritual-card p:last-child{color:#b3bba9}
body[data-theme="dark"] .ritual-ornament{color:#85917c}
body[data-theme="dark"] .ritual-spark{color:#c9ad7c}
body[data-theme="dark"] .appearance-button{background:#34322c;border-color:#514c41;color:#e8d3ae}
body[data-theme="dark"] .appearance-menu{background:#2b2c27;border-color:#47463f}
body[data-theme="dark"] .appearance-menu p{color:#b8ad9d}
body[data-theme="dark"] .appearance-menu button{color:#eee8dd}
body[data-theme="dark"] .appearance-menu button[aria-pressed="true"]{background:#454137;color:#f8eddb}
body[data-theme="dark"] .appearance-menu button span{color:#b8ad9d}
body[data-theme="dark"] .task-modal{background:#282923;color:#eee9df}
body[data-theme="dark"] .task-modal h2{color:#f0eadf}
body[data-theme="dark"] .close-modal{background:#414139;color:#e8e0d3}
body[data-theme="dark"] .preset{background:#30312b;border-color:#46463e;color:#e3ddd1}
body[data-theme="dark"] .preset.chosen{background:#43443a;border-color:#9c8969;color:#f1e7d7}
body[data-theme="dark"] input,body[data-theme="dark"] select,body[data-theme="dark"] textarea{background:#33342e;border-color:#4a4a41;color:#f0eadf}
body[data-theme="dark"] form label,body[data-theme="dark"] .modal-note,body[data-theme="dark"] .reason-intro{color:#b7b0a4}
body[data-theme="dark"] .task-reveal{background:#393830}
body[data-theme="dark"] .task-reveal button{background:#4b4940;color:#f0eadf}
body[data-theme="dark"] .task-reveal .delete-task{background:#9b5d50;color:#fff}
body[data-theme="dark"] .activity-note{background:#3a302c;border-color:#58453e}
body[data-theme="dark"] .activity-note strong,body[data-theme="dark"] .activity-note p{color:#f0ded4}
body[data-theme="dark"] .member-row{background:#30312b;border-color:#48473e}
body[data-theme="dark"] .member-name-input{background:#282923!important;color:#eee9df!important}
@media(prefers-reduced-motion:no-preference){body,.app-shell,.task-card,.appearance-menu{transition:background-color .2s ease,color .2s ease}}
@media(max-width:390px){.task-actions{max-width:112px}.more-task-button{width:22px;height:22px}.task-reveal{padding:6px}.task-reveal button{min-width:52px}.task-swipe.revealed .task-card{transform:translateX(-122px)}}
