/* Silver Tech — warm, calm, senior-friendly. Large type, mobile-first. */
:root {
  --bg: #faf7f2;
  --card: #ffffff;
  --ink: #2d2a26;
  --muted: #6f6a61;
  --line: #e5ddd2;
  --accent: #2e6f5e;
  --accent-ink: #ffffff;
  --accent-soft: #e3efe9;
  --warn: #9a3412;
  --warn-soft: #fbe9e0;
  --gold: #b98a2f;
  --radius: 14px;
}
* { box-sizing: border-box; }
html { font-size: 18px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.55;
}
.wrap { max-width: 880px; margin: 0 auto; padding: 1rem; }
.big { font-size: 1.15rem; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
h1 { font-size: 2rem; line-height: 1.2; margin: 0.4em 0; }
h2 { font-size: 1.45rem; margin: 1.1em 0 0.45em; }
h3 { font-size: 1.15rem; margin: 1em 0 0.35em; }
a { color: var(--accent); }

/* header */
.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.brand { font-size: 1.4rem; font-weight: bold; color: var(--accent); text-decoration: none; }
.brand small { display: block; font-size: 0.72rem; color: var(--muted); font-weight: normal; }
.topbar .spacer { flex: 1; }
.circle-picker { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.circle-picker select { font-size: 1rem; padding: 0.45rem; max-width: 260px; }

/* tabs */
.tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 1rem 0; }
.tabs button {
  font: inherit; font-size: 1rem; padding: 0.55rem 0.95rem;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; cursor: pointer;
}
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* cards & forms */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.1rem; margin: 0 0 1rem;
}
.card h2:first-child, .card h3:first-child { margin-top: 0; }
label { display: block; font-weight: bold; margin: 0.7rem 0 0.25rem; }
label .hint { font-weight: normal; color: var(--muted); font-size: 0.85rem; }
input, select, textarea {
  font: inherit; font-size: 1rem; width: 100%;
  padding: 0.55rem 0.65rem; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; color: var(--ink);
}
textarea { min-height: 5.2rem; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: auto; }
button.btn, a.btn {
  font: inherit; display: inline-block; cursor: pointer; text-decoration: none;
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
  padding: 0.6rem 1.2rem; border-radius: 999px; font-size: 1rem;
}
button.btn.secondary, a.btn.secondary { background: var(--card); color: var(--accent); }
button.btn.danger { background: var(--card); color: var(--warn); border-color: var(--warn); }
button.btn.small { padding: 0.3rem 0.8rem; font-size: 0.9rem; }
button:disabled { opacity: 0.55; cursor: default; }
.row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } }

/* lists */
.item { border-top: 1px solid var(--line); padding: 0.7rem 0; }
.item:first-of-type { border-top: none; }
.item .title { font-weight: bold; }
.tag {
  display: inline-block; font-size: 0.78rem; padding: 0.05rem 0.55rem;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  vertical-align: middle;
}
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.gold { background: #f6ecd4; color: var(--gold); }
.done { opacity: 0.62; }
.done .title { text-decoration: line-through; }

/* dose checklist */
.dose {
  display: flex; gap: 0.8rem; align-items: flex-start;
  border-top: 1px solid var(--line); padding: 0.75rem 0;
}
.dose:first-of-type { border-top: none; }
.dose input[type="checkbox"] { width: 1.6rem; height: 1.6rem; margin-top: 0.25rem; accent-color: var(--accent); }
.dose .time { font-weight: bold; min-width: 4.2rem; }

/* messages */
.notice {
  border: 1px solid var(--line); background: var(--accent-soft);
  border-radius: var(--radius); padding: 0.8rem 1rem; margin: 0 0 1rem;
}
.error {
  border: 1px solid var(--warn); background: var(--warn-soft); color: var(--warn);
  border-radius: var(--radius); padding: 0.8rem 1rem; margin: 0 0 1rem;
}

/* landing */
.hero { padding: 1.6rem 0 0.4rem; }
.hero p.lede { font-size: 1.25rem; max-width: 34em; }
.features { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1rem 0; }
@media (min-width: 640px) { .features { grid-template-columns: 1fr 1fr; } }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.feature h3 { margin-top: 0; }
footer.site { border-top: 1px solid var(--line); margin-top: 2.5rem; }
footer.site .wrap { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.balance-pos { color: var(--accent); font-weight: bold; }
.balance-neg { color: var(--warn); font-weight: bold; }
code.invite { font-size: 1.5rem; letter-spacing: 0.25em; font-weight: bold; }