:root {
  --bg: #0f1216; --card: #1a1f26; --card2: #212832; --line: #2c3540;
  --text: #e7edf3; --muted: #8b98a8; --accent: #4c8dff; --accent2: #33406b;
  --p1: #ff5c5c; --p2: #ffb443; --p3: #52c1ff; --p4: #7d8794;
  --ok: #38d39f;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  max-width: 760px; margin-inline: auto; padding: 12px 14px 76px;
}
header { display: flex; align-items: center; justify-content: space-between; }
h1 { font-size: 22px; margin: 6px 0 12px; }
h2 { font-size: 15px; margin: 0 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

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

.auth { display: flex; align-items: center; justify-content: center; min-height: 90vh; }
.auth-card { width: 100%; max-width: 320px; text-align: center; }
.auth-card h1 { margin-bottom: 2px; }
.auth-card .muted { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.auth-card form { display: flex; flex-direction: column; gap: 10px; }
.auth-card input {
  padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font-size: 16px;
}
.auth-card input:focus { outline: none; border-color: var(--accent); }
.auth-card button {
  padding: 13px; border-radius: 12px; border: 0; background: var(--accent);
  color: #fff; font-weight: 600; font-size: 15px; cursor: pointer;
}
.auth-error { color: var(--p1); font-size: 13px; min-height: 18px; margin-top: 10px; }

.capture { display: flex; gap: 8px; margin-bottom: 6px; align-items: flex-end; }
.capture textarea {
  flex: 1; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font-size: 16px; font-family: inherit;
  resize: none; max-height: 220px; overflow-y: auto; line-height: 1.4;
}
.capture textarea:focus { outline: none; border-color: var(--accent); }
.capture input {
  flex: 1; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font-size: 16px; font-family: inherit;
}
.capture input:focus { outline: none; border-color: var(--accent); }
.capture button {
  padding: 13px 18px; border-radius: 12px; border: 0; background: var(--accent);
  color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; flex: none;
}
.ghost { background: var(--card2); border: 1px solid var(--line); color: var(--text); padding: 9px 14px; }

.toast { height: 20px; font-size: 13px; color: var(--ok); margin: 2px 4px 8px; transition: opacity .3s; }
.netdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); vertical-align: middle; margin-left: 2px; }
.netdot.off { background: var(--p2); }

.tabs { display: flex; gap: 6px; margin: 10px 0 4px; border-bottom: 1px solid var(--line); }
.tab, .subtab {
  padding: 9px 14px; border: 0; background: none; color: var(--muted);
  font-size: 14px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent;
}
.tab.active, .subtab.active { color: var(--text); border-bottom-color: var(--accent); }

/* Bottom nav: fixed, four daily destinations. */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; max-width: 760px; margin-inline: auto;
  background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bnav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 0; background: none; color: var(--muted); cursor: pointer;
  padding: 8px 0 6px; font: inherit;
}
.bnav-btn.active { color: var(--accent); }
.bnav-icon { font-size: 20px; line-height: 1; }
/* Five tabs now, so the labels have to survive a narrow phone without wrapping
   into two lines and shoving the nav taller. */
.bnav-label { font-size: 10px; font-weight: 600; white-space: nowrap; }
.bnav-btn { position: relative; }
.bnav-badge {
  position: absolute; top: 4px; left: 50%; margin-left: 5px;
  min-width: 16px; padding: 0 4px; border-radius: 9px;
  background: var(--p1); color: #fff; font-size: 10px; font-weight: 700;
  line-height: 16px; text-align: center;
}

/* ⏰ Scheduled — a timeline, so the time leads and the draft is the body. */
.task.scheduled { display: flex; flex-direction: column; gap: 8px; }
.task.scheduled.fired { opacity: .65; }
.sched-when { font-size: 15px; font-weight: 700; }
.sched-who { font-weight: 400; color: var(--muted); margin-left: 8px; font-size: 13px; }
.sched-draft {
  margin-top: 4px; font-size: 13px; color: var(--text); white-space: pre-wrap;
  background: var(--card2); border-radius: 8px; padding: 8px 10px;
}
.sched-warn { margin-top: 6px; font-size: 12px; color: var(--p2); }
.sched-note { margin-top: 6px; font-size: 12px; color: var(--muted); }
.sched-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sched-actions .ghost { font-size: 12px; padding: 7px 11px; }

