/* Same palette as the app (Sources/Theme.swift): teal hygiene, green base camp, gold epic, purple loot. */
:root {
  --bg: #F4F4F9; --card: #FFFFFF; --ink: #1F2430; --muted: #5B6475; --line: #D9DCE6;
  --accent: #C24A00; --danger: #B3261E; --good: #2E7D32;
  --hygiene: #00727F; --hygiene-fill: #E0F7FA; --base: #2E7D32; --base-fill: #E8F5E9;
  --epic: #8A4B00; --epic-fill: #FFF8E1; --epic-border: #FFB300; --loot: #6A1B9A; --loot-fill: #F3E5F5;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161D; --card: #1E222C; --ink: #EEF0F6; --muted: #A8B0C2; --line: #343A4A;
    --accent: #FF8A3D; --danger: #FF8A80; --good: #8FDC94;
    --hygiene: #7FDBE8; --hygiene-fill: #0E2A30; --base: #8FDC94; --base-fill: #122A17;
    --epic: #FFCC4D; --epic-fill: #2E2508; --loot: #E0A8F2; --loot-fill: #2A1733;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.45 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0 0 8px; line-height: 1.2; }
h2 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.center { text-align: center; }
.small { font-size: .85rem; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--card); border-bottom: 2px solid var(--line); position: sticky; top: 0; z-index: 2;
}
.brand { font-weight: 900; font-size: 1.25rem; color: var(--accent); }
.brand span { color: var(--muted); font-weight: 700; }
.account { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--muted); flex-wrap: wrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--muted); }
.dot.live { background: var(--good); }

main { max-width: 1100px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }
.card { background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 16px; min-width: 0; }
.card.epic { background: var(--epic-fill); border-color: var(--epic-border); }
.narrow { max-width: 460px; margin: 24px auto; width: 100%; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row > .grow { flex: 1 1 180px; min-width: 0; }
form .row { align-items: flex-end; }
.stack { display: grid; gap: 10px; align-content: start; }

label { display: grid; gap: 4px; font-weight: 700; font-size: .9rem; }
input, select {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--bg); min-width: 0;
}
input:focus-visible, select:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.code-input { font: 700 1.6rem/1 ui-monospace, "SF Mono", monospace; letter-spacing: .2em; text-align: center; }

.btn {
  border: 0; border-radius: 12px; padding: 10px 16px; font-weight: 800; cursor: pointer;
  background: var(--accent); color: #fff;
}
.btn.secondary { background: transparent; color: var(--accent); border: 2px solid var(--line); }
.btn.good { background: var(--good); color: #fff; }
.btn.danger { background: transparent; color: var(--danger); border: 2px solid var(--line); }
.btn.small { padding: 6px 10px; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: default; }
@media (prefers-color-scheme: dark) { .btn, .btn.good { color: #0B1A1D; } }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { border: 2px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 14px; font-weight: 800; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .tab[aria-selected="true"] { color: #0B1A1D; } }
.badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .75rem; text-align: center; }

.kid { border-width: 3px; cursor: pointer; text-align: left; width: 100%; font: inherit; }
.kid[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--accent); }
.kid .avatar { font-size: 2.4rem; line-height: 1; }
.kid .name { font-size: 1.25rem; font-weight: 900; }
.pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-weight: 900; font-size: .8rem; border: 2px solid; }
.pill.locked { color: var(--danger); border-color: var(--danger); }
.pill.unlocked { color: var(--good); border-color: var(--good); background: var(--base-fill); }
.money { font-weight: 900; font-size: 1.5rem; color: var(--loot); }
.stat { display: flex; justify-content: space-between; gap: 8px; }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.list li { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 10px 12px; background: var(--bg); border-radius: 12px; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.week div { background: var(--bg); border-radius: 10px; padding: 6px 2px; text-align: center; font-size: .85rem; }
.week div.today { outline: 2px solid var(--loot); }
.week b { display: block; font-size: .95rem; }
.checks { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.checks label { display: flex; gap: 8px; align-items: center; font-weight: 600; background: var(--bg); padding: 8px 10px; border-radius: 10px; }
.checks input { width: auto; }
.pairing { font: 900 2.6rem/1 ui-monospace, "SF Mono", monospace; letter-spacing: .15em; text-align: center; padding: 12px 0; }
.emoji-choices { display: flex; flex-wrap: wrap; gap: 4px; }
.emoji-choices button { font-size: 1.5rem; width: 44px; height: 44px; border-radius: 10px; border: 2px solid transparent; background: var(--bg); cursor: pointer; }
.emoji-choices button[aria-pressed="true"] { border-color: var(--hygiene); }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.swatch[aria-pressed="true"] { border-color: var(--ink); }
.error { color: var(--danger); font-weight: 700; }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: var(--bg);
  padding: 10px 16px; border-radius: 12px; font-weight: 700; max-width: calc(100% - 32px); z-index: 5; }

/* The printed Mission Log */
.print-only { display: none; }
.log-page { color: #000; background: #fff; padding: 24px; font-size: 11px; }
.log-page h1 { font-size: 20px; }
.log-page table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
.log-page th, .log-page td { border: 1px solid #999; padding: 3px 4px; text-align: center; }
.log-page th:first-child, .log-page td:first-child { text-align: left; width: 38%; }
.log-page thead th { background: #eee; }
.log-page .box { display: inline-block; width: 12px; height: 12px; border: 1.2px solid #000; border-radius: 2px; }
@media print {
  body { background: #fff; }
  .topbar, main, .toast { display: none !important; }
  .print-only { display: block; }
  .log-page { page-break-after: always; padding: 0; }
}
@media (max-width: 520px) {
  main { padding: 12px; }
  .money { font-size: 1.25rem; }
  .week { gap: 3px; }
  .week div { font-size: .7rem; padding: 6px 0; }
  .week b { font-size: .72rem; letter-spacing: -.02em; }
}