:root {
  --bg: #f6f5f1;
  --card: #ffffff;
  --ink: #1a1d2c;
  --ink-soft: #5a6079;
  --line: #e7e3d8;
  --accent: #1f2a4d;
  --warn: #c95a2c;
  --ok: #2f8a55;
  --kid-bg: #fff8e7;
  --shadow: 0 1px 2px rgba(20,20,40,0.04), 0 4px 16px rgba(20,20,40,0.05);
  --radius: 14px;
  --tap: 44px;

  /* family colors */
  --c-anita: #d96b7a;   /* coral */
  --c-raj:   #2c6dd1;   /* blue */
  --c-maya:  #7a4ec2;   /* purple */
  --c-arjun: #e08a2a;   /* orange */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  padding-bottom: 90px;
}

/* topbar */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; }
.logo { font-size: 26px; }
.brand-title { font-weight: 700; font-size: 17px; line-height: 1; }
.brand-sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; text-transform: capitalize; }
.persona-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line);
  padding: 6px 10px 6px 6px; border-radius: 999px;
  font: inherit; color: var(--ink); cursor: pointer;
  min-height: var(--tap);
}
.persona-btn .caret { font-size: 11px; color: var(--ink-soft); }

/* avatars */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 14px;
  background: var(--ink);
  flex-shrink: 0;
}
.avatar-sm { width: 28px; height: 28px; font-size: 12px; }
.avatar-lg { width: 56px; height: 56px; font-size: 22px; }
.avatar.anita { background: var(--c-anita); }
.avatar.raj   { background: var(--c-raj); }
.avatar.maya  { background: var(--c-maya); }
.avatar.arjun { background: var(--c-arjun); }

/* tabs */
.tabs {
  display: flex; gap: 4px; padding: 8px 12px;
  background: var(--bg); border-bottom: 1px solid var(--line);
  position: sticky; top: 65px; z-index: 4;
}
.tab {
  flex: 1; min-height: var(--tap); border: 0; background: transparent;
  font: inherit; font-weight: 600; color: var(--ink-soft);
  border-radius: 10px; cursor: pointer;
}
.tab.active { background: var(--accent); color: white; }

/* main */
main { padding: 14px 14px 24px; max-width: 720px; margin: 0 auto; }

.section-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); margin: 18px 4px 8px;
}

/* card */
.card {
  background: var(--card); border-radius: var(--radius);
  padding: 14px; margin-bottom: 10px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--line);
}
.card.alert { border-left-color: var(--warn); background: #fff6ee; }
.card.win { border-left-color: var(--ok); }
.card.anita { border-left-color: var(--c-anita); }
.card.raj   { border-left-color: var(--c-raj); }
.card.maya  { border-left-color: var(--c-maya); }
.card.arjun { border-left-color: var(--c-arjun); }
.card.family-time { border-left-color: var(--accent); background: #f1f4ff; }

.card .row { display: flex; gap: 10px; align-items: center; }
.card .meta { color: var(--ink-soft); font-size: 13px; }
.card .title-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card .when { font-weight: 700; color: var(--ink); }
.card .what { font-weight: 600; }

.bring {
  display: inline-block; background: #fff5d8; color: #6c4a00;
  border-radius: 6px; padding: 2px 8px; font-size: 12px; margin-top: 6px;
  margin-right: 4px;
}

.who-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg); padding: 2px 8px 2px 4px; border-radius: 999px;
  font-size: 12px; color: var(--ink); border: 1px solid var(--line);
}
.who-pill .avatar { width: 18px; height: 18px; font-size: 9px; }

/* dinner card */
.dinner {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border-radius: var(--radius);
  padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow);
  border-left: 4px solid var(--accent);
}
.dinner .emoji { font-size: 32px; }
.dinner .title { font-weight: 700; }
.dinner .sub { color: var(--ink-soft); font-size: 13px; }