/* Quick "when" chips under the Send at field. */
.chips-when { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.chips-when .chip {
  background: var(--card2); border: 1px solid var(--line); color: var(--text);
  font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 999px; cursor: pointer;
}
.chips-when .chip:hover { border-color: var(--accent); }

.wa-target { display: block; font-size: 13px; color: var(--muted); margin: 10px 0; }
.wa-target select {
  display: block; width: 100%; margin-top: 5px; padding: 10px 11px;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font: inherit; font-size: 14px;
}

.more-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.more-actions .ghost { flex: 1; }

.why { color: var(--muted); font-size: 12px; margin-top: 4px; }

.proposal-bar {
  margin-top: 7px; font-size: 12px; color: var(--muted);
  background: #302a45; border-radius: 8px; padding: 7px 9px;
}
.proposal-bar strong { color: var(--text); }

.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.chip {
  padding: 5px 11px; border-radius: 999px; background: var(--card2);
  border: 1px solid var(--line); color: var(--muted); font-size: 13px; cursor: pointer;
}
.chip.active { background: var(--accent2); color: #fff; border-color: var(--accent); }
.chip-search {
  width: 100%; box-sizing: border-box; margin: -6px 0 12px; padding: 9px 12px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--card2);
  color: var(--text); font-size: 13px; font-family: inherit;
}
.chip-search:focus { outline: none; border-color: var(--accent); }

.group { margin-bottom: 18px; }
.group > .ghead { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 8px; }
.ghead .count { color: var(--muted); font-size: 12px; }

.task {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--p3);
  border-radius: 11px; padding: 11px 12px; margin-bottom: 7px;
}
.task.p1 { border-left-color: var(--p1); }
.task.p2 { border-left-color: var(--p2); }
.task.p3 { border-left-color: var(--p3); }
.task.p4 { border-left-color: var(--p4); }
.task.done .body, .task.deferred .body, .task.archived .body { opacity: .45; text-decoration: line-through; }
/* "Busy with" needs to be obvious at a glance across the room — a done task
   fades out, an in-progress one lights up. */
.task.doing { border-left-color: var(--accent); background: #17202b; }
.task.doing .body { font-weight: 600; }
.task.archived { opacity: .6; }

/* Drag handle. touch-action:none is what stops the browser claiming the gesture
   as a scroll the moment a finger moves — without it, pointermove never fires
   on a phone and the whole thing silently does nothing. */
.task .grip {
  background: none; border: 0; color: var(--muted); cursor: grab;
  font-size: 15px; line-height: 1; padding: 2px 2px 0; margin: -1px 0 0 -3px;
  touch-action: none; flex: none; align-self: stretch;
}
.task .grip:active { cursor: grabbing; }
.task.dragging { opacity: .75; border-color: var(--accent); box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.group.sorting .task { transition: transform .12s ease; }
.group.sorting .body { pointer-events: none; }  /* don't open the edit modal mid-drag */

.task .body { flex: 1; cursor: pointer; }
.task .body:hover { opacity: .92; }
.task .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.task .details-preview { color: var(--muted); font-size: 12px; margin-top: 4px; }
.tag.followup-due { background: #4a2a2a; color: #ffb3b3; }
.tag.due.overdue { background: #5a2424; color: #ffd0d0; font-weight: 700; }
.tag.due.today { background: #5a4020; color: #ffe1a8; font-weight: 700; }
.tag.due.soon { background: #263d5a; color: #c9e1ff; }
.followup-bar { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.btn-copy {
  background: var(--accent2); border: 1px solid var(--accent); color: #fff;
  font-size: 12px; padding: 5px 10px; border-radius: 8px; cursor: pointer;
}
.btn-whatsapp {
  background: #25d366; border: 1px solid #1da851; color: #fff;
  font-size: 13px; padding: 9px 14px; border-radius: 8px; cursor: pointer;
}
.followup-fields { display: flex; flex-direction: column; gap: 10px; }
.contact-info { font-size: 13px; color: var(--muted); background: var(--card2); border-radius: 8px; padding: 8px 10px; }
.quick-add {
  display: flex; flex-direction: column; gap: 8px; background: var(--card2);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px;
}
.quick-add input {
  padding: 10px 11px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font-size: 14px; font-family: inherit;
}
.quick-add input:focus { outline: none; border-color: var(--accent); }

/* Shared theming for every "More" sub-tab's form controls. Add new subtabs'
   #id here too (facts once forgot this and shipped unstyled white inputs — an
   easy miss since these controls live outside .modal-card's scope). */
#contactsView, #projectsView, #ratecardView, #factsView, #quotesView { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.contacts-toolbar { display: flex; gap: 8px; }
.contacts-toolbar input { flex: 1; }
#contactForm, #ratecardForm, #factForm, #quoteItemForm { display: flex; flex-direction: column; gap: 10px; }
#contactsView h2, #projectsView h2, #ratecardView h2, #factsView h2, #quotesView h2 { margin: 4px 0 2px; }
#contactsView label, #projectsView label, #ratecardView label, #factsView label, #quotesView label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
#contactsView input, #contactsView select, #contactsView textarea,
#projectsView input, #projectsView select, #projectsView textarea,
#ratecardView input, #ratecardView select, #ratecardView textarea,
#factsView input, #factsView select, #factsView textarea,
#quotesView input, #quotesView select, #quotesView textarea {
  padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card2); color: var(--text); font-size: 15px; font-family: inherit;
}
#contactsView input:focus, #contactsView select:focus, #contactsView textarea:focus,
#projectsView input:focus, #projectsView select:focus, #projectsView textarea:focus,
#ratecardView input:focus, #ratecardView select:focus, #ratecardView textarea:focus,
#factsView input:focus, #factsView select:focus, #factsView textarea:focus,
#quotesView input:focus, #quotesView select:focus, #quotesView textarea:focus {
  outline: none; border-color: var(--accent);
}
#contactsView hr, #projectsView hr, #ratecardView hr, #factsView hr, #quotesView hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.project-row { cursor: default; }
.project-row .project-name { cursor: pointer; font-weight: 600; flex: 1; }
.project-order { display: flex; flex-direction: column; gap: 2px; }
.project-order button {
  padding: 1px 6px; font-size: 10px; line-height: 1.4; min-width: 22px;
}
.project-order button:disabled { opacity: .3; cursor: default; }
.proj-delete, .proj-pin { padding: 5px 9px; font-size: 12px; }
.proj-pin.active { background: var(--accent2); border-color: var(--accent); }
.contacts-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.contact-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; cursor: pointer; font-size: 13px;
}
.contact-row:hover { border-color: var(--accent); }
.contact-row .who { font-weight: 600; }
.contact-row .org { color: var(--muted); font-size: 12px; }
.contact-row .fact-preview { color: var(--muted); font-size: 11px; margin-top: 3px; white-space: pre-line; }
.fact-group-head { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 6px 0 -2px; }
.fact-group-head:first-child { margin-top: 0; }
.tag { font-size: 11px; padding: 2px 7px; border-radius: 6px; background: var(--card2); color: var(--muted); }
.tag.client { background: #2a3a2f; color: #9fe6c0; }
.tag.money  { background: #34301f; color: #ffd58a; }
.tag.expense { background: #3a2020; color: #ff9b9b; }
.tag.due    { background: #3a2630; color: #ffa6c1; }
.tag.kind   { background: #2a2f45; color: #b8c4ff; }
.tag.ai-suggest { background: #302a45; color: #d3b8ff; }
.tag.stage  { background: #1f2e3a; color: #8fd0ff; }
.tag.impact-high { background: #2a3a2f; color: #9fe6c0; }
.tag.impact-med  { background: #2f2f1f; color: #d8d08a; }
.tag.impact-low  { background: var(--card2); color: var(--muted); }
.tag.risk-high { background: #3a2020; color: #ff9b9b; }
.tag.risk-med  { background: #2f2f1f; color: #d8d08a; }
.tag.risk-low  { background: var(--card2); color: var(--muted); }
/* Who it's for: P | J | E, sitting in the tag row. Sized to match the tags
   around it so the card doesn't grow a second row of controls, but with real
   button affordance since this is the edit you make most on a shared list. */
.assign { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; vertical-align: middle; }
.assign .asg {
  background: none; border: 0; border-right: 1px solid var(--line);
  color: var(--muted); font-size: 11px; font-weight: 700; font-family: inherit;
  line-height: 1; padding: 0; width: 24px; height: 21px; cursor: pointer;
}
.assign .asg:last-child { border-right: 0; }
.assign .asg:hover { background: var(--card2); color: var(--text); }
/* The active one has to read as "pressed" across a room — var(--card2) was too
   close to the unpressed state to tell apart at 21px. */
.assign .asg.on.mine   { background: #1f4a6b; color: #cfe9ff; }
.assign .asg.on.theirs { background: #5c3a49; color: #ffd6e3; }
.assign .asg.on.either { background: #46505f; color: #eef2f7; }
.tag.private { background: #2f2a1f; color: #e6cf9f; }
/* "Wrong section?" — tappable, so it gets control affordance like the who tag. */
.tag.aisle-pick { background: var(--card2); color: var(--muted); border: 1px solid var(--line); cursor: pointer; }
.tag.aisle-pick:hover { border-color: var(--accent); color: var(--text); }
/* Aisle headings sit tighter than project headings — a shopping list is scanned
   in one pass while walking, so less vertical air means more items on screen. */
.group.aisle { margin-bottom: 12px; }
.group.aisle > .ghead { border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.ai-hint { font-size: 12px; color: var(--muted); background: var(--card2); border-radius: 8px; padding: 8px 10px; margin: 0; }

/* Actions live on the far right. The three-state control reads left-to-right in
   the order things actually happen (to do -> busy -> done); the dustbin only
   appears once something IS done, so it can't be hit by accident beforehand. */
.task .actions { display: flex; align-items: center; gap: 6px; flex: none; }
.task .x { background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; }
.task .state { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex: none; }
.task .state .st {
  background: none; border: 0; border-right: 1px solid var(--line);
  color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer;
  width: 30px; height: 30px; padding: 0;
}
.task .state .st:last-child { border-right: 0; }
.task .state .st:hover { background: var(--card2); color: var(--text); }
.task .state .st.on { color: #fff; }
.task .state .st[data-st="doing"].on { background: var(--accent2); }
.task .state .st[data-st="done"].on  { background: var(--ok); color: #0f1216; }
.task .state .st[data-st="open"].on  { background: var(--card2); color: var(--text); }

/* Checkbox rows in the edit modal (the private tick) — label wraps the input, so
   it needs to lay out sideways instead of stacking like the other fields. */
/* "Peet is busy with…" — deliberately quiet. It's context, not a task list, and
   must never compete with the board itself for attention. */
.busy-strip {
  margin: -4px 2px 10px; font-size: 12px; color: var(--muted); line-height: 1.5;
}
.busy-strip .busy-who { color: var(--accent); font-weight: 600; }

/* Who's who — the @nickname editor in More. */
.whoiswho { background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; margin-bottom: 14px; }
.whoiswho h3 { margin: 0 0 9px; font-size: 14px; }
.whoiswho .hint { font-weight: 400; }
.whoiswho p.hint { margin: 9px 0 0; }
.whoiswho code { background: var(--card2); border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.whois-row { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.whois-name { flex: none; min-width: 88px; font-size: 13px; font-weight: 600; }
.whois-aliases {
  flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card2); color: var(--text);
  font-size: 13px; font-family: inherit;
}
.whois-aliases:focus { outline: none; border-color: var(--accent); }

.check-row { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; }
.check-row input[type=checkbox] { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); flex: none; }
.check-row.disabled { opacity: .5; }

.toast-undo { background: none; border: 1px solid currentColor; border-radius: 6px; color: inherit; font-size: 12px; padding: 1px 8px; margin-left: 8px; cursor: pointer; }

/* Edit modal */
/* Deliberately NOT flexbox-centered with an internal max-height/overflow — that
   combination (viewport units + centering + a nested scroll container) kept
   breaking in ways that didn't reproduce in testing. Instead: the OVERLAY itself
   is the only scroll container, exactly like a normal web page — if the card is
   taller than the screen, you scroll the page to see the rest, same as scrolling
   down to see the bottom of any long form. No centering math, no nested scroll. */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 10;
  overflow-y: auto; padding: 16px;
}
.modal-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px;
  width: 100%; max-width: 420px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
}
.modal-card::-webkit-scrollbar-track { background: transparent; }
.modal-card h2 { margin: 0 0 2px; }
.modal-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.modal-card textarea, .modal-card select {
  padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card2); color: var(--text); font-size: 15px; font-family: inherit; resize: vertical;
}
.modal-card textarea:focus, .modal-card select:focus { outline: none; border-color: var(--accent); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.modal-actions button {
  padding: 9px 16px; border-radius: 10px; border: 0; background: var(--accent);
  color: #fff; font-weight: 600; cursor: pointer;
}
.modal-actions .ghost { background: var(--card2); border: 1px solid var(--line); color: var(--text); }

.filters.modes { margin: 0 0 12px; }

.side-by-side { display: flex; gap: 10px; }
.side-by-side label { flex: 1; }
.hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.invoice-fields {
  display: flex; flex-direction: column; gap: 10px; background: var(--card2);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px;
}
.invoice-fields h3 { margin: 0; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.invoice-fields input {
  padding: 10px 11px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font-size: 14px; font-family: inherit;
}
.invoice-fields input:focus { outline: none; border-color: var(--accent); }
.invoice-fields .hint { font-size: 12px; margin: 0; }
.invoice-fields > label { margin-bottom: -4px; }
#invLines { display: flex; flex-direction: column; gap: 6px; }
.inv-line { display: grid; grid-template-columns: 1fr 52px 68px 76px 24px; gap: 5px; align-items: center; }
.inv-line input { padding: 8px 8px; font-size: 13px; min-width: 0; }
.inv-remove {
  background: none; border: 0; color: var(--muted); font-size: 14px; cursor: pointer;
  padding: 4px; line-height: 1;
}
.inv-remove:hover { color: var(--p1); }

footer { margin-top: 20px; color: var(--muted); font-size: 13px; }
/* !important is deliberate: .hidden is the one universal "hide this" utility and
   must always win, even against #id selectors elsewhere (e.g. #contactForm,
   #ratecardForm set display:flex at higher specificity) — without it, toggling
   this class silently does nothing on any element with its own ID display rule. */
.hidden { display: none !important; }