*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #FFFFFF;
  --canvas:     #FBE07E;
  --surface:    #FFFFFF;
  --surface-2:  #F1EFE8;
  --ink:        #1F2530;
  --ink-soft:   #5B6473;
  --muted:      #98A0AC;
  --line:       #ECE7DD;
  --brand:      #2A97AD;
  --brand-soft: #E2F1F4;
  --green:      #16A34A;
  --danger:     #DC2626;
  --today:      #D97706;
  --radius:     14px;
  --shadow:     0 2px 12px rgba(31, 37, 48, 0.06);
  --card-line:  #E6E4DD;

  --topbar-h:   72px;
  --dots-h:     32px;
}

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow: hidden; /* board scrolls horizontally, columns scroll vertically */
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Top bar ─────────────────────────────────────────────────────────── */

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--topbar-h);
}
/* Fixed topbar means every page-level container needs to offset itself by
   the topbar height. The page-view / board / memory containers each include
   `var(--topbar-h)` in their own height calc, so they sit flush below. */
body { padding-top: var(--topbar-h); }

.brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.4rem; font-weight: 800;
  letter-spacing: -0.5px;
}

.logo { font-size: 1.5rem; }
img.logo-full { height: 78px; display: block; }
.bg-sun {
  position: fixed; bottom: -30vw; left: -24vw; width: 80vw; min-width: 700px;
  opacity: 0.3; pointer-events: none; z-index: -1; user-select: none;
}

.filters { display: flex; gap: 8px; }
.filters.hidden, .hidden { display: none !important; }

/* View toggle: To-dos / Calendar / Memory / Settings.
   Absolutely centered in the topbar so it stays put when right-side filters
   appear/disappear between views (Board has them, Calendar doesn't). */
