/* ══════════════════════════════════════════════════════════════
   House Chores — styles  (iPad-first, touch-friendly)
══════════════════════════════════════════════════════════════ */
:root{
  --bg:#f4f4ef; --card:#fff; --ink:#1a1a1a; --muted:#6b7280; --faint:#9ca3af;
  --line:#ececec; --blue:#2563eb; --blue-d:#1d4ed8; --green:#16a34a; --amber:#f59e0b;
  --radius:14px; --shadow:0 1px 4px rgba(0,0,0,.08); --shadow-l:0 6px 24px rgba(0,0,0,.14);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%;
}
button{font-family:inherit; cursor:pointer}
input,select{font-family:inherit; font-size:1rem}

/* ── shell ── */
#app{min-height:100%}
.screen{max-width:760px; margin:0 auto; padding:1rem 1rem calc(5.5rem + var(--safe-b));}

/* ── top bar ── */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:calc(.7rem + var(--safe-t)) 1rem .7rem; background:rgba(244,244,239,.9);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line);
}
.brand{font-weight:800; font-size:1.1rem; display:flex; align-items:center; gap:.4rem}
.me-chip{display:flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:.3rem .6rem .3rem .35rem; box-shadow:var(--shadow)}
.me-name{font-weight:600; font-size:.92rem}
.me-chip .swap{color:var(--faint); font-size:.85rem}

