@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}

/* Warm Orbit palette */
:root {
  color-scheme: light dark;
  --bg: light-dark(#faf4ec, #1b1c25);
  --fg: light-dark(#2b2b33, #efeae2);
  --muted: light-dark(#93887a, #8b8b98);
  --card: light-dark(#ffffff, #242633);
  --line: light-dark(#eadfd2, #323446);
  --accent: #2ec4b6;                       /* teal: done, given, calm */
  --coral: #ff6f61;                        /* primary action warmth */
  --sun: #ffc145;
  --lilac: light-dark(#8e7cc3, #b8a9e8);   /* cycle 🌸 */
  --danger: light-dark(#c0392b, #e07b6f);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Outfit', system-ui, -apple-system, "Segoe UI", sans-serif;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='none'%3E%3Ccircle cx='52' cy='64' r='20' fill='%23ff6f61' fill-opacity='.07'/%3E%3Ccircle cx='330' cy='40' r='13' fill='%232ec4b6' fill-opacity='.08'/%3E%3Ccircle cx='210' cy='150' r='26' fill='%23ffc145' fill-opacity='.07'/%3E%3Ccircle cx='386' cy='200' r='17' fill='%23b8a9e8' fill-opacity='.08'/%3E%3Ccircle cx='90' cy='260' r='11' fill='%232ec4b6' fill-opacity='.07'/%3E%3Ccircle cx='300' cy='330' r='22' fill='%23ff6f61' fill-opacity='.06'/%3E%3Ccircle cx='150' cy='390' r='14' fill='%23ffc145' fill-opacity='.08'/%3E%3Ccircle cx='30' cy='170' r='8' stroke='%23ff6f61' stroke-opacity='.1' stroke-width='3'/%3E%3Ccircle cx='260' cy='250' r='7' stroke='%232ec4b6' stroke-opacity='.1' stroke-width='3'/%3E%3Ccircle cx='400' cy='390' r='9' stroke='%23ffc145' stroke-opacity='.1' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
  color: var(--fg);
  display: flex; flex-direction: column; min-height: 100dvh;
}

/* ---- top bar ---- */
.topbar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .6rem .9rem calc(.6rem); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg); z-index: 5;
}
.topbar h1 { font-size: 1.05rem; margin: 0; letter-spacing: .05em; }
.topbar-right { margin-left: auto; display: flex; gap: .4rem; align-items: center; }

.tabs { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; }
.tabs button {
  border: 1px solid var(--line); background: var(--card); color: var(--fg);
  border-radius: 999px; padding: .35rem .8rem; font-size: .9rem; white-space: nowrap;
}
.tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }

button { cursor: pointer; font: inherit; }
.ghost {
  background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: .5rem; padding: .3rem .6rem; font-size: .85rem; text-decoration: none;
}
.ghost:hover { color: var(--fg); }
.ghost.danger { color: var(--danger); }
.signout { display: inline-block; }

/* ---- items ---- */
#app { flex: 1; padding: .5rem .9rem 6.5rem; max-width: 640px; width: 100%; margin: 0 auto; }
#items { list-style: none; margin: 0; padding: 0; }
#items li {
  display: flex; align-items: center; gap: .7rem;
  background: var(--card); border: 1px solid var(--line); border-radius: .7rem;
  padding: .65rem .8rem; margin: .45rem 0;
}
#items li.done { opacity: .45; }
#items li.done .txt { text-decoration: line-through; }
.tick {
  width: 1.45rem; height: 1.45rem; border-radius: 50%; flex: none;
  border: 2px solid var(--muted); background: none; color: transparent;
  display: grid; place-items: center; font-size: .9rem; line-height: 1;
}
li.done .tick { background: var(--accent); border-color: var(--accent); color: #fff; }
.txt { flex: 1; overflow-wrap: anywhere; }
.who { font-size: .7rem; color: var(--muted); flex: none; }
.del { background: none; border: none; color: var(--muted); font-size: 1.1rem; padding: .2rem .4rem; }
.del:hover { color: var(--danger); }

.hint { color: var(--muted); text-align: center; margin-top: 2.5rem; }
.error { color: var(--danger); }

/* ---- bottom add bar ---- */
.addbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 5;
  background: var(--bg); border-top: 1px solid var(--line);
  padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
}
.addbar form { display: flex; gap: .5rem; max-width: 640px; margin: 0 auto; }
.addbar input {
  flex: 1; padding: .65rem .8rem; border-radius: .6rem; font: inherit;
  border: 1px solid var(--line); background: var(--card); color: var(--fg);
}
.addbar button[type=submit] {
  background: var(--accent); color: #fff; border: none; border-radius: .6rem; padding: 0 1.1rem;
}
.listactions { display: flex; gap: .5rem; justify-content: center; margin-top: .5rem; max-width: 640px; margin-inline: auto; }

/* ---- auth pages ---- */
body.auth { display: grid; place-items: center; padding: 1rem; }
.authbox { width: min(92vw, 22rem); text-align: center; }
.authbox h1 { letter-spacing: .06em; }
.authbox form { display: flex; flex-direction: column; gap: .6rem; }
.authbox fieldset { border: 1px solid var(--line); border-radius: .7rem; display: flex; flex-direction: column; gap: .5rem; padding: .8rem; margin: 0; }
.authbox legend { color: var(--muted); font-size: .85rem; padding: 0 .35rem; }
.authbox input {
  padding: .7rem .8rem; border-radius: .6rem; font: inherit;
  border: 1px solid var(--line); background: var(--card); color: var(--fg);
}
.authbox button {
  background: var(--accent); color: #fff; border: none; border-radius: .6rem; padding: .7rem;
}

/* ---- meds ---- */
.membercard {
  background: var(--card); border: 1px solid var(--line); border-radius: .8rem;
  padding: .7rem .9rem; margin: .7rem 0;
}
.membercard h2 { font-size: 1rem; margin: .1rem 0 .5rem; }
.medrow { border-top: 1px solid var(--line); padding: .55rem 0; }
.medrow:first-of-type { border-top: none; }
.medinfo { display: flex; flex-direction: column; gap: .1rem; }
.medname {
  background: none; border: none; color: var(--fg); text-align: left;
  font: inherit; font-weight: 600; padding: 0; text-decoration: underline dotted var(--muted);
}
.mednotes { font-size: .8rem; color: var(--muted); }
.slots { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; align-items: center; }
.slot {
  border: 1px solid var(--line); background: var(--bg); color: var(--fg);
  border-radius: .55rem; padding: .4rem .7rem; font-size: .85rem;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
}
.slot.given { background: var(--accent); border-color: var(--accent); color: #fff; }
.slot.given small { opacity: .9; font-size: .68rem; }
.slot.prn { background: var(--accent); border-color: var(--accent); color: #fff; }
.prnlast { color: var(--muted); }

.loghead { font-size: .9rem; color: var(--muted); margin: 1.4rem 0 .3rem; }
#doselog { list-style: none; padding: 0; margin: 0; font-size: .82rem; color: var(--muted); }
#doselog li { padding: .18rem 0; }

/* ---- dialogs ---- */
dialog {
  border: 1px solid var(--line); border-radius: .9rem; background: var(--card); color: var(--fg);
  width: min(92vw, 24rem); padding: 1rem 1.1rem;
}
dialog::backdrop { background: rgb(0 0 0 / .45); }
dialog h2 { margin: 0 0 .7rem; font-size: 1.05rem; }
dialog form { display: flex; flex-direction: column; gap: .55rem; }
dialog label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--muted); }
dialog label.row { flex-direction: row; align-items: center; gap: .5rem; color: var(--fg); }
dialog input, dialog select {
  padding: .55rem .65rem; border-radius: .5rem; font: inherit;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg);
}
.slotpick { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .6rem; padding-left: 1.4rem; }
.slotopt { font-size: .9rem; }
.dlgbtns { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }
.dlgbtns button[type=submit] { background: var(--accent); color: #fff; border: none; border-radius: .55rem; padding: .5rem 1rem; }
.row3 { display: flex; gap: .45rem; }
.emojiin { width: 3.2rem; text-align: center; }
.row3 input[name=name] { flex: 1; }
#peoplelist { list-style: none; padding: 0; margin: 0 0 .7rem; }
.personrow { display: flex; align-items: center; justify-content: space-between; padding: .3rem 0; border-bottom: 1px solid var(--line); }

/* ---- reminders dialog ---- */
.hint2 { color: var(--muted); font-size: .8rem; margin: .1rem 0 .3rem; }
.timesgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .7rem; }
.agentbox { border: 1px solid var(--line); border-radius: .6rem; padding: .5rem .7rem; }
.agentbox summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
.agentbox input { flex: 1; font-family: ui-monospace, monospace; font-size: .75rem; }

/* ---- custom med times ---- */
.customwrap { padding-left: 1.4rem; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.timerow { display: flex; gap: .3rem; align-items: center; }
.timerow input { padding: .35rem .5rem; }

/* ---- weekday + cycle controls ---- */
.daysrow { display: flex; gap: .3rem; align-items: center; padding-left: 1.4rem; flex-wrap: wrap; }
.daytoggle { display: inline-flex; align-items: center; gap: .15rem; font-size: .8rem; color: var(--muted); }
.daytoggle input { accent-color: var(--accent); }
.cyclewrap { display: flex; flex-direction: column; gap: .3rem; }
.cyclefields { padding-left: 1.4rem; color: var(--muted); font-size: .85rem; display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.cyclefields input { width: 4rem; }
.cyclechip {
  margin-left: .6rem; font-size: .72rem; border: 1px solid var(--line); border-radius: 999px;
  background: none; color: var(--muted); padding: .15rem .55rem; vertical-align: middle;
}
.cyclehist { list-style: none; padding: 0; margin: .4rem 0 0; }
.timerow select { padding: .35rem .4rem; border-radius: .5rem; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-size: .85rem; }

/* ---- photos ---- */
.avatar { width: 1.7rem; height: 1.7rem; border-radius: 50%; object-fit: cover; vertical-align: middle; cursor: pointer; }
.medthumb { width: 2.4rem; height: 2.4rem; border-radius: .45rem; object-fit: cover; cursor: pointer; float: left; margin-right: .6rem; }
.medthumbbig { max-width: 100%; max-height: 9rem; border-radius: .6rem; display: block; }
.photorow { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.photodlg { max-width: min(94vw, 34rem); }
.photodlg img { max-width: 100%; max-height: 70vh; border-radius: .5rem; display: block; margin: 0 auto; }
.personname { display: flex; align-items: center; gap: .4rem; }
.personrow { gap: .4rem; }
.personrow .ghost { margin-left: auto; }

/* ---- Warm Orbit accents ---- */
.tabs button.active { background: var(--coral); border-color: var(--coral); }
.addbar button[type=submit], .authbox button, .dlgbtns button[type=submit] { background: var(--coral); }
.slot.prn { background: var(--coral); border-color: var(--coral); }
.cyclechip { color: var(--lilac); border-color: var(--lilac); }
.topbar h1 { display: flex; align-items: center; gap: .45rem; font-weight: 700; letter-spacing: .02em; }
.brandmark { width: 1.5rem; height: 1.5rem; border-radius: .4rem; }
.biglogo { width: 5.5rem; height: 5.5rem; border-radius: 1.25rem; margin-bottom: .6rem; }
.authbox h1 { font-weight: 700; letter-spacing: .02em; }
.topbar, .addbar { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); }