/* week grid */
.week-grid {
  display: grid; grid-template-columns: 64px repeat(4, 1fr);
  gap: 6px; margin-top: 8px;
}
.week-grid .col-head, .week-grid .row-head {
  font-size: 11px; color: var(--ink-soft); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 4px 2px; text-align: center;
}
.week-grid .row-head { text-align: left; padding-left: 4px; }
.week-grid .row-head .small { display: block; font-size: 10px; font-weight: 500; opacity: .8; text-transform: none; }
.week-grid .cell {
  background: var(--card); border-radius: 8px; padding: 6px 6px;
  font-size: 11px; min-height: 56px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 3px;
}
.week-grid .cell .chip {
  border-radius: 5px; padding: 2px 5px;
  background: var(--bg); color: var(--ink);
  border-left: 3px solid var(--line);
  font-size: 10.5px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis;
}
.week-grid .cell .chip.anita { border-left-color: var(--c-anita); }
.week-grid .cell .chip.raj   { border-left-color: var(--c-raj); }
.week-grid .cell .chip.maya  { border-left-color: var(--c-maya); }
.week-grid .cell .chip.arjun { border-left-color: var(--c-arjun); }
.week-grid .cell .chip.family { border-left-color: var(--accent); background: #eef2ff; }
.week-grid .cell.today { outline: 2px solid var(--accent); outline-offset: -1px; }

/* chores */
.chore-kid {
  background: var(--card); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); margin-bottom: 14px;
}
.chore-kid header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.chore-kid .name { font-weight: 700; font-size: 18px; }
.chore-kid .age { color: var(--ink-soft); font-size: 13px; }
.chore-kid .pts {
  margin-left: auto;
  background: var(--bg); padding: 8px 12px; border-radius: 999px;
  font-weight: 700; font-size: 14px;
}
.chore-kid .pts .num { font-size: 22px; color: var(--ok); }
.chore-list { display: flex; flex-direction: column; gap: 6px; }
.chore-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: white;
  cursor: pointer; min-height: var(--tap);
  transition: background .15s;
}
.chore-item:active { transform: scale(.99); }
.chore-item.done { background: #f0f7f3; opacity: .75; }
.chore-item.done .label { text-decoration: line-through; color: var(--ink-soft); }
.chore-item .check {
  width: 26px; height: 26px; border-radius: 8px;
  border: 2px solid var(--line); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.chore-item.done .check { background: var(--ok); border-color: var(--ok); color: white; }
.chore-item .label { flex: 1; }
.chore-item .points {
  font-weight: 700; color: var(--ok); font-size: 13px;
  background: #e8f4ee; padding: 2px 8px; border-radius: 999px;
}
.allowance-hint {
  margin-top: 10px; font-size: 12px; color: var(--ink-soft);
}

/* persona sheet */
dialog.sheet {
  border: none; padding: 0; background: transparent;
  width: 100%; max-width: 520px;
  margin: auto auto 0 auto;
}
dialog.sheet::backdrop { background: rgba(15,18,30,.45); }
dialog.sheet > * { background: var(--card); }
dialog.sheet > *:first-child { border-top-left-radius: 18px; border-top-right-radius: 18px; }
.sheet-handle {
  height: 5px; width: 40px; background: #d6d3c8; border-radius: 3px;
  margin: 8px auto !important;
  background: var(--bg) !important;
}
dialog.sheet h3 { margin: 6px 16px 12px; }
.persona-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px 8px; }
.persona-list button {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; background: var(--bg); border: 0;
  border-radius: 10px; font: inherit; cursor: pointer;
  min-height: 56px;
}
.persona-list button.selected { outline: 2px solid var(--accent); }
.persona-list button .meta { display: flex; flex-direction: column; align-items: flex-start; }
.persona-list button .name { font-weight: 700; }
.persona-list button .sub { font-size: 11px; color: var(--ink-soft); }
.hint { color: var(--ink-soft); font-size: 12px; padding: 0 16px 8px; }
.sheet-close {
  width: 100%; min-height: var(--tap); border: 0; border-top: 1px solid var(--line);
  background: white; font: inherit; font-weight: 700; cursor: pointer;
  padding: 12px;
}

/* detail body inside sheet */
#detail-body { padding: 6px 16px 12px; }
#detail-body h4 { margin: 10px 0 6px; }
#detail-body .person-week-day { padding: 8px 0; border-top: 1px solid var(--line); }
#detail-body .person-week-day:first-of-type { border-top: 0; }
#detail-body .person-week-day .d { font-weight: 700; }

/* footer */
.foot {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg); border-top: 1px solid var(--line);
  padding: 8px 16px env(safe-area-inset-bottom); font-size: 12px;
  color: var(--ink-soft); display: flex; justify-content: space-between; align-items: center;
}
.link {
  background: none; border: 0; color: var(--accent); font: inherit;
  text-decoration: underline; cursor: pointer; padding: 6px;
}