/* ── avatars ── */
.ava{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:50%; color:#fff; font-size:1rem; flex-shrink:0; line-height:1}
.ava.sm{width:24px; height:24px; font-size:.85rem}
.ava.xl{width:64px; height:64px; font-size:2rem}
.ava.none{background:#e5e7eb!important; color:#9ca3af; font-weight:700}

/* ── bottom tab bar ── */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex;
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-top:1px solid var(--line);
  padding-bottom:var(--safe-b)}
.tab{flex:1; background:none; border:none; padding:.55rem 0 .5rem; display:flex; flex-direction:column;
  align-items:center; gap:.15rem; color:var(--muted); font-size:.7rem; font-weight:600}
.tab .tab-i{font-size:1.35rem; line-height:1}
.tab.on{color:var(--blue)}

/* ── cards ── */
.card{background:var(--card); border-radius:var(--radius); padding:1rem 1.1rem; margin-top:1rem; box-shadow:var(--shadow)}
.card-h{font-size:.95rem; font-weight:700; margin-bottom:.5rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem}
.hint{font-size:.8rem; color:var(--muted)} .hint.inline{font-weight:500}
.vtitle{font-size:1.25rem; font-weight:800; margin:.4rem 0 .2rem}
.empty{padding:1.2rem .5rem; text-align:center; color:var(--muted); font-size:.9rem}
.room-label{font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:var(--faint); margin:.85rem 0 .15rem; padding-bottom:.15rem; border-bottom:1px solid var(--line)}

/* ── buttons ── */
.btn{padding:.7rem 1.1rem; border:none; border-radius:10px; font-size:.92rem; font-weight:600}
.btn-primary{background:var(--blue); color:#fff} .btn-primary:active{background:var(--blue-d)}
.btn-ghost{background:#ececed; color:#374151} .btn-ghost.danger{color:#b91c1c}
.actions{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem}
.ghost-btn{background:#fff; border:1px solid var(--line); border-radius:10px; width:44px; height:44px;
  font-size:1.4rem; color:#374151; box-shadow:var(--shadow)}
.ghost-btn.today-jump{width:auto; padding:0 .8rem; font-size:.85rem; font-weight:700}

/* ── date nav ── */
.datenav{display:flex; align-items:center; gap:.6rem; margin-top:.4rem}
.dnav-mid{flex:1; text-align:center}
.dnav-day{font-size:1.15rem; font-weight:800}
.dnav-sub{font-size:.75rem; color:var(--muted)}

/* ── progress ── */
.progress{margin-top:.9rem}
.progress-bar{height:10px; background:#e9e9e4; border-radius:99px; overflow:hidden}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--green),#22c55e); border-radius:99px; transition:width .3s}
.progress-meta{font-size:.78rem; color:var(--muted); margin-top:.35rem} .fair{color:var(--faint)}

/* ── chips (filters / ranges) ── */
.chips{display:flex; gap:.45rem; flex-wrap:wrap; margin-top:.9rem}
.fchip{display:inline-flex; align-items:center; gap:.35rem; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:.35rem .7rem; font-size:.82rem; font-weight:600; color:#374151}
.fchip.on{background:var(--blue); border-color:var(--blue); color:#fff}
.fchip.on .ava{box-shadow:0 0 0 2px #fff}

/* ── task rows ── */
.task{display:flex; align-items:center; gap:.6rem; padding:.55rem .15rem; border-bottom:1px solid #f3f3f0}
.task:last-child{border-bottom:none}
.task-main{flex:1; min-width:0}
.task-text{font-size:.92rem; line-height:1.35}
.task-meta{font-size:.7rem; color:var(--faint); margin-top:.1rem}
.task.is-done .task-text{text-decoration:line-through; color:var(--faint)}
.task.is-done{opacity:.7}
.task.pr-high{box-shadow:inset 3px 0 0 #ef4444; padding-left:.5rem; border-radius:4px}
.check{width:30px; height:30px; border-radius:50%; border:2px solid #cfcfcf; background:#fff;
  flex-shrink:0; color:#fff; font-weight:800; font-size:1rem; display:flex; align-items:center; justify-content:center}
.check.on{background:var(--green); border-color:var(--green)}
.iconbtn{background:none; border:none; padding:.2rem; display:flex; align-items:center; justify-content:center; min-width:30px}
.iconbtn.del{color:var(--faint); font-size:.9rem}
.mini{background:#eef2ff; color:var(--blue); border:none; border-radius:8px; padding:.3rem .55rem; font-size:.72rem; font-weight:700; white-space:nowrap}
.done-by{color:var(--green); font-weight:700}
.flag{font-size:.95rem} .flag.hi{color:#ef4444} .flag.lo{color:#cbd5e1} .flag.none{color:#e5e7eb}

/* ── quick add ── */
.qchips{display:flex; gap:.45rem; flex-wrap:wrap; margin:.3rem 0 .8rem}
.qchip{background:#f1f5f9; border:1px dashed #cbd5e1; border-radius:999px; padding:.35rem .7rem; font-size:.8rem; font-weight:600; color:#334155}
.addrow{display:flex; gap:.5rem}
.addrow input{flex:1; padding:.6rem .7rem; border:1px solid var(--line); border-radius:10px}

/* ── carry-over ── */
.carry{border-left:4px solid var(--amber)} .carry .card-h{color:#92400e}

/* ── leaderboard ── */
.lb-row{display:flex; align-items:center; gap:.7rem; padding:.6rem 0; border-bottom:1px solid #f3f3f0}
.lb-row:last-child{border-bottom:none}
.lb-rank{width:24px; text-align:center; font-weight:800; color:var(--muted); font-size:1.05rem}
.lb-body{flex:1; min-width:0}
.lb-name{font-weight:700; font-size:.92rem; margin-bottom:.3rem}
.lb-streak{color:var(--amber); font-size:.8rem; font-weight:700}
.lb-num{text-align:right; line-height:1.1}
.lb-num strong{font-size:1.1rem} .lb-num span{display:block; font-size:.68rem; color:var(--faint)}

/* ── bars ── */
.bars{display:flex; flex-direction:column; gap:.5rem; margin-top:.3rem}
.bar-row{display:flex; align-items:center; gap:.6rem}
.bar-label{width:34%; font-size:.8rem; color:#374151; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar-track{flex:1; height:12px; background:#ececed; border-radius:99px; overflow:hidden}
.bar-fill{height:100%; border-radius:99px; transition:width .3s}
.bar-val{width:34px; text-align:right; font-size:.8rem; font-weight:700; color:#374151}

/* ── settings ── */
.setrow{display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.5rem 0; font-size:.9rem; font-weight:600}
.setrow.toggle{justify-content:flex-start; gap:.6rem}
.setrow input[type=date]{padding:.5rem .6rem; border:1px solid var(--line); border-radius:8px}
.sync{padding:.7rem; border-radius:10px; background:#f1f5f9}
.sync.ok{background:#ecfdf5}
.plist{display:flex; flex-direction:column; gap:.4rem}
.prow{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; padding:.4rem 0; border-bottom:1px solid #f3f3f0}
.prow:last-child{border-bottom:none}
.emoji-in{width:46px; text-align:center; padding:.4rem; border:1px solid var(--line); border-radius:8px}
.name-in{flex:1; min-width:90px; padding:.4rem .5rem; border:1px solid var(--line); border-radius:8px; font-weight:600}
.color-in{width:38px; height:38px; padding:0; border:1px solid var(--line); border-radius:8px; background:none}
.prow select{padding:.4rem; border:1px solid var(--line); border-radius:8px}
.cap{font-size:.75rem; color:var(--muted); display:flex; align-items:center; gap:.3rem}
.cap-in{width:48px; padding:.35rem; border:1px solid var(--line); border-radius:8px}
.away{font-size:.78rem; color:var(--muted); display:flex; align-items:center; gap:.25rem}
.danger{margin-top:.5rem}

/* ── picker ── */
.picker-wrap{max-width:520px; margin:0 auto; padding:18vh 1.5rem 2rem; text-align:center}
.picker-wrap h1{font-size:1.8rem; font-weight:800}
.picker-wrap .sub{color:var(--muted); margin:.4rem 0 1.6rem}
.pick-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.pick{display:flex; flex-direction:column; align-items:center; gap:.6rem; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1rem; font-size:1.05rem; font-weight:700; box-shadow:var(--shadow)}
.pick:active{transform:scale(.97)}

/* ── PIN unlock ── */
.pin-card{max-width:300px; margin:1.6rem auto 0; display:flex; flex-direction:column; gap:.7rem}
.pin-input{padding:.9rem 1rem; border:1px solid var(--line); border-radius:12px; font-size:1.4rem;
  text-align:center; letter-spacing:.3em; background:#fff; color:var(--ink)}
.pin-err{min-height:1.2em; color:#b91c1c; font-size:.85rem; font-weight:600}
.pin-hint{margin-top:.4rem; text-align:center}

/* ── modal / overlay ── */
.overlay{position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.35);
  display:flex; align-items:flex-end; justify-content:center; padding:0 0 var(--safe-b)}
.sheet{width:100%; max-width:520px; background:#fff; border-radius:18px 18px 0 0; padding:1.2rem 1.2rem 1.6rem; box-shadow:var(--shadow-l)}
.sheet h3{font-size:1.05rem; margin-bottom:.8rem}
.assign-list{display:flex; flex-direction:column; gap:.4rem}
.assign-opt{display:flex; align-items:center; gap:.7rem; background:#f7f7f5; border:1px solid var(--line);
  border-radius:12px; padding:.7rem .8rem; font-size:.95rem; font-weight:600; text-align:left}
.assign-opt em{color:var(--faint); font-weight:500; margin-left:auto}

@media(min-width:560px){ .pick-grid{grid-template-columns:repeat(4,1fr)} .sheet{border-radius:18px; margin-bottom:6vh} .overlay{align-items:center} }
@media(prefers-color-scheme:dark){
  :root{--bg:#15151a; --card:#1f1f27; --ink:#ececf1; --muted:#9a9aa8; --faint:#6b6b78; --line:#2c2c38}
  .topbar{background:rgba(21,21,26,.9)} .tabbar{background:rgba(31,31,39,.95)}
  .me-chip,.ghost-btn,.fchip,.addrow input,.setrow input,.emoji-in,.name-in,.prow select,.cap-in,.pin-input{background:#272730; color:var(--ink)}
  .qchip{background:#26262f; color:#cbd5e1} .btn-ghost{background:#2c2c38; color:#d1d5db}
  .sync{background:#23232c} .sync.ok{background:#10261d} .assign-opt{background:#272730}
}

/* ── admin: chore manager + projects manager ── */
.ct-row{display:flex; align-items:center; gap:.6rem; padding:.45rem 0; border-bottom:1px solid #f3f3f0}
.ct-row:last-child{border-bottom:none}
.ct-text{flex:1; font-size:.9rem; font-weight:600; min-width:0}
.ct-meta{font-size:.72rem; color:var(--muted); white-space:nowrap}
.ct-add{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-top:.7rem}
.ct-add input[type=text],.ct-add input[type=number],.ct-add select{padding:.5rem .6rem; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:.9rem}
.ct-add .grow{flex:1; min-width:150px}
.money-in{width:76px}
.imp-label{font-size:.8rem; color:var(--muted); display:flex; align-items:center; gap:.3rem; white-space:nowrap}

/* ── money + projects ── */
.money-line{font-size:.95rem; margin:.2rem 0 .4rem; line-height:1.5}
.money-avail{font-weight:800; color:var(--green)}
.proj{padding:.55rem 0; border-bottom:1px solid #f3f3f0}
.proj:last-child{border-bottom:none}
.proj-top{display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.95rem; flex-wrap:wrap}
.proj-amt{margin-left:auto; font-size:.8rem; color:var(--muted); font-weight:600}
.proj .bar-track{margin:.4rem 0 0; height:14px}
.pledge-row{display:flex; gap:.4rem; margin-top:.45rem; flex-wrap:wrap}
.pledge-btn{background:#ecfdf5; color:#047857; border:1px solid #a7f3d0; border-radius:999px; padding:.3rem .75rem; font-size:.78rem; font-weight:700}
.pledge-btn:active{transform:scale(.96)}
.goal-hit{color:var(--amber); font-weight:800}

/* ── kiosk (wall iPad) ── */
.kiosk{max-width:900px; margin:0 auto; padding:5vh 2rem 3rem; position:relative}
.kiosk-exit{position:fixed; top:12px; right:14px; z-index:30; background:var(--card); border:1px solid var(--line);
  border-radius:50%; width:36px; height:36px; color:var(--faint); font-size:1rem; box-shadow:var(--shadow)}
.kiosk-title{font-size:2.5rem; font-weight:800; text-align:center}
.kiosk-sub{text-align:center; color:var(--muted); margin:.35rem 0 2rem; font-size:1.05rem}
.kiosk-board{display:flex; flex-direction:column; gap:.9rem; margin-bottom:1.5rem}
.krow{display:flex; align-items:center; gap:1rem; background:var(--card); border-radius:16px; padding:1rem 1.2rem; box-shadow:var(--shadow)}
.krow .ava{width:52px; height:52px; font-size:1.7rem}
.krank{font-size:1.8rem; width:44px; text-align:center; flex-shrink:0}
.kname{font-size:1.25rem; font-weight:800; margin-bottom:.35rem}
.kbar{height:16px}
.knum{margin-left:auto; text-align:right; font-size:1.45rem; font-weight:800; flex-shrink:0}
.knum span{display:block; font-size:.72rem; color:var(--faint); font-weight:600}
.kiosk .card{padding:1.2rem 1.4rem}
.kiosk .proj-top{font-size:1.05rem}

@media(prefers-color-scheme:dark){
  .ct-add input[type=text],.ct-add input[type=number],.ct-add select{background:#272730; color:var(--ink)}
  .pledge-btn{background:#0d2b21; color:#6ee7b7; border-color:#134e3a}
}
.room-label.imp{color:#ef4444; border-bottom-color:#fecaca}