:root {
  --bg: #12131a;
  --panel: #1c1e28;
  --line: #2c2f3d;
  --text: #e6e7ee;
  --muted: #8d92a6;
  --accent: #7aa2f7;
  --warn: #e0af68;
}

* { box-sizing: border-box; }

/* Every `hidden` toggle in app.js depends on this line. The UA stylesheet's
   `[hidden] { display: none }` loses to ANY author `display` declaration regardless of
   specificity, and this file sets several - `#event-edit label` is `block` and
   `label.inline` is `flex` - so without this an element the JS believes it hid stays on
   screen. `!important` is the point rather than a shortcut: it has to beat whatever
   `display` a component sets, present and future. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

header { padding: 1rem 0 0.5rem; }
h1 { font-size: 1.25rem; margin: 0 0 0.75rem; }
h2 { font-size: 1.05rem; margin: 0 0 0.25rem; }
h3 { font-size: 0.9rem; margin: 0 0 0.5rem; color: var(--muted); }

nav { display: flex; gap: 0.5rem; }
nav button {
  flex: 1;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
nav button.active { color: var(--text); border-color: var(--accent); }

.muted { color: var(--muted); font-size: 0.85rem; }
.empty { color: var(--muted); font-style: italic; }

/* Warn-coloured but quiet: a short read is not an error, and what is shown IS real. */
.partial {
  color: var(--warn);
  font-size: 0.85rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  padding: 0.45rem 0.6rem;
  margin: 0.6rem 0 0;
}

ul { list-style: none; margin: 0.75rem 0 0; padding: 0; }

.item {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.4rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}
.item.task { border-left-color: var(--muted); }
.item.overdue { border-left-color: var(--warn); }

.when {
  flex: 0 0 auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}
.title { flex: 1; }
.where { color: var(--muted); font-size: 0.8rem; }

.badge {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--warn);
  color: #1a1205;
}
/* "moved from" is context, not a warning like an overdue carry-over, so it is a quiet
   neutral pill rather than the warn colour. */
.badge.moved {
  background: var(--line);
  color: var(--muted);
}

/* --- month grid --- */