/* kid mode */
body.kid-mode { --bg: var(--kid-bg); }
body.kid-mode .card { font-size: 17px; padding: 16px; }
body.kid-mode .chore-item { padding: 14px 14px; min-height: 54px; }
body.kid-mode .chore-item .check { width: 32px; height: 32px; }
body.kid-mode .chore-item .label { font-size: 17px; font-weight: 600; }
body.kid-mode .tab { font-size: 17px; }
body.kid-mode .brand-sub::after { content: " · kid mode"; color: var(--c-arjun); font-weight: 700; }

/* desktop niceties */
@media (min-width: 720px) {
  .week-grid { grid-template-columns: 80px repeat(7, 1fr); }
  .week-grid .cell.weekend-only { display: flex; }
}

/* on mobile we hide weekend columns header in compact view via JS toggle */
@media (max-width: 719px) {
  .week-grid.show-weekend .cell.weekend-only,
  .week-grid.show-weekend .col-head.weekend-only { display: flex; }
  .week-grid:not(.show-weekend) .cell.weekend-only,
  .week-grid:not(.show-weekend) .col-head.weekend-only { display: none; }
}
.weekend-toggle {
  display: inline-flex; gap: 6px; padding: 6px 10px;
  border-radius: 999px; background: var(--card);
  border: 1px solid var(--line); font-size: 12px;
  cursor: pointer; margin-left: 6px;
}
@media (min-width: 720px) { .weekend-toggle { display: none; } }

/* =========================================================
   polish pass — append below existing rules
   ========================================================= */

/* ---- topbar: white-glass shelf, tile logo, refined persona pill ---- */
.topbar {
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: rgba(31,42,77,0.08);
  padding: 10px 14px;
}
.brand { gap: 12px; }
.brand .logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: var(--accent);
  border-radius: 10px;
  font-size: 22px; line-height: 1;
  box-shadow: 0 1px 2px rgba(31,42,77,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}
.brand-title { font-size: 18px; letter-spacing: -0.01em; }
.brand-sub   { font-size: 11.5px; letter-spacing: .01em; }
.persona-btn {
  background: rgba(255,255,255,0.94);
  border-color: rgba(31,42,77,0.10);
  box-shadow: 0 1px 2px rgba(20,20,40,0.05);
  font-weight: 600; font-size: 14px;
  padding: 5px 10px 5px 5px;
}
.persona-btn .caret { opacity: .65; }

/* ---- tabs: pill row, hover affordance, accent press on active ---- */
.tabs {
  background: rgba(246,245,241,0.92);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: rgba(31,42,77,0.06);
  gap: 6px; padding: 8px 14px 10px;
}
.tab { font-size: 14.5px; letter-spacing: -.005em; transition: background .15s, color .15s; }
.tab:not(.active):hover,
.tab:not(.active):focus-visible { background: rgba(31,42,77,0.05); color: var(--ink); }
.tab.active { box-shadow: 0 2px 8px rgba(31,42,77,0.18); }

/* ---- main + section title rhythm ---- */
main { padding: 16px 14px 28px; }
.section-title {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  margin: 22px 6px 8px; color: var(--ink-soft);
}
.section-title:first-child { margin-top: 4px; }