.view-toggle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  min-width: 0;
  max-width: calc(100vw - 280px);   /* leave room for brand + filters at the edges */
}
.view-toggle::-webkit-scrollbar { display: none; }
.view-btn {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Nav entries that are real links (e.g. the Alpha dashboard) sit flush with
   the buttons around them. */
a.view-btn { text-decoration: none; display: inline-block; }
.view-btn.active {
  background: var(--ink);
  color: white;
}

/* Generic page view (placeholders + simple pages) */
.page-view {
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: 20px 16px 40px;
}
.page-view > .empty {
  text-align: center;
  color: var(--muted);
  padding: 60px 16px;
}

.chip {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 7px 14px;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}

/* ── Board (the row of columns) ──────────────────────────────────────── */

.board {
  display: flex;
  gap: 12px;
  padding: 12px;
  height: calc(100vh - var(--topbar-h) - var(--dots-h));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.board::-webkit-scrollbar { height: 6px; }
.board::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

.board > .empty {
  margin: auto;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ── Column ──────────────────────────────────────────────────────────── */

.column {
  flex: 0 0 calc(100vw - 32px);
  max-width: 360px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* Symmetric horizontal padding so cards sit centred in the column with equal
     left/right gutters (HES-120). Was 4px-left / 8px-right, which pushed the
     right gutter wider than the left. */
  padding: 10px 8px;
  overflow: hidden;
}

.col-head {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 2px 10px;
  border-bottom: 1px solid var(--line);
  position: relative;   /* anchors the .col-menu dropdown */
}

/* List menu (☰ top-left of each column) */
.col-menu-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 3px;
  border-radius: 4px;
  line-height: 1;
}
.col-menu-btn:hover { background: var(--bg); color: var(--ink); }
.col-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  min-width: 215px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 30px -10px rgba(31, 37, 48, 0.25);
  padding: 5px;
  display: flex;
  flex-direction: column;
}
.col-menu.hidden { display: none; }
.col-menu button {
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
}
.col-menu button:hover { background: var(--bg); }
.col-drag-handle {
  cursor: grab;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: -2px;
  padding: 2px 2px;
  border-radius: 4px;
  user-select: none;
}
.col-drag-handle:hover { color: var(--ink); background: var(--bg); }
.col-drag-handle:active { cursor: grabbing; }
.col-emoji {
  cursor: pointer;
  padding: 2px 2px;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1;
}
.col-emoji:hover { background: var(--bg); }
.col-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 4px;
  outline: none;
  cursor: text;
  /* Sizes to text content (no flex grow) so clicking past the last letter
     hits the empty col-spacer instead of focusing the contenteditable. */
}
.col-title:hover { background: var(--bg); }
.col-title:focus  { background: var(--brand-soft); overflow: visible; text-overflow: clip; }
.col-spacer { flex: 1; min-width: 8px; align-self: stretch; }
.col-delete, .col-fullscreen {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 4px 3px;
  border-radius: 4px;
  line-height: 1;
}
.col-delete:hover    { background: #FEE2E2; color: #B91C1C; }
.col-fullscreen:hover { background: var(--bg); color: var(--ink); }

.column.minimized .col-body,
.column.minimized .col-add { display: none; }

.column.col-dragging {
  opacity: 0.35;
  pointer-events: none;
}
.column.col-drop-target { outline: 2px dashed var(--brand); outline-offset: -2px; }

/* Fullscreen list view — grid of square-ish cards. */
.column-fullscreen {
  flex: 1 1 100%;
  max-width: 100%;
  width: 100%;
  padding: 12px 18px;
  cursor: default;
}
.col-head-fullscreen { cursor: default; gap: 12px; }
.col-head-fullscreen .fs-back {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.col-head-fullscreen .fs-back:hover { background: var(--bg); border-color: var(--brand); color: var(--brand); }
.col-head-fullscreen .col-title { font-size: 1.15rem; }
.col-body-grid { padding: 16px 0; }
.grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.grid-list .row {
  /* row keeps its slot + card structure; just changes how it fills */
  align-items: stretch;
}
.grid-list .row .card {
  min-height: 130px;
  display: flex;
  flex-direction: column;
}
/* Inside the grid: titles wrap and show in full, not single-line ellipsis. */
.grid-list .name-line { align-items: flex-start; }
.grid-list .name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  line-height: 1.3;
}
.col-add-fullscreen { margin-top: 16px; max-width: 360px; }

.column-add {
  flex: 0 0 240px;
  display: flex; align-items: flex-start;
  padding: 12px 0;
}
.column-add button {
  background: var(--surface-2);
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 16px;
  width: 100%;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.column-add button:hover { border-color: var(--brand); color: var(--brand); }

/* ── Snooze tile + per-card icon + snoozed section ───────────────────── */

.snooze-tile {
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
  margin-bottom: 4px;
  box-shadow: none;
  transition: all 0.15s;
}
.snooze-tile:hover { color: var(--ink); border-color: var(--brand); }
.snooze-tile.snooze-drop-target {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
  transform: scale(1.02);
}

.row { position: relative; }
.row-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  margin-top: 4px;
}
.name-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.name-line .name { flex: 1; min-width: 0; }
.row-later {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: #000;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.3;
  opacity: 1;
}
.row-later:hover { background: var(--brand-soft); }
/* On hover-capable devices, hide Later until the card is hovered and grey
   out the title to bring the action button forward. */
@media (hover: hover) {
  .card .row-later { opacity: 0; transition: opacity 0.1s; }
  .card:hover .row-later { opacity: 1; }
  .card:hover .name { color: var(--muted); }
}

/* HES-144: explicit delete affordances. Desktop = a trash icon revealed on
   card hover (next to Later). Mobile = swipe the card left to reveal / commit
   the red Delete button (.row-delete-swipe; touch handler in app.js). */
.row-delete {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 4px;
  line-height: 1.3;
  display: none;                 /* desktop-only; shown via the media query below */
}
.row-delete:hover { color: var(--danger); background: #FEE2E2; }

/* Red button revealed behind a card when swiped left. The card is opaque and
   stacks above it, so it stays hidden until the card is dragged aside. */
.row-delete-swipe {
  position: absolute;
  top: 3px; bottom: 3px; right: 3px;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  padding: 0 18px;
  border: none;
  border-radius: 7px;
  background: var(--danger);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.row .card { position: relative; z-index: 1; }
.row.swiping .card { transition: none; }
.row.swipe-animate .card { transition: transform 0.2s ease; }

@media (hover: hover) and (min-width: 900px) {
  .card .row-delete { display: inline-flex; align-items: center; opacity: 0; transition: opacity 0.1s; }
  .card:hover .row-delete { opacity: 1; }
}
@media (min-width: 900px) {
  .row-delete-swipe { display: none; }   /* desktop uses the hover trash icon */
}

.row-cal {
  background: #DCFCE7;
  color: #166534;
  border: 1px solid #86efac;
  border-radius: 99px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.row-cal:hover { background: #bbf7d0; }

/* Link chip — shown when a task's notes carry a URL (e.g. a wishlist item). */
.row-link {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
  border-radius: 99px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-link:hover { background: #DBEAFE; }

/* HES-52: "open the original" chip — links a task back to the email or
   WhatsApp message it came from. Neutral palette so it reads as provenance,
   not an action. */
.row-source {
  display: inline-block;
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #E2E8F0;
  border-radius: 99px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  list-style: none;
}
.row-source::-webkit-details-marker { display: none; }
.row-source:hover { background: #E2E8F0; }
.row-source-details { display: inline-block; }
.row-source-details[open] .source-original {
  display: block;
  margin-top: 6px;
  padding: 6px 10px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-size: 0.78rem;
  color: #334155;
  white-space: pre-wrap;
  max-width: 100%;
}

details.snoozed-section {
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
details.snoozed-section summary {
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  list-style: none;
  padding: 4px 2px;
}
details.snoozed-section summary::-webkit-details-marker { display: none; }
details.snoozed-section[open] summary { color: var(--ink-soft); }
details.snoozed-section summary .sec-count {
  font-size: 0.62rem;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 1px 7px;
  letter-spacing: 0;
  margin-left: 2px;
}

.snoozed-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 6px;
}
.snoozed-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg);
  border-radius: 8px;
  padding: 7px 10px;
  opacity: 0.6;
  font-size: 0.82rem;
}
.snoozed-row .snoozed-title { flex: 1; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snoozed-row .snoozed-when  { font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
.snoozed-row .snoozed-wake {
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.snoozed-row .snoozed-wake:hover { color: var(--brand); background: var(--brand-soft); }

/* ── Modal (snooze dialog and similar) ──────────────────────────────── */

.modal {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(15, 18, 24, 0.45);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: scrim-in 0.18s ease-out;
}
.modal-card {
  background: var(--bg);
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 30px 80px rgba(15,18,24,0.3);
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.modal-head h3 { font-size: 1rem; font-weight: 700; }
.modal-close {
  background: transparent; border: none;
  color: var(--ink-soft); font-size: 1.1rem;
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer;
}
.modal-close:hover { background: var(--line); }
.modal-body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.modal-sub { color: var(--ink); font-weight: 600; }
.modal-sub.muted { color: var(--muted); font-weight: 400; font-size: 0.9rem; }
/* Combined reminder + snooze popup */
.modal-card.actions-card { max-width: 720px; }
/* HES-143: the "Later" action is now snooze-only (single section), so keep the
   card narrow instead of the two-column width. */
.modal-card.actions-card--snooze { max-width: 440px; }
.actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.actions-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.actions-section h4 {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0;
}
.parse-saved {
  color: #1f7a3a;
  background: #e6f5ec;
  border: 1px solid #b9e0c8;
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 0.9rem;
}
@media (max-width: 560px) {
  .actions-grid { grid-template-columns: 1fr; }

  /* HES-138: on narrow (phone) viewports the absolutely-centred view-toggle
     pill collided with the Spinning Plates logo. Drop the nav onto its own row below
     the logo (Rosie: "move the nav down to be below it"). The topbar wraps:
     logo — and the board Open/Done filters when present — stay on the top row,
     the view-toggle spans the row beneath. Bump --topbar-h so the fixed header
     still offsets the page correctly (every page container's height calc reads
     this var), and shrink the logo so the two-row header stays compact. */
  :root { --topbar-h: 116px; }
  .topbar {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
    height: var(--topbar-h);
    background: var(--canvas);   /* opaque: taller fixed bar shouldn't show content through */
  }
  img.logo-full { height: 48px; }
  .brand { order: 1; }
  .filters { order: 2; }
  .view-toggle {
    order: 3;
    position: static;
    left: auto;
    transform: none;
    flex-basis: 100%;
    max-width: 100%;
    justify-content: flex-start;
  }
}

.snooze-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.snooze-presets button {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.snooze-presets button:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.snooze-label { display: flex; flex-direction: column; gap: 4px; }
.snooze-label span { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.snooze-input {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.92rem;
  font-family: inherit;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal-actions button {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.modal-save {
  background: var(--ink) !important;
  color: white !important;
  border-color: var(--ink) !important;
}
.modal-save:disabled { opacity: 0.5; cursor: wait; }

/* ── Add-event (Calendar tab, HES-241) ─────────────────────────────────── */
.cal-add-btn {
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: 99px;
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.cal-add-btn:hover { opacity: 0.9; }
.cal-add-field { display: flex; flex-direction: column; gap: 4px; }
.cal-add-field > span {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-soft);
}
.cal-add-field > span em { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.cal-add-check { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.cal-add-check input { cursor: pointer; }
.cal-add-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cal-add-error {
  color: #b3261e;
  background: #fdecea;
  border: 1px solid #f5c6c1;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.86rem;
  font-weight: 600;
}

/* ── Image lightbox ──────────────────────────────────────────────────── */

.lightbox {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.85);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.lightbox.open { display: flex; }
.lightbox-img {
  max-width: 100%; max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.lightbox-close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,0.25); }

.col-count {
  background: var(--line);
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
}

.col-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
  scrollbar-width: thin;
}
.col-body::-webkit-scrollbar { width: 6px; }
.col-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

.col-empty {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 24px 8px;
}

.col-add {
  display: flex; gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.col-add input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--ink);
  min-width: 0;
}
.col-add input:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }

/* HES-204 / HES-205: iOS Safari zooms the whole page in when you focus an input
   whose font-size is under 16px — and since iOS 10 it ignores maximum-scale /
   user-scalable, so no meta viewport can stop it. The font size IS the fix: at
   16px "Add to Reminders…" and "Add to Today…" open the keyboard without ever
   zooming, so there's no zoomed-in state left to get stuck in (and pinch-zoom
   stays available everywhere else). Touch pointers only — desktop keeps 0.9rem. */
@media (hover: none) and (pointer: coarse) {
  /* Rosie 2026-07-31: still "stuck zoomed in" after tapping to create an item
     — the add box was fixed but every OTHER focusable field (drawer title,
     notes, due date, weather location, priority notes…) still sat under 16px
     and re-triggered the zoom. Blanket-cover them all on touch devices. */
  input[type="text"], input[type="date"], input[type="time"], input[type="search"],
  input:not([type]), textarea, select {
    font-size: 16px;
  }
  /* (contenteditable titles are already ≥16px — forcing them DOWN to 16px
     would shrink the list headers, so they're deliberately not covered.) */
}

.col-add button {
  width: 36px;
  background: var(--ink);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1.2rem;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Groups within a column ──────────────────────────────────────────── */

.group { display: flex; flex-direction: column; gap: 6px; }

.group-h {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  padding: 0 2px;
}

.group-h.danger { color: var(--danger); }
.group-h.today  { color: var(--today); }

.group-count {
  background: var(--line);
  color: var(--ink-soft);
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 99px;
  letter-spacing: 0;
}

/* ── Regular reminders list — category sections + schedule meta ─────── */

/* Section header rendered as an <li> inside the same <ul> as the cards,
   so drag-and-drop targeting still walks to `.row` cleanly. The header
   itself is not draggable. */
.rem-section-head {
  list-style: none;
  cursor: default;
  display: flex;
  align-items: center;
  margin-top: 2px;
  padding: 4px 2px 2px;
  user-select: none;
}
.rem-list-grouped > .rem-section-head:first-child { margin-top: 0; }
.rem-section-label {
  display: inline-block;
  background: var(--cat-bg, var(--line));
  color: var(--cat-fg, var(--ink-soft));
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 99px;
}

/* Inert version of the .slot-num used for reminder categories — same shape
   as the Today numbered slot but no number, no click. The pastel colour
   comes from the row's --slot-bg via .row.has-slot. */
.slot-num.slot-category {
  cursor: default;
}

/* Small grey schedule line under the task name (e.g. "Daily at 8am"). */
.meta-schedule {
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 500;
}

ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }

/* ── Task row ────────────────────────────────────────────────────────── */

.row {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: transparent;
  border-radius: 10px;
  padding: 0;
  transition: opacity 0.2s, transform 0.15s;
  cursor: grab;
}
.row.has-slot {
  background: var(--slot-bg, transparent);
  padding: 3px 3px 3px 0;
}
/* Un-prioritised (backlog) cards have no coloured background and no priority
   number, so the empty 24px slot on the left is dead space that pushed the
   white card in on the left while the right stayed flush — unequal gutters.
   Drop that slot and zero the horizontal padding so the white card fills the
   column width and lines up on both edges with the coloured blocks above,
   with equal left/right gutters (HES-120). */
.row.no-slot { padding: 3px 0; }
.row.no-slot .slot-num.slot-empty { display: none; }
.row .card {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface);
  border-radius: 10px;
  padding: 10px 12px 8px;
  border: 1px solid var(--card-line);
}
.row.has-slot .card { border-radius: 7px; border-color: transparent; }
.row:active { cursor: grabbing; }

/* HES-237: notes-list items — no checkbox, a quiet bullet marker instead of the
   priority slot. The card still holds the editable text, chips and delete. */
.slot-num.slot-bullet {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
}
.row.row-notes .card { padding-left: 12px; }

.row.done { opacity: 0.55; }
.row.done .name { text-decoration: line-through; color: var(--muted); }
.row.dragging {
  opacity: 0;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  pointer-events: none;
  transform: none;
}
.drop-placeholder {
  list-style: none;
  background: var(--brand-soft);
  border: 2px dashed var(--brand);
  border-radius: 10px;
  margin: 0;
  box-sizing: border-box;
  transition: height 0.12s ease;
}

/* Floating copy of the card that follows the finger during a long-press touch
   drag. pointer-events:none so elementFromPoint sees the columns beneath it. */
.touch-drag-ghost {
  position: fixed;
  z-index: 999;
  margin: 0;
  list-style: none;
  pointer-events: none;
  opacity: 0.92;
  transform: scale(1.03) rotate(0.5deg);
  box-shadow: 0 10px 28px rgba(31, 37, 48, 0.28);
  border-radius: 10px;
  background: var(--surface);
}

.column.drag-over {
  background: var(--brand-soft);
  outline: 2px dashed var(--brand);
  outline-offset: -2px;
}

.check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  cursor: pointer;
  color: var(--green);
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
/* On devices that can hover, fade the tick in after a short delay so the title
   sits flush against the slot the rest of the time. Touch devices keep it
   visible. */
@media (hover: hover) {
  .card .check {
    width: 0;
    border-width: 0;
    opacity: 0;
    margin-right: -10px;   /* cancel the card's gap when hidden */
    overflow: hidden;
    transition: width 0.2s ease 0.2s, opacity 0.2s ease 0.2s,
                margin-right 0.2s ease 0.2s, border-width 0.2s ease 0.2s;
  }
  .card:hover .check,
  .row.done .card .check {
    width: 22px;
    border-width: 1.5px;
    opacity: 1;
    margin-right: 0;
  }
  .row.done .card .check { transition: none; }   /* always shown — no fade */
}

.slot-num {
  width: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  align-self: stretch;
  color: var(--slot-fg, var(--muted));
}
.row.done .slot-num { opacity: 0.5; filter: saturate(0.4); }
.slot-num.slot-clickable { cursor: pointer; }
.slot-num.slot-clickable:hover { filter: brightness(0.92); }

/* Today priority picker — small popover anchored to the slot number. */
.prio-picker {
  position: absolute;
  z-index: 30;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15,18,24,0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
}
.prio-opt {
  display: flex; align-items: center; gap: 10px;
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.prio-opt:hover { background: var(--surface-2); }
.prio-opt.active { background: var(--brand-soft); color: var(--brand); }
.prio-swatch {
  width: 16px; height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset;
}
.prio-swatch-none {
  background: transparent;
  border: 1.5px dashed var(--line);
  box-shadow: none;
}

/* Drawer priority picker */
.drawer-prio-list {
  display: flex; flex-direction: column; gap: 4px;
}
.drawer-prio-opt {
  display: flex; align-items: center; gap: 10px;
  background: transparent;
  border: 1px solid var(--line);
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.drawer-prio-opt:hover { background: var(--surface-2); }
.drawer-prio-opt.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }

.row.done .check {
  background: var(--green);
  border-color: var(--green);
  color: white;
}

.body { flex: 1; min-width: 0; }

.name {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.3;
  cursor: text;
  min-width: 0;
}
.name[contenteditable="true"] {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  cursor: text;
}
.name[contenteditable="true"]:focus {
  background: var(--bg);
  border-radius: 4px;
  padding: 2px 4px;
  outline: none;
}
/* Editing state: keep the title in the normal solid ink colour (beats the
   hover-muted rule) and hide the completion checkbox so the input reads as a
   clean edit field rather than a hovered row. */
.card.editing .name { color: var(--ink); }
.card.editing .check { display: none; }
.row-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 6px;
}
.row-rail .row-src {
  margin: 0;
}

.meta {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 4px;
}

.due { font-weight: 600; }

.src, .prio, .list-badge {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}

.src { background: var(--line); color: var(--ink-soft); }
.src-whatsapp  { background: #DCFCE7; color: #166534; }
.src-voicenote { background: #E2F1F4; color: #1E6B7A; }
.src-email     { background: #DBEAFE; color: #1E40AF; }
.src-web       { background: #EFE6D3; color: #6B5638; }

.prio {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.62rem;
}
.prio-urgent { background: #FEE2E2; color: #B91C1C; }
.prio-high   { background: #EFE6D3; color: #6B5638; }
.prio-medium { background: #E0E7FF; color: #3730A3; }
.prio-low    { background: #ECFDF5; color: #047857; }

.list-badge { background: #F1F0EB; color: var(--ink-soft); }

.more {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.more:hover { color: var(--ink); }

.task-thumb {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 8px;
  margin-top: 8px;
  cursor: zoom-in;
  background: var(--bg);
}
.task-thumb:hover { opacity: 0.92; }

/* ── Edit panel (inline under a row) ─────────────────────────────────── */

.edit-panel {
  list-style: none;
  background: var(--surface);
  border-radius: 10px;
  margin-top: -2px;
  padding: 12px;
  border: 1px solid var(--card-line);
}
.edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.edit-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.edit-grid select,
.edit-grid input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 0.88rem;
  font-family: inherit;
  background: var(--bg);
  width: 100%;
}
.edit-grid .del-btn {
  grid-column: 1 / -1;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  font-size: 0.85rem;
  color: var(--danger);
  font-weight: 600;
  cursor: pointer;
}
.edit-grid .del-btn:hover { background: #FEE2E2; }

/* ── Pagination dots (mobile) ────────────────────────────────────────── */

.dots {
  display: flex; justify-content: center; gap: 8px;
  height: var(--dots-h);
  align-items: center;
  background: var(--bg);
}

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s, transform 0.2s;
}
.dot.active {
  background: var(--ink);
  transform: scale(1.3);
}

/* ── Desktop layout ──────────────────────────────────────────────────── */

@media (min-width: 900px) {
  .board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    overflow-x: auto;
    scroll-snap-type: none;
    padding: 16px;
    gap: 16px;
  }
  .column {
    flex: none;
    max-width: none;
    min-width: 0;
  }
  .dots { display: none; }
  :root { --dots-h: 0px; }
}

/* ── Memory view ─────────────────────────────────────────────────────── */

.memory {
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: 20px 16px 40px;
}

.memory > .empty {
  text-align: center;
  color: var(--muted);
  padding: 60px 16px;
}

.mem-page {
  max-width: 1200px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 32px;
}

.mem-page section {
  display: flex; flex-direction: column; gap: 14px;
}

.mem-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.mem-head h2 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
}

.mem-actions { display: flex; gap: 8px; }

.mem-btn {
  background: var(--ink);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.mem-btn:hover:not(:disabled) { opacity: 0.9; }
.mem-btn:disabled { opacity: 0.5; cursor: wait; }
.mem-btn.ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

.mem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.mem-empty {
  color: var(--muted);
  font-size: 0.95rem;
  padding: 8px 4px;
}

.mem-card {
  background: var(--surface);
  border-radius: 14px;
  padding: 14px;
  border: 1px solid var(--card-line);
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid transparent;
  transition: border-color 0.15s;
}
.mem-card:focus-within { border-color: var(--brand-soft); }

.mem-card header {
  display: flex; align-items: center; gap: 8px;
}
.mem-emoji {
  font-size: 1.4rem;
  outline: none;
  border-radius: 6px;
  padding: 0 2px;
}
.mem-emoji[contenteditable="true"]:focus { background: var(--bg); }
.mem-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  flex: 1; min-width: 0;
  outline: none;
  border-radius: 6px;
  padding: 2px 4px;
}
.mem-card h3[contenteditable="true"]:focus { background: var(--bg); }

.mem-kind {
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  text-transform: lowercase;
}
.mem-auto {
  background: #EFE6D3;
  color: #6B5638;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  text-transform: uppercase;
}

.mem-del {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.mem-del:hover { color: var(--danger); background: #FEE2E2; }

.mem-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.mem-chip {
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 99px;
}

.mem-notes {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--ink);
  resize: vertical;
  min-height: 80px;
}
.mem-notes:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }

.mem-card-footer {
  font-size: 0.7rem;
  color: var(--muted);
}

.mem-muted {
  color: var(--muted);
  font-size: 0.78rem;
}

/* Discover suggestions box */
.mem-suggest-box {
  background: var(--surface);
  border: 1px dashed var(--brand);
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.mem-suggest-item {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 4px;
  border-radius: 8px;
}
.mem-suggest-item:hover { background: var(--bg); }
.mem-suggest-name { font-weight: 600; }
.mem-suggest-actions { display: flex; gap: 8px; margin-top: 6px; }

/* ── Memory entity cards (HES-79) ────────────────────────────────────── */

.ent-card header { align-items: flex-start; }
.ent-title {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.ent-title h3 { padding: 0; }
.ent-summary {
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
/* HES-231: "What is this?" card-type picker (person / organisation / me). */
.ent-type {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px; font-size: 0.72rem; color: var(--muted);
}
.ent-type-lbl { font-weight: 600; }
.ent-type-select {
  font-size: 0.72rem; padding: 1px 4px;
  border: 1px solid var(--line, #ddd); border-radius: 6px;
  background: var(--card-bg, #fff); color: var(--ink, #222);
}

.ent-rows { display: flex; flex-direction: column; gap: 4px; }
.ent-row {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 0.8rem;
}
.ent-row-label {
  color: var(--muted);
  font-weight: 600;
  min-width: 92px;
  flex-shrink: 0;
}
.ent-row-value {
  color: var(--ink);
  min-width: 0;
  /* Now a click-to-edit <button>: strip chrome, keep row typography */
  border: 0;
  background: transparent;
  font: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s, color 0.15s;
}
.ent-row-value:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* Editability affordances: a faint pencil on every editable value (visible on
   touch where hover doesn't exist), stronger on hover; one hint line above
   the cards. */
.ent-pencil { font-size: 0.72rem; margin-left: 6px; opacity: 0.3; transition: opacity 0.15s; }
.ent-row-value:hover .ent-pencil { opacity: 0.9; }
.ent-hint {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0 0 14px;
}

/* Unknown field: dashed "tap to tell me" affordance living in the value slot
   of its locked-grid row (the separate chips block is gone). */
.ent-row-empty {
  font-family: inherit;
  line-height: inherit;
  border: 1.5px dashed var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 10px;
  border-radius: 99px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.ent-row-empty:hover { border-color: var(--brand); color: var(--brand); }

/* Derived values (Age): plain text, not clickable — the tooltip points at
   the source field instead. */
.ent-row-derived { color: var(--ink); cursor: default; }

/* Link-type rows (url/email/phone/address): the value navigates; a separate
   small ✏️ (or the address text itself) opens the inline editor. */
.ent-row-slot {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
.ent-row-link {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ent-row-link:hover { border-bottom-color: var(--brand); }
.ent-row-editbtn {
  border: 0;
  background: transparent;
  font-size: 0.72rem;
  line-height: inherit;
  padding: 0;
  cursor: pointer;
  opacity: 0.3;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.ent-row-editbtn:hover,
.ent-row:hover .ent-row-editbtn { opacity: 0.9; }
.ent-row-map {
  font-size: 0.7rem;
  color: var(--muted);
  text-decoration: none;
  flex-shrink: 0;
  transition: color 0.15s;
}
.ent-row-map:hover { color: var(--brand); }

/* Inline edit state: input swapped in for a chip / known value */
.ent-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ent-edit-input {
  font: inherit;
  font-size: 0.78rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--brand);
  border-radius: 8px;
  padding: 3px 8px;
  width: 170px;
  max-width: 100%;
  outline: none;
}
.ent-edit-wa {
  font-size: 0.85rem;
  text-decoration: none;
  flex-shrink: 0;
  opacity: 0.75;
}
.ent-edit-wa:hover { opacity: 1; }

/* "What's happening lately" — Spinning Plates' recent commentary, visually separate
   from the locked grid of core info above it. */
.ent-lately {
  background: var(--brand-soft);
  border-left: 3px solid var(--brand);
  border-radius: 0 8px 8px 0;
  padding: 8px 10px 8px 12px;
}
.ent-lately-head {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft); /* --muted is too faint on the tinted background */
  margin-bottom: 4px;
}
.ent-facts {
  list-style: disc;
  padding-left: 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.ent-facts li {
  font-size: 0.72rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

.ent-footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.ent-foot {
  font-size: 0.72rem;
  color: var(--muted);
  text-decoration: none;
}
a.ent-foot:hover { color: var(--brand); }

/* HES-232: type-directly note box in the card footer — remember more about a
   person without leaving for WhatsApp. */
.ent-note {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ent-note-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.75rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  outline: none;
}
.ent-note-input:focus { border-color: var(--brand); }
.ent-note-save {
  flex-shrink: 0;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  border: none;
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
}
.ent-note-save:disabled { opacity: 0.6; cursor: default; }
.ent-note-wa {
  flex-shrink: 0;
  font-size: 0.9rem;
  text-decoration: none;
  opacity: 0.7;
}
.ent-note-wa:hover { opacity: 1; }

/* Divider between the entities section and the legacy notes/topics UI */
.mem-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.mem-divider::before,
.mem-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ── About me (HES-216): the holistic, written-up profile ─────────────── */
/* HES-236: About me is now a plain section (header + card grid), like the
   entity sections — not one big bordered "dumped" card. */
.aboutme-panel {
  display: flex; flex-direction: column; gap: 12px;
}
.aboutme-head { margin-bottom: 0; }
.aboutme-stale { font-size: 0.72rem; color: var(--muted); align-self: center; }
.aboutme-headline {
  font-size: 0.98rem; font-weight: 600; color: var(--ink, inherit);
  line-height: 1.4; margin: 0;
}
.aboutme-building { font-size: 0.82rem; color: var(--muted); }
.aboutme-loading { opacity: 0.6; }
/* Per-category About-me cards reuse .mem-card; these tune the inner body. */
.aboutme-card-body { display: flex; flex-direction: column; gap: 4px; }
.aboutme-card-list {
  list-style: disc; padding-left: 18px;
  display: flex; flex-direction: column; gap: 3px; margin: 0;
}
.aboutme-card-list li { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.45; }
.aboutme-card-text { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.45; margin: 0; }

/* ── Reminders view ──────────────────────────────────────────────────── */

.rem-page {
  max-width: 900px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 24px;
}

.rem-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.rem-head h2 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.rem-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rem-toggle {
  font-size: 0.82rem;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
}

.rem-section-h {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 8px;
  padding: 0 4px;
}

.rem-list { display: flex; flex-direction: column; gap: 6px; }

.rem-row {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface);
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid var(--card-line);
  transition: opacity 0.2s;
}
.rem-row.done { opacity: 0.55; }
.rem-row.done .rem-title { text-decoration: line-through; color: var(--muted); }
.rem-row .check {
  margin-top: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  cursor: pointer;
  color: var(--green);
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}
.rem-row .check.on {
  background: var(--green);
  border-color: var(--green);
  color: white;
}
.rem-body { flex: 1; min-width: 0; }
.rem-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  border-radius: 6px;
  padding: 1px 4px;
}
.rem-title[contenteditable="true"]:focus { background: var(--bg); }
.rem-meta {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.rem-chip {
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
}
.rem-chip-date { background: #FFEDD5; color: #C2410C; }
.rem-src       { background: #DCFCE7; color: #166534; text-transform: capitalize; }
.rem-kid       { background: #FCE7F3; color: #9D174D; }
.rem-notes {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  outline: none;
  border-radius: 6px;
  padding: 2px 4px;
}
.rem-notes[contenteditable="true"]:focus { background: var(--bg); }
.rem-del, .rem-cal-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.rem-del:hover { color: var(--danger); background: #FEE2E2; }
.rem-cal-btn:hover:not(:disabled) { color: var(--brand); background: var(--brand-soft); }
.rem-cal-btn.synced { color: var(--green); }
.rem-cal-btn:disabled { opacity: 0.4; cursor: wait; }
.rem-cal-on { background: #DCFCE7; color: #166534; }

/* ── Calendar view (multi-source week/month grid) ───────────────────── */

#calendar.page-view { padding: 0; }
.cal-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: calc(100vh - var(--topbar-h));
  background: var(--bg);
}
.cal-sidebar {
  border-right: 1px solid var(--line);
  padding: 18px 14px;
  overflow-y: auto;
  background: var(--surface-2);
}
.cal-sidebar-section { margin-bottom: 22px; }
.cal-sidebar-section h3 {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.cal-sources { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.cal-source {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--ink);
}
.cal-source:hover { background: var(--bg); }
.cal-source input[type="checkbox"] { margin: 0; cursor: pointer; }
.cal-source-swatch {
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--cal-source-color, var(--brand));
  flex-shrink: 0;
}
.cal-source-name {
  flex: 1; min-width: 0;
  overflow-wrap: anywhere;   /* full names wrap onto a second line, never ellipsed */
}
.cal-source-account {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
}
/* Account email as a small section head above its group of calendars —
   mirrors the "Must do today" heads on the homepage. */
.cal-account-head {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 2px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.cal-account-head-label {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-account-head::after {
  content: '';
  flex: 1;
  min-width: 12px;
  height: 1px;
  background: var(--line);
}
li + .cal-account-head { margin-top: 14px; }
.cal-loading { color: var(--muted); font-size: 0.85rem; padding: 4px 8px; }

/* Shared-with owner controls (HES-186 slice 3). */
.cal-share-row { cursor: default; }
.cal-share-revoke {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
  cursor: pointer;
}
.cal-share-revoke:hover { background: var(--bg); color: var(--danger, #c0392b); }
.cal-share-revoke:disabled { opacity: 0.4; cursor: default; }

.cal-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  gap: 12px;
}
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.cal-nav-btn:hover { border-color: var(--brand); color: var(--brand); }
.cal-range-label { font-size: 1rem; font-weight: 700; margin-left: 14px; color: var(--ink); }
.cal-view-toggle {
  display: flex; gap: 2px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px;
}
.cal-view-btn {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.cal-view-btn.active { background: var(--ink); color: white; }

.cal-grid {
  flex: 1; min-height: 0;
  overflow: auto;
  background: var(--bg);
}

/* Week view: sticky header row + sticky all-day lane + hours grid, all
   sharing the same 8-column template (time gutter + 7 days) so they align. */
.cal-week,
.cal-week-head,
.cal-week-allday {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  background: var(--surface);
  min-width: 800px;
}
/* Positioned so absolutely-placed event blocks anchor to their own grid area
   (day column), not the page. */
.cal-week { position: relative; }
.cal-week-head { position: sticky; top: 0; z-index: 3; }
.cal-week-allday {
  position: sticky; top: 40px;  /* corrected to the real header height in JS */
  z-index: 3;
  border-bottom: 1px solid var(--line);
}
.cal-week-allday-gutter,
.cal-week-allday-cell {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 2px;
  min-height: 10px;
}
.cal-week-allday-gutter {
  font-size: 0.6rem;
  color: var(--muted);
  text-align: right;
  padding: 2px 6px;
}
.cal-week-allday-cell { display: flex; flex-direction: column; gap: 2px; }
.cal-week-allday-cell.today { background: #FFFCF5; }
.cal-event-allday {
  background: var(--cal-event-bg, var(--brand-soft));
  border-left: 3px solid var(--cal-event-accent, var(--brand));
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.cal-week-header,
.cal-week-day-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 8px 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  color: var(--ink-soft);
}
.cal-week-day-header strong { display: block; font-size: 1.1rem; color: var(--ink); font-weight: 700; }
.cal-week-day-header.today strong { color: var(--brand); }
.cal-week-hour-label {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 0.7rem;
  color: var(--muted);
  text-align: right;
  padding: 2px 6px;
  background: var(--surface);
}
.cal-week-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  min-height: 36px;
  background: var(--surface);
}
.cal-week-cell.today { background: #FFFCF5; }
.cal-event-block {
  position: absolute;
  left: 4px; right: 4px;
  background: var(--cal-event-bg, var(--brand-soft));
  border-left: 3px solid var(--cal-event-accent, var(--brand));
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 0.76rem;
  color: var(--ink);
  overflow: hidden;
  cursor: pointer;
  transition: filter 0.15s;
}
.cal-event-block:hover { filter: brightness(0.96); }
.cal-event-block .cal-event-title { font-weight: 600; }
.cal-event-block .cal-event-meta { font-size: 0.7rem; color: var(--ink-soft); margin-top: 1px; }

/* Month view: 7 cols x 6 rows */
.cal-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(110px, 1fr);
  background: var(--surface);
  min-height: 600px;
}
.cal-month-day-header {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  padding: 6px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
  z-index: 2;
}
.cal-month-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 4px 6px;
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
}
.cal-month-cell.other-month { background: #FAF8F4; color: var(--muted); }
.cal-month-cell.today { background: #FFFCF5; }
.cal-month-day-num { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.cal-month-cell.today .cal-month-day-num { color: var(--brand); }
.cal-month-event {
  font-size: 0.72rem;
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--cal-event-bg, var(--brand-soft));
  border-left: 3px solid var(--cal-event-accent, var(--brand));
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.cal-month-event-more { font-size: 0.7rem; color: var(--muted); padding: 0 5px; }

/* Sidebar collapses to a top strip on narrow screens. */
@media (max-width: 800px) {
  .cal-layout { grid-template-columns: 1fr; }
  .cal-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--line);
    max-height: 200px;
    padding: 12px;
  }
}

.cal-page {
  max-width: 900px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 18px;
}
.cal-head h2 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.cal-head p { margin-top: 4px; }
.cal-empty-card {
  background: var(--surface);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--shadow);
  text-align: center;
  color: var(--ink-soft);
}
.cal-empty-card h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.cal-empty-card p  { font-size: 0.9rem; }

.cal-day {
  background: var(--surface);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.cal-day h3 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.cal-day ul { display: flex; flex-direction: column; gap: 6px; }
.cal-event {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 4px;
  border-radius: 8px;
}
.cal-event:hover { background: var(--bg); }
.cal-event.flash {
  animation: cal-flash 2.2s ease-out;
}
@keyframes cal-flash {
  0%   { background: #e5dcc8; box-shadow: 0 0 0 3px #b09a72 inset; }
  60%  { background: #efe6d3; box-shadow: 0 0 0 2px #b09a72 inset; }
  100% { background: transparent; box-shadow: none; }
}
.cal-time {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.cal-summary {
  font-size: 0.92rem;
  color: var(--ink);
  font-weight: 500;
}
.cal-link {
  text-decoration: none;
  color: var(--muted);
  font-size: 0.95rem;
}
.cal-link:hover { color: var(--ink); }

/* ── Task detail drawer ──────────────────────────────────────────────── */

/* HES-140: scrim + drawer must sit ABOVE the fixed .topbar (z-index 50) —
   otherwise the opaque mobile header covers the close button and the drawer
   can't be dismissed. Mirrors the roadmap chat drawer (z-index 60/61). */
.task-drawer-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 18, 24, 0.35);
  backdrop-filter: blur(2px);
  animation: scrim-in 0.18s ease-out;
}
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }

.task-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: 440px; max-width: 92vw;
  background: var(--bg);
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px rgba(15, 18, 24, 0.15);
  display: flex; flex-direction: column;
  animation: drawer-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.task-drawer .drawer-loading {
  padding: 60px 24px; text-align: center; color: var(--muted);
}

/* HES-140: grab handle signalling swipe-down-to-dismiss. Mobile only. */
.drawer-handle { display: none; }

.drawer-head {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.drawer-close {
  background: transparent; border: none;
  color: var(--ink-soft); font-size: 1.4rem;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.drawer-close:hover { background: var(--line); color: var(--ink); }

.drawer-body {
  flex: 1; overflow-y: auto;
  padding: 8px 24px 40px;
  display: flex; flex-direction: column; gap: 18px;
}

.drawer-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--ink);
  border-radius: 8px;
  padding: 6px 8px;
  outline: none;
  min-height: 1.5em;
}
.drawer-title[contenteditable="true"]:focus { background: var(--surface); }
.drawer-title:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
}

.drawer-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.drawer-chip {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.drawer-chip select,
.drawer-chip input,
.drawer-input {
  border: none;
  background: transparent;
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--ink);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  outline: none;
  width: 100%;
}

.drawer-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.drawer-section h4 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.drawer-muted {
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 4px;
}
.drawer-textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.9rem;
  resize: vertical;
  min-height: 60px;
}
.drawer-input {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.9rem;
  width: auto;
}

.drawer-rem-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 10px;
}
.drawer-rem-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 10px;
}
.drawer-rem-text { display: flex; flex-direction: column; gap: 2px; }
.drawer-rem-text strong { font-size: 0.88rem; color: var(--ink); }
.drawer-rem-del {
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.drawer-rem-del:hover { color: var(--danger); background: #FEE2E2; }

details.drawer-rem-add {
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}
details.drawer-rem-add summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--brand);
  list-style: none;
  padding: 4px 0;
}
details.drawer-rem-add summary::-webkit-details-marker { display: none; }
details.drawer-rem-add[open] summary { color: var(--ink); }

.drawer-picker {
  background: var(--bg);
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 10px;
}
.drawer-picker-tabs {
  display: inline-flex;
  background: var(--surface);
  border-radius: 99px;
  padding: 3px;
  align-self: flex-start;
}
.rem-tab {
  background: transparent; border: none;
  padding: 5px 12px; border-radius: 99px;
  font-size: 0.82rem; font-weight: 600;
  color: var(--ink-soft); cursor: pointer;
}
.rem-tab.active { background: var(--ink); color: white; }
.rem-mode.hidden { display: none; }

.rem-quick {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.rem-quick button {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 5px 12px;
  font-size: 0.8rem; font-weight: 600;
  color: var(--ink); cursor: pointer;
}
.rem-quick button:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }

.rem-custom {
  display: flex; gap: 6px; align-items: center; margin-top: 8px;
}
.rem-custom input {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.88rem;
  font-family: inherit;
}

.rem-days {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.rem-days button {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 36px; height: 36px;
  font-size: 0.78rem; font-weight: 700;
  color: var(--ink-soft); cursor: pointer;
}
.rem-days button.on { background: var(--ink); border-color: var(--ink); color: white; }

.drawer-picker-actions {
  display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px;
}
.drawer-picker-actions button {
  background: transparent; border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 12px;
  font-size: 0.85rem; font-weight: 600;
  color: var(--ink-soft); cursor: pointer;
}
.drawer-rem-save {
  background: var(--ink) !important; color: white !important; border-color: var(--ink) !important;
}

.drawer-img {
  width: 100%; border-radius: 8px;
}

/* Parse-then-confirm box (reminder + snooze) */
.parse-box {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px;
}
.parse-input {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--ink);
  resize: vertical;
  min-height: 50px;
}
.parse-input:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.parse-input:disabled { background: var(--surface); color: var(--ink-soft); }
/* HES-143: native date/time pickers in the snooze ("Later") modal, offered
   alongside the freeform text field. */
.parse-pickers { display: flex; gap: 8px; flex-wrap: wrap; }
.parse-picker {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 120px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.parse-picker input {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--ink);
}
.parse-picker input:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.parse-picker input:disabled { background: var(--surface); color: var(--ink-soft); }
.parse-preview {
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.92rem;
}
.parse-preview.hidden { display: none; }
.parse-actions { display: flex; justify-content: flex-end; gap: 6px; }
.parse-btn {
  background: var(--ink);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.parse-btn:hover:not(:disabled) { opacity: 0.9; }
.parse-btn:disabled { opacity: 0.5; cursor: wait; }
.parse-btn.ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

.drawer-del {
  background: transparent; border: 1px solid var(--line);
  color: var(--danger); border-radius: 8px;
  padding: 10px; width: 100%;
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.drawer-del:hover { background: #FEE2E2; }

/* HES-160 slice 2: the email chain a to-do was spotted in, shown in the drawer. */
.drawer-email-btn {
  background: var(--bg); border: 1px solid var(--line);
  color: var(--ink); border-radius: 8px;
  padding: 9px 12px; width: 100%; margin-top: 8px;
  font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.drawer-email-btn:hover { background: var(--surface); }
.drawer-email-panel { margin-top: 10px; }
.drawer-email-panel.hidden { display: none; }
.email-thread {
  max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.email-msg {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px;
}
.email-msg-head {
  display: flex; justify-content: space-between; gap: 8px;
  align-items: baseline; margin-bottom: 6px;
}
.email-msg-from { font-weight: 600; font-size: 0.82rem; color: var(--ink); }
.email-msg-date { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.email-msg-body {
  font-size: 0.82rem; color: var(--ink-soft);
  line-height: 1.45; word-break: break-word;
  white-space: normal;
}
.email-open-gmail {
  display: inline-block; margin-top: 10px;
  font-size: 0.8rem; font-weight: 600; color: var(--accent, #2563EB);
  text-decoration: none;
}
.email-open-gmail:hover { text-decoration: underline; }

/* HES-160 slice 3: reply to the source email from the to-do (approve-before-send). */
.drawer-email-reply { margin-top: 8px; }
.email-reply-box { margin-top: 10px; }
.email-reply-box.hidden { display: none; }
.email-reply-draft-box.hidden { display: none; }
.email-reply-instruction,
.email-reply-draft-text {
  width: 100%; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--ink); border-radius: 8px;
  padding: 9px 12px; font-size: 0.84rem; line-height: 1.45;
  font-family: inherit; resize: vertical;
}
.email-reply-label {
  display: block; margin: 10px 0 6px;
  font-size: 0.78rem; font-weight: 600; color: var(--muted);
}
.email-reply-actions {
  display: flex; gap: 8px; margin-top: 8px;
}
.email-reply-draft,
.email-reply-send,
.email-reply-cancel {
  border-radius: 8px; padding: 8px 14px;
  font-size: 0.84rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line);
}
.email-reply-draft,
.email-reply-send {
  background: var(--accent, #2563EB); border-color: var(--accent, #2563EB); color: #fff;
}
.email-reply-draft:hover,
.email-reply-send:hover { filter: brightness(0.95); }
.email-reply-draft:disabled,
.email-reply-send:disabled { opacity: 0.6; cursor: default; }
.email-reply-cancel { background: var(--bg); color: var(--ink); }
.email-reply-cancel:hover { background: var(--surface); }
.email-reply-status {
  margin-top: 8px; font-size: 0.8rem; color: var(--muted);
  min-height: 1em;
}

@media (max-width: 600px) {
  .task-drawer { width: 100%; max-width: 100%; border-left: none; }
  /* HES-140: show the grab handle and make the whole header a drag target so
     users can swipe the sheet down to dismiss it. */
  .drawer-handle {
    display: block;
    width: 40px; height: 5px;
    margin: 8px auto 2px;
    border-radius: 999px;
    background: var(--line);
  }
  .drawer-head { touch-action: none; cursor: grab; }
}

/* ── Login (unchanged from before) ──────────────────────────────────── */

body.login {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  padding: 24px;
  overflow: auto;
}

.login-card {
  background: var(--surface);
  border-radius: 20px;
  padding: 40px 32px;
  box-shadow: var(--shadow);
  width: 100%; max-width: 360px;
  text-align: center;
  display: flex; flex-direction: column; gap: 16px;
}

.login-card .logo { font-size: 2.5rem; }
.login-card h1    { font-size: 1.8rem; font-weight: 800; }

.login-card input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 1rem;
}
.login-card input:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }

.login-card button {
  background: var(--ink);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.login-card .err { color: var(--danger); font-size: 0.9rem; }


/* ── Must do today sections ──────────────────────────────────────────── */

.must-section-head {
  list-style: none;
  display: flex; align-items: center; gap: 8px;
  padding: 2px 2px 6px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.must-section-head::before {
  content: '';
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}
.must-section-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
li + .must-section-head { margin-top: 10px; }
.must-section-hint {
  list-style: none;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 0 2px 8px;
}

/* List chip on Today-homepage rows pulled from other lists. It sits on its
   own row at the bottom-right of the card (HES-142) so it no longer competes
   with the title for width in the narrow Tracking column — which was
   squeezing the title down to one character per line. */
.row-list-chip {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface-2);
  border-radius: 99px;
  padding: 2px 8px;
  white-space: nowrap;
}
.row-list-tag-line {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* ── Today homepage — agenda layout ──────────────────────────────────── */

.board.today-page { justify-content: center; }
/* In the column-direction split (all widths now) a flex-basis would be a
   HEIGHT — so the columns are content-sized and centred by width caps only. */
.board.today-page .column-today-page {
  flex: 0 0 auto;
  width: 100%;
  max-width: 720px;
  height: auto;
  padding: 18px 22px;
  cursor: default;
}
.column-today-page .col-head-fullscreen { border-bottom: 2px solid var(--ink); padding-bottom: 12px; }
.column-today-page .col-title { font-size: 1.5rem; }
.today-date {
  margin-left: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}
.column-today-page .col-body-grid { padding: 12px 0; }
.column-today-page .grid-list { display: flex; flex-direction: column; gap: 8px; }
.column-today-page .grid-list .row { align-items: center; }
.column-today-page .must-section-head { margin-top: 16px; }
.board.today-page .column-today-page { margin-left: auto; margin-right: auto; }
.column-today-page .grid-list .row .card { min-height: 0; flex-direction: row; }
.column-today-page .grid-list .row { min-height: 0; }
/* Rosie 2026-07-31: "The to-do list cards are too big. It should be the same
   font size and overall card size as the calendar ones." Same padding as
   .cal-row .cal-card, and the body lays out as ONE line — title left, home-
   list chip inline at the right (like .cal-name-chip) instead of on its own
   row. Due dates sit inline next to the title; anything longer (actions,
   thumbnails) wraps onto a full-width line below. */
.column-today-page .grid-list .row .card { padding: 10px 14px; align-items: center; }
.column-today-page .grid-list .body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
}
/* flex-basis 0 (not auto): the name inside is itself flex:1 1 0, so an
   auto-basis name-line would size to just its chips/buttons and crush the
   title to zero width — basis 0 + grow makes it claim the row's free space.
   HES-265: basis 0 also means the wrap algorithm thinks the title needs no
   room at all, so on a phone the un-shrinkable due date + home-list chip took
   the whole line and squeezed the title to ~1ch — every letter on its own line,
   with ⏰ Later spilling over the date. A minimum title width (capped at the
   card body's own width so it can never overflow a very narrow card) makes the
   date/chip wrap onto the line below instead of crushing the title. */
.column-today-page .grid-list .body .name-line {
  flex: 1 1 0;
  min-width: min(11rem, 100%);
  align-items: center;
}
.column-today-page .grid-list .body .meta { flex: 0 0 auto; }
.column-today-page .grid-list .body .row-actions,
.column-today-page .grid-list .body .task-thumb { flex: 1 1 100%; }
.column-today-page .grid-list .row-list-tag-line { margin-top: 0; margin-left: auto; flex: 0 0 auto; }
/* HES-265, phones: a card is only ~260px wide inside, so a due date AND a
   home-list chip on the title's line leave it ~15 characters. The title takes
   the whole first line instead and the date + chip sit on the line below
   (chip still right-aligned via its margin-left:auto) — the one-line calendar-
   style card is kept for every width that can actually fit it. */
@media (max-width: 600px) {
  .column-today-page .grid-list .body .name-line { flex: 1 1 100%; }
}

/* Weather widget (HES-124) stacked above the Today split. The wrapper keeps
   the board's row model intact — it's a single flex child — while stacking
   the widget over the split, which still scrolls its columns internally. */
.today-page-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 12px;
  min-width: 0;
  /* HES-154: the wrapper is the single vertical scroll container on desktop too
     (mobile already did this via the <=760px query below). Without it, the wrap
     was pinned at the column's viewport height and the split was flex:1 1 auto /
     min-height:0, so a tall stack of weather/summary/health cards squeezed the
     split to nothing and pushed the To-dos below the fold with no way to reach
     them (the outer .column is overflow:hidden). Now the top cards scroll up out
     of the way and the whole Today page stays reachable, matching mobile. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* grow to fill when content is short (keeps the full-height panels the page has
   today) but never shrink below content (was flex:1 1 auto / min-height:0, which
   let it collapse and clip); overflow then spills to the wrapper's scroll. */
.today-page-wrap > .today-split { flex: 1 0 auto; }
.weather-widget {
  flex: 0 0 auto;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px;
}
.weather-widget[hidden] { display: none; }
/* HES-185: header row — big today summary on the left, location tabs on the
   right. Tabs wrap under the summary on narrow cards rather than overflowing. */
.ww-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; }
.ww-today { display: flex; align-items: center; gap: 14px; }
.ww-emoji { font-size: 2.2rem; line-height: 1; }
.ww-main { display: flex; flex-direction: column; min-width: 0; }
/* One-line header (HES-197): temps + muted summary share a single baseline
   row; the summary truncates with an ellipsis on narrow cards (never wraps,
   and never squeezes the temps — they're flex-fixed). */
.ww-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ww-temp { flex: 0 0 auto; font-size: 1.6rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.ww-temp .ww-lo { font-size: 1rem; font-weight: 500; color: var(--muted); }
.ww-phrase {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.9rem; color: var(--ink-soft);
}

/* Location tabs (HES-185 pt 1): compact chips — icon + short name + temp —
   with "+" to add a second place. Active chip = teal fill; clicking it opens
   the manage-location menu (HES-197). */
.ww-tabs { position: relative; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.ww-tab {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 150px;
  padding: 4px 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft);
  cursor: pointer;
}
.ww-tab:hover { border-color: var(--brand); }
.ww-tab.active { background: var(--brand-soft); border-color: var(--brand); color: var(--ink); }
.ww-tab-emoji { font-size: 0.9rem; line-height: 1; }
.ww-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ww-tab-temp { flex: 0 0 auto; }
.ww-tab-add {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: 50%;
  font: inherit; font-size: 0.85rem; font-weight: 600; line-height: 1;
  color: var(--ink-soft); cursor: pointer;
}
.ww-tab-add:hover { border-color: var(--brand); color: var(--brand); }

/* Manage-location menu (HES-197): a small popover anchored under the tabs,
   opened by clicking the ACTIVE chip. Floats over whatever follows (day strip
   / today lists) rather than pushing the card taller. */
.ww-tab-menu {
  position: absolute;
  top: calc(100% + 4px); right: 0;
  z-index: 30;
  min-width: 160px;
  padding: 4px;
  background: var(--surface); border: 1px solid var(--card-line);
  border-radius: 10px; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.ww-tab-menu[hidden] { display: none; }
.ww-menu-item {
  background: none; border: none; border-radius: 7px;
  padding: 7px 10px;
  font: inherit; font-size: 0.82rem; font-weight: 500; color: var(--ink);
  text-align: left; cursor: pointer;
}
.ww-menu-item:hover { background: var(--brand-soft); }
.ww-menu-remove { color: var(--danger); }
.ww-menu-remove:hover { background: #FEE2E2; }
.ww-menu-item:disabled { opacity: 0.5; cursor: default; }

/* Compact inline location editor (HES-185 pt 2): opened from the active tab's
   menu or the "+" tab (HES-197) — right-aligned so it hangs under the tabs
   that opened it (it still fills the card on narrow screens). */
.ww-loc-editor { margin-top: 10px; margin-left: auto; max-width: 400px; font-size: 0.82rem; color: var(--ink-soft); }
.ww-loc-editor[hidden] { display: none; }
/* Upcoming-days strip (HES-124): the full forecast in one horizontally
   scrollable row — swipe/scroll right for up to a fortnight ahead. Replaces the
   old "Next 2 weeks ▾" dropdown + expanded list. */
.ww-week {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.ww-day {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 44px;
  scroll-snap-align: start;
}
.ww-day-name { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.ww-day-emoji { font-size: 1.1rem; line-height: 1; }
.ww-day-hi { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.ww-day-lo { font-size: 0.78rem; font-weight: 500; color: var(--muted); }
/* HES-197: the fortnight strip hides behind a slim toggle at the card's
   bottom edge (default collapsed — Rosie wants the top cards small so the
   Today lists lead). The thin top border doubles as the card's old divider. */
.ww-week-toggle {
  display: block; width: 100%;
  margin-top: 8px; padding: 6px 0 0;
  background: none; border: none; border-top: 1px solid var(--line);
  font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--muted);
  cursor: pointer; text-align: center;
}
.ww-week-toggle:hover { color: var(--brand); }
/* "Use my location" — now a compact 📍 icon button in the inline editor
   (HES-124 slice 3, slimmed by HES-185). */
.ww-locate {
  flex: 0 0 auto;
  padding: 6px 9px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.ww-locate:hover { border-color: var(--brand); }
.ww-locate:disabled { opacity: 0.5; cursor: default; }
.ww-locate-msg { margin-top: 6px; color: var(--ink-soft); }
.ww-locate-msg[hidden] { display: none; }

.ww-loc-form { display: flex; gap: 6px; margin-bottom: 6px; }
.ww-loc-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  font: inherit;
  color: var(--ink);
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.ww-loc-input:focus { outline: none; border-color: var(--brand); }
.ww-loc-set {
  flex: 0 0 auto;
  padding: 6px 12px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.ww-loc-set:disabled { opacity: 0.6; cursor: default; }
/* Location typeahead dropdown (HES-163): matches under the input, sits over
   the widget while open. */
.ww-loc-search { position: relative; }
.ww-loc-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin: 2px 0 0;
  padding: 4px;
  list-style: none;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow, 0 6px 18px rgba(0, 0, 0, 0.12));
  max-height: 220px;
  overflow-y: auto;
}
.ww-loc-suggest[hidden] { display: none; }
.ww-loc-opt {
  padding: 7px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink);
}
.ww-loc-opt:hover,
.ww-loc-opt.active { background: var(--brand-soft); }

/* ── Your day at a glance — health summary ───────────────────────────────
   HES-124 slice 5 → three boxes side by side (HES-184) → made sleek by
   HES-185. Each box: a minimal small-caps label row (small icon inline), one
   concise status/stat line, then at most one row of compact source lines +
   ONE outlined "+ Connect" affordance (a tiny menu on Energy, a direct button
   on Cycle). Pending boxes get a soft fill instead of the old dashed border,
   so the card sits visually calm next to the weather card. */
.health-summary {
  flex: 0 0 auto;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px;
}
.health-summary[hidden] { display: none; }
.hs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.hs-title { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
/* "Hide" / "Show" — the HES-266 toggle. Big enough to hit. */
.hs-read-btn {
  flex: 0 0 auto;
  padding: 5px 14px;
  background: transparent;
  border: 1.5px solid var(--brand);
  border-radius: 999px;
  font: inherit; font-size: 0.82rem; font-weight: 700;
  color: var(--brand);
  cursor: pointer;
}
.hs-read-btn:hover { background: var(--brand-soft); }
/* HES-266: hidden state — a slim bar holding just the title and "Show". */
.health-summary.hs-collapsed { padding-top: 12px; padding-bottom: 12px; }
.health-summary.hs-collapsed .hs-head { margin-bottom: 0; }
.hs-list { display: flex; flex-direction: column; gap: 8px; }
.hs-metric {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.hs-metric.hs-pending { background: rgba(241, 239, 232, 0.45); }
.hs-top { display: flex; align-items: center; gap: 6px; }
.hs-emoji { font-size: 0.95rem; line-height: 1; flex: 0 0 auto; }
.hs-label {
  font-size: 0.7rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.hs-text { font-size: 0.86rem; color: var(--ink); line-height: 1.35; }
.hs-metric.hs-pending .hs-text { color: var(--ink-soft); }
/* HES-201: provenance + freshness subline ("via Apple Health · updated 07:32"). */
.hs-sub { font-size: 0.72rem; color: var(--ink-soft); margin-top: 2px; }
/* Sources + connect row: compact "name · state · ✕" lines and the one
   outlined Connect control, wrapping inside the box, never out of it. */
.hs-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 5px; min-width: 0; }
/* A source line may wrap internally (state + ✕ drop under the name) in the
   narrow third-width boxes rather than ever clipping the app's name. */
.hs-src { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; font-size: 0.76rem; min-width: 0; }
.hs-src-name { font-weight: 600; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.hs-src-state { color: var(--muted); }
.hs-src-state.on { color: var(--brand); font-weight: 600; }
.hs-src-x {
  background: none; border: none; padding: 0 2px;
  font: inherit; font-size: 0.7rem; line-height: 1; color: var(--muted); cursor: pointer;
}
.hs-src-x:hover { color: var(--danger); }
.hs-connect-wrap { position: relative; display: inline-flex; }
.hs-connect-btn {
  flex: 0 0 auto;
  background: transparent; border: 1px solid var(--brand); color: var(--brand);
  padding: 3px 10px; border-radius: 999px;
  font: inherit; font-size: 0.76rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.hs-connect-btn:hover { background: var(--brand-soft); }
/* Energy's tiny connect menu: Oura / Apple Health / another app… */
.hs-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  min-width: 185px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 18px rgba(31, 37, 48, 0.14);
}
.hs-menu[hidden] { display: none; }
/* HES-203 pt 3: "when you click 'connect' for the energy or cycle tracking the
   drop down list doesn't look much like a list it looks like random free text,
   make it clearer that it's a clickable list of options." Touch has no hover,
   so each option needs to look tappable standing still: its own bordered
   surface row, a "›" chevron, and a pressed state. */
.hs-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left;
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 9px 10px; border-radius: 8px;
  font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--ink); cursor: pointer;
}
.hs-menu-item + .hs-menu-item { margin-top: 4px; }
.hs-menu-item::after { content: '›'; color: var(--muted); font-weight: 700; }
.hs-menu-item:hover { background: var(--brand-soft); border-color: var(--brand); }
.hs-menu-item:active { background: var(--brand-soft); }
.hs-menu-item[hidden] { display: none; }
.hs-menu-add { display: flex; gap: 6px; padding: 5px; margin-top: 4px; }
.hs-menu-add[hidden] { display: none; }
.hs-menu-add-input {
  flex: 1 1 auto; min-width: 0;
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: 0.8rem; background: var(--surface); color: var(--ink);
}
.hs-menu-add-input:focus { outline: none; border-color: var(--brand); }
.hs-menu-add-btn {
  flex: 0 0 auto;
  padding: 5px 10px; border: none; border-radius: 6px;
  background: var(--brand); color: #fff;
  font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.hs-msg { margin-top: 8px; font-size: 0.82rem; color: var(--ink-soft); }
.hs-msg[hidden] { display: none; }

/* ── HES-199/203, all widths since 2026-07-31: the weather lives INSIDE the
   "Your day at a glance" row as its first card; the standalone card only
   appears expanded (wrap.weather-open). [hidden] must stay display:none
   explicitly — .hs-metric's display:flex would otherwise override the hidden
   attribute's UA styling. */
.hs-weather[hidden] { display: none; }
.hs-weather:not([hidden]) {
  display: flex;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hs-weather-line {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px;
  min-width: 0; margin-top: 3px;
}
.hs-weather-temp { flex: 0 0 auto; font-size: 1.05rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.hs-weather-lo { font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.hs-weather-phrase {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.78rem; line-height: 1.35; color: var(--ink-soft);
}
.hs-weather-loc { margin-top: auto; padding-top: 4px; font-size: 0.68rem; color: var(--muted); }

/* The standalone weather card is hidden until the compact glance card expands
   it; flex `order` slots it between the glance row and the Today|Tracking
   toggle. (These used to live in the ≤760px block; the desktop grid is gone.) */
.today-page-wrap > .weather-widget { display: none; }
.today-page-wrap.weather-open > .weather-widget:not([hidden]) { display: block; order: 1; }
/* Safety valve: if the glance summary ever fails to LOAD, its weather card
   can't be tapped — show the full forecast card directly instead. Not when
   the glance was deliberately hidden (.glance-read; HES-266). */
.today-page-wrap:not(.glance-read):has(> .health-summary[hidden]) > .weather-widget:not([hidden]) { display: block; order: 1; }
.today-page-wrap > .health-summary { order: 0; }
.today-page-wrap > .today-seg { order: 2; }
.today-page-wrap > .today-split { order: 3; }

/* ✕ on the expanded forecast card — the way back to the glance row. */
.ww-close {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: 0.8rem; line-height: 1;
  color: var(--ink-soft); cursor: pointer;
}
.ww-close:hover { border-color: var(--brand); color: var(--ink); }

/* From tablet width up the expanded forecast TAKES OVER the glance box
   (Rosie: "it should take over the full box … but easy to toggle back");
   on mobile the carousel stays and the card opens beneath it. */
@media (min-width: 761px) {
  .today-page-wrap.weather-open > .health-summary { display: none; }
}

/* HES-184: three equal boxes side by side wherever the card has room (the
   tablet full-width band and the ≥1024 grid cell). Phones keep the stacked
   boxes — three-across at 375px would be unreadable. flex 1 1 0 means a
   missing segment (async + best-effort) leaves the survivors sharing the
   row evenly — 2-up or full-width, never a hole. */
@media (min-width: 761px) {
  .hs-list { flex-direction: row; align-items: stretch; gap: 10px; }
  .hs-metric { flex: 1 1 0; min-height: 84px; }
  /* The status line hugs the label row; the sources/connect row sits at the
     bottom edge of every box so the three feet align across the card. */
  .hs-foot { margin-top: auto; padding-top: 6px; }
}


/* ── Three-tier list sections (Must do today / Next up / Backlog) ────── */

.sec-head {
  list-style: none;
  display: flex; align-items: center; gap: 8px;
  padding: 2px 2px 6px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  user-select: none;
}
.sec-head .sec-caret {
  /* HES-133: sit at the far right of the header (after the dotted rule,
     which is the order:0 ::after) with a bigger icon + tap area. */
  order: 1;
  font-size: 0.95rem;
  line-height: 1;
  color: currentColor;
  opacity: 0.55;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  margin: -6px -4px -6px 4px;   /* wider hit area without growing row height */
}
.sec-head .sec-count {
  font-size: 0.62rem;
  font-weight: 700;
  color: currentColor;
  opacity: 0.65;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 1px 7px;
  letter-spacing: 0;
}
.sec-head.sec-collapsed { opacity: 0.75; }
.sec-head:hover .sec-caret { opacity: 1; }
.sec-head::before {
  content: '';
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}
.sec-head::after {
  content: '';
  flex: 1;
  height: 0;
  border-top: 1.5px dotted var(--line);
}
li + .sec-head { margin-top: 14px; border-top: 1.5px dotted var(--line); padding-top: 12px; }
/* Rows of a collapsed section stay in the DOM (so expand/collapse needs no
   board rebuild — anti-jump, Rosie 2026-08-04) but render nothing. */
li.sec-row-hidden { display: none; }
.sec-must    { color: var(--brand); }
.sec-must::before    { background: var(--brand); }
.sec-next    { color: #4E93A3; }
.sec-next::before    { background: #BFDEE5; }
.sec-backlog { color: var(--muted); }
.sec-backlog::before { background: transparent; border: 1.5px solid var(--line); }

/* HES-244: Today-page collapsible sections (Calendar / Due today /
   lists) reuse the .sec-head language; each gets its own accent dot. */
.sec-cal   { color: #4E93A3; }
.sec-cal::before   { background: #BFDEE5; }
.sec-due   { color: var(--brand); }
.sec-due::before   { background: var(--brand); }
.sec-lists { color: var(--muted); }
.sec-lists::before { background: transparent; border: 1.5px solid var(--line); }

/* Tracking section — top of every list, brand yellow, smaller than the rest. */
.sec-tracking { color: #8A6D1A; font-size: 0.66rem; padding-bottom: 4px; }
.sec-tracking::before { background: #FBE07E; width: 8px; height: 8px; }
li.sec-tracking + .sec-head { margin-top: 10px; }
.row-tracking .name { font-size: 0.82rem; }
.row-tracking .card { padding-top: 6px; padding-bottom: 6px; }

/* Tracking-flavoured columns (own Tracking list + other people's lists)
   highlight in brand yellow instead of teal. */
.column-tracking .sec-must           { color: #8A6D1A; }
.column-tracking .sec-must::before   { background: #FBE07E; }
.column-tracking .sec-next           { color: #A8892E; }
.column-tracking .sec-next::before   { background: #FDF0C4; }

/* ── Today page: ONE centred list, Today|Tracking toggle on top ──────────
   (2026-07-31: the desktop side-by-side split is gone — Rosie: "combine the
   tracking list and the today list into one by moving it into the center and
   taking a toggle at the top to go between the two." Both columns still
   render; the segmented control shows exactly one, at every width.) */
.today-split {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  align-items: stretch;
  min-width: 0;
  height: auto;
}
.today-split > .column-fullscreen,
.today-split > .today-tracking-col {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  height: auto;
}
/* Columns are content-height and the page wrap is the single scroller. */
.today-split .col-body { overflow-y: visible; }
.today-split > .column-fullscreen { overflow: visible; }
.today-tracking-col .col-head-fullscreen { border-bottom-color: #E9C93F; }

/* The Today/Tracking segmented toggle — same cap + centring as the columns. */
.today-seg {
  display: flex;
  gap: 2px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.today-seg-btn {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px;
  border: none; border-radius: 999px;
  background: transparent;
  font: inherit; font-size: 0.86rem; font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
}
.today-seg-btn.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(31, 37, 48, 0.14);
}
.today-seg-count {
  background: #FBE07E;
  color: #6B5310;
  border-radius: 99px;
  padding: 0 7px;
  font-size: 0.7rem;
  line-height: 1.5;
}
.today-split:not(.mobile-tab-tracking) > .today-tracking-col { display: none; }
.today-split.mobile-tab-tracking > .column-fullscreen:not(.today-tracking-col) { display: none; }

/* Stacked per-list groups inside the Today tracking column */
.col-body-tracking {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}
.tracking-group {
  border: 1.5px dashed transparent;
  border-radius: 14px;
  padding: 8px;
  margin: 0 -8px;
  transition: background 0.15s, border-color 0.15s;
}
.tracking-group.drag-over {
  border-color: #E9C93F;
  background: rgba(251, 224, 126, 0.28);
}
.tracking-group-head {
  display: flex; align-items: center; gap: 7px;
  padding: 2px 2px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8A6D1A;
}
.tracking-group-head::after {
  content: '';
  flex: 1;
  border-top: 1.5px dotted var(--line);
}
.tracking-group-head .tg-emoji { font-size: 0.9rem; }
.tracking-group-head .tg-count {
  background: #FBE07E;
  color: #6B5310;
  border-radius: 99px;
  padding: 1px 7px;
  font-size: 0.7rem;
}
.tg-empty {
  font-size: 0.8rem;
  color: var(--muted);
  padding: 4px 2px 2px;
}
@media (max-width: 760px) {
  /* HES-141: let the whole Today page scroll on mobile so the weather card can
     be pushed off-screen to bring the Today list to the top. Previously the
     wrapper was pinned at viewport height and only the inner split scrolled,
     trapping the weather card on screen. Now the wrapper itself is the single
     scroll container and the split + tracking body flow at natural height
     beneath the weather card. */
  .today-page-wrap {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .today-page-wrap > .today-split { flex: 0 0 auto; }
  /* (Column direction, natural-height columns and visible col-body moved to
     the base rules — the split is one centred column at every width now.) */

  /* HES-206: "can we fix the add a to do box to the bottom of the screen here
     so you can scroll your list up and down and always be able to add things."
     The wrap is the page's scroller (HES-141/172), so the add form sticks to
     the bottom of that scrollport instead of sitting at the end of a long
     list. .column's overflow:hidden would otherwise be the nearest scrollport
     and swallow the stick; the columns are height:auto here, so there's
     nothing left for it to clip anyway. Opaque background = list scrolls
     behind the bar, and it drops back to its natural spot at the list's end. */
  .today-split .col-add-fullscreen {
    position: sticky;
    bottom: 0;
    z-index: 6;
    max-width: none;
    margin-top: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
  }

  /* HES-195 pt 3: "you can center the list on the screen" — a slightly
     narrower cap at phablet widths. The .board.today-page pair matches the
     base 720px rule's three-class specificity so 640 wins here. The toggle
     and hide/show behaviour live in the base rules now (all widths). */
  .board.today-page .today-split > .column-fullscreen,
  .board.today-page .today-split > .today-tracking-col,
  .today-seg {
    max-width: 640px;
  }

  /* ── HES-195 pt 1: the three glance boxes become a horizontal carousel ──
     Rosie: "on mobile these cards should be stacked horizontally next to each
     other not below one another, it should be scrollable horizontally." And
     (Rosie, same day): "narrow enough that all three data points are visible
     or as close as possible" — so boxes are content-width (~190px), showing
     as many as fit: ~1.8 at 375px, all three from ~620px. Scroll-snap keeps
     swipes tidy; the strip bleeds to the card's padding edge for the peek. */
  .hs-list {
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 -12px;
    padding: 0 12px;
    scroll-padding: 0 12px;
  }
  .hs-list::-webkit-scrollbar { display: none; }
  .hs-metric { flex: 0 0 clamp(178px, 46%, 210px); scroll-snap-align: start; }
  /* A dropdown can't overhang a scroll container (its vertical overflow gets
     clipped), so inside the carousel the Connect menu renders INLINE in the
     box's foot row instead of floating: the wrap dissolves (display:contents
     keeps the DOM, so the JS toggling still finds everything) and the menu
     takes a full row under the button. */
  .hs-connect-wrap { display: contents; }
  .hs-menu {
    position: static;
    flex: 1 0 100%;
    min-width: 0;
    margin-top: 4px;
    box-shadow: none;
    background: var(--bg);
  }

  /* ── HES-195 pt 4: "The weather and 'day at a glance' can both be smaller"
     — tighter paddings, smaller big-temp type, slimmer 14-day strip, reduced
     stacking gaps. Compact, not cramped: every size stays readable. */
  .today-page-wrap { gap: 8px; }
  .weather-widget { padding: 10px 12px; }
  .health-summary { padding: 10px 12px; }
  .ww-emoji { font-size: 1.7rem; }
  .ww-temp { font-size: 1.25rem; }
  .ww-temp .ww-lo { font-size: 0.85rem; }
  .ww-phrase { font-size: 0.82rem; }
  .ww-week { gap: 6px; margin-top: 8px; padding-top: 8px; }
  .ww-day { min-width: 36px; }
  .ww-day-name { font-size: 0.64rem; }
  .ww-day-emoji { font-size: 0.95rem; }
  .ww-day-hi { font-size: 0.78rem; }
  .ww-day-lo { font-size: 0.72rem; }
  .hs-head { margin-bottom: 6px; }
  .hs-metric { padding: 8px 10px; }
  .hs-text { font-size: 0.8rem; }

  /* (HES-199/203 weather-in-glance rules moved to the base section — the
     compact card, the hide on the standalone widget and the expand ordering
     apply at every width now.) */
}

/* ── Today page, ≥1024 (2026-07-31 redesign) ─────────────────────────────
   The old HES-183 grid (standalone weather top-left, glance top-right) is
   gone: the weather is a card inside the centred glance box at every width,
   and the Today/Tracking split is one centred toggled list. Desktop just gets
   roomier caps — the glance box wide enough for its four cards in a row, and
   the expanded forecast matching it. */
@media (min-width: 1024px) {
  .today-page-wrap > .health-summary,
  .today-page-wrap > .weather-widget {
    max-width: 860px;
  }
}


/* ── Roadmap tab (HES-109) — founder-only plain-English build queue ────── */

.rd-wrap { max-width: 680px; margin: 0 auto; padding-bottom: 80px; }
.rd-section {
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
}
.rd-section h2 {
  font-size: 1.02rem; font-weight: 700; letter-spacing: -0.2px;
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.rd-count {
  background: var(--surface-2); color: var(--ink-soft);
  font-size: 0.75rem; font-weight: 600;
  border-radius: 99px; padding: 1px 8px;
}
.rd-hint { color: var(--muted); font-size: 0.8rem; margin: -2px 0 10px; }
.rd-empty { color: var(--muted); font-size: 0.9rem; padding: 8px 2px; }

/* Belt status light (HES-117) — colour is server-computed, never guessed:
   green pulsing = actively building; amber steady = between builds;
   red = needs Rosie (blocked) or paused. */
.rd-light {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.rd-light-building {
  background: var(--green);
  animation: rd-pulse 2s ease-in-out infinite;
}
.rd-light-idle { background: #E8A33D; }
.rd-light-blocked, .rd-light-paused { background: #D92D20; }
@keyframes rd-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}
.rd-belt-detail { margin-top: -4px; }
.rd-belt-blocked, .rd-belt-paused { color: #B42318; }

/* ⏸/▶ belt toggle — small pill pushed to the right of the section header */
.rd-belt-btn {
  margin-left: auto; flex-shrink: 0;
  background: var(--surface-2); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 99px;
  padding: 4px 11px; font-size: 0.74rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.rd-belt-btn:hover { border-color: var(--brand); color: var(--ink); }
.rd-belt-btn-paused { background: #FDE8E8; color: #B42318; border-color: #F3B6B0; }

/* ⏫ build-next on Up next rows */
.rd-buildnext {
  background: none; border: none; cursor: pointer;
  font-size: 0.95rem; padding: 6px 2px; flex-shrink: 0; opacity: 0.6;
}
.rd-buildnext:hover { opacity: 1; }

/* ⏸/▶ per-ticket pause (HES-136) */
.rd-pause {
  background: none; border: none; cursor: pointer;
  font-size: 0.95rem; padding: 6px 4px; flex-shrink: 0; opacity: 0.6;
}
.rd-pause:hover { opacity: 1; }

/* While a drag is live, Building now advertises itself as the jump-the-queue
   drop target (HES-117). */
.rd-drag-live #rd-buildnow {
  outline: 1.5px dashed var(--brand); outline-offset: 2px;
}

.rd-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 6px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
}
.rd-row:first-of-type { border-top: none; }
.rd-row-main { flex: 1; min-width: 0; }
.rd-row-title { font-size: 0.95rem; font-weight: 550; }
.rd-row-sub {
  color: var(--ink-soft); font-size: 0.8rem; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rd-row-shipped .rd-row-title { font-weight: 450; }
.rd-date { color: var(--muted); font-size: 0.78rem; flex-shrink: 0; }

.rd-handle {
  cursor: grab; touch-action: none; user-select: none;
  color: var(--muted); font-size: 1.05rem; padding: 6px 4px; flex-shrink: 0;
}
.rd-dragging {
  opacity: 0.85; box-shadow: 0 6px 18px rgba(31,37,48,0.15);
  border: 1px dashed var(--brand); position: relative; z-index: 5;
}
/* HES-114: while a row is mid-drag, empty-state hints get out of the way and
   both dropzones keep a minimum height so an empty Backlog is droppable. */
.rd-drag-live .rd-dropzone { min-height: 44px; border-radius: 8px; }
.rd-drag-live .rd-dropzone .rd-empty { display: none; }
.rd-delete {
  background: none; border: none; color: var(--muted);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  padding: 6px 8px; border-radius: 8px; flex-shrink: 0;
}
.rd-delete:hover { color: var(--danger); background: var(--surface-2); }

.rd-chip {
  display: inline-block; font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  border-radius: 99px; padding: 1px 7px; vertical-align: 2px; margin-left: 4px;
}
.rd-chip-bug     { background: #FDE8E8; color: #B42318; }
.rd-chip-idea    { background: #FEF4D6; color: #92600A; }
.rd-chip-blocked { background: var(--brand-soft); color: var(--brand); }
/* HES-126: brand-new feature vs improving something already live */
.rd-chip-feature     { background: #E7F0FE; color: #1D4ED8; }
.rd-chip-improvement { background: #EEE8FB; color: #6D28D9; }
/* HES-122: staged "Next up" cards inside the Building-now box */
.rd-chip-nextup  { background: #E3F4E8; color: #15803D; }
.rd-row-staged   { background: var(--surface-2); }
/* HES-136: per-ticket paused cards */
.rd-chip-paused  { background: #EAECEF; color: #52606D; }
.rd-row-paused   { opacity: 0.7; }
/* HES-190: alpha users' ▲ sooner votes (hidden at zero) */
.rd-chip-votes   { background: #DDF0F4; color: #17667A; }

/* Needs-you strip */
.rd-needs-you { border-color: var(--brand); }
.rd-decision { border-top: 1px solid var(--line); padding: 10px 2px; }
.rd-decision:first-of-type { border-top: none; }
.rd-decision-q { font-size: 0.92rem; margin-bottom: 8px; }
.rd-decision-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-opt {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 99px; padding: 7px 14px; font-size: 0.85rem;
  cursor: pointer; color: var(--ink);
}
.rd-opt:hover { border-color: var(--brand); }
.rd-opt-rec { border-color: var(--brand); background: var(--brand-soft); }
.rd-opt-free { color: var(--muted); border-style: dashed; }

/* HES-130: inline free-text answer box under the option pills */
.rd-free { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.rd-free-input {
  flex: 1; resize: none; overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--brand);
  border-radius: 12px; padding: 9px 12px; font-size: 0.9rem;
  font-family: inherit; color: var(--ink); line-height: 1.35;
  min-height: 40px; max-height: 160px;
}
.rd-free-input:focus { outline: none; box-shadow: 0 0 0 2px var(--brand-soft); }
.rd-free-actions { display: flex; align-items: center; gap: 4px; }
.rd-free-send {
  background: var(--brand); color: #fff; border: none;
  border-radius: 99px; padding: 8px 16px; font-size: 0.85rem; cursor: pointer;
}
.rd-free-send:disabled { opacity: 0.45; cursor: default; }
.rd-free-cancel {
  background: none; border: none; color: var(--muted);
  font-size: 1.1rem; line-height: 1; padding: 8px 6px; cursor: pointer;
}
.rd-free-cancel:hover { color: var(--ink); }

/* Shipped (collapsed) */
/* HES-152: every roadmap section collapses — tap anywhere on the header.
   The chevron sits at the FAR RIGHT with a generous ≥40px tap target (same
   convention as the HES-133 dashboard fix); negative margins keep the big
   target from inflating the header's visual height. */
.rd-sec-head { cursor: pointer; user-select: none; -webkit-user-select: none; }
.rd-sec-toggle {
  margin: -8px -10px -8px auto; flex-shrink: 0;
  min-width: 44px; min-height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0;
  color: var(--muted); font-size: 1rem; cursor: pointer;
}
.rd-belt-btn ~ .rd-sec-toggle { margin-left: 0; }
.rd-collapsed .rd-sec-head { margin-bottom: 0; }
/* Dragging over a COLLAPSED section: the header highlights to show the drop
   will land inside without expanding it. */
.rd-drop-onto { outline: 2px dashed var(--brand); outline-offset: 2px; }

/* ── Release gate (HES-149): Waiting to test → ticks → Next deploy → Deployed ── */

/* Big friendly tick-circle on Waiting-to-test rows; filled in the box. */
.rd-tick {
  width: 26px; height: 26px; flex-shrink: 0; cursor: pointer;
  border: 2px solid var(--line); border-radius: 50%;
  background: var(--surface); color: transparent;
  font-size: 0.9rem; line-height: 1; padding: 0;
  transition: border-color 0.15s, background 0.15s;
}
.rd-tick:hover { border-color: var(--green, #16A34A); }
.rd-tick-on {
  background: var(--green, #16A34A); border-color: var(--green, #16A34A);
  color: #fff; font-weight: 700;
}
.rd-tick-on:hover { opacity: 0.85; border-color: var(--green, #16A34A); }

/* 👎 needs changes on Waiting-to-test rows */
.rd-thumbsdown {
  background: none; border: none; cursor: pointer;
  font-size: 0.95rem; padding: 6px 2px; flex-shrink: 0;
  opacity: 0.45; filter: grayscale(1);
}
.rd-thumbsdown:hover { opacity: 1; filter: none; }

/* Sent back by Rosie with feedback — front of the build queue */
.rd-chip-rework { background: #FDEBD7; color: #B45309; }

/* HES-151/HES-152: deployed but not ticked yet (pre-gate backfill + deploy riders) — amber */
.rd-chip-untested { background: #FEF4D6; color: #92600A; border: 1px solid #F1D48A; }
/* One-time group header over the "Before the button" run in Deployed */
.rd-release-head {
  color: var(--muted); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin: 10px 0 4px; padding-top: 8px; border-top: 1px dashed var(--line);
}

/* The 🚀 Next-deploy box */
.rd-nextdeploy { border-color: var(--brand); }
.rd-deploy-btn {
  display: block; width: 100%; margin-top: 12px;
  background: var(--brand); color: #fff; border: none;
  border-radius: 12px; padding: 12px; font-size: 0.98rem; font-weight: 700;
  cursor: pointer;
}
.rd-deploy-btn:hover { opacity: 0.92; }
.rd-deploy-btn:disabled { opacity: 0.6; cursor: default; }
.rd-smallprint { color: var(--muted); font-size: 0.74rem; margin-top: 8px; }
.rd-deploying { color: var(--brand); font-weight: 600; }

/* 👎 inline feedback box (mirrors the HES-130 free-text look) */
.rd-fb { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; }
.rd-fb.hidden { display: none; }
.rd-fb-input {
  flex: 1; resize: none; overflow-y: auto; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--brand);
  border-radius: 12px; padding: 9px 12px; font-size: 0.9rem;
  font-family: inherit; color: var(--ink); line-height: 1.35;
  min-height: 40px; max-height: 160px;
}
.rd-fb-input:focus { outline: none; box-shadow: 0 0 0 2px var(--brand-soft); }
.rd-fb-actions { display: flex; align-items: center; gap: 4px; }
.rd-fb-send {
  background: var(--brand); color: #fff; border: none; white-space: nowrap;
  border-radius: 99px; padding: 8px 14px; font-size: 0.85rem; cursor: pointer;
}
.rd-fb-send:disabled { opacity: 0.45; cursor: default; }
.rd-fb-cancel {
  background: none; border: none; color: var(--muted);
  font-size: 1.1rem; line-height: 1; padding: 8px 6px; cursor: pointer;
}
.rd-fb-cancel:hover { color: var(--ink); }

/* Drawer "What to test" block */
.rdc-testbrief {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px; margin: 10px 0 4px;
}
.rdc-tb-head { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--ink-soft); margin-bottom: 6px; }
.rdc-tb-list { margin: 0 0 4px 18px; font-size: 0.9rem; }
.rdc-tb-list li { margin-bottom: 3px; }
.rdc-tb-fallback { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 4px; }
.rdc-tb-live { font-size: 0.78rem; color: #92600A; margin: 4px 0; }
.rdc-tb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rdc-approve {
  background: var(--surface); border: 1.5px solid var(--green, #16A34A);
  color: #157F3D; border-radius: 99px; padding: 8px 14px;
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.rdc-approve-on { background: var(--green, #16A34A); color: #fff; }
.rdc-changes {
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-soft); border-radius: 99px; padding: 8px 14px;
  font-size: 0.85rem; cursor: pointer;
}
.rdc-changes:hover { border-color: #B45309; color: #B45309; }

/* Add an idea */
.rd-add { padding: 10px; }
#rd-idea-form { display: flex; gap: 8px; flex-wrap: wrap; }
/* Idea/Bug toggle (2026-08-04). Segmented pill; the lit side is the one that
   will be filed. On a phone the input wraps to its own line beneath it. */
.rd-kind {
  display: inline-flex; flex: 0 0 auto; align-items: stretch;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--bg);
}
.rd-kind-btn {
  background: none; border: none; cursor: pointer;
  padding: 10px 12px; font-size: 0.85rem; font-weight: 600;
  color: var(--ink-soft); white-space: nowrap; line-height: 1;
}
.rd-kind-btn + .rd-kind-btn { border-left: 1px solid var(--line); }
.rd-kind-btn.is-on { background: var(--brand); color: #fff; }
.rd-kind-hint {
  margin-top: 8px; font-size: 0.82rem; color: var(--muted, #6b7280);
}
.rd-kind-hint.hidden { display: none; }
#rd-idea-input {
  flex: 1 1 160px; min-width: 0;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-size: 0.92rem; background: var(--bg);
}
#rd-idea-input:focus { outline: none; border-color: var(--brand); }
/* Direct child only — the Idea/Bug toggle's buttons sit inside .rd-kind and
   must keep their own styling, or both halves render as if they were lit. */
#rd-idea-form > button {
  background: var(--brand); color: #fff; border: none;
  border-radius: 10px; padding: 10px 18px; font-size: 0.92rem;
  font-weight: 600; cursor: pointer;
}
/* HES-137: attach-a-photo control on the "Add an idea" box */
.rd-idea-photo {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 42px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg); font-size: 1.1rem;
  cursor: pointer; user-select: none;
}
.rd-idea-photo:hover { border-color: var(--brand); }
.rd-idea-photo-name {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; font-size: 0.82rem; color: var(--muted, #6b7280);
}
.rd-idea-photo-name button {
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 0.9rem; padding: 0 2px; line-height: 1;
}

/* HES-268: drag-an-image-anywhere drop zone for the "Add an idea" box.
   pointer-events:none so it never intercepts the drop landing on #roadmap. */
.rd-drop-overlay {
  position: fixed; inset: 0; z-index: 190;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  background: rgba(37, 99, 235, 0.08);
  border: 3px dashed var(--brand);
  border-radius: 12px;
}
.rd-drop-overlay.hidden { display: none; }
.rd-drop-hint {
  background: var(--brand); color: #fff;
  padding: 12px 20px; border-radius: 12px;
  font-size: 1rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(31,37,48,0.25);
}

/* Undo toast */
.rd-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom));
  background: var(--ink); color: #fff;
  border-radius: 12px; padding: 11px 16px; font-size: 0.9rem;
  box-shadow: 0 8px 24px rgba(31,37,48,0.25); z-index: 200;
  max-width: min(92vw, 480px);
}
.rd-toast button {
  background: none; border: none; color: #FBE07E;
  font-weight: 700; font-size: 0.9rem; cursor: pointer; margin-left: 10px;
}

@media (max-width: 480px) {
  #roadmap.page-view { padding: 12px 10px 40px; }
  .rd-section { padding: 12px; }
}

/* ── Roadmap ticket chat drawer (HES-110) ─────────────────────────────── */

.rd-clickable { cursor: pointer; }
.rd-clickable:hover { background: var(--surface-2); }

.rdc-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 18, 24, 0.35);
  backdrop-filter: blur(2px);
  animation: scrim-in 0.18s ease-out;
}
.rdc-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: 400px; max-width: 92vw;
  background: var(--bg);
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px rgba(15, 18, 24, 0.15);
  display: flex; flex-direction: column;
  animation: drawer-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding-bottom: env(safe-area-inset-bottom);
}

.rdc-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.rdc-back {
  background: transparent; border: none;
  color: var(--ink-soft); font-size: 1.3rem; line-height: 1;
  width: 36px; height: 36px; border-radius: 50%;
  cursor: pointer; flex-shrink: 0;
}
.rdc-back:hover { background: var(--line); color: var(--ink); }
.rdc-head-main { flex: 1; min-width: 0; }
.rdc-ident {
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.2px;
  color: var(--ink-soft);
}

/* ── HES-112: one scroll container — title + brief + thread scroll together;
   the slim head bar, HQ strip and input stay pinned. ─────────────────────── */
.rdc-body {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
  -webkit-overflow-scrolling: touch;
}
/* Inside the drawer the thread is plain flow content (the body scrolls, not
   the thread) — the base .rdc-thread flex/overflow stays for the HQ tab. */
.rdc-drawer .rdc-thread { flex: 0 0 auto; overflow-y: visible; }
.rdc-drawer .rdc-empty { margin: 18px 12px; }

.rdc-ticket {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.rdc-title-full {
  margin: 0;
  font-weight: 700; font-size: 1.05rem; line-height: 1.35;
  letter-spacing: -0.2px; color: var(--ink);
  overflow-wrap: anywhere;   /* full title, always — never truncated */
}
.rdc-ticket-meta { margin-top: 8px; }

/* The brief (issue description), rendered readably + editable in place */
.rdc-desc { position: relative; margin-top: 10px; padding-right: 34px; }
.rdc-desc-body { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.5; }
.rdc-desc-body p { margin: 0 0 8px; }
.rdc-desc-body p:last-child { margin-bottom: 0; }
.rdc-desc-body .rdc-md-h { font-weight: 700; color: var(--ink); margin-top: 10px; }
.rdc-desc-body ul, .rdc-desc-body ol { margin: 0 0 8px; padding-left: 20px; }
.rdc-desc-body ul { list-style: disc; }
.rdc-desc-body ol { list-style: decimal; }
.rdc-desc-body li { margin: 2px 0; }
.rdc-desc-body blockquote {
  margin: 0 0 8px; padding: 2px 10px;
  border-left: 3px solid var(--line); color: var(--muted); font-style: italic;
}
.rdc-desc-body pre {
  margin: 0 0 8px; padding: 8px 10px;
  background: var(--surface-2); border-radius: 8px;
  font-size: 0.8rem; overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}
.rdc-desc-body code { background: var(--surface-2); border-radius: 4px; padding: 1px 4px; font-size: 0.82rem; }
.rdc-desc-empty { color: var(--muted); font-style: italic; }
.rdc-desc-editbtn {
  position: absolute; top: -2px; right: 0;
  background: transparent; border: none;
  font-size: 0.9rem; line-height: 1;
  width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; opacity: 0.6;
}
.rdc-desc-editbtn:hover { background: var(--surface-2); opacity: 1; }
.rdc-desc-input {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--brand); border-radius: 10px;
  padding: 10px 12px; font-size: 16px;   /* 16px stops iOS zoom-on-focus */
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.45; background: var(--surface);
  resize: vertical; min-height: 140px;
}
.rdc-desc-input:focus { outline: none; }
.rdc-desc-actions { display: flex; gap: 8px; margin-top: 8px; }
.rdc-desc-save {
  background: var(--brand); color: #fff;
  border: none; border-radius: 8px;
  padding: 7px 16px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.rdc-desc-save:disabled { opacity: 0.5; cursor: default; }
.rdc-desc-cancel {
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 14px; font-size: 0.85rem; cursor: pointer;
}
.rdc-desc-cancel:hover { background: var(--surface-2); }

.rdc-status { flex-shrink: 0; }
.rdc-status-building { background: #E7F6EC; color: #157F3D; }
.rdc-status-upnext   { background: var(--surface-2); color: var(--ink-soft); }
.rdc-status-blocked  { background: var(--brand-soft); color: var(--brand); }
.rdc-status-test     { background: #FEF4D6; color: #92600A; }
.rdc-status-shipped  { background: #E7F6EC; color: #157F3D; }
.rdc-status-backlog  { background: var(--surface-2); color: var(--muted); }

.rdc-thread {
  flex: 1; overflow-y: auto;
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  -webkit-overflow-scrolling: touch;
}
.rdc-empty { color: var(--muted); font-size: 0.9rem; text-align: center; margin: auto 12px; }
.rdc-msg {
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 0.92rem; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
}
.rdc-user {
  align-self: flex-end;
  background: var(--brand); color: #fff;
  border-bottom-right-radius: 4px;
}
.rdc-assistant {
  align-self: flex-start;
  background: var(--surface-2); color: var(--ink);
  border-bottom-left-radius: 4px;
}
.rdc-action {
  align-self: center; max-width: 100%;
  background: transparent; color: var(--ink-soft);
  font-size: 0.8rem; text-align: center;
  padding: 2px 6px;
}

.rdc-typing { display: flex; gap: 4px; padding: 12px 14px; }
.rdc-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
  animation: rdc-bounce 1.2s infinite;
}
.rdc-typing span:nth-child(2) { animation-delay: 0.15s; }
.rdc-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes rdc-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.rdc-form {
  display: flex; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--bg);
}
.rdc-input {
  flex: 1; min-width: 0;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-size: 16px;   /* 16px stops iOS zoom-on-focus */
  background: var(--surface);
}
.rdc-input:focus { outline: none; border-color: var(--brand); }
.rdc-send {
  background: var(--brand); color: #fff;
  border: none; border-radius: 10px;
  padding: 0 16px; font-size: 0.92rem; font-weight: 600;
  cursor: pointer;
}
.rdc-send:disabled { opacity: 0.5; cursor: default; }

/* HES-XX mentions inside chat bubbles → tappable drawer links (HES-111) */
.rdc-ticket-link { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.rdc-assistant .rdc-ticket-link, .rdc-action .rdc-ticket-link { color: var(--brand); }

/* Drawer → HQ chat cross-link (HES-111) */
.rdc-hq-link {
  display: block; text-align: center;
  padding: 7px 12px; font-size: 0.8rem;
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  flex-shrink: 0;
}
.rdc-hq-link:hover { color: var(--brand); }

/* Mobile: full-screen sheet, back button is the way out */
@media (max-width: 640px) {
  .rdc-drawer { width: 100%; max-width: 100%; border-left: none; }
  .rdc-scrim { display: none; }
}

/* ── HQ chat tab (HES-111) — full-page reuse of the .rdc-* chat pieces ─── */

#hq.page-view { padding: 0; display: flex; justify-content: center; }
.hq-wrap {
  display: flex; flex-direction: column;
  width: 100%; max-width: 720px; height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--card-line); border-right: 1px solid var(--card-line);
}
.hq-thread { flex: 1; }
.hq-form { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.hq-older {
  align-self: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 99px; padding: 6px 14px; margin: 2px auto 8px;
  font-size: 0.8rem; color: var(--ink-soft); cursor: pointer;
  display: block;
}
.hq-older:hover { border-color: var(--brand); color: var(--brand); }
@media (max-width: 640px) {
  .hq-wrap { border-left: none; border-right: none; }
}

/* Ticket code on every roadmap row (Rosie: easier to refer to tickets) */
.rd-ident {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72em;
  color: var(--muted, #6B6353);
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 7px;
  vertical-align: 1px;
  white-space: nowrap;
}
.rd-row-shipped .rd-ident { opacity: 0.7; }

/* HES-145: quick celebration burst when a task is ticked done. The layer is
   positioned at the checkbox (left/top set inline) and each .confetti-bit flies
   out along its own inline --dx/--dy vector, spins, and fades. Purely cosmetic
   and pointer-transparent, so it sits above everything without catching taps. */
.celebrate-burst {
  position: fixed;
  z-index: 3000;
  width: 0;
  height: 0;
  pointer-events: none;
}
.confetti-bit {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  opacity: 0;
  animation: confetti-fly 0.8s ease-out forwards;
}
@keyframes confetti-fly {
  0%   { transform: translate(-50%, -50%) scale(0.3) rotate(0deg); opacity: 1; }
  70%  { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 26px)) scale(1) rotate(var(--rot));
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .confetti-bit { animation: none; display: none; }
}

/* ── HES-198: unified Today day view — calendar rows, time chips, popover ── */

/* Calendar event row: read-only, 📅 instead of a tickbox, one compact line. */
.cal-row {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
/* HES-203 pt 4: "the items on the calendar list are hanging too far to the
   right with random padding on the left." A calendar row has no priority
   number, so its .slot-num was 24px (+ the 8px gap) of dead space indenting
   the card away from the column gutter. Same treatment as an un-prioritised
   task row (.row.no-slot), which already drops its empty slot. */
.cal-row .slot-num.slot-empty { display: none; }
.cal-row .cal-card {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-soft);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: 10px 14px;
  cursor: pointer;
}
.cal-row .cal-card:hover { filter: brightness(0.985); }
.cal-ico { flex-shrink: 0; font-size: 0.95rem; }
.cal-time {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--brand);
}
.cal-time::after { content: '·'; margin-left: 8px; color: var(--muted); font-weight: 400; }
.cal-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}
.cal-name-chip {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* All-day events: pinned small at the top of the day. */
.cal-row-allday .cal-card { padding: 5px 12px; background: var(--surface-2); }
.cal-row-allday .cal-time { color: var(--ink-soft); font-weight: 600; font-size: 0.75rem; }
.cal-row-allday .cal-title { font-size: 0.8rem; font-weight: 600; }
.cal-row-allday .cal-ico { font-size: 0.8rem; }

/* Muted "~2:30pm" suggested-time chip on interleaved to-dos. */
.row-time-chip {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 99px;
  padding: 2px 8px;
  white-space: nowrap;
  align-self: center;
}

/* Read-only event detail popover (tap a calendar row). */
.cal-popover {
  position: fixed;
  z-index: 300;
  max-width: 300px;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(31, 37, 48, 0.16);
  padding: 12px 14px;
}
.cal-pop-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; }
.cal-pop-line { font-size: 0.82rem; color: var(--ink-soft); margin-top: 2px; }
.cal-pop-cal { color: var(--muted); }

/* Mobile: keep rows compact, let the title truncate before the chips do. */
@media (max-width: 760px) {
  .cal-row .cal-card { padding: 9px 12px; }
  .cal-name-chip { display: none; }   /* calendar name lives in the popover */
}

/* ── Settings tab (HES-217) ──────────────────────────────────────────────
   Surfaces the per-user digest/notification preferences (previously only
   editable over WhatsApp) in the Settings page. Reuses the surface/line/brand
   tokens so it matches the rest of the dashboard. */
.st-wrap { max-width: 640px; margin: 0 auto; }
.st-head { margin-bottom: 20px; }
.st-head h1 { font-size: 1.5rem; font-weight: 800; }
.st-sub { color: var(--ink-soft); font-size: 0.9rem; margin-top: 4px; }

.st-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 20px;
  margin-bottom: 16px;
}
.st-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.st-card-head h2 { font-size: 1.05rem; font-weight: 700; }
.st-help { color: var(--ink-soft); font-size: 0.85rem; margin-top: 3px; max-width: 44ch; }

.st-fields { margin-top: 18px; display: flex; flex-direction: column; gap: 18px; }
.st-dim { opacity: 0.45; pointer-events: none; }
.st-field { display: flex; flex-direction: column; gap: 7px; }
.st-field > label {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-soft);
}
.st-hint { font-size: 0.78rem; color: var(--muted); }
.st-field input[type="time"], .st-field input[type="text"] {
  font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 11px; max-width: 240px;
}
.st-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.st-days { display: flex; flex-wrap: wrap; gap: 7px; }
.st-day {
  font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft);
  padding: 7px 12px; border-radius: 99px; transition: all 0.15s;
}
.st-day:hover { border-color: var(--brand); color: var(--brand); }
.st-day.on { background: var(--brand); border-color: var(--brand); color: white; }

/* Toggle switch — reuses the brand/line tokens. */
.st-switch { position: relative; flex: 0 0 auto; cursor: pointer; }
.st-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.st-track {
  display: inline-block; width: 44px; height: 26px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--line); transition: background 0.15s;
}
.st-knob {
  display: block; width: 20px; height: 20px; border-radius: 50%;
  background: white; box-shadow: 0 1px 3px rgba(31, 37, 48, 0.25);
  transform: translate(3px, 2px); transition: transform 0.15s;
}
.st-switch input:checked + .st-track { background: var(--brand); border-color: var(--brand); }
.st-switch input:checked + .st-track .st-knob { transform: translate(21px, 2px); }
.st-switch input:focus-visible + .st-track { box-shadow: 0 0 0 3px var(--brand-soft); }

.st-status { min-height: 20px; font-size: 0.83rem; color: var(--brand); font-weight: 600; text-align: right; }