/* Family Chore Buddy — the app. Same family as the landing page: warm cream, deep green, gold and coral,
   heavy friendly headings, round shapes. No framework, no web fonts. */
:root {
  --ink: #16241c; --muted: #5b675f; --green: #14532d; --green-2: #1a7a43; --leaf: #2fb565; --mint: #dff7e6; --mint-2: #f0fbf3;
  --cream: #fff9ef; --sand: #fdeecb; --gold: #f5b72e; --amber: #b45309; --coral: #ff7a59; --coral-bg: #ffe9e2; --sky: #dceeff; --blue: #1d4ed8;
  --line: #ece5d3; --bg: var(--cream); --card: #fff; --red: #b91c1c; --red-bg: #fee2e2;
  --round: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow: 0 1px 2px rgba(22, 36, 28, .05), 0 12px 28px -18px rgba(22, 36, 28, .3);
}
@supports (-webkit-touch-callout: none) { :root { --round: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); -webkit-tap-highlight-color: transparent; }
main { max-width: 600px; margin: 0 auto; padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); }
body.has-tabs main { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
body.sheet-open { overflow: hidden; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4, button, .money, .what, .avatar, .chip, .badge, .count, summary b { font-family: var(--round); }
h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
h3 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
a { color: var(--green-2); }
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* top bar */
header { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: rgba(255, 249, 239, .86); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
header h1 { flex: 1; min-width: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header #logo { border-radius: 9px; flex: none; }
header #back { font-size: 30px; line-height: 1; width: 40px; height: 40px; padding: 0 0 4px; border-radius: 999px; background: #fff; color: var(--green); box-shadow: inset 0 0 0 1px var(--line); }
header #gear { background: #fff; color: var(--green); font-weight: 700; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }

/* tabs along the bottom */
#tabs { position: fixed; z-index: 3; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 4px; padding: 6px;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 999px; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -12px rgba(22, 36, 28, .45); }
#tabs button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 84px; padding: 7px 14px 6px; border-radius: 999px; background: none; color: var(--muted); font-size: 12px; font-weight: 700; }
#tabs button.on { background: var(--green); color: #fff; }
#tabs .count { position: absolute; top: 2px; right: 16px; }
.count { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 12px; font-weight: 800; line-height: 18px; text-align: center; font-style: normal; }

/* buttons */
button { font: inherit; border: 0; border-radius: 14px; padding: 12px 16px; cursor: pointer; background: #eef0ea; color: var(--ink); font-weight: 600; }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--green-2); color: #fff; font-weight: 800; width: 100%; border-radius: 999px; padding: 14px 18px; box-shadow: 0 2px 0 #0f4a27; }
button.primary:active { transform: translateY(1px); box-shadow: 0 1px 0 #0f4a27; }
button.ghost { background: none; padding: 6px 8px; }
button.link { background: none; padding: 4px 0; color: var(--green-2); text-decoration: underline; font-size: 15px; font-weight: 600; border-radius: 4px; }
button.quiet { background: none; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); }
button.wide { display: block; width: 100%; margin-top: 10px; border-radius: 999px; }
button.yes { background: var(--mint); color: var(--green); font-weight: 800; border-radius: 999px; }
:focus-visible { outline: 3px solid rgba(26, 122, 67, .45); outline-offset: 2px; }

/* cards and forms */
.card { background: var(--card); border-radius: 22px; padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow); }
.card > h3, .card > h2 { margin-bottom: 6px; }
.card > h2 { font-size: 19px; letter-spacing: -.01em; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
label { display: block; font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
input, select { display: block; width: 100%; margin-top: 6px; padding: 13px 14px; font: inherit; color: var(--ink); border: 1.5px solid var(--line); border-radius: 14px; background: #fff; }
input:focus, select:focus { outline: none; border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(26, 122, 67, .18); }
input[type=checkbox] { accent-color: var(--green-2); }
.error { color: var(--red); background: var(--red-bg); padding: 10px 14px; border-radius: 14px; margin-bottom: 12px; font-size: 15px; font-weight: 600; }
.muted { color: var(--muted); font-size: 15px; }
.neg { color: var(--red) !important; }
.money { font-variant-numeric: tabular-nums; font-weight: 800; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inrow { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-top: 12px; }
.inrow input { margin: 0; } .inrow button.primary { width: auto; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.quick button { padding: 7px 13px; border-radius: 999px; font-size: 14px; background: var(--sand); color: #6b4a06; }
.section { font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 22px 4px 10px; }
.badge { display: inline-block; background: var(--green-2); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: 2px; white-space: nowrap; }
.badge.must { background: var(--amber); } .badge.photo { background: var(--blue); } .badge.soft { background: var(--mint); color: var(--green); }
.entry .what .badge:first-child { margin: 0 6px 0 0; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--ink); font-size: 17px; margin: 0; }
.switch input { width: 26px; height: 26px; margin: 0; flex: none; }
.switch.opt { padding: 12px 0; border-top: 1px solid var(--line); }
.card > .switch.opt:first-child, .switch.opt:first-of-type { border-top: 0; }
.switch.opt b, .fold summary b { display: block; font-weight: 700; color: var(--ink); font-size: 16px; }
.switch.opt small, .fold summary small { display: block; font-weight: 400; color: var(--muted); font-size: 14px; margin-top: 1px; }
ul.plain { list-style: none; padding: 0; margin: 0 0 12px; }
ul.plain li { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--line); }
ul.plain li:first-child { border-top: 0; }
#toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 15px; font-weight: 600; max-width: 90vw; text-align: center; z-index: 9; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }

/* sign in */
.brand { text-align: center; padding: 36px 0 22px; }
.brand img { border-radius: 18px; }
.brand h1 { margin-top: 10px; color: var(--green); font-weight: 800; letter-spacing: -.02em; }
#login .link { display: block; margin: 0 auto 6px; }
.alt { display: grid; gap: 10px; margin: 4px 0 18px; }
.alt button { width: 100%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 700; border-radius: 999px; }
.alt .or { text-align: center; color: var(--muted); font-size: 14px; margin: 2px 0; }
input.pin { font-size: 28px; letter-spacing: 6px; text-align: center; }
.code-box { background: var(--mint); border-radius: 16px; padding: 16px; margin-bottom: 12px; text-align: center; }
.code-box .url { font-weight: 700; overflow-wrap: anywhere; margin-bottom: 8px; }
.code-box .code { font: 700 32px/1.3 ui-monospace, Menlo, monospace; letter-spacing: 4px; color: var(--green); }

/* people */
.avatar { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; font-weight: 800; font-size: 22px; color: #fff; background: var(--leaf); }
.avatar.sm { width: 36px; height: 36px; font-size: 17px; }
.avatar.a0 { background: #ff7a59; } .avatar.a1 { background: #2fb565; } .avatar.a2 { background: #e0a100; } .avatar.a3 { background: #3b82f6; } .avatar.a4 { background: #a855f7; } .avatar.a5 { background: #14b8a6; }

/* home */
.hello { padding: 8px 4px 16px; }
.hello h2 { font-size: 30px; color: var(--green); }
.setup .step { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; padding: 11px 0; border-top: 1px solid var(--line); border-radius: 0; font-weight: 700; }
.setup .step:first-of-type { margin-top: 10px; }
.setup .step:disabled { opacity: 1; }
.setup .step .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sand); color: #6b4a06; font-weight: 800; flex: none; }
.setup .step.done .n { background: var(--leaf); color: #fff; }
.setup .step.done .t { color: var(--muted); text-decoration: line-through; font-weight: 600; }
.setup .step .t { flex: 1; }
.chev { color: var(--muted); font-size: 22px; line-height: 1; flex: none; }
.quickacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.act { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px; border-radius: 18px; background: #fff; color: var(--green); font-weight: 800; box-shadow: var(--shadow); }
.act.bounty { background: linear-gradient(150deg, #ffd66b, var(--gold)); color: #4a3200; }
.act .em { font-size: 20px; }
.kids { display: grid; gap: 12px; }
.kid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; width: 100%; text-align: left; background: var(--card); border-radius: 22px; padding: 16px; box-shadow: var(--shadow); font-weight: 400; }
.kid .name { font-family: var(--round); font-size: 20px; font-weight: 800; min-width: 0; overflow-wrap: anywhere; }
.kid .sub { display: block; font: 400 14px/1.3 system-ui, sans-serif; margin-top: 2px; }
.kid .right { text-align: right; }
.kid .money { font-size: 24px; color: var(--green); }
.kid .dots { grid-column: 1 / -1; margin-top: 10px; }
.kid.add { display: block; text-align: center; background: none; box-shadow: none; border: 2px dashed #d8cfb8; color: var(--muted); font-weight: 800; padding: 14px; }
.streak { color: var(--amber) !important; font-weight: 700 !important; }
.dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dot { display: grid; place-items: center; height: 30px; border-radius: 10px; font: 800 12px/1 var(--round); background: #f3efe3; color: #a39c88; }
.dot.full { background: var(--leaf); color: #fff; } .dot.part { background: var(--gold); color: #4a3200; } .dot.miss { background: var(--coral-bg); color: #b93a1c; }
.dot.now { box-shadow: 0 0 0 2px var(--green); } .dot.due { background: #fff; color: var(--green); } .dot.none { background: none; }

/* a kid's money, front and center */
.balance { text-align: center; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #2a9a58 0%, #1a7a43 45%, #14532d 100%); padding: 22px 18px 18px; }
.balance .who { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 2px; }
.balance .who .avatar { width: 36px; height: 36px; font-size: 17px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.balance .money { font-size: 52px; line-height: 1.1; display: block; letter-spacing: -.02em; }
.balance .money.neg { color: #fecaca !important; }
.balance .label { display: block; opacity: .9; font-size: 15px; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.actions button { padding: 13px 8px; font-weight: 800; border-radius: 999px; }
.actions .in { background: #fff; color: var(--green); }
.actions .out { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }

/* a row of choices */
.seg { display: flex; gap: 4px; padding: 5px; margin-bottom: 14px; background: #f1ebdb; border-radius: 999px; }
.seg button { flex: 1; padding: 9px 6px; border-radius: 999px; background: none; color: var(--muted); font-weight: 800; font-size: 15px; white-space: nowrap; }
.seg button.on { background: #fff; color: var(--green); box-shadow: 0 1px 3px rgba(22, 36, 28, .18); }
.seg .count { margin-left: 5px; }

/* history and requests */
.entry { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.entry:first-of-type { border-top: 0; }
.entry .what { font-weight: 700; overflow-wrap: anywhere; }
.entry .amt { text-align: right; } .entry .amt.in { color: var(--green-2); }
.entry .meta { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.entry.undone .what, .entry.undone .amt { text-decoration: line-through; color: var(--muted); }
.entry.new { background: var(--mint-2); margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
.needs, .requests, .settle { box-shadow: 0 0 0 2px var(--gold), var(--shadow); }
.request { padding: 12px 0; border-top: 1px solid var(--line); }
.request:first-of-type { border-top: 0; }
.request .what { font-weight: 700; overflow-wrap: anywhere; }
.decide { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 8px; align-items: end; margin-top: 10px; }
.decide label { margin: 0; } .decide button { padding: 13px 8px; }
.settle .decide { grid-template-columns: 1fr 1fr; margin-top: 12px; }
.status.approved { color: var(--green-2); } .status.declined { color: var(--red); }
.whatif.neg { color: var(--red) !important; } .whatif .also { display: block; margin-top: 2px; color: var(--amber); }

/* goals */
.goals h2 { font-size: 19px; }
.goal { padding: 14px 0; border-top: 1px solid var(--line); }
.goal:first-of-type { border-top: 0; }
.goal .what { font-weight: 800; font-size: 1.1em; overflow-wrap: anywhere; }
.bar { display: flex; height: 14px; border-radius: 999px; background: #f1ebdb; overflow: hidden; margin: 8px 0; }
.bar .saved { background: var(--leaf); } .bar .match { background: var(--gold); }
.matchtxt { color: var(--amber); } p.matchtxt { font-size: 15px; font-weight: 700; margin-top: 4px; }
.nums { margin-bottom: 2px; }
.tools { margin-top: 12px; padding: 14px; background: var(--cream); border-radius: 16px; }
form.inline { margin-top: 12px; } form.inline button { width: 100%; }
.tools form.inline:first-child { margin-top: 0; }
.tools form.inline + form.inline { border-top: 1px solid var(--line); padding-top: 12px; }

/* chores: one row per job, with a round check */
.day h4 { margin: 16px 0 2px; font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.day:first-child h4 { margin-top: 0; }
.slot, .claim, .person { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.day .slot:first-of-type, .needs h3 + .slot, .bounty p + .claim, .paid h3 + .claim, .famcard .head + .person { border-top: 0; }
.claim { grid-template-columns: 1fr auto auto; }
.body { display: block; min-width: 0; }
.body .what { display: block; font-weight: 700; overflow-wrap: anywhere; }
.body .state { display: block; font-size: 14px; color: var(--muted); }
.tick { width: 38px; height: 38px; padding: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2.5px #cfd8cf; color: #fff; font-weight: 800; font-size: 19px; line-height: 1; display: grid; place-items: center; }
.tick:disabled { opacity: 1; }
.slot.approved .tick { background: var(--leaf); box-shadow: none; }
.slot.pending .tick, .tick.wait { background: var(--sand); box-shadow: inset 0 0 0 2.5px var(--gold); color: #6b4a06; }
.slot.rejected .tick, .slot.missed .tick { box-shadow: inset 0 0 0 2.5px #f3b6a5; }
.slot.approved .what { color: var(--muted); text-decoration: line-through; text-decoration-color: #b9c3bb; }
.slot.approved .state { color: var(--green-2); font-weight: 600; }
.slot.rejected .state, .slot.missed .state { color: #b93a1c; font-weight: 600; }
.slot .btns { display: flex; gap: 6px; }
.slot .btns button, .claim button { padding: 9px 14px; font-size: 15px; border-radius: 999px; }
.pay { font: 800 17px var(--round); color: var(--green-2); font-variant-numeric: tabular-nums; }
.bounty { background: linear-gradient(180deg, #fff6dc, #fff 70%); }
img.proof { display: block; max-width: 100%; border-radius: 14px; margin-top: 8px; }
.ring { width: 56px; height: 56px; flex: none; }
.ring circle { fill: none; stroke-width: 5; }
.ring .track { stroke: #f1ebdb; } .ring .fill { stroke: var(--leaf); stroke-linecap: round; transition: stroke-dashoffset .4s; }
.head .ring { width: 40px; height: 40px; }
.today { display: flex; align-items: center; gap: 14px; background: var(--mint-2); }
.today h2 { font-size: 22px; color: var(--green); }
.empty { text-align: center; padding: 28px 20px; }
.empty .big { font-size: 44px; line-height: 1; margin-bottom: 8px; }
.empty .primary { margin-top: 14px; }

/* the week as a grid */
.grid-wrap { margin: 12px -3px 4px; }
.weekgrid { border-collapse: separate; border-spacing: 3px; width: 100%; table-layout: fixed; }
.weekgrid thead th:first-child { width: 34%; }
.weekgrid th { font: 800 12px var(--round); color: var(--muted); padding: 2px; text-align: center; }
.weekgrid th.now { color: var(--green); }
.weekgrid tbody th { text-align: left; font: 700 15px/1.25 var(--round); color: var(--ink); padding-right: 4px; overflow-wrap: anywhere; }
.weekgrid td { padding: 0; text-align: center; }
.weekgrid .c { display: grid; place-items: center; width: 100%; height: 34px; padding: 0; border-radius: 10px; background: #f3efe3; color: #a39c88; font: 800 15px/1 var(--round); }
.weekgrid td.approved .c { background: var(--leaf); color: #fff; }
.weekgrid td.pending .c { background: var(--gold); color: #4a3200; }
.weekgrid td.missed .c, .weekgrid td.rejected .c { background: var(--coral-bg); color: #b93a1c; }
.weekgrid td.todo .c { background: #fff; box-shadow: inset 0 0 0 2px var(--green); }
.weekgrid td.upcoming .c { background: #f8f5ec; }
.weekgrid td.tally { text-align: left; font-size: 14px; color: var(--muted); padding: 6px 2px; }
.key { font-size: 13px; margin: 6px 0 4px; }

/* the Chores tab */
.kind .head h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.kind .em { font-size: 22px; }
.kind > .muted { margin: 4px 0 6px; }
.addbtn { background: var(--mint); color: var(--green); font-weight: 800; border-radius: 999px; padding: 8px 14px; white-space: nowrap; }
.kind.bounty .addbtn { background: var(--sand); color: #6b4a06; }
.chore { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border-radius: 0; padding: 12px 0; border-top: 1px solid var(--line); font-weight: 400; }
.chore.off { opacity: .55; }
.ideas { padding-top: 6px; } .ideas .quick { margin: 8px 0 0; }

/* the panel that slides up */
.sheet-wrap { position: fixed; inset: 0; z-index: 8; background: rgba(22, 36, 28, .45); display: flex; align-items: flex-end; justify-content: center; animation: fade .15s; }
.sheet { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: var(--cream); border-radius: 26px 26px 0 0; padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); animation: up .2s ease-out; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sheet-head h2 { font-size: 24px; color: var(--green); overflow-wrap: anywhere; }
.sheet .x { width: 38px; height: 38px; padding: 0 0 2px; border-radius: 50%; font-size: 24px; line-height: 1; background: #fff; box-shadow: inset 0 0 0 1px var(--line); flex: none; }
@keyframes up { from { transform: translateY(24px); opacity: .6; } }
@keyframes fade { from { opacity: 0; } }
.choreform .lead { margin-bottom: 14px; }
.flabel { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip { padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 700; }
.chip.on { background: var(--green); color: #fff; box-shadow: none; }
.daybtns { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.daybtn { padding: 12px 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 800; color: var(--muted); }
.daybtn.on { background: var(--green); color: #fff; box-shadow: none; }
.presets { display: flex; gap: 16px; margin: 8px 0 16px; }
details.more { margin-bottom: 16px; background: #fff; border-radius: 16px; padding: 0 14px; box-shadow: inset 0 0 0 1.5px var(--line); }
details.more summary, .fold summary { cursor: pointer; list-style: none; }
details.more summary::-webkit-details-marker, .fold summary::-webkit-details-marker { display: none; }
details.more summary { padding: 13px 0; font-weight: 700; color: var(--green-2); }
details.more summary::after { content: " ›"; }
details.more[open] summary::after { content: " ‹"; }
details.more[open] { padding-bottom: 6px; }
details.more .chips { margin-bottom: 14px; }

/* Family tab */
.code-box.left { text-align: left; }
.code-box.left label { color: var(--green); }
.code-box .inrow { display: grid; margin-top: 6px; }
.code-box .inrow input { font: 13px ui-monospace, Menlo, monospace; }
.code-box details.more { margin: 10px 0 0; }
.ai .person { grid-template-columns: auto 1fr; }
.ai .person:first-of-type { margin-top: 4px; }
.fold { padding: 0 18px; }
.fold summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 0; }
.fold[open] { padding-bottom: 18px; }
.fold[open] summary .chev { transform: rotate(90deg); }
.person { grid-template-columns: auto 1fr; }
.foot { text-align: center; margin-top: 18px; }

/* iPad and wider (the kids use iPads): more room, bigger type and targets. */
@media (min-width: 700px) {
  body { font-size: 19px; }
  main { max-width: 760px; padding: 24px 24px calc(40px + env(safe-area-inset-bottom)); }
  #login, .narrow { max-width: 600px; margin-left: auto; margin-right: auto; }
  header { padding-left: 24px; padding-right: 24px; }
  header h1 { font-size: 22px; }
  .kids { grid-template-columns: 1fr 1fr; gap: 16px; }
  .kid { padding: 20px; }
  .balance { padding: 30px 24px 24px; }
  .balance .money { font-size: 68px; }
  .tick { width: 44px; height: 44px; }
  .sheet-wrap { align-items: center; padding: 24px; }
  .sheet { border-radius: 26px; }
  #tabs button { min-width: 104px; font-size: 13px; }
}

form.inline .chips .chip { width: auto; }
.code-box.left p b { font-size: 16px; }

/* connecting an AI assistant */
.note { background: var(--mint); color: var(--green); padding: 10px 14px; border-radius: 14px; margin-bottom: 12px; font-size: 15px; font-weight: 600; }
.connect { text-align: center; padding: 26px 20px; }
.connect .big { font-size: 34px; line-height: 1; width: 64px; height: 64px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: #3b82f6; color: #fff; }
.connect h2 { color: var(--green); margin-bottom: 8px; }
.connect .chips { justify-content: center; }
.ai details.more { margin: 14px 0 0; }
.ai .code-box { margin-bottom: 10px; }

/* days off */
.dot.off { background: var(--sky); color: #3b5b8c; }
.slot.excused .tick { background: var(--sky); box-shadow: none; color: #3b5b8c; }
.slot.excused .what { color: var(--muted); }
.weekgrid td.excused .c { background: var(--sky); color: #3b5b8c; }
.weekgrid th.offday { color: #3b5b8c; }
/* removing things */
.danger h3 { color: var(--red); }
button.danger { color: var(--red); box-shadow: inset 0 0 0 1.5px #f3b6a5; }
/* a new version is ready */
#update { position: fixed; z-index: 9; left: 50%; transform: translateX(-50%); top: calc(64px + env(safe-area-inset-top)); background: var(--green); color: #fff; font-weight: 800; padding: 12px 18px; border-radius: 999px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }

/* a shared tablet: who's this? */
.avatar.lg { width: 72px; height: 72px; font-size: 32px; }
.whoami { text-align: center; }
.faces { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 14px; }
.face { display: grid; justify-items: center; gap: 8px; background: none; padding: 10px 14px; border-radius: 20px; font-weight: 800; font-size: 18px; }
.face:active { background: var(--mint-2); }
.narrow > .link { display: block; margin: 0 auto 6px; }

/* stars and rewards */
.pay.gold, .starcount { color: #a16207 !important; }
.starcount { font-weight: 800 !important; }
.kind.rewards .addbtn { background: var(--sand); color: #6b4a06; }
.starhero { background: radial-gradient(120% 140% at 0% 0%, #ffd66b 0%, #f5b72e 55%, #e09a10 100%); color: #3d2a00; }
.starhero .label { opacity: 1; }
.card.stars .head h3 { color: #a16207; margin: 0; }
.card.stars > .muted { margin: 6px 0; }
#tabs.four button { min-width: 72px; padding-left: 10px; padding-right: 10px; }