.monthbar { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.monthbar h2 { flex: 1; text-align: center; margin: 0; }
.monthbar .nav {
  width: 2.2rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.month { margin-top: 0.5rem; }
.weekdays, .week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.weekdays {
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.weekdays span { text-align: center; padding: 0.2rem 0; }
.week { margin-bottom: 2px; }

.day {
  min-height: 4.6rem;
  padding: 0.2rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.day.outside { opacity: 0.35; }
.day.today { border-color: var(--accent); }
.day.today .daynum { color: var(--accent); font-weight: 700; }

.daynum {
  display: block;
  font-size: 0.7rem;
  color: var(--muted);
  text-align: right;
  padding: 0 0.1rem;
}

.chip {
  display: block;
  margin-top: 2px;
  padding: 1px 3px;
  border-radius: 3px;
  background: rgba(122, 162, 247, 0.16);
  border-left: 2px solid var(--accent);
  color: var(--text);
  font-size: 0.62rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.chip.allday {
  background: rgba(224, 175, 104, 0.18);
  border-left-color: var(--warn);
}
.chip b { color: var(--muted); font-weight: 600; }
.repeat { color: var(--muted); font-size: 0.9em; }
/* The recurrence line in the event detail sheet leads with the same repeat glyph as the
   chip; the CSS escape keeps the source ASCII (\21bb == U+21BB, the repeat symbol). */
.recurrence::before { content: "\21bb "; color: var(--muted); }

h2.next { margin-top: 1.25rem; }

.columns { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; }
.column { flex: 0 0 15rem; }
.count { color: var(--muted); font-weight: normal; }

.card {
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.4rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.card.done .title { color: var(--muted); text-decoration: line-through; }
.card .due, .card .checklist {
  display: inline-block;
  margin-top: 0.3rem;
  margin-right: 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
}

dialog {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  max-width: 22rem;
}
dialog input {
  width: 100%;
  padding: 0.6rem;
  margin: 0.5rem 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
}
dialog button {
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #10131c;
  font: inherit;
  cursor: pointer;
}

footer { margin-top: 1rem; min-height: 1.2rem; }

/* Slice B: checklist items under a card, and the drag ghost. */
.checklist-items {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  font-size: 0.85em;
}
.checklist-items li { margin: 0.15rem 0; }
.checklist-items label {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  cursor: pointer;
}
.card { cursor: grab; }
.sortable-ghost { opacity: 0.4; }
.sortable-chosen { cursor: grabbing; }

/* Slice D: sharing (board switcher + share panel). */
.board-head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0.25rem 0 0.75rem;
}
.board-switch {
  flex: 1;
  padding: 0.45rem 0.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
}
.share-open {
  flex: 0 0 auto;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
#share select {
  padding: 0.4rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
}
ul.grants { margin: 0.25rem 0 1rem; }
ul.grants li {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
ul.grants .who { flex: 1; }
ul.grants .remove {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.share-add {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
}
.share-add select:first-child { flex: 1; }
#share menu { margin: 1rem 0 0; padding: 0; display: flex; justify-content: flex-end; }

/* Slice T: task detail sheet. */
#task-detail { max-width: 22rem; }
#task-detail h2 { margin: 0 0 0.25rem; }
.detail-checklist { margin: 0.5rem 0 1rem; font-size: 0.9em; }
.detail-checklist li { margin: 0.2rem 0; font-variant-numeric: tabular-nums; }
.detail-checklist li.done { color: var(--muted); text-decoration: line-through; }
#task-detail .share-open { margin-top: 0.5rem; }
#task-detail menu { margin: 1rem 0 0; padding: 0; display: flex; justify-content: flex-end; }
.card .title { cursor: pointer; }

/* Slice A1: task authoring (the Add button, and the create/edit form). */
.task-new { flex: 0 0 auto; }
/* Notes may have been typed on another family member's phone, so they are rendered as
   TEXT (app.js uses textContent, Jinja escapes) - `pre-wrap` keeps the newlines the
   author typed without ever letting the string act as markup. */
.detail-notes {
  margin: 0.5rem 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#task-detail button { margin: 0.5rem 0.4rem 0 0; }
.task-delete { background: var(--warn); }
#task-edit { max-width: 22rem; }
#task-edit h2 { margin: 0 0 0.5rem; }
#task-edit label {
  display: block;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}
#task-edit textarea {
  width: 100%;
  padding: 0.6rem;
  margin: 0.5rem 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  resize: vertical;
}
#task-edit menu {
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
#task-edit-cancel { background: transparent; border: 1px solid var(--line); color: var(--text); }

/* Slice A3: event authoring. */
.monthbar-actions {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}
.monthbar-actions p { margin: 0; }
.event-new { flex: 0 0 auto; }
#event-edit { max-width: 22rem; }
#event-edit h2 { margin: 0 0 0.5rem; }
#event-edit label {
  display: block;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}
#event-edit label.inline {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  color: var(--text);
  font-size: inherit;
}
#event-edit label.inline input { width: auto; margin: 0; }
.when-row { display: flex; gap: 0.5rem; }
.when-row input { flex: 1; }
#event-edit select,
#event-edit textarea {
  width: 100%;
  padding: 0.6rem;
  margin: 0.5rem 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
}
#event-edit textarea { resize: vertical; }
/* The recurrence controls on an edit. The row is the always-on face (prose + a way in);
   the editor is the panel it opens. The editor is boxed so that, on a phone, the four
   controls inside it read as one subject rather than as four more form fields. */
#event-edit-repeat-row { margin-top: 0.75rem; }
#event-edit-repeat-row p { margin: 0 0 0.4rem; }
#event-edit-repeat-toggle {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  padding: 0.4rem 0.6rem;
}
#event-edit-repeat-editor {
  margin: 0.5rem 0;
  padding: 0.1rem 0.7rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}
#event-edit-repeat-editor input[type="number"] { width: 4.5rem; }
#event-edit-repeat-editor input[type="date"] {
  width: 100%;
  padding: 0.6rem;
  margin: 0.5rem 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
}
/* A span, not a <label>: there are seven inputs under it, so it labels none of them. */
.field-label {
  display: block;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.byday { display: flex; flex-wrap: wrap; gap: 0.1rem 0.7rem; }
#event-edit menu {
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
#event-edit-cancel { background: transparent; border: 1px solid var(--line); color: var(--text); }

/* Slice B2: the guest list and the RSVP control in the event sheet. */
.guests { margin: 0.75rem 0 0; }
.guest-group { margin: 0.15rem 0; font-size: 0.9rem; overflow-wrap: anywhere; }

.rsvp { margin-top: 0.9rem; border-top: 1px solid var(--line); padding-top: 0.75rem; }
.rsvp h3 { margin: 0 0 0.4rem; }

/* Three equal segments, thumb-sized, on one row at every phone width - a decision made in
   one tap is worth the whole line. */
.rsvp-choices { display: flex; gap: 0.4rem; }
#task-detail .rsvp-choice {
  flex: 1;
  margin: 0;
  padding: 0.6rem 0.2rem;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
}
/* The pressed segment is keyed off aria-pressed rather than a parallel class, so the state
   a screen reader announces and the state an eye sees can never drift apart. */
#task-detail .rsvp-choice[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #10131c;
}
/* Clearing an answer is not the thing this control is FOR, so it does not compete with the
   three segments for attention. */
#task-detail .rsvp-clear {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
}
/* The widening offer arrives AFTER an answer, so it sits under it as a quiet aside rather
   than as a second decision to make first. */
.rsvp-widen { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.rsvp-widen p { margin: 0; }
#task-detail .rsvp-every-time {
  margin: 0;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
}
/* How far the shown answer reaches, and so how far Clear will reach. Sits directly above the
   Clear button because it is the sentence that explains what that button will do. */
.rsvp-reach { margin: 0.5rem 0 0.1rem; }

/* Offline read-cache. The cached view is de-emphasised so "this screen is different"
   survives the banner being read once and then ignored. */
.cache-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--warn);
  border-radius: 8px;
  background: var(--panel);
}
.cache-banner-text { margin: 0; flex: 1; font-size: 0.9rem; }
.cached-view { opacity: 0.6; filter: grayscale(0.4); }