/* ---- cards: clearer hierarchy (time becomes label, what becomes lede) ---- */
.card {
  padding: 14px 14px 12px; margin-bottom: 8px;
  border-left-width: 3px;
  box-shadow: 0 1px 2px rgba(20,20,40,0.04), 0 4px 14px rgba(20,20,40,0.045);
}
.card .title-row { gap: 10px; align-items: center; }
.card .when {
  font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: 12.5px; color: var(--ink-soft);
  letter-spacing: .02em;
}
.card .what { font-weight: 600; font-size: 15px; color: var(--ink); }
.card .meta { font-size: 12.5px; margin-top: 4px; line-height: 1.5; }
.card.win   { background: #f3f9f5; }
.card.alert { background: #fff5ec; }

/* bring chip — warmer, tag-like */
.bring {
  background: #fff1d2; color: #6a4604;
  border: 1px solid #f1dba6; font-weight: 600;
}

/* who-pill — clean white on warm bg */
.who-pill { background: #fff; border-color: rgba(31,42,77,0.10); padding: 2px 10px 2px 4px; }
.who-pill .avatar { width: 20px; height: 20px; font-size: 10px; }

/* ---- dinner card: dimensional, hero-y ---- */
.dinner {
  background: linear-gradient(180deg, #fbfbff 0%, #f1f4ff 100%);
  border-left-width: 3px;
  box-shadow: 0 1px 2px rgba(31,42,77,0.05), 0 8px 22px rgba(31,42,77,0.07);
}
.dinner .emoji {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; font-size: 26px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(31,42,77,0.10);
  flex-shrink: 0;
}
.dinner .title { font-size: 15.5px; letter-spacing: -.005em; }
.dinner .sub { margin-top: 2px; font-size: 12.5px; }

/* ---- week grid: legible chips, family tint, today rail ---- */
.week-grid { gap: 5px; }
.week-grid .col-head { font-size: 10.5px; }
.week-grid .row-head .small { opacity: .7; }
.week-grid .cell {
  padding: 6px 5px; gap: 4px; border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20,20,40,0.04);
}
.week-grid .cell .chip {
  background: #f7f6f1;
  border-left-width: 3px;
  padding: 3px 6px; border-radius: 4px;
  font-size: 11px; line-height: 1.3;
}
.week-grid .cell .chip b { font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 3px; }
.week-grid .cell .chip.anita { background: rgba(217,107,122,0.09); }
.week-grid .cell .chip.raj   { background: rgba(44,109,209,0.09); }
.week-grid .cell .chip.maya  { background: rgba(122,78,194,0.09); }
.week-grid .cell .chip.arjun { background: rgba(224,138,42,0.11); }
.week-grid .cell .chip.family { background: #eef2ff; }
.week-grid .cell.today { background: #fafbff; outline-width: 2px; }
.week-grid .col-head.today { font-weight: 800; }
.week-grid .col-head.today::after {
  content: ''; display: block;
  width: 14px; height: 2px; background: var(--accent);
  border-radius: 2px; margin: 3px auto 0;
}

/* ---- chores: lifted card, nicer check, points pill ---- */
.chore-kid {
  padding: 16px; margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(20,20,40,0.05), 0 8px 22px rgba(20,20,40,0.05);
}
.chore-kid header { gap: 14px; }
.chore-kid .name { font-size: 19px; letter-spacing: -.01em; }
.chore-kid .age  { font-size: 12.5px; }
.chore-kid .pts {
  background: linear-gradient(180deg, #f3faf6, #e8f4ee);
  border: 1px solid #cfe6d9;
  padding: 6px 12px;
}
.chore-kid .pts .num { font-size: 20px; font-variant-numeric: tabular-nums; }

.chore-item {
  padding: 12px 12px;
  border-color: rgba(20,20,40,0.08);
  transition: background .15s, transform .08s;
}
.chore-item .check { border-color: rgba(20,20,40,0.20); border-radius: 9px; }
.chore-item.done { background: #f1f8f4; }
.chore-item .points {
  background: #ecf6f0; color: #1d6e3f;
  border: 1px solid #cfe6d9;
}

/* ---- persona sheet: tinted selected, lifted hover ---- */
dialog.sheet h3 { font-size: 18px; letter-spacing: -.01em; }
.persona-list button { background: #f6f5f1; transition: background .15s, box-shadow .15s; }
.persona-list button:hover { background: #efeee8; }
.persona-list button.selected {
  background: #fff;
  outline: 2px solid var(--accent);
  box-shadow: 0 4px 14px rgba(31,42,77,0.12);
}
.hint { line-height: 1.5; }

/* ---- footer ---- */
.foot {
  background: rgba(246,245,241,0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top-color: rgba(31,42,77,0.08);
}
.link { font-weight: 600; }

/* ---- kid mode: warmer, orange-accented ---- */
body.kid-mode {
  background: linear-gradient(180deg, #fff8e7 0%, #fff1cf 100%) fixed;
}
body.kid-mode .topbar  { background: rgba(255,248,231,0.92); border-bottom-color: rgba(224,138,42,0.18); }
body.kid-mode .tabs    { background: rgba(255,248,231,0.92); border-bottom-color: rgba(224,138,42,0.14); }
body.kid-mode .tab.active { background: var(--c-arjun); box-shadow: 0 2px 10px rgba(224,138,42,0.32); }
body.kid-mode .brand .logo { background: var(--c-arjun); }
body.kid-mode .brand-sub::after { color: var(--c-arjun); }
body.kid-mode .chore-kid .pts {
  background: linear-gradient(180deg, #fffaeb, #ffefc4);
  border-color: #f1dba6;
}
body.kid-mode .chore-kid .pts .num { color: var(--c-arjun); }
body.kid-mode .chore-item.done .check { background: var(--c-arjun); border-color: var(--c-arjun); }
body.kid-mode .chore-item.done { background: #fff7e3; }