:root {
  --ink:        #1a1a2e;
  --ink-mid:    #4a4a6a;
  --ink-soft:   #8888a8;
  --rule:       #e8e8f0;
  --surface:    #ffffff;
  --canvas:     #f5f5fb;
  --accent:     #5b4fcf;
  --accent-lt:  #ede9ff;
  --green:      #2eb87a;
  --green-lt:   #e6f7f0;
  --amber:      #e8912a;
  --amber-lt:   #fff3e0;
  --red:        #e05252;
  --red-lt:     #fdeaea;

  --sidebar-w: 248px;
  --topbar-h: 72px;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(26,26,46,.06), 0 2px 8px rgba(26,26,46,.04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 600; }
code { background: var(--accent-lt); padding: 1px 5px; border-radius: 4px; font-size: .85em; }

/* ================= LAYOUT ================= */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--ink);
  color: #cfcfe6;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand { padding: 20px 22px 14px; display: block; }
.brand-logo { width: 176px; max-width: 100%; height: auto; display: block; }
.auth-logo { height: 46px; width: auto; display: block; margin: 0 auto 6px; }
.marketing-brand { display: inline-flex; }
.marketing-brand img { height: 30px; width: auto; display: block; }
.onboarding-logo { height: 30px; width: auto; display: block; }
.brand-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 24px;
  color: #fff;
  line-height: 1;
}
.brand-sub {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 6px;
}

.nav { flex: 1; overflow-y: auto; padding: 8px 12px; }
.nav-section-label {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 16px 10px 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #cfcfe6;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.is-active { background: var(--accent); color: #fff; }
.nav-item--muted { color: var(--ink-soft); font-size: 12.5px; }
.nav-dot { width: 16px; text-align: center; font-size: 12px; flex-shrink: 0; }
.nav-empty { padding: 6px 12px; color: var(--ink-soft); font-size: 12.5px; }

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}
.user-meta { overflow: hidden; }
.user-name { color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.user-sub { color: var(--ink-soft); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  min-height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 16px;
  padding: 8px 28px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-title { min-width: 0; }
.topbar-title h1 { font-size: 19px; }
.page-sub { margin: 2px 0 0; color: var(--ink-soft); font-size: 12.5px; }
.topbar-center { justify-self: center; display: flex; align-items: center; }
.topbar-actions { display: flex; align-items: center; gap: 14px; justify-self: end; }
/* Mobile-only: the sidebar footer that normally holds these is hidden below
   640px, which left a phone with no route to Settings or sign-out. */
.topbar-account { display: none; }

.report-custom-dates { display: inline-flex; align-items: center; gap: 6px; }
.report-custom-dates[hidden] { display: none; }

/* Example-data banner. Deliberately not alarming — nothing is wrong — but
   present on every page, because the numbers below it are real sums. */
.sample-banner { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 9px 28px; font-size: 13px;
  background: var(--accent-lt); color: var(--accent);
  border-bottom: 1px solid var(--rule); }
.sample-banner-btn { background: none; border: 1px solid currentColor; color: inherit;
  border-radius: 7px; padding: 4px 10px; font: inherit; font-size: 12.5px;
  cursor: pointer; min-height: 32px; }
.sample-banner-btn:hover { background: var(--surface); }
@media (max-width: 640px) { .sample-banner { padding: 9px 14px; } }

/* ── Mobile navigation ──────────────────────────────────────────────────────
   Hidden on desktop, where the sidebar does this job. */
.mobile-bar, .mobile-sheet, .mobile-sheet-overlay { display: none; }
.mobile-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--surface); border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bar-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 56px; padding: 6px 2px; position: relative;
  background: none; border: none; cursor: pointer; text-decoration: none;
  color: var(--ink-soft); font-family: inherit; -webkit-tap-highlight-color: transparent;
}
.mobile-bar-item.is-active { color: var(--accent); }
.mobile-bar-item:active { background: var(--canvas); }
.mobile-bar-icon { font-size: 20px; line-height: 1; }
.mobile-bar-label { font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-bar-badge { position: absolute; top: 4px; left: 50%; margin-left: 6px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--ink-soft); color: var(--surface);
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; }
.mobile-bar-badge.is-alert { background: var(--red); }

.mobile-sheet-overlay { position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.38); }
.mobile-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 301;
  max-height: 88vh; display: flex; flex-direction: column;
  background: var(--surface); border-top-left-radius: 16px; border-top-right-radius: 16px;
  box-shadow: 0 -10px 40px rgba(0,0,0,.25);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%); transition: transform .22s ease;
}
.mobile-sheet.open { transform: translateY(0); }
.mobile-sheet-head { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--rule); flex-shrink: 0; }
.mobile-sheet-close { background: none; border: none; font-size: 18px; cursor: pointer;
  color: var(--ink-soft); min-width: 44px; min-height: 44px; }
.mobile-sheet-body { overflow-y: auto; padding: 8px 8px 16px;
  -webkit-overflow-scrolling: touch; }
.mobile-sheet-group { font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); padding: 14px 12px 4px; }
.mobile-sheet-item { display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 48px; padding: 10px 12px; border-radius: 10px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 15px; color: var(--ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent; }
.mobile-sheet-item:active { background: var(--canvas); }
.mobile-sheet-item.is-active { background: var(--accent-lt); color: var(--accent); font-weight: 600; }
.mobile-sheet-icon { font-size: 17px; width: 22px; text-align: center; flex-shrink: 0; }
.mobile-sheet-name { flex: 1; }
.mobile-sheet-rule { height: 1px; background: var(--rule); margin: 12px 12px 4px; }
/* On roomy screens, nudge the timer to the TRUE screen middle by offsetting
   half the sidebar width (content-centre sits right of screen-centre). Scales
   with --sidebar-w, so it stays centred on any wide display. */
@media (min-width: 1280px) {
  .topbar-center { transform: translateX(calc(var(--sidebar-w) / -2)); }
}

.content { padding: 28px; flex: 1; transition: padding-right .22s ease; }
/* When the sales-script panel is open, reflow content left so it isn't covered. */
@media (min-width: 900px) {
  body.script-open .content { padding-right: calc(min(420px, 88vw) + 28px); }
}

/* ================= BUTTONS ================= */
.btn {
  /* A <button> is inline-block by default; an <a class="btn"> is not, and on a
     plain inline element vertical padding and margins have no effect at all.
     So every link styled as a button sat tight against the text above it, and
     two attempts to space them with margin-top did nothing — the rule was
     fine, the element simply could not obey it. Setting the display mode here
     is what makes .btn behave like a button wherever it is used. */
  display: inline-block;
  vertical-align: middle;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.btn:hover { border-color: var(--ink-soft); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: #4a3fc0; }
.btn-icon {
  border: 1px solid var(--rule);
  background: var(--surface);
  width: 30px; height: 30px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--ink-mid);
  font-size: 12px;
}
.btn-icon:hover { border-color: var(--accent); color: var(--accent); }
.btn-start:hover { border-color: var(--green); color: var(--green); }

/* ================= TIMER PILL ================= */
.timer-pill { display: flex; align-items: center; gap: 10px; }
.timer-pill.is-idle { display: none; }
.timer-pill.is-running {
  background: var(--green-lt);
  border: 1px solid var(--green);
  border-radius: 999px;
  padding: 5px 6px 5px 14px;
}
.timer-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.timer-task { font-size: 12.5px; font-weight: 500; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timer-elapsed { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--green); }
.timer-stop {
  width: 26px; height: 26px; border-radius: 50%;
  border: none; background: var(--green); color: #fff;
  cursor: pointer; font-size: 10px;
}
.timer-stop:hover { background: #26a069; }

/* ================= TODAY ================= */
.today-grid { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.section-head--spaced { margin-top: 32px; }
.section-head h2 { font-size: 15px; }
.section-add {
  font-size: 12.5px; color: var(--accent); cursor: pointer;
  padding: 4px 10px; border-radius: 6px;
}
.section-add:hover { background: var(--accent-lt); }

.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-list--muted { opacity: .6; }

/* ================= TASK CARD ================= */
.task-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.task-card.priority-high { border-left-color: var(--red); }
.task-card.priority-medium { border-left-color: var(--amber); }
.task-card.priority-low { border-left-color: var(--ink-soft); }
.task-card.is-done { opacity: .55; }
.task-card.is-done .task-title { text-decoration: line-through; }

.task-check {
  width: 22px; height: 22px; border-radius: 6px;
  border: 1.5px solid var(--rule);
  background: var(--surface); cursor: pointer;
  color: var(--green); font-size: 13px; flex-shrink: 0;
}
.task-card.is-done .task-check { background: var(--green); border-color: var(--green); color: #fff; }
.task-check:hover { border-color: var(--green); }

.task-body { flex: 1; min-width: 0; }
.task-title { font-weight: 500; font-size: 14px; }
.task-client { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--ink-soft); }
.task-client-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.task-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
/* All Tasks: filter tabs on the left, sort/group control on the right. */
.all-tasks-controls { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.all-tasks-controls .client-tabs { margin-bottom: 12px; }
.task-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.field-input--sm { padding: 5px 8px; font-size: 13px; width: auto; }
.task-group-header { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--rule); }
.task-group-header:first-child { margin-top: 0; }
.task-group-name { font-weight: 600; font-size: 13px; color: var(--ink); }
.task-group-count { font-size: 11px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 1px 7px; }
.task-project { color: var(--ink-mid); font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.task-project:hover { color: var(--accent); }
.task-due, .task-est { font-size: 11.5px; color: var(--ink-soft); }
.task-actions { display: flex; gap: 6px; flex-shrink: 0; }
.dot { font-size: 10px; }

/* ================= PILLS ================= */
.pill {
  display: inline-block;
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: capitalize;
  font-weight: 600;
  letter-spacing: .02em;
}
.pill-priority.pill-high { background: var(--red-lt); color: var(--red); }
.pill-priority.pill-medium { background: var(--amber-lt); color: var(--amber); }
.pill-priority.pill-low { background: var(--canvas); color: var(--ink-soft); }
.pill-today { background: var(--accent-lt); color: var(--accent); font-weight: 600; }
.pill-standing.pill-good { background: var(--green-lt); color: var(--green); }
.pill-standing.pill-average { background: var(--amber-lt); color: var(--amber); }
.pill-standing.pill-poor { background: var(--red-lt); color: var(--red); }

/* ================= CONTRACTS ================= */
.contract-status { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; text-transform: capitalize; }
.contract-status--draft { background: var(--canvas); color: var(--ink-soft); }
.contract-status--sent { background: var(--amber-lt); color: var(--amber); }
.contract-status--signed { background: #e3f9ec; color: #1a7f4b; }
.contract-status--declined, .contract-status--void { background: var(--red-lt); color: var(--red); }
.contract-caveat { background: var(--amber-lt); color: #8a5a00; font-size: 13px; line-height: 1.5;
  padding: 12px 16px; border-radius: 10px; margin: 16px 0; }
.contract-signed-banner { background: #e9f9ef; color: #1a7f4b; font-size: 14px; line-height: 1.5;
  padding: 14px 16px; border-radius: 10px; margin: 16px 0; }
.contract-signed-banner a { color: #1a7f4b; font-weight: 600; }
.contract-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.contract-sign-link { margin: 16px 0 24px; }
.sign-link-row { display: flex; gap: 8px; align-items: center; }
.sign-link-row .field-input { flex: 1; font-size: 12.5px; color: var(--ink-soft); }
.contract-form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.contract-form-row .field { flex: 1; min-width: 180px; }
.contract-body { font-size: 13.5px; line-height: 1.6; min-height: 420px; resize: vertical; }
.contract-new-form { max-width: 620px; margin-top: 18px; }
.contract-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.contract-type-card { display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border: 1px solid var(--rule); border-radius: 10px; cursor: pointer; font-size: 14px; }
.contract-type-card:has(input:checked) { border-color: var(--accent); background: var(--accent-lt); }
.contract-type-name { font-weight: 500; }
.save-ok { color: #1a7f4b; font-size: 13px; }
.contract-nudge { display: flex; align-items: center; gap: 12px; background: var(--amber-lt);
  border: 1px solid #f0d68a; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; }
.contract-nudge-icon { font-size: 18px; flex-shrink: 0; }
.contract-nudge-body { flex: 1; font-size: 13.5px; line-height: 1.5; color: #7a5a00; }
.contract-nudge-body strong { color: var(--ink); }
.contract-nudge-body a { color: var(--accent); font-weight: 600; }
.contract-nudge .btn { flex-shrink: 0; }

/* ================= PROSPECTS (Cold Calling) ================= */
.prospects-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.prospects-filters { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.prospects-filters select { width: auto; }
.prospect-stats-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 8px; }
.prospect-stat { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 6px; text-align: center; }
.prospect-stat strong { display: block; font-size: 22px; font-weight: 700; line-height: 1; margin-bottom: 3px; }
.prospect-stat span { font-size: 10px; color: var(--ink-soft); letter-spacing: .3px; }
.prospect-callbacks-alert { background: rgba(59,130,246,.08); border: 1px solid #9dc0f5; border-radius: 10px;
  padding: 10px 14px; margin: 8px 0 4px; font-size: 13px; }
.prospect-callbacks-alert a { color: var(--accent); text-decoration: none; margin: 0 3px; }
.prospect-section-title { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }

.prospect-list { display: flex; flex-direction: column; gap: 4px; }
/* Two lines: who they are, then where they are and what we know. The second
   line only appears when there is something to put on it, so a bare imported
   list does not grow taller for nothing. */
.prospect-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 9px; font-size: 13px; transition: border-color .15s; }
.prospect-row-main { display: flex; align-items: center; gap: 14px; }
.prospect-row-sub { display: flex; align-items: flex-start; gap: 14px; padding-left: 22px; }
.prospect-address { font-size: 11px; color: var(--ink-soft); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Two lines of roughly twenty characters, clamped rather than truncated in the
   template so the whole note stays available to hover over and to search. */
.prospect-notes { font-size: 11px; color: var(--ink-soft); font-style: italic;
  width: 22ch; flex: none; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.prospect-website { font-size: 12px; text-decoration: none; opacity: .75; flex: none; }
.prospect-website:hover { opacity: 1; }
.prospect-fit { font-size: 11px; padding: 1px 4px; max-width: 104px; flex: none; }
@media (max-width: 720px) {
  .prospect-row-sub { display: none; }
}
.prospect-row:hover { border-color: var(--accent); }
.prospect-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.prospect-biz-name { font-weight: 500; flex: 1; color: var(--ink); text-decoration: none; }
.prospect-biz-name:hover { color: var(--accent); }
.prospect-trade, .prospect-town { font-size: 11px; color: var(--ink-soft); min-width: 92px; }
.prospect-phone-link { font-size: 12px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.prospect-phone-link:hover { text-decoration: underline; }
.prospect-call-count { font-size: 10px; color: var(--ink-soft); min-width: 66px; text-align: right; }
.prospect-row.callback-due { border-color: #3b82f6; background: rgba(59,130,246,.05); }
.prospect-row.interested-row { border-color: var(--amber); background: var(--amber-lt); }

.status-new { background: var(--ink-soft); }
.status-no_answer { background: #4a4a6a; }
.status-callback { background: #3b82f6; }
.status-contacted { background: var(--accent); }
.status-qualified { background: var(--amber); }
.status-proposal { background: #3b82f6; }
.status-won { background: var(--green); }
.status-lost, .status-not_interested, .status-do_not_call { background: var(--rule); }

.prospect-status-pill { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; background: var(--canvas); color: var(--ink-soft); }
.prospect-detail-actions { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.prospect-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.prospect-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; margin: 0; }
.prospect-dl dt { color: var(--ink-soft); }
.prospect-dl dd { margin: 0; color: var(--ink); }
.prospect-notes-block { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13px;
  color: var(--ink-mid); white-space: pre-wrap; line-height: 1.5; }
.prospect-call-log { padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.prospect-log-outcome { font-weight: 600; }
.prospect-log-meta { color: var(--ink-soft); font-size: 12px; margin-left: 8px; }
.prospect-log-notes { color: var(--ink-mid); font-size: 12.5px; margin-top: 3px; font-style: italic; }
.prospect-log-outcome.status-answered { color: var(--green); }
.prospect-log-outcome.status-interested { color: var(--amber); }
.prospect-log-outcome.status-callback { color: #3b82f6; }
@media (max-width: 640px) { .prospect-detail-grid { grid-template-columns: 1fr; } .prospect-stats-strip { grid-template-columns: repeat(3, 1fr); } }

/* Today view call widget */
.today-calls-widget { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px; margin-bottom: 16px; }
.today-calls-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.today-call-stat { text-align: center; }
.today-call-stat strong { display: block; font-size: 22px; font-weight: 700; line-height: 1; margin-bottom: 3px; }
.today-call-stat span { font-size: 10px; color: var(--ink-soft); letter-spacing: .5px; }
.today-call-resume-btn { font-size: 12px; color: var(--accent); text-decoration: none; float: right; }

/* Pipeline board (kanban) */
.pipeline-tabs { margin-bottom: 14px; }
.tab-count.alert { background: var(--red-lt); color: var(--red); }
.prospect-board-scroll { overflow-x: auto; padding-bottom: 8px; }
.prospect-board { display: grid; grid-template-columns: repeat(5, minmax(185px, 1fr)); gap: 10px; min-width: 960px; }
.pboard-col { background: var(--canvas); border: 1px solid var(--rule); border-radius: 10px; padding: 8px; }
.pboard-col-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 8px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.pboard-count { background: var(--surface); border: 1px solid var(--rule); border-radius: 20px; padding: 0 7px; font-size: 11px; }
.pboard-col--won .pboard-col-title { color: var(--green); }
.pboard-cards { display: flex; flex-direction: column; gap: 6px; min-height: 40px; }
.pboard-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 10px; cursor: grab; }
.pboard-card:active { cursor: grabbing; }
.pboard-ghost { opacity: .4; background: var(--accent-lt); border: 1px dashed var(--accent); }
.pboard-drag { box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.pboard-cards { min-height: 60px; }
/* don't let the drag handle fight the card's inner controls */
.pboard-card select, .pboard-card a, .pboard-card button { cursor: pointer; }
.pboard-name { font-weight: 600; font-size: 13px; color: var(--ink); text-decoration: none; display: block; }
.pboard-name:hover { color: var(--accent); }
.pboard-meta { font-size: 11px; color: var(--ink-soft); margin: 2px 0; }
.pboard-phone { font-size: 12px; color: var(--accent); text-decoration: none; display: block; margin-bottom: 6px; }
.pboard-stage, .pboard-btn { width: 100%; margin-top: 4px; }
.pboard-empty { text-align: center; color: var(--ink-soft); font-size: 12px; padding: 12px 0; }

/* ================= PROJECT HEALTH ================= */
.health-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.health-badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.health-badge.health-amber { background: var(--amber-lt); color: var(--amber); }
.health-badge.health-amber .health-badge-dot { background: var(--amber); }
.health-badge.health-red { background: var(--red-lt); color: var(--red); }
.health-badge.health-red .health-badge-dot { background: var(--red); }
.project-health-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 20px; vertical-align: middle; }
.project-health-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.project-health-badge.health-green { background: #e3f9ec; color: #1a7f4b; }
.project-health-badge.health-green .project-health-dot { background: var(--green); }
.project-health-badge.health-amber { background: var(--amber-lt); color: var(--amber); }
.project-health-badge.health-amber .project-health-dot { background: var(--amber); }
.project-health-badge.health-red { background: var(--red-lt); color: var(--red); }
.project-health-badge.health-red .project-health-dot { background: var(--red); }
.project-health-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 9px; margin-bottom: 16px; font-size: 13px; }
.health-banner-amber { background: var(--amber-lt); border: 1px solid #f0d68a; color: #7a5a00; }
.health-banner-red { background: var(--red-lt); border: 1px solid #f0b0b0; color: var(--red); }
.today-health-widget { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px; margin-bottom: 16px; }
.today-health-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.today-health-row:last-child { border-bottom: none; }
.today-health-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.today-health-body { flex: 1; min-width: 0; }
.today-health-name { display: block; font-size: 13px; font-weight: 500; color: var(--ink); }
.today-health-reason { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 1px; }
.today-health-status { font-size: 14px; flex-shrink: 0; }
.nav-flyout-health { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-left: auto; }
.nav-flyout-health.health-amber { background: var(--amber); }
.nav-flyout-health.health-red { background: var(--red); }
@media (max-width: 640px) { .health-badge-reason { display: none; } .health-badge { padding: 3px; } }

/* ================= BUDGET ALERTS (Phase 21) ================= */
.budget-alert-banner { border-radius: 10px; margin-bottom: 16px; overflow: hidden; border: 1px solid; }
.budget-alert-content { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px 10px; }
.budget-alert-icon { font-size: 18px; flex-shrink: 0; }
.budget-alert-body { flex: 1; }
.budget-alert-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.budget-alert-detail { font-size: 12px; opacity: .85; line-height: 1.5; }
.budget-alert-actions { flex-shrink: 0; }
.budget-alert-action-btn { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 6px; cursor: pointer; border: none; background: rgba(0,0,0,.06); color: inherit; }
.budget-alert-action-btn:hover { background: rgba(0,0,0,.1); }
.budget-alert-progress-wrap { height: 3px; background: rgba(0,0,0,.08); }
.budget-alert-progress-bar { height: 100%; background: rgba(0,0,0,.35); max-width: 100%; transition: width .4s ease; }
.budget-alert-warning { background: var(--amber-lt); border-color: #f0d68a; color: #7a5a00; }
.budget-alert-urgent { background: rgba(249,115,22,.1); border-color: #f97316; color: #9a3412; }
.budget-alert-exceeded { background: var(--red-lt); border-color: #f0b0b0; color: var(--red); }

.project-budget-summary { background: var(--canvas); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.budget-summary-row { display: flex; gap: 24px; margin-bottom: 12px; flex-wrap: wrap; }
.budget-summary-item { text-align: center; }
.budget-summary-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.budget-summary-value { font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.budget-summary-value.value-warning { color: var(--amber); }
.budget-summary-value.value-urgent { color: #f97316; }
.budget-summary-value.value-exceeded { color: var(--red); }
.budget-full-bar-wrap { height: 8px; background: var(--rule); border-radius: 4px; position: relative; margin-bottom: 6px; }
.budget-full-bar { height: 100%; border-radius: 4px; max-width: 100%; transition: width .4s ease; }
.bar-ok { background: var(--accent); }
.bar-warning { background: var(--amber); }
.bar-urgent { background: #f97316; }
.bar-exceeded { background: var(--red); }
.budget-bar-threshold-marker { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--amber); border-radius: 1px; transform: translateX(-50%); }
.budget-bar-threshold-marker.urgent { background: #f97316; }
.budget-full-bar-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-soft); }

.project-list-budget-bar-wrap { height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; margin-top: 6px; max-width: 260px; }
.project-list-budget-bar { height: 100%; border-radius: 2px; transition: width .3s; }

.timer-budget-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 12px; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.timer-budget-chip.timer-budget-warning { background: var(--amber-lt); color: var(--amber); }
.timer-budget-chip.timer-budget-urgent { background: rgba(249,115,22,.18); color: #c2410c; }
.timer-budget-chip.timer-budget-exceeded { background: var(--red-lt); color: var(--red); }

.threshold-options { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.threshold-option { display: inline-flex; align-items: center; font-size: 12px; cursor: pointer; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 7px; }
.threshold-option:has(input:checked) { border-color: var(--accent); background: var(--accent-lt); color: var(--accent); }
.threshold-option input[type="radio"] { display: none; }
@media (max-width: 640px) { .budget-alert-content { flex-wrap: wrap; } .budget-summary-row { gap: 12px; } }

/* ================= QUICK CAPTURE (Cmd+K) ================= */
.qc-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 400; transition: background .15s ease; }
.qc-overlay.visible { background: rgba(0,0,0,.35); }
.qc-panel { position: fixed; top: 28%; left: 50%; transform: translateX(-50%) translateY(-8px);
  width: 560px; max-width: calc(100vw - 32px); background: var(--surface); border-radius: 14px;
  border: 1px solid var(--rule); box-shadow: 0 8px 32px rgba(0,0,0,.08), 0 24px 80px rgba(0,0,0,.16);
  z-index: 401; overflow: hidden; opacity: 0; transition: opacity .15s ease, transform .15s ease; }
.qc-panel.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.qc-input-wrap { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--rule); }
.qc-icon { font-size: 20px; color: var(--accent); flex-shrink: 0; line-height: 1; }
.qc-input { flex: 1; border: none; outline: none; font-size: 16px; font-family: 'Inter', sans-serif; color: var(--ink); background: transparent; line-height: 1.4; }
.qc-input::placeholder { color: var(--ink-soft); }
.qc-esc-hint { font-size: 10px; border: 1px solid var(--rule); border-radius: 4px; padding: 2px 5px; color: var(--ink-soft); flex-shrink: 0; cursor: pointer; }
.qc-esc-hint:hover { border-color: var(--ink-soft); }
@keyframes qc-shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-4px);} 60%{transform:translateX(4px);} }
.qc-input-shake { animation: qc-shake .3s ease; }
.qc-meta { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid var(--rule); gap: 10px; }
.qc-meta-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qc-select { border: 1px solid var(--rule); border-radius: 6px; padding: 5px 8px; font-size: 12px; font-family: 'Inter', sans-serif;
  color: var(--ink-mid); background: var(--canvas); outline: none; cursor: pointer; max-width: 180px; transition: border-color .15s; }
.qc-select:focus { border-color: var(--accent); }
.qc-today-label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-mid); cursor: pointer; user-select: none; }
.qc-hint-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px; min-height: 32px; }
.qc-shortcut-hint { font-size: 10px; color: var(--ink-soft); letter-spacing: .2px; }
.qc-shortcut-hint kbd { font-size: 9px; border: 1px solid var(--rule); border-radius: 3px; padding: 1px 4px; color: var(--ink-soft); }
.qc-save-feedback { font-size: 11px; font-weight: 500; transition: color .2s; }
.qc-save-feedback.saving { color: var(--amber); }
.qc-save-feedback.saved { color: var(--green); }
.qc-save-feedback.error { color: var(--red); }
.qc-fab { position: fixed; bottom: 24px; right: 20px; width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none; font-size: 24px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(91,79,207,.4); z-index: 300; display: none; align-items: center; justify-content: center;
  line-height: 1; transition: transform .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.qc-fab:active { transform: scale(.94); box-shadow: 0 2px 8px rgba(91,79,207,.4); }
@media (max-width: 640px) {
  .qc-fab { display: flex; }
  .qc-panel { width: calc(100% - 32px); top: 12%; }
  .qc-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .qc-meta-left { width: 100%; }
  .qc-select { max-width: 100%; }
}
@media (max-width: 560px) { .contract-type-grid { grid-template-columns: 1fr; } }
.pill-status { background: var(--accent-lt); color: var(--accent); }
.pill-status.pill-active { background: var(--green-lt); color: var(--green); }
.pill-status.pill-prospect { background: var(--amber-lt); color: var(--amber); }
.pill-status.pill-paused { background: var(--amber-lt); color: var(--amber); }
.pill-status.pill-completed { background: var(--accent-lt); color: var(--accent); }
.pill-status.pill-archived { background: var(--canvas); color: var(--ink-soft); }

/* ================= FOLLOW-UPS ================= */
.followup-list { display: flex; flex-direction: column; gap: 8px; }
.followup {
  display: flex; gap: 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 11px 14px; box-shadow: var(--shadow);
}
.followup.is-overdue { border-color: var(--red); background: var(--red-lt); }
.followup-when { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--amber); width: 64px; flex-shrink: 0; }
.followup.is-overdue .followup-when { color: var(--red); }
.followup-note { font-weight: 500; }
.followup-who { font-size: 12px; color: var(--ink-soft); }
.followup-line { padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }

/* ================= PICK PANEL ================= */
.pick-panel { margin-top: 10px; }
.pick-box { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.pick-head { padding: 10px 14px; font-size: 12px; font-weight: 600; color: var(--ink-soft); border-bottom: 1px solid var(--rule); text-transform: uppercase; letter-spacing: .08em; }
.pick-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; background: none; border: none; border-bottom: 1px solid var(--rule); cursor: pointer; text-align: left; font-size: 13px; }
.pick-row:last-child { border-bottom: none; }
.pick-row:hover { background: var(--accent-lt); }
.pick-title { font-weight: 500; }
.pick-project { font-size: 12px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 5px; }
.pick-empty, .pick-panel:empty { display: none; }

/* ================= PANELS / STATS ================= */
.today-panel { display: flex; flex-direction: column; gap: 16px; }
.panel-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.panel-card h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin-bottom: 14px; }
.panel-card--accent { background: var(--accent); color: #fff; }
.panel-card--accent h3 { color: rgba(255,255,255,.7); }
.running-task { font-weight: 600; font-size: 15px; }
.running-project { color: rgba(255,255,255,.8); font-size: 13px; margin-top: 4px; }

.stat { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.stat-num { font-size: 28px; font-weight: 700; color: var(--ink); }
.stat-label { color: var(--ink-soft); font-size: 12.5px; }
.panel-card hr { border: none; border-top: 1px solid var(--rule); margin: 14px 0; }
.stat-row { display: flex; justify-content: space-between; padding: 5px 0; }
.stat-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-val--green { color: var(--green); }

/* ================= CARD / DETAIL LISTS ================= */
.card-list { display: flex; flex-direction: column; gap: 8px; max-width: 860px; }
.row-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 15px 18px; box-shadow: var(--shadow);
}
.row-card:hover { border-color: var(--accent); }
.row-title { font-weight: 600; font-size: 14.5px; }
.row-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.row-side { display: flex; align-items: center; gap: 14px; }
.row-count { font-size: 12.5px; color: var(--ink-soft); }

.detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
.detail-main h2 { font-size: 15px; margin-bottom: 12px; }
.detail-main h2.mt { margin-top: 28px; }
.detail-side { display: flex; flex-direction: column; gap: 16px; }

.activity-list { display: flex; flex-direction: column; gap: 6px; }
.activity { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.activity-type { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--accent); background: var(--accent-lt); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.activity-type--task_completed { color: var(--green); background: var(--green-lt); }
.activity-type--time_logged { color: var(--amber); background: var(--amber-lt); }
.activity-title { font-weight: 500; }
.activity-when { font-size: 11.5px; color: var(--ink-soft); }

.contact-line { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.contact-line:last-child { border-bottom: none; }
.contact-name { font-weight: 500; }
.contact-role { font-size: 12px; color: var(--ink-soft); }
.tag { font-size: 10px; background: var(--green-lt); color: var(--green); padding: 1px 6px; border-radius: 5px; font-weight: 600; }

.kv { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; margin: 0; }
.kv dt { color: var(--ink-soft); font-size: 12.5px; }
.kv dd { margin: 0; font-size: 13px; }
.notes { color: var(--ink-mid); font-size: 13px; white-space: pre-wrap; }

/* ================= EMPTY STATE ================= */
.empty-state { color: var(--ink-soft); font-size: 13px; padding: 20px; background: var(--surface); border: 1px dashed var(--rule); border-radius: var(--radius); text-align: center; }
.empty-state--large { padding: 64px 20px; }
.empty-icon { font-size: 40px; color: var(--rule); margin-bottom: 12px; }
.muted { color: var(--ink-soft); }

/* ================= AUTH / LOGIN ================= */
.auth-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: var(--ink);
}
.auth-card {
  width: 100%; max-width: 360px;
  background: var(--surface);
  border-radius: 14px;
  padding: 36px 32px;
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
}
.auth-brand { text-align: center; margin-bottom: 24px; }
.auth-brand .brand-mark { color: var(--ink); font-size: 30px; }
.auth-brand .brand-sub { color: var(--ink-soft); margin-top: 4px; }
.auth-form { display: flex; flex-direction: column; }
.auth-label { font-size: 12px; font-weight: 600; color: var(--ink-mid); margin: 12px 0 5px; }
.auth-input {
  border: 1px solid var(--rule); border-radius: 8px;
  padding: 10px 12px; font-size: 14px; color: var(--ink);
  background: var(--surface);
}
.auth-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-lt); }
.auth-remember { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-mid); margin: 14px 0 4px; }
.auth-submit { margin-top: 16px; width: 100%; padding: 11px; font-size: 14px; }
.auth-flash { border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; }
.auth-flash--error { background: var(--red-lt); color: var(--red); }
.auth-flash--info { background: var(--accent-lt); color: var(--accent); }

.logout-form { margin: 0; margin-left: auto; }
.logout-btn {
  background: none; border: 1px solid rgba(255,255,255,.14);
  color: var(--ink-soft); width: 30px; height: 30px; border-radius: 7px;
  cursor: pointer; font-size: 14px; flex-shrink: 0;
}
.logout-btn:hover { color: #fff; border-color: rgba(255,255,255,.35); }

/* ================= PHASE 2 · CRM ================= */

/* Button variants */
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-xs { width: 26px; height: 26px; font-size: 11px; border-radius: 6px; }
.btn-ghost { background: none; border: 1px solid var(--rule); color: var(--ink-mid); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-danger:hover { border-color: var(--red); color: var(--red); }
.inline-block { display: inline-block; }

/* Nav badge */
.nav-badge {
  margin-left: auto; background: rgba(255,255,255,.14); color: #fff;
  font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
}
.nav-item.is-active .nav-badge { background: rgba(255,255,255,.28); }

/* Status dot */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.status-dot.active   { background: var(--green); }
.status-dot.prospect { background: var(--accent); }
.status-dot.paused   { background: var(--amber); }
.status-dot.archived { background: var(--ink-soft); }

/* Clients index layout */
.clients-grid { display: grid; grid-template-columns: 1fr 260px; gap: 24px; align-items: start; }
.clients-side { display: flex; flex-direction: column; gap: 16px; }

.client-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.client-tab {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
  padding: 7px 13px; font-size: 12.5px; font-weight: 500; color: var(--ink-mid); cursor: pointer;
}
.client-tab:hover { border-color: var(--ink-soft); }
.client-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.tab-count { opacity: .6; margin-left: 5px; font-variant-numeric: tabular-nums; }

.client-list { display: flex; flex-direction: column; gap: 8px; }
.client-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
}
.client-card { text-decoration: none; color: inherit; cursor: pointer; }
.client-card:hover { border-color: var(--accent); }
.client-card:hover .client-card-name { color: var(--accent); }
.client-card-main { flex: 1; min-width: 0; }
.client-card-name { font-weight: 600; font-size: 14.5px; display: block; }
.client-card-go { font-size: 12.5px; color: var(--accent); flex-shrink: 0; }
.client-card:hover .client-card-go { text-decoration: underline; }
.client-card-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.soft-pill { font-size: 11px; background: var(--canvas); color: var(--ink-mid); padding: 2px 9px; border-radius: 999px; }
.client-card-contact { font-size: 12px; color: var(--ink-soft); }
.client-card-stats { display: flex; gap: 16px; }
.mini-stat { text-align: center; }
.mini-num { display: block; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mini-label { font-size: 10.5px; color: var(--ink-soft); }

/* Client detail header */
.client-header { margin-bottom: 22px; }
.client-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.client-header-name { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.client-header-sub { margin: 6px 0 0; color: var(--ink-soft); font-size: 13px; }
.client-header-notes { margin: 10px 0 0; color: var(--ink-mid); font-size: 13px; max-width: 640px; white-space: pre-wrap; }
.client-header-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Three-column detail grid */
.client-detail-grid { display: grid; grid-template-columns: 240px 1fr 240px; gap: 20px; align-items: start; }

.detail-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 18px; box-shadow: var(--shadow); }
.detail-card-title { font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; }
.client-projects { margin-top: 20px; }

/* Contacts */
.contact-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.contact-card { display: flex; gap: 11px; align-items: flex-start; }
.contact-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-lt); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.contact-avatar.primary { background: var(--accent); color: #fff; }
.contact-card-body { flex: 1; min-width: 0; }
.contact-card-name { font-weight: 500; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.contact-card-role { font-size: 12px; color: var(--ink-soft); margin-top: 1px; }
.contact-card-links { display: flex; gap: 8px; margin-top: 4px; font-size: 13px; }
.contact-card-addresses { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.contact-address { font-size: 12px; color: var(--ink-soft); line-height: 1.35; white-space: pre-line; }
.contact-address-label { display: inline-block; min-width: 46px; font-weight: 600; color: var(--ink); margin-right: 6px; }
.contact-card-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* Activity timeline */
.activity-composer { background: var(--canvas); border: 1px solid var(--rule); border-radius: 9px; padding: 12px; margin-bottom: 14px; }
.composer-row { margin-bottom: 8px; }
.composer-type { border: 1px solid var(--rule); border-radius: 7px; padding: 6px 10px; font-size: 12.5px; background: var(--surface); }
.composer-body { width: 100%; border: 1px solid var(--rule); border-radius: 7px; padding: 8px 10px; font-size: 13px; font-family: inherit; resize: vertical; outline: none; }
.composer-body:focus { border-color: var(--accent); }
.composer-actions { margin-top: 8px; text-align: right; }
.activity-feed { display: flex; flex-direction: column; }
.activity-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.activity-item:last-child { border-bottom: none; }
.activity-icon { font-size: 16px; flex-shrink: 0; width: 24px; text-align: center; }
.activity-body { flex: 1; min-width: 0; }
.activity-title { font-size: 13px; font-weight: 500; }
.activity-text { font-size: 12.5px; color: var(--ink-mid); margin-top: 2px; white-space: pre-wrap; }
.activity-time { font-size: 11px; color: var(--ink-soft); margin-top: 4px; }

/* Follow-ups */
.followups-list { display: flex; flex-direction: column; margin-bottom: 12px; }
.followup-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.followup-item:last-child { border-bottom: none; }
.followup-body { flex: 1; min-width: 0; }
.followup-note { font-size: 13px; font-weight: 500; }
.followup-meta { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.followup-who { color: var(--ink-mid); }
.followup-actions { display: flex; gap: 4px; flex-shrink: 0; }
.due-today    { color: var(--amber); font-weight: 600; }
.due-upcoming { color: var(--ink-soft); }
.due-overdue  { color: var(--red); font-weight: 700; }
.btn-done:hover { border-color: var(--green); color: var(--green); }

/* Project line on client detail */
.project-line { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.project-line:last-child { border-bottom: none; }
.project-line-name { font-weight: 500; }
.project-line-tasks { color: var(--ink-soft); font-size: 12.5px; }
.project-line-go { margin-left: auto; color: var(--accent); font-size: 12.5px; }
.project-line:hover .project-line-go { text-decoration: underline; }

/* Forms (shared) */
.form-page { max-width: 560px; }
.field { margin-bottom: 14px; }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }
.field-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-mid); margin-bottom: 5px; }
.field-input {
  width: 100%; border: 1px solid var(--rule); border-radius: 8px;
  padding: 9px 11px; font-size: 13px; font-family: inherit; color: var(--ink);
  background: var(--surface); outline: none; margin-bottom: 8px;
}
.field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-lt); }
.field-input.has-error { border-color: var(--red); }
.field-error { color: var(--red); font-size: 12px; margin: -4px 0 8px; }
.form-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.empty-mini { color: var(--ink-soft); font-size: 12.5px; padding: 8px 0; }

.inline-form { background: var(--canvas); border: 1px solid var(--rule); border-radius: 9px; padding: 14px; margin-top: 10px; }

/* ================= PHASE 3 · PROJECTS + TASKS ================= */
:root { --accent-mid: #8b80e0; }

/* Projects index */
.projects-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.project-group { margin-bottom: 26px; }
.project-group-head { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin-bottom: 10px; }
.project-group-head a:hover { color: var(--accent); }
.project-list { display: flex; flex-direction: column; gap: 8px; }

.project-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
}
.project-card:hover { border-color: var(--accent); }
.project-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.project-card-main { flex: 1; min-width: 0; }
.project-card-name { font-weight: 600; font-size: 14.5px; }
.project-card-progress { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.project-card-progress .progress-bar-wrap { max-width: 180px; }
.project-card-progress-label { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
.project-card-side { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.project-card-hours { font-size: 12.5px; color: var(--ink-mid); font-variant-numeric: tabular-nums; }
.project-card-target { font-size: 12px; color: var(--ink-soft); }
.project-card-target.overdue { color: var(--red); font-weight: 600; }

/* Client-detail project line extras */
.detail-card-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.detail-card-title-row .detail-card-title { margin-bottom: 0; }
.detail-card-hint { font-size: 12px; color: var(--ink-soft); margin: -6px 0 12px; }
.client-tasks { margin-top: 20px; }
.client-tasks #client-task-form-container:not(:empty) { margin-bottom: 12px; }
.project-line-progress { width: 90px; flex-shrink: 0; }
.project-line-progress .progress-bar-wrap { margin-top: 0; }
.project-line-target { font-size: 12px; color: var(--ink-soft); }
.project-line-target.overdue { color: var(--red); font-weight: 600; }

/* Project detail */
.project-detail-grid { display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: start; }
.task-filter-tabs { display: flex; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; }
.task-filter { font-size: 12px; color: var(--ink-mid); padding: 6px 11px; border-radius: 7px; }
.task-filter:hover { background: var(--canvas); }
.task-filter.is-active { background: var(--ink); color: #fff; }
.add-task-btn { margin-bottom: 12px; }

/* Task list */
.task-list { display: flex; flex-direction: column; }

/* Task row */
.task-row {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 9px; padding: 11px 14px 11px 18px;
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px;
  position: relative; transition: border-color .15s;
}
.task-row:hover { border-color: var(--accent-mid); }
.task-row.done { opacity: .5; }
.priority-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 9px 0 0 9px; }
.priority-high .priority-bar { background: var(--red); }
.priority-medium .priority-bar { background: var(--amber); }
.priority-low .priority-bar { background: var(--green); }

.task-check {
  width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--rule);
  background: var(--surface); cursor: pointer; color: var(--green); font-size: 13px;
  flex-shrink: 0; margin-top: 1px;
}
.task-check:hover { border-color: var(--green); }
.task-check.checked { background: var(--green); border-color: var(--green); color: #fff; }

.task-body { flex: 1; min-width: 0; cursor: pointer; }
.task-row .task-title { font-weight: 500; font-size: 14px; }
.task-row .task-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--canvas); color: var(--ink-mid); }
.tag-due.overdue { background: var(--red-lt); color: var(--red); font-weight: 600; }
.tag-due.due-today { background: var(--amber-lt); color: var(--amber); font-weight: 600; }
.status-badge { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }

.status-select {
  border: 1px solid var(--rule); border-radius: 5px; padding: 3px 6px;
  font-size: 11px; font-family: inherit; color: var(--ink-mid);
  background: var(--canvas); cursor: pointer; outline: none;
}
.status-select:focus { border-color: var(--accent); }

.task-actions { display: flex; gap: 4px; align-items: center; opacity: 0; transition: opacity .15s; flex-shrink: 0; }
.task-row:hover .task-actions { opacity: 1; }
.task-action-btn {
  background: none; border: 1px solid transparent; border-radius: 6px;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-soft); font-size: 13px; transition: all .15s;
}
.task-action-btn:hover { background: var(--canvas); border-color: var(--rule); color: var(--ink); }
.task-action-btn.active { color: var(--amber); }

/* Task detail slideout */
.task-detail-panel {
  position: fixed; top: 0; right: 0; width: 380px; max-width: 92vw; height: 100vh;
  background: var(--surface); border-left: 1px solid var(--rule); padding: 24px;
  transform: translateX(100%); transition: transform .25s ease; z-index: 200;
  overflow-y: auto; box-shadow: -4px 0 24px rgba(0,0,0,.08);
}
.task-detail-panel.open { transform: translateX(0); }
.task-panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.15); z-index: 199; opacity: 0; pointer-events: none; transition: opacity .25s; }
.task-panel-overlay.visible { opacity: 1; pointer-events: auto; }
.panel-close { float: right; background: none; border: none; font-size: 16px; color: var(--ink-soft); cursor: pointer; }
.panel-close:hover { color: var(--ink); }
.panel-title-input { width: 100%; border: none; border-bottom: 2px solid transparent; font-size: 18px; font-weight: 600; padding: 4px 0; margin: 8px 0 18px; outline: none; }
.panel-title-input:focus { border-bottom-color: var(--accent); }
.panel-field { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.panel-field .field-input { margin-bottom: 0; }
.panel-field-block { margin-bottom: 14px; }
.panel-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); min-width: 84px; }
.panel-field-block .panel-label { display: block; margin-bottom: 5px; }
.panel-value { font-size: 13px; color: var(--accent); }
.panel-timelog { background: var(--canvas); border-radius: 8px; padding: 12px; margin: 14px 0; }
.panel-timelog-val { font-size: 15px; font-weight: 600; margin-top: 4px; }
.panel-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.panel-actions .btn.active { color: var(--amber); border-color: var(--amber); }

/* Progress bar */
.progress-bar-wrap { height: 5px; background: var(--rule); border-radius: 3px; overflow: hidden; width: 100%; margin-top: 8px; }
.progress-bar-fill { height: 100%; border-radius: 3px; transition: width .3s ease; }

/* Colour swatches */
.colour-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.colour-swatch { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: border-color .15s, transform .15s; }
.colour-swatch:hover { transform: scale(1.15); }
.colour-swatch.selected { border-color: var(--ink); transform: scale(1.15); }

/* ================= PHASE 4 · TODAY VIEW ================= */
.today-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.today-main { min-width: 0; }

.today-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.section-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mid); }
.task-count { background: var(--canvas); border: 1px solid var(--rule); color: var(--ink-soft); font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 10px; }
.add-from-projects { margin: 8px 0 4px; }

/* Today task row */
/* Soft focus target: rows beyond the target dim slightly + a gentle divider. */
.focus-divider { display: flex; align-items: center; gap: 10px; margin: 14px 2px 8px; }
.focus-divider::before, .focus-divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.focus-divider span { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap; }
.today-task-row.beyond-focus { opacity: .62; }
.today-task-row.beyond-focus:hover { opacity: 1; }
.today-task-row {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 9px;
  padding: 12px 14px 12px 18px; display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px; position: relative; transition: border-color .15s, box-shadow .15s;
}
.today-task-row:hover { border-color: var(--accent-mid); box-shadow: 0 2px 8px rgba(91,79,207,.06); }
.today-task-row.done { opacity: .45; }
.today-task-row.priority-high { border-left: 3px solid var(--red); }
.today-task-row.priority-medium { border-left: 3px solid var(--amber); }
.today-task-row.priority-low { border-left: 3px solid var(--green); }
.task-row-ghost { opacity: .4; background: var(--accent-lt); }

.drag-handle { color: var(--rule); cursor: grab; font-size: 14px; flex-shrink: 0; user-select: none; padding: 2px; transition: color .15s; }
.today-task-row:hover .drag-handle { color: var(--ink-soft); }
.drag-handle:active { cursor: grabbing; }

.today-task-body { flex: 1; min-width: 0; }
.today-task-title { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-task-title.strikethrough { text-decoration: line-through; }
.today-task-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.tag-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; margin-right: 3px; vertical-align: middle; }
.tag-project { font-weight: 600; }

.timer-btn {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 12px; flex-shrink: 0; transition: all .15s; background: var(--canvas); color: var(--ink-soft);
}
.timer-btn:hover { background: var(--accent); color: #fff; }
.timer-btn.running { background: var(--green); color: #fff; }

.today-remove-btn {
  width: 22px; height: 22px; border: none; background: none; color: var(--rule);
  cursor: pointer; font-size: 11px; flex-shrink: 0; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; transition: all .15s; opacity: 0;
}
.today-task-row:hover .today-remove-btn { opacity: 1; }
.today-remove-btn:hover { background: var(--red-lt); color: var(--red); }

/* Empty state */
.today-empty { text-align: center; padding: 60px 24px; color: var(--ink-soft); }
.today-all-done { padding: 32px 24px; }
.today-empty-icon { font-size: 40px; margin-bottom: 16px; }
.today-empty h3 { font-size: 18px; color: var(--ink); margin-bottom: 8px; font-weight: 500; }
.today-empty p { font-size: 13px; line-height: 1.6; margin-bottom: 20px; }

/* Right panel */
.today-right-panel { display: flex; flex-direction: column; gap: 12px; }
.stats-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.stats-card-title { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.stats-card .stat-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.stats-card .stat-row:last-child { margin-bottom: 0; }
.stat-number { font-family: Georgia, 'Times New Roman', serif; font-size: 22px; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.stats-card .stat-label { font-size: 11px; color: var(--ink-soft); }

.project-time-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.project-time-row:last-child { margin-bottom: 0; }
.project-time-label { font-size: 11px; font-weight: 600; width: 66px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-time-row .progress-bar-wrap { margin-top: 0; }
.project-time-hrs { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.count-badge { background: var(--accent); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 8px; margin-left: auto; }

/* Follow-up mini */
.followup-mini { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.followup-mini:last-child { border-bottom: none; }
.followup-mini-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-lt); color: var(--accent); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.followup-mini-body { flex: 1; min-width: 0; }
.followup-mini-name { font-size: 11px; font-weight: 500; }
.followup-mini-note { font-size: 10px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.followup-done-btn { background: none; border: 1px solid var(--rule); border-radius: 5px; padding: 2px 6px; font-size: 11px; cursor: pointer; color: var(--ink-soft); flex-shrink: 0; transition: all .15s; }
.followup-done-btn:hover { background: var(--green-lt); border-color: var(--green); color: var(--green); }

/* Quick-add popover */
.quick-add-wrap { position: relative; }
#quick-add-container:not(:empty) {
  position: absolute; right: 0; top: calc(100% + 8px); width: 320px; z-index: 120;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  padding: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.14);
}
.quick-add-form .field-row { display: flex; gap: 8px; }
.quick-add-form .field-row .field-input { flex: 1; }

/* Task picker modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 300; opacity: 0; pointer-events: none; transition: opacity .2s; }
.modal-overlay.visible { opacity: 1; pointer-events: auto; }
.pick-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; width: 480px; max-width: 92vw; max-height: 70vh; overflow-y: auto; z-index: 301; box-shadow: 0 20px 60px rgba(0,0,0,.15); padding: 20px; }
.pick-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pick-modal-title { font-size: 15px; font-weight: 600; }
.pick-modal-close { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 18px; line-height: 1; }
.pick-project-group { margin-bottom: 16px; }
.pick-project-header { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.pick-task-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; transition: background .1s; }
.pick-task-row:hover { background: var(--canvas); }
.pick-task-row.added { opacity: .55; }
.pick-task-title { flex: 1; font-size: 12px; }
.added-badge { font-size: 10px; color: var(--green); font-weight: 600; }
.priority-indicator { width: 16px; height: 16px; border-radius: 3px; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pick-task-row.priority-high .priority-indicator { background: var(--red-lt); color: var(--red); }
.pick-task-row.priority-medium .priority-indicator { background: var(--amber-lt); color: var(--amber); }
.pick-task-row.priority-low .priority-indicator { background: var(--green-lt); color: var(--green); }
.pick-add-btn { background: none; border: 1px solid var(--rule); border-radius: 6px; width: 24px; height: 24px; cursor: pointer; color: var(--accent); font-size: 13px; flex-shrink: 0; }
.pick-add-btn:hover { background: var(--accent-lt); border-color: var(--accent); }

.btn-full { width: 100%; justify-content: center; text-align: center; }

/* ================= PHASE 5 · TIME TRACKER ================= */

/* Timer pill (topbar) */
.timer-pill { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; transition: all .2s; }
.timer-pill.stopped { background: var(--canvas); color: var(--ink-soft); border: 1px solid var(--rule); }
.timer-dot.inactive { background: var(--rule); animation: none; }
.timer-idle-text { font-size: 11px; }

/* Running timer — a large, dominant module so elapsed time is unmissable. */
.timer-pill.running {
  background: var(--ink); color: #fff; gap: 14px;
  padding: 8px 10px 8px 16px; border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.timer-pill.running .timer-dot {
  width: 11px; height: 11px; border-radius: 50%; background: var(--green);
  flex-shrink: 0; animation: pulse 1.5s infinite;
}
.timer-main { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.02; min-width: 0; }
.timer-elapsed {
  font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums;
  font-size: 44px; font-weight: 700; color: var(--green); letter-spacing: .5px;
}
.timer-task-name {
  color: rgba(255,255,255,.72); font-size: 12.5px; font-weight: 500; margin-top: 3px;
  max-width: 300px; line-height: 1.25;
  /* Wrap over up to 3 lines instead of truncating to one. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.timer-btns { display: flex; flex-direction: column; gap: 5px; align-self: stretch; }
.timer-btns button {
  flex: 1; border: none; color: #fff; border-radius: 8px; padding: 4px 14px;
  font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  background: rgba(255,255,255,.15); transition: background .15s;
}
.timer-pause-btn:hover { background: var(--amber); }
.timer-stop-btn:hover { background: var(--red); }

/* Paused pill — frozen clock in amber (not counting). */
.timer-pill.paused { background: var(--ink); color: #fff; gap: 14px;
  padding: 8px 10px 8px 16px; border-radius: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.timer-dot.paused { width: 11px; height: 11px; border-radius: 50%; background: var(--amber); flex-shrink: 0; animation: none; }
.timer-elapsed.frozen { color: var(--amber); }
.timer-resume-btn { background: rgba(255,255,255,.16); }
.timer-resume-btn:hover { background: var(--green); }
.running-badge { background: var(--green-lt); color: var(--green); font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; letter-spacing: .5px; }

/* Time log page */
.time-log-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
#manual-entry-container:not(:empty) { background: var(--canvas); border: 1px solid var(--rule); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.manual-entry-form .field-row { display: flex; gap: 12px; }
.manual-entry-form .field-row .field { flex: 1; }
.field-inline { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-mid); margin: 4px 0 10px; }
.optional { color: var(--ink-soft); font-weight: 400; font-size: 11px; }

.time-summary-bar { display: flex; align-items: center; gap: 20px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 20px; margin-bottom: 20px; box-shadow: var(--shadow); flex-wrap: wrap; }
.summary-stat { display: flex; align-items: baseline; gap: 5px; }
.summary-number { font-family: Georgia, 'Times New Roman', serif; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.summary-number.billable { color: var(--green); }
.summary-number.accent { color: var(--accent); }
.summary-number.muted { color: var(--ink-soft); }
.summary-label { font-size: 11px; color: var(--ink-soft); }
.summary-divider { width: 1px; height: 30px; background: var(--rule); }

.log-filters { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.log-filters select { border: 1px solid var(--rule); border-radius: 7px; padding: 7px 10px; font-size: 12px; font-family: inherit; color: var(--ink-mid); background: var(--surface); outline: none; cursor: pointer; }
.log-filters select:focus { border-color: var(--accent); }

.log-date-group { margin-bottom: 20px; }
.log-date-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 2px solid var(--rule); margin-bottom: 6px; }
.log-date-label { font-size: 12px; font-weight: 600; color: var(--ink-mid); }
.log-date-total { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.log-entry-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; margin-bottom: 3px; background: var(--surface); border: 1px solid var(--rule); transition: border-color .15s; }
.log-entry-row:hover { border-color: var(--accent-mid); }
.log-entry-row.non-billable { opacity: .7; }
.entry-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.entry-body { flex: 1; min-width: 0; }
.entry-task-name { font-size: 13px; font-weight: 500; }
.entry-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.entry-project { font-size: 11px; font-weight: 500; }
.entry-client { font-size: 11px; color: var(--ink-soft); }
.entry-time-range { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.entry-notes { font-size: 11px; color: var(--ink-mid); font-style: italic; }
.entry-duration { font-size: 13px; font-weight: 500; color: var(--ink); min-width: 50px; text-align: right; font-variant-numeric: tabular-nums; }
.entry-amount { font-size: 12px; color: var(--ink-soft); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.entry-amount.muted { color: var(--rule); }
/* Billable time with no rate to value it at — a prompt, not a figure. */
a.entry-amount.no-rate { color: var(--ink-soft); font-size: 11px; text-decoration: underline dotted; text-underline-offset: 2px; }
a.entry-amount.no-rate:hover { color: var(--ink); }

.billable-toggle { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--rule); background: none; font-size: 10px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; }
.billable-toggle.on { background: var(--green-lt); color: var(--green); border-color: var(--green); }
.billable-toggle.off { color: var(--ink-soft); }
.billable-toggle:hover { border-color: var(--green); }

.entry-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.log-entry-row:hover .entry-actions { opacity: 1; }
.entry-action-btn { background: none; border: 1px solid var(--rule); border-radius: 5px; padding: 2px 8px; font-size: 10px; cursor: pointer; color: var(--ink-soft); font-family: inherit; transition: all .15s; }
.entry-action-btn:hover { border-color: var(--accent); color: var(--accent); }
.entry-action-btn.delete:hover { border-color: var(--red); color: var(--red); }
.log-entry-edit { background: var(--canvas); border: 1px solid var(--accent); border-radius: 8px; padding: 12px 14px; margin-bottom: 3px; }
.log-entry-edit .field-row { display: flex; gap: 10px; }
.log-entry-edit .field-row .field { flex: 1; }

.duration-inputs { display: flex; align-items: center; gap: 6px; }
.duration-part { width: 56px !important; }

/* Task detail panel — time section */
.task-time-section { border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 14px; }
.task-time-total { font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.task-time-entry { display: flex; gap: 8px; font-size: 11px; color: var(--ink-soft); padding: 3px 0; border-bottom: 1px solid var(--rule); }
.task-time-entry:last-child { border-bottom: none; }
.task-time-date { min-width: 40px; }
.task-time-dur { font-weight: 500; color: var(--ink-mid); min-width: 40px; font-variant-numeric: tabular-nums; }
.task-time-note { font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================= PHASE 6 · REPORTS ================= */
.report-section-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin: 4px 0 12px; }

.period-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.period-stat { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow); }
.period-stat-number { font-family: Georgia, 'Times New Roman', serif; font-size: 24px; color: var(--ink); line-height: 1; margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.period-stat-label { font-size: 11px; color: var(--ink-soft); }

.report-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px; }
.report-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px; transition: border-color .15s, box-shadow .15s; text-decoration: none; display: block; box-shadow: var(--shadow); }
.report-card:hover { border-color: var(--accent-mid); box-shadow: 0 4px 16px rgba(91,79,207,.08); }
.report-card-icon { font-size: 22px; margin-bottom: 10px; }
.report-card-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.report-card-desc { font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.report-card-link { font-size: 11px; color: var(--accent); margin-top: 10px; display: block; }

.budget-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.budget-row:last-child { border-bottom: none; }
.budget-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.budget-name { font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: none; width: 160px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.budget-name:hover { color: var(--accent); }
.budget-row .progress-bar-wrap { margin-top: 0; }
.budget-pct { font-size: 11px; font-weight: 600; color: var(--green); width: 40px; text-align: right; flex-shrink: 0; }
.budget-pct.warn { color: var(--amber); }
.budget-pct.danger { color: var(--red); }
.budget-no-cap { font-size: 11px; color: var(--ink-soft); flex: 1; }
.budget-earned { font-size: 12px; color: var(--ink-soft); margin-left: auto; font-variant-numeric: tabular-nums; }

/* Report nav + blocks */
.report-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.report-nav-label { font-size: 15px; font-weight: 600; color: var(--ink); flex: 1; text-align: center; }
.btn.disabled { opacity: .35; pointer-events: none; }
.export-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--ink-soft); border: 1px solid var(--rule); border-radius: 7px; padding: 5px 10px; text-decoration: none; transition: all .15s; background: var(--surface); }
.export-btn:hover { border-color: var(--accent); color: var(--accent); }
.log-filters-select { border: 1px solid var(--rule); border-radius: 7px; padding: 7px 10px; font-size: 12px; font-family: inherit; color: var(--ink-mid); background: var(--surface); outline: none; cursor: pointer; }
.log-filters-select:focus { border-color: var(--accent); }

.report-summary-line { font-size: 14px; color: var(--ink-mid); margin-bottom: 20px; font-weight: 500; }
.report-budget-line { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 2px; }
.report-block { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow); }
.report-block-title { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; }

/* Bar chart */
.bar-chart-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bar-label { font-size: 12px; font-weight: 500; color: var(--ink-mid); width: 130px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { flex: 1; height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }
.bar-value { font-size: 12px; font-weight: 500; color: var(--ink); width: 42px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.bar-secondary { font-size: 12px; color: var(--ink-soft); width: 56px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* Day bars (weekly) */
.day-bars { display: flex; gap: 8px; align-items: flex-end; }
.day-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.day-bar-wrap { width: 100%; display: flex; justify-content: center; align-items: flex-end; height: 92px; }
.day-bar { width: 28px; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; transition: height .3s ease; }
.day-bar.empty { background: var(--rule); }
.day-label { font-size: 10px; color: var(--ink-soft); }
.day-hours { font-size: 10px; font-weight: 600; color: var(--ink-mid); min-height: 12px; }

/* Report log rows / tables */
.report-log-hint { font-size: 12px; color: var(--ink-soft); margin: -6px 0 12px; }
.report-log-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 12.5px; }
.report-log-row:last-child { border-bottom: none; }
.report-log-project { font-weight: 600; width: 110px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-log-task { flex: 1; color: var(--ink-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-log-dur { width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
.report-log-amt { width: 50px; text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.report-table { display: flex; flex-direction: column; }
.report-table-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 12.5px; }
.report-table-row:last-child { border-bottom: none; }
.report-table-row.done { opacity: .6; }
.report-table-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-table-hrs { width: 70px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.report-table-amt { width: 60px; text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Client report cards */
.client-report-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow); }
.client-report-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.client-report-name { font-size: 14px; font-weight: 600; }
.client-report-totals { font-size: 13px; color: var(--ink-mid); font-variant-numeric: tabular-nums; }
.client-report-pct { font-size: 11px; color: var(--ink-soft); margin-top: 5px; }
.client-report-projects { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.client-project-row { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 4px 0; color: var(--ink-mid); }
.client-project-row a:hover { color: var(--accent); }

/* Projection box */
.projection-box { background: var(--accent-lt); border: 1px solid rgba(91,79,207,.2); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.projection-box p { font-size: 12.5px; color: var(--accent); line-height: 1.6; margin: 0; }
.projection-box strong { color: var(--ink); }

/* ================= PHASE 7 · AUTH / BILLING / MARKETING ================= */
.auth-link { font-size: 12.5px; color: var(--accent); text-decoration: none; display: block; text-align: center; margin-top: 12px; }
.auth-link:hover { text-decoration: underline; }
.auth-divider { font-size: 11px; color: var(--ink-soft); text-align: center; margin: 16px 0 6px; text-transform: uppercase; letter-spacing: .08em; }
.auth-flash--success { background: var(--green-lt); color: var(--green); }

/* Flash messages (in-app) */
.flash { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; max-width: 640px; }
.flash-success { background: var(--green-lt); color: var(--green); }
.flash-error { background: var(--red-lt); color: var(--red); }
.flash-info { background: var(--accent-lt); color: var(--accent); }

/* Trial banner */
.trial-banner { background: var(--accent-lt); border-bottom: 1px solid rgba(91,79,207,.2); padding: 8px 20px; font-size: 12px; color: var(--accent); text-align: center; }
.trial-banner a { color: var(--accent); font-weight: 600; margin-left: 8px; }

/* Sidebar plan badge */
.sidebar-billing-link { display: inline-block; margin-top: 3px; }
.plan-badge { font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; padding: 2px 7px; border-radius: 8px; background: rgba(255,255,255,.14); color: #cfcfe6; }
.plan-badge.trial { background: rgba(232,145,42,.22); color: var(--amber); }
.plan-badge.solo { background: rgba(91,79,207,.25); color: #b3aaf0; }
.plan-badge.team { background: rgba(46,184,122,.22); color: var(--green); }
.plan-badge.developer { background: rgba(91,79,207,.35); color: #cfc7ff; }
.logout-btn[href] { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Pricing cards */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 860px; margin: 0 auto; }
.pricing-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 24px; position: relative; box-shadow: var(--shadow); }
.pricing-card.highlight { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.popular-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .5px; padding: 3px 10px; border-radius: 10px; white-space: nowrap; }
.coming-soon-badge { background: var(--ink-soft); }
.pricing-card.coming-soon { opacity: .72; }
.pricing-name { font-size: 14px; font-weight: 600; color: var(--ink-mid); margin-bottom: 8px; }
.price-amount { font-family: Georgia, 'Times New Roman', serif; font-size: 36px; color: var(--ink); }
.price-period { font-size: 13px; color: var(--ink-soft); }
.price-was { font-family: Georgia, 'Times New Roman', serif; font-size: 22px; color: var(--ink-soft); text-decoration: line-through; margin-right: 8px; }
.pricing-intro { display: inline-block; margin: 8px 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); background: var(--accent-lt); padding: 3px 10px; border-radius: 20px; }
.pricing-annual { font-size: 11px; color: var(--ink-soft); margin: 4px 0 16px; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 20px; }
.pricing-features li { font-size: 12px; color: var(--ink-mid); padding: 4px 0; }
.pricing-annual-link { display: block; text-align: center; font-size: 11px; color: var(--accent); text-decoration: none; margin-top: 8px; }

/* Settings sections */
.settings-section { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 20px 24px; margin-bottom: 16px; box-shadow: var(--shadow); }
.settings-section-title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.settings-field { margin-bottom: 14px; }
.settings-field label { display: block; font-size: 11px; font-weight: 500; color: var(--ink-mid); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .8px; }
.settings-field input, .settings-field select { width: 100%; max-width: 360px; border: 1px solid var(--rule); border-radius: 8px; padding: 9px 12px; font-size: 13px; font-family: inherit; outline: none; }
.settings-field input:focus { border-color: var(--accent); }
.settings-field input:disabled { background: var(--canvas); color: var(--ink-soft); }
.settings-hint { font-size: 11.5px; color: var(--ink-soft); margin: 10px 0 0; }
/* A button directly after a hint sat flush against the text — "Manage team",
   "Invoice settings", "Connect Xero" and the rest all touched the line above.
   The pattern appears in 26 places, so it is one rule rather than 26 inline
   styles. The hint's own bottom margin is 0, so this is the entire gap.

   This rule existed for two rounds of "fixed" without moving anything,
   because those buttons are <a> elements and margin-top does nothing on a
   plain inline element. The real fix was giving .btn a display mode; see the
   comment there. Worth remembering when a style change appears not to
   deploy: check the element can obey the property before blaming the cache. */
.settings-hint + .btn { margin-top: 14px; }

/* Changelog page */
.changelog { max-width: 720px; }
.changelog > .btn { margin-bottom: 20px; }
.changelog-group { margin-bottom: 36px; }
.changelog-group-head h2 { font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.changelog-group-head p { font-size: 13px; color: var(--ink-soft); margin: 0 0 18px; }
.changelog-phases { list-style: none; margin: 0; padding: 0; }
.changelog-phase { display: flex; gap: 16px; position: relative; padding-bottom: 20px; }
.changelog-phase:not(:last-child)::before {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: var(--rule);
}
.changelog-phase-no {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; z-index: 1;
}
.changelog-phase-body h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 5px 0 4px; }
.changelog-phase-body p { font-size: 13px; color: var(--ink-mid); line-height: 1.5; margin: 0; }
.changelog-updates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.changelog-updates li {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px;
}
.changelog-tag {
  flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--accent);
  background: var(--accent-lt); border-radius: 20px; padding: 3px 10px; margin-top: 2px; min-width: 64px; text-align: center;
}
/* Only the entry TITLE (direct child of the entry body) is block; bold words
   inside a paragraph stay inline. */
.changelog-updates li > div > strong { display: block; font-size: 14px; color: var(--ink); margin-bottom: 3px; }
.changelog-updates p { font-size: 13px; color: var(--ink-mid); line-height: 1.5; margin: 0; }
.changelog-updates p strong { color: var(--ink); }
/* Phase milestones sitting inline in the chronological stream */
.changelog-updates li.changelog-milestone {
  background: var(--accent-lt); border-color: var(--accent-mid); align-items: center;
}
.changelog-milestone-no {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 15px; min-width: 40px;
}
.changelog-milestone strong { font-size: 15px; }
.changelog-foot { font-size: 12px; color: var(--ink-soft); text-align: center; margin-top: 8px; }
@media (max-width: 640px) {
  .changelog-updates li { flex-direction: column; gap: 8px; }
  .changelog-tag { text-align: left; }
}

/* Transient error toast (network / server errors) */
.m-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--red); color: #fff; font-size: 13px; font-weight: 500; padding: 11px 18px;
  border-radius: 9px; box-shadow: 0 8px 30px rgba(0,0,0,.2); z-index: 500; opacity: 0;
  pointer-events: none; transition: opacity .2s, transform .2s; max-width: 90vw; text-align: center; }
.m-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.m-toast.success { background: var(--green); }

/* Marketing page */
.marketing-body { background: var(--canvas); }
.marketing-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 40px; border-bottom: 1px solid var(--rule); background: var(--surface); }
.marketing-nav .brand-mark { font-family: Georgia, serif; font-style: italic; font-size: 22px; color: var(--ink); }
.marketing-nav-actions { display: flex; gap: 10px; }
.marketing-hero { text-align: center; padding: 80px 40px 50px; max-width: 720px; margin: 0 auto; }
.marketing-headline { font-family: Georgia, 'Times New Roman', serif; font-size: 46px; line-height: 1.15; color: var(--ink); margin-bottom: 20px; }
.marketing-sub { font-size: 18px; color: var(--ink-mid); line-height: 1.6; margin-bottom: 30px; }
.marketing-cta { display: flex; gap: 12px; justify-content: center; }
.marketing-cta-note { font-size: 12px; color: var(--ink-soft); margin-top: 12px; }
.marketing-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px 40px 40px; max-width: 900px; margin: 0 auto; }
.marketing-feature { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 20px; }
.marketing-feature-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.marketing-feature-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.marketing-pricing { text-align: center; padding: 40px; }
.marketing-pricing h2 { font-family: Georgia, serif; font-size: 26px; margin-bottom: 8px; }
.marketing-pricing-line { font-size: 14px; color: var(--ink-mid); margin-bottom: 4px; }
.marketing-footer { text-align: center; padding: 24px; font-size: 11px; color: var(--ink-soft); border-top: 1px solid var(--rule); }

/* ================= PHASE 8 · POLISH ================= */

/* Onboarding */
.onboarding-body { min-height: 100vh; background: var(--canvas); }
.onboarding-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 40px; border-bottom: 1px solid var(--rule); background: var(--surface); }
.onboarding-header .brand-mark { font-family: Georgia, serif; font-style: italic; font-size: 22px; color: var(--ink); }
.onboarding-progress { height: 3px; background: var(--rule); }
.onboarding-progress-fill { height: 100%; background: var(--accent); transition: width .4s ease; }
.onboarding-container { max-width: 520px; margin: 60px auto; padding: 0 20px; }
.onboarding-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 32px; box-shadow: var(--shadow); }
.onboarding-step-label { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.onboarding-title { font-family: Georgia, 'Times New Roman', serif; font-size: 26px; color: var(--ink); margin-bottom: 8px; line-height: 1.2; }
.onboarding-desc { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 24px; }
.onboarding-field { margin-bottom: 16px; }
.onboarding-field label { display: block; font-size: 12px; font-weight: 500; color: var(--ink-mid); margin-bottom: 5px; }
.onboarding-field input, .onboarding-field select { width: 100%; border: 1px solid var(--rule); border-radius: 8px; padding: 11px 14px; font-size: 14px; font-family: inherit; outline: none; transition: border-color .15s; }
.onboarding-field input:focus, .onboarding-field select:focus { border-color: var(--accent); }
.onboarding-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.skip-link { font-size: 12px; color: var(--ink-soft); text-decoration: none; background: none; border: none; cursor: pointer; }
.skip-link:hover { color: var(--ink); }
.onboarding-timer-demo { background: var(--ink); border-radius: 10px; padding: 14px 20px; display: flex; align-items: center; gap: 12px; margin: 20px 0 24px; color: #fff; font-size: 13px; }

/* Stock control */
.prod-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.prod-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-soft); }
.prod-form .field-input { font-size: 14px; }
.prod-check { flex-direction: row !important; align-items: center; gap: 6px; }
.prod-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.prod-row.prod-inactive { opacity: .5; }
.prod-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prod-name { font-weight: 600; font-size: 14px; }
.prod-sku { font-size: 11px; color: var(--ink-soft); font-family: ui-monospace, Menlo, monospace; }
.prod-desc { font-size: 12px; color: var(--ink-soft); }
.prod-price { font-weight: 700; white-space: nowrap; }
.prod-per { font-size: 11px; font-weight: 400; color: var(--ink-soft); }
.prod-adjust { display: flex; align-items: center; gap: 6px; margin: 0; }
.prod-step { width: 26px; height: 26px; border: 1px solid var(--rule); background: var(--canvas); border-radius: 6px; cursor: pointer; font-size: 15px; }
.prod-qty { min-width: 34px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.prod-qty.low { color: var(--red); }
.prod-service { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .4px; }
.prod-actions { min-width: 60px; }

/* Bronze / Platinum plan fork */
.plan-fork { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.plan-fork-card { border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; }
.plan-fork-card--platinum { border-color: var(--accent); }
.plan-fork-name { font-size: 14px; font-weight: 700; }
.plan-fork-price { font-size: 22px; font-weight: 800; margin: 2px 0 6px; }
.plan-fork-card p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 10px; }
@media (max-width: 640px) { .plan-fork { grid-template-columns: 1fr; } }

/* Narrative sections */
.nar-section { border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.nar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.nar-title { font-size: 15px; font-weight: 700; }
.nar-status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.nar-status.approved { color: var(--green); }
.nar-status.draft { color: var(--amber, var(--ink-soft)); }
.nar-status.none { color: var(--ink-soft); }
.nar-section textarea { width: 100%; font-size: 14px; line-height: 1.55; font-family: inherit; padding: 10px; resize: vertical; }
.nar-actions { display: flex; gap: 8px; margin-top: 8px; }

/* Bugs / Requested Features: inline add form on the aggregated page */
.issue-add-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 16px; }
.issue-add-form input[type="text"] { flex: 1; min-width: 200px; }
.issue-add-form select { max-width: 180px; }

/* All Tasks: client-side word filter */
.all-tasks-filter { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.all-tasks-filter input { flex: 1; max-width: 420px; }
.all-task-filter-count { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

/* Today: show/hide completed tasks (client-side pref) */
.today-done-toggle { font-size: 12px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; margin-left: 6px; }
html[data-today-done="hide"] #done-task-list { display: none; }
/* Same idea on the Tasks page, except the Done tab exists to list finished
   work — .shows-completed marks that list so this rule leaves it alone. */
.tasks-done-toggle { font-size: 12px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
html[data-tasks-done="hide"] #task-list:not(.shows-completed) .task-row.done { display: none; }

/* Adaptive workspace notices (Phase 47) — grow-on card + tidied banner */
.nav-notice { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; border: 1px solid var(--rule); }
.nav-notice--grow { background: var(--accent-lt, var(--canvas)); border-color: var(--accent); }
.nav-notice--tidied { background: var(--canvas); }
.nav-notice-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nav-notice-body strong { font-size: 13px; color: var(--ink); }
.nav-notice-body span { font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.nav-notice-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-notice-actions form { margin: 0; }
.nav-notice-dismiss { background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--ink-soft); padding: 0 4px; }
.nav-notice-dismiss:hover { color: var(--ink); }
@media (max-width: 640px) { .nav-notice { flex-direction: column; align-items: flex-start; } }

/* Settings: your-workspace feature toggles (Phase 47) */
.workspace-feature-group { margin-bottom: 18px; }
.workspace-feature-group:last-child { margin-bottom: 0; }
.workspace-feature-group-name { font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px; }
.workspace-features-list { display: flex; flex-direction: column; gap: 4px; }
.workspace-feature-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.workspace-feature-row:last-child { border-bottom: none; }
.workspace-feature-icon { font-size: 15px; flex-shrink: 0; }
.workspace-feature-body { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.workspace-feature-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.workspace-feature-blurb { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.workspace-feature-row form { margin: 0; display: flex; align-items: center; gap: 8px; }
.workspace-feature-state { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.workspace-feature-state.on { color: var(--green); }
.workspace-feature-state.off { color: var(--ink-soft); }

/* Onboarding feature picker (Phase 47) */
.onboarding-features-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 8px; }
.onboarding-feature-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.onboarding-feature-row:hover { border-color: var(--accent); background: var(--canvas); }
.onboarding-feature-row input { margin-top: 3px; flex-shrink: 0; }
.onboarding-feature-icon { font-size: 16px; flex-shrink: 0; line-height: 1.4; }
.onboarding-feature-body { display: flex; flex-direction: column; gap: 2px; }
.onboarding-feature-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.onboarding-feature-blurb { font-size: 12px; color: var(--ink-soft); line-height: 1.5; }

/* Empty state additions */
.empty-title { font-size: 17px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.empty-desc { font-size: 13px; line-height: 1.6; margin: 0 auto 20px; max-width: 320px; color: var(--ink-soft); }
.empty-secondary-link { display: block; font-size: 12px; color: var(--accent); text-decoration: none; margin-top: 12px; }
.empty-state-new-user { padding: 60px 24px; }

/* Marketing additions */
.btn-lg { padding: 14px 28px; font-size: 15px; }
.marketing-cta-group { display: flex; align-items: center; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.marketing-trust { font-size: 12px; color: var(--ink-soft); margin-top: 16px; }
.marketing-secondary-link { font-size: 13px; color: var(--accent); text-decoration: none; }
.marketing-secondary-link:hover { text-decoration: underline; }
.marketing-nav-links { display: flex; align-items: center; gap: 20px; }
.marketing-nav-links a:not(.btn) { font-size: 13px; color: var(--ink-mid); text-decoration: none; }
.marketing-nav-links a:not(.btn):hover { color: var(--ink); }
.marketing-screenshot-section { padding: 20px 40px 60px; text-align: center; }
.marketing-screenshot-wrap { display: inline-block; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); box-shadow: 0 20px 60px rgba(0,0,0,.1); max-width: 100%; }
.marketing-screenshot { max-width: 100%; display: block; }
.marketing-features-section, .marketing-comparison-section, .marketing-pricing-section, .marketing-about-section { padding: 60px 40px; }
.marketing-features-section, .marketing-comparison-section { background: var(--canvas); }
.marketing-section-title { font-family: Georgia, 'Times New Roman', serif; font-size: 32px; color: var(--ink); text-align: center; margin-bottom: 40px; }
.marketing-feature-icon { font-size: 24px; margin-bottom: 10px; }
.marketing-comparison-sub { text-align: center; font-size: 15px; color: var(--ink-mid); max-width: 560px; margin: -20px auto 32px; line-height: 1.6; }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 760px; margin: 0 auto; }
.comparison-col { border-radius: 12px; padding: 20px 24px; }
.comparison-them { background: var(--surface); border: 1px solid var(--rule); }
.comparison-us { background: var(--accent-lt); border: 1px solid rgba(91,79,207,.2); }
.comparison-col-title { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.comparison-us .comparison-col-title { color: var(--accent); }
.comparison-col ul { list-style: none; padding: 0; margin: 0; }
.comparison-col li { font-size: 13px; padding: 5px 0; color: var(--ink-mid); line-height: 1.4; }
.marketing-pricing-section { text-align: center; }
.marketing-pricing-note { font-size: 13px; color: var(--ink-soft); margin-top: 20px; }
.pricing-aside { font-size: 14px; color: var(--ink-soft); margin-top: 18px; }
.pricing-aside a { color: var(--accent); font-weight: 600; text-decoration: none; }
.pricing-aside a:hover { text-decoration: underline; }
.marketing-compare-link { text-align: center; margin: 4px 0 0; }
.marketing-compare-link a { color: var(--accent); font-weight: 600; text-decoration: none; font-size: 15px; }
.marketing-compare-link a:hover { text-decoration: underline; }
.marketing-about { max-width: 600px; margin: 0 auto; }
.marketing-about h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 26px; color: var(--ink); margin-bottom: 16px; }
.marketing-about p { font-size: 14px; color: var(--ink-mid); line-height: 1.7; margin-bottom: 12px; }

/* Legal pages */
.legal-page { max-width: 680px; margin: 0 auto; padding: 40px 20px; }
.legal-title { font-family: Georgia, 'Times New Roman', serif; font-size: 30px; color: var(--ink); margin-bottom: 8px; }
.legal-updated { font-size: 12px; color: var(--ink-soft); margin-bottom: 32px; }
.legal-page h2 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 24px 0 8px; }
.legal-page p { font-size: 13px; color: var(--ink-mid); line-height: 1.7; margin-bottom: 12px; }
.legal-page ul { font-size: 13px; color: var(--ink-mid); line-height: 1.7; padding-left: 20px; }

/* ================= STORY / ABOUT PAGE ================= */
.story-page { max-width: 640px; margin: 0 auto; padding: 32px 20px 72px; }
.story-back { display: inline-block; font-size: 13px; color: var(--ink-soft); text-decoration: none; margin-bottom: 28px; }
.story-back:hover { color: var(--ink-mid); }
.story-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 40px; line-height: 1.1; color: var(--ink); margin-bottom: 16px; }
.story-lede { font-size: 17px; line-height: 1.6; color: var(--ink-mid); margin-bottom: 36px; }
.story-page h2 { font-size: 19px; font-weight: 600; color: var(--ink); margin: 36px 0 10px; }
.story-page p { font-size: 15px; color: var(--ink-mid); line-height: 1.75; margin-bottom: 14px; }
.story-cta { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--rule); text-align: center; }
.story-signoff { font-family: 'DM Serif Display', Georgia, serif; font-style: italic; font-size: 18px; color: var(--ink-soft); margin-top: 20px; }

/* ================= LEAD MAGNET / GUIDE ================= */
.guide-hero { max-width: 620px; margin: 0 auto; padding: 48px 20px 72px; }
.guide-hero-inner { }
.guide-eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, #5b4fcf); margin-bottom: 16px; }
.guide-hero-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 44px; line-height: 1.08; color: var(--ink); margin-bottom: 18px; }
.guide-hero-sub { font-size: 17px; line-height: 1.6; color: var(--ink-mid); margin-bottom: 28px; }
.guide-bullets { list-style: none; padding: 0; margin: 0 0 32px; }
.guide-bullets li { position: relative; padding-left: 28px; font-size: 15px; color: var(--ink-mid); line-height: 1.5; margin-bottom: 12px; }
.guide-bullets li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent, #5b4fcf); font-weight: 700; }
.guide-fineprint { font-size: 12px; color: var(--ink-soft); line-height: 1.6; margin-top: 16px; text-align: center; }

/* Capture form (used on the guide page + inline on the homepage) */
.lead-capture { background: var(--surface, #fff); border: 1px solid var(--rule); border-radius: 14px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,.05); }
.lead-form-row { display: flex; gap: 10px; margin-bottom: 14px; }
.lead-form-row .field-input { flex: 1; }
.lead-form-row .btn { white-space: nowrap; }
.lead-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; cursor: pointer; }
.lead-consent input { margin-top: 2px; flex-shrink: 0; }
.lead-error { margin-top: 12px; font-size: 13px; color: #c0392b; }
.lead-thanks { text-align: center; padding: 12px 8px; }
.lead-thanks-icon { font-size: 34px; margin-bottom: 8px; }
.lead-thanks h3 { font-size: 19px; color: var(--ink); margin: 0 0 8px; }
.lead-thanks p { font-size: 14px; color: var(--ink-mid); line-height: 1.6; margin: 0; }
@media (max-width: 520px) { .lead-form-row { flex-direction: column; } }

/* Inline homepage capture band */
.marketing-lead-band { background: var(--surface-2, #f4f2fb); padding: 56px 20px; text-align: center; }
.marketing-lead-band .lead-band-inner { max-width: 520px; margin: 0 auto; }
.marketing-lead-band h2 { font-family: 'DM Serif Display', Georgia, serif; font-size: 30px; color: var(--ink); margin-bottom: 8px; }
.marketing-lead-band p.lead-band-sub { font-size: 15px; color: var(--ink-mid); line-height: 1.6; margin-bottom: 24px; }

/* Confirm / unsubscribe result pages */
.guide-result { max-width: 520px; margin: 0 auto; padding: 72px 20px; text-align: center; }
.guide-result-icon { font-size: 44px; margin-bottom: 16px; }
.guide-result h1 { font-family: 'DM Serif Display', Georgia, serif; font-size: 34px; color: var(--ink); margin-bottom: 14px; }
.guide-result p { font-size: 15px; color: var(--ink-mid); line-height: 1.6; margin-bottom: 28px; }
.guide-result-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* Owner leads table */
.leads-admin-head { display: flex; gap: 10px; margin-bottom: 20px; }
.leads-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.leads-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); padding: 8px 12px; border-bottom: 1px solid var(--rule); }
.leads-table td { padding: 10px 12px; border-bottom: 1px solid var(--rule); color: var(--ink-mid); }
.lead-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.lead-badge--on { background: #e3f9ec; color: #1a7f4b; }
.lead-badge--pending { background: #fff4e0; color: #b57d10; }
.lead-badge--off { background: #f0f0f4; color: #8888a8; }

/* ================= INBOX ================= */
.inbox { max-width: 1100px; }
.inbox-add { display: flex; gap: 8px; align-items: center; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow); }
.inbox-add-input { flex: 1; }
.inbox-add-priority { width: auto; flex-shrink: 0; }
/* Inbox search — quieter than the capture field above it, so the thing you
   type into most stays the obvious one. */
.inbox-search { position: relative; margin-bottom: 12px; }
.inbox-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: 15px; color: var(--ink-soft); pointer-events: none; }
.inbox-search-input { width: 100%; padding-left: 30px; }
.inbox-search-input::-webkit-search-cancel-button { cursor: pointer; }
.inbox-search-summary { display: flex; align-items: center; gap: 10px; font-size: 12px;
  color: var(--ink-soft); padding: 0 2px 2px; }
.inbox-search-clear { background: none; border: none; padding: 0; font-size: 12px;
  color: var(--accent); cursor: pointer; text-decoration: underline dotted; }
.inbox-search-clear:hover { text-decoration-style: solid; }
.inbox-list { display: flex; flex-direction: column; gap: 8px; }
.inbox-row { display: flex; align-items: center; gap: 10px; position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 14px 10px 16px; }
.inbox-row .priority-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.inbox-row-body { flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; }
/* `break-word`, not `anywhere`: both break a long unbroken word, but `anywhere`
   also drops the element's *minimum* content width to one character. Put that
   next to a flex sibling that won't shrink and the title collapses to a
   one-letter column — which is exactly what a narrow screen did to it. */
.inbox-row-title { font-size: 14px; font-weight: 500; color: var(--ink); overflow-wrap: break-word; }
.inbox-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.inbox-assign { width: auto; }
.inbox-empty { margin-top: 8px; }
.panel-hint { display: block; font-size: 11.5px; color: var(--amber, var(--ink-soft)); margin-top: 5px; }

/* ================= CLIENT DOCUMENTS ================= */
.client-documents { margin-top: 20px; }
.document-upload { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.document-upload input[type=file] { flex: 1; min-width: 160px; padding: 7px 10px; font-size: 12.5px; }
.document-upload select { width: auto; flex: 0 0 auto; min-width: 120px; }
.document-upload .btn { flex: 0 0 auto; }
.document-list { display: flex; flex-direction: column; }
.document-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.document-row:last-child { border-bottom: none; }
.document-icon { flex-shrink: 0; }
.document-name { flex: 1; min-width: 0; color: var(--accent); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.document-name:hover { text-decoration: underline; }
.document-size { font-size: 11.5px; color: var(--ink-soft); flex-shrink: 0; }
.document-date { font-size: 11.5px; color: var(--ink-soft); flex-shrink: 0; width: 82px; text-align: right; }
/* The row is flex with a gap, so the tag just takes its place in the line —
   no column count to keep in step. */
/* A select rather than a label: filing is the common action on this row, and
   a pill you have to click through to a form to change is a read-only label
   wearing a costume. */
.document-tag-select { font-size: 11px; color: var(--ink-soft); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 2px 8px; flex-shrink: 0; cursor: pointer; max-width: 130px; }
.document-tag-select:hover { border-color: var(--accent-mid); color: var(--ink); }
.document-tag-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.document-save { color: var(--ink-soft); text-decoration: none; font-size: 13px; flex-shrink: 0; padding: 0 2px; }
.document-save:hover { color: var(--accent); }
.activity-filter { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
/* .field-input is width:100%, so without this the period picker stretches
   the whole card — the same thing the upload row's folder menu did. */
.activity-filter select { width: auto; flex: 0 0 auto; min-width: 130px; }
.import-filter-banner { background: var(--accent-lt, var(--sunken)); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; }
.import-filter-banner a { margin-left: 8px; }
.doc-open { font-size: 12px; text-decoration: none; white-space: nowrap; margin-left: 8px; }
.doc-open:hover { text-decoration: underline; }
.doc-open--plain { color: var(--ink-soft); cursor: default; }
.doc-file-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 6px; }
.doc-file-size { color: var(--ink-soft); font-size: 11.5px; }
.prospect-score { font-size: 11.5px; font-weight: 600; color: var(--accent); background: var(--sunken); border-radius: 999px; padding: 1px 8px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.prospect-linkedin { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; background: #0a66c2; color: #fff; font-size: 11px; font-weight: 700; text-decoration: none; flex-shrink: 0; }
.prospect-linkedin:hover { opacity: .85; }
.prod-use { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.prod-use-amt { width: 58px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 5px; font-size: 12px; text-align: right; background: var(--surface); color: var(--ink); }
.prod-use-unit { font-size: 11px; color: var(--ink-soft); min-width: 34px; }
.prod-use-btn { border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); border-radius: 5px; padding: 3px 7px; font-size: 11.5px; cursor: pointer; }
.prod-use-btn:hover { background: var(--sunken); color: var(--ink); }
.invoice-payments { margin-top: 20px; }
.payment-row { align-items: flex-start; gap: 8px; }
.payment-ref { font-size: 11px; color: var(--ink-soft); }
.amount-outstanding { color: var(--red, #b3261e); font-weight: 600; }
.payment-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.payment-form-row { display: flex; gap: 8px; }
.payment-field { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.payment-field > span { font-size: 11px; color: var(--ink-soft); }
/* .field-input is width:100%, which is wanted inside these columns — the
   select is constrained by its own field, not left to stretch the panel. */
.payment-field .field-input { width: 100%; }
.activity-filter-clear { font-size: 11.5px; color: var(--ink-soft); text-decoration: none; }
.activity-filter-clear:hover { color: var(--accent); text-decoration: underline; }
.activity-details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; margin-bottom: 0; }
.activity-details > summary::-webkit-details-marker { display: none; }
/* The marker is drawn rather than inherited so it turns with the panel and
   matches the card titles, which are uppercase and letter-spaced. */
.activity-details > summary::before { content: "▸"; font-size: 10px; transition: transform .12s; display: inline-block; }
.activity-details[open] > summary::before { transform: rotate(90deg); }
.activity-details > summary:hover { color: var(--accent); }
.activity-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.activity-details[open] > summary { margin-bottom: 14px; }

/* ── Client record tabs ────────────────────────────────────────────────── */
.record-tabs { margin: 18px 0 16px; flex-wrap: wrap; }
/* `data-ready` is set by the script. Until then nothing is hidden, so with
   JavaScript off the record is the single long page it used to be rather than
   a set of tabs that show nothing. */
.record-panels[data-ready] .record-panel { display: none; }
.record-panels[data-ready] .record-panel.is-active { display: block; }
.record-panel > .detail-card + .detail-card { margin-top: 20px; }
.record-panel > .client-details-grid + .detail-card { margin-top: 20px; }
.client-details-grid { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .client-details-grid { grid-template-columns: 1fr; } }
/* An empty count would otherwise leave a gap after the label. */
.record-tabs .tab-count:empty { display: none; }
.document-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.document-upload-status { font-size: 11.5px; color: var(--ink-soft); flex-basis: 100%; }
.detail-card-count { font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ================= DISPLAY PREFERENCES ================= */
/* Text size — zoom the working area (topbar + content). */
html[data-text-size="large"] .main { zoom: 1.12; }
html[data-text-size="larger"] .main { zoom: 1.25; }

/* Reduce motion */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  transition: none !important; animation: none !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Hide the sidebar project list (clients-only nav) */
html[data-nav="hide-projects"] .nav-item--project,
html[data-nav="hide-projects"] .nav-section-label--projects,
html[data-nav="hide-projects"] .nav-projects,
html[data-nav="hide-projects"] .nav-empty,
html[data-nav="hide-projects"] .nav-item--muted { display: none; }

/* Sidebar fly-out menus (groups + Projects) */
.nav-projects, .nav-flyout-wrap { position: relative; }
.nav-item--projects-trigger, .nav-flyout-trigger { width: 100%; background: none; border: none;
  font: inherit; text-align: left; cursor: pointer; }
.nav-caret { margin-left: auto; font-size: 14px; opacity: .55; transition: transform .15s; }
.nav-flyout-wrap.open .nav-caret, .nav-projects.open .nav-caret { transform: rotate(90deg); opacity: .9; }
.nav-flyout-trigger .nav-caret { margin-left: auto; }
/* Group badges sit just before the caret, not pushed to the far edge. */
.nav-group-count, .nav-group-alert { margin-left: auto; }
.nav-group-count + .nav-caret, .nav-group-alert + .nav-caret { margin-left: 6px; }
.nav-divider { height: 1px; background: rgba(255,255,255,.08); margin: 10px 12px 4px; }
.nav-flyout {
  position: fixed; z-index: 400; display: none; flex-direction: column;
  width: 238px; max-height: 72vh; padding: 8px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 14px 44px rgba(0,0,0,.20);
}
.nav-flyout.open { display: flex; }
.nav-flyout-head { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); padding: 4px 8px 6px; }
.nav-flyout-scroll { overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.nav-flyout-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px;
  color: var(--ink); text-decoration: none; font-size: 13px; }
.nav-flyout-item:hover { background: var(--canvas); }
.nav-flyout-item.is-active { background: var(--accent-lt); color: var(--accent); }
.nav-flyout-item .nav-dot { flex-shrink: 0; }
.nav-flyout-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-flyout-sub { padding-left: 8px; }
.nav-flyout-sub-tick { color: var(--ink-soft); font-size: 11px; flex-shrink: 0; margin-right: -2px; }
.nav-flyout-empty { padding: 8px 9px; font-size: 12.5px; color: var(--ink-soft); }
.nav-flyout-all { margin-top: 5px; padding: 8px 9px 4px; border-top: 1px solid var(--rule);
  color: var(--ink-soft); text-decoration: none; font-size: 12.5px; }
.nav-flyout-all:hover { color: var(--accent); }

/* ===== Today ticker (opt-in, toggled in Settings) ===== */
.today-ticker { display: none; }
html[data-ticker="on"] .today-ticker {
  display: flex; align-items: center; gap: 14px;
  position: fixed; left: var(--sidebar-w); right: 0; bottom: 0; height: 34px; z-index: 60;
  background: var(--ink); color: #fff; padding: 0 14px; overflow: hidden;
  box-shadow: 0 -2px 10px rgba(0,0,0,.12);
}
/* Keep content clear of the fixed bar. */
html[data-ticker="on"] .content { padding-bottom: 52px; }
.ticker-label { flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; opacity: .85; padding-right: 12px; border-right: 1px solid rgba(255,255,255,.2); }
.ticker-empty { font-size: 12.5px; opacity: .8; }
.ticker-viewport { flex: 1; overflow: hidden; }
.ticker-track { display: inline-flex; align-items: center; gap: 30px; white-space: nowrap;
  will-change: transform; animation: ticker-scroll 40s linear infinite; }
.today-ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 7px; color: #fff; text-decoration: none; font-size: 12.5px; }
.ticker-item:hover .ticker-item-title { text-decoration: underline; }
.ticker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.ticker-dot.priority-dot-high { background: var(--red); }
.ticker-dot.priority-dot-medium { background: var(--amber); }
.ticker-dot.priority-dot-low { background: var(--green); }
.ticker-item-ctx { opacity: .7; font-size: 11.5px; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Respect reduce-motion: stop scrolling, allow manual horizontal scroll instead. */
html[data-motion="off"] .ticker-viewport { overflow-x: auto; }
html[data-motion="off"] .ticker-track { animation: none; }
/* Tablet: align the ticker to the narrower sidebar. */
@media (max-width: 1024px) and (min-width: 641px) {
  html[data-ticker="on"] .today-ticker { left: 190px; }
}
/* Phone: the sidebar becomes a fixed bottom nav bar, so hide the ticker. */
@media (max-width: 640px) {
  html[data-ticker="on"] .today-ticker { display: none; }
  html[data-ticker="on"] .content { padding-bottom: 16px; }
}

/* Dark theme — override the palette tokens, then fix the few ink-as-background spots. */
html[data-theme="dark"] {
  --ink:       #e9e9f2;
  --ink-mid:   #b7b7cf;
  --ink-soft:  #8585a4;
  --rule:      #2c2c40;
  --surface:   #1e1e2c;
  --canvas:    #13131d;
  --accent-lt: #272251;
  --green-lt:  #122f27;
  --amber-lt:  #33280f;
  --red-lt:    #371c1c;
}
html[data-theme="dark"] body { background: var(--canvas); color: var(--ink); }
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .timer-pill.running,
html[data-theme="dark"] .onboarding-timer-demo { background: #0d0d16; }
html[data-theme="dark"] .client-tab.is-active,
html[data-theme="dark"] .task-filter.is-active { background: #3a34a0; border-color: #3a34a0; }
html[data-theme="dark"] .auth-body { background: #0d0d16; }
html[data-theme="dark"] .panel-card, html[data-theme="dark"] .stats-card,
html[data-theme="dark"] .detail-card, html[data-theme="dark"] .report-block,
html[data-theme="dark"] .row-card, html[data-theme="dark"] .task-row,
html[data-theme="dark"] .today-task-row, html[data-theme="dark"] .client-card,
html[data-theme="dark"] .project-card, html[data-theme="dark"] .log-entry-row { box-shadow: none; }

/* ================= CALENDAR ================= */
.cal-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-title { font-size: 16px; font-weight: 600; color: var(--ink); margin-left: 6px; }
.cal-views { margin-bottom: 0; }
.cal-hours { font-size: 10.5px; font-weight: 700; color: var(--green); background: var(--green-lt); border-radius: 8px; padding: 1px 6px; white-space: nowrap; }

/* Month grid */
.cal-weekdays, .cal-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-weekday { padding: 6px 8px; font-size: 11px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; text-align: left; }
.cal-month { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--surface); }
.cal-cell { min-height: 104px; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); padding: 6px 7px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.cal-week > .cal-cell:first-child { border-left: none; }
.cal-cell.other-month { background: var(--canvas); }
.cal-cell.other-month .cal-daynum { color: var(--ink-soft); opacity: .55; }
.cal-cell.is-today { background: var(--accent-lt); }
.cal-cell-head { display: flex; align-items: center; justify-content: space-between; }
.cal-daynum { font-size: 12px; font-weight: 600; color: var(--ink); }
.cal-cell.is-today .cal-daynum { color: var(--accent); }
.cal-cell-tasks { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }

/* Shabbat / Yom Tov (opt-in) — days kept clear, drawn with a soft diagonal hatch */
.cal-cell.is-shabbat,
.cal-col.is-shabbat,
.cal-day-view.is-shabbat {
  background-image: repeating-linear-gradient(-45deg, transparent 0 9px, rgba(232,145,42,0.10) 9px 18px);
  background-color: rgba(232,145,42,0.045);
}
.cal-col.is-shabbat { border-color: rgba(232,145,42,0.45); }
.cal-rest-label {
  display: inline-flex; align-items: center; gap: 3px; max-width: 100%;
  font-size: 9.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  color: var(--amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-rest-label.is-erev { color: var(--ink-soft); font-weight: 600; }
.cal-col .cal-rest-label, .cal-day-summary .cal-rest-label { font-size: 10.5px; }

/* Live "this falls on Shabbat / Yom Tov" note under a date picker (warn-only) */
.shabbat-warn {
  display: none; margin-top: 6px; padding: 7px 10px; border-radius: 8px;
  font-size: 12px; line-height: 1.35; color: var(--ink);
  background: rgba(232,145,42,0.12); border-left: 3px solid var(--amber);
}
.shabbat-warn.is-active { display: block; }

/* A task chip (shared by all views) */
.cal-task { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink); text-decoration: none;
  background: var(--canvas); border-radius: 5px; padding: 2px 6px; overflow: hidden; }
.cal-task:hover { background: var(--accent-lt); }
.cal-task.done .cal-task-title { text-decoration: line-through; color: var(--ink-soft); }
/* Settings → "Hide completed tasks on the calendar" */
html[data-cal-done="hide"] .cal-task.done { display: none; }

/* Meetings / blocked time — filled accent chip, distinct from tasks. */
.cal-controls-right { display: flex; align-items: center; gap: 12px; }
.cal-event { display: flex; align-items: center; gap: 5px; font-size: 11.5px; text-decoration: none;
  padding: 2px 6px; border-radius: 4px; background: var(--accent); color: #fff; overflow: hidden; cursor: pointer; }
.cal-event:hover { filter: brightness(.94); }
.cal-event.all-day { background: var(--accent-lt); color: var(--accent); }
.cal-event-mark { font-weight: 700; font-size: 10.5px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.cal-event .cal-task-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Event add/edit modal */
.event-modal { position: fixed; z-index: 510; top: 50%; left: 50%; transform: translate(-50%, -47%);
  width: min(440px, 92vw); max-height: 88vh; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.28);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.event-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.event-form-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 2px; }
.event-form-head h3 { margin: 0; font-size: 17px; }
.event-form .field { padding: 10px 20px 0; }
.event-form-row { display: flex; gap: 14px; align-items: flex-end; padding: 10px 20px 0; }
.event-form-row .field { padding: 0; flex: 1; }
.event-allday { flex-shrink: 0; padding-bottom: 9px; white-space: nowrap; }
.event-form-actions { display: flex; gap: 8px; align-items: center; padding: 18px 20px; margin-top: 10px; border-top: 1px solid var(--rule); }
.event-form-actions .btn-danger { margin-left: auto; }
.modal-x { background: none; border: none; font-size: 16px; color: var(--ink-soft); cursor: pointer; padding: 4px; line-height: 1; }
.modal-x:hover { color: var(--ink); }
.cal-task-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cal-task-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-task.priority-high { box-shadow: inset 2px 0 0 var(--red); }
.cal-task-time { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); flex-shrink: 0; }
.cal-task-flag { font-size: 10px; color: var(--amber); flex-shrink: 0; }
.cal-task.kind-due { background: var(--amber-lt); }
.cal-task.kind-due:hover { background: var(--amber-lt); filter: brightness(.97); }
.cal-task.kind-due .cal-task-title { color: var(--ink); }
.cal-task-carried { font-size: 10px; color: var(--amber); flex-shrink: 0; }
.cal-task.carried { box-shadow: inset 2px 0 0 var(--amber); }

/* Projected repeats — dates a series lands on that have no row behind them yet.
   Dashed and faded so a forecast never reads as a booked commitment. */
.cal-task.kind-repeat { background: transparent; border: 1px dashed var(--rule); opacity: .72; }
.cal-task.kind-repeat:hover { opacity: 1; border-color: var(--accent-mid); }
.cal-task-repeat { font-size: 10px; color: var(--ink-soft); flex-shrink: 0; }
.cal-event.is-repeat { background: transparent; border: 1px dashed var(--accent-mid); color: var(--accent); opacity: .8; }
.cal-event.is-repeat:hover { opacity: 1; }

/* Two inputs side by side in a panel field (scheduled date + time). */
.panel-inline-fields { display: flex; gap: 8px; }
.panel-inline-fields .field-input { margin-bottom: 0; }

/* "Carried over" note under the scheduled field — original date, read-only. */
.carried-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 8px; font-size: 12px; color: var(--ink-soft); }
.carried-note-icon { color: var(--amber); font-weight: 700; }
.carried-note-late { color: var(--amber); font-weight: 600; }
.field-input.is-locked { opacity: .55; cursor: not-allowed; background: var(--surface-2, var(--rule)); }
.carried-origin { width: auto; max-width: 140px; margin-bottom: 0; }

/* ===== Task checklist (subtasks) ===== */
.checklist-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.checklist-progress { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.checklist-progress.complete { color: var(--green); }
.checklist-bar { height: 5px; border-radius: 3px; background: var(--canvas); overflow: hidden; margin-bottom: 8px; }
.checklist-bar span { display: block; height: 100%; background: var(--green); transition: width .2s; }
.checklist-items { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.checklist-item { display: flex; align-items: center; gap: 8px; padding: 3px 2px; }
.checklist-check { width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid var(--rule); border-radius: 5px;
  background: var(--surface); cursor: pointer; font-size: 11px; color: #fff; line-height: 1; display: grid; place-items: center; }
.checklist-check.checked { background: var(--green); border-color: var(--green); }
.checklist-item-title { flex: 1; font-size: 13px; color: var(--ink); }
.checklist-item.done .checklist-item-title { text-decoration: line-through; color: var(--ink-soft); }
.checklist-del { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 12px; opacity: 0; transition: opacity .15s; }
.checklist-item:hover .checklist-del { opacity: 1; }
.checklist-del:hover { color: var(--red); }
.checklist-add { display: flex; gap: 6px; }
.checklist-add .field-input { margin-bottom: 0; }
.tag-checklist { background: var(--canvas); color: var(--ink-soft); border: 1px solid var(--rule); }
.tag-checklist.complete { color: var(--green); border-color: var(--green); }

/* Week view */
.cal-week-view { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal-col { border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); min-height: 260px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.cal-col.is-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cal-col-head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.cal-col-wd { font-size: 11px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; }
.cal-col-num { font-size: 18px; font-weight: 700; color: var(--ink); }
.cal-col-tasks { display: flex; flex-direction: column; gap: 4px; }
.cal-col-empty { color: var(--ink-soft); font-size: 12px; }

/* Day view */
.cal-day-view { max-width: 620px; }
.cal-day-summary { display: flex; gap: 18px; margin-bottom: 14px; font-size: 13px; }
.cal-day-hours { font-weight: 700; color: var(--green); }
.cal-day-count { color: var(--ink-soft); }
.cal-day-tasks { display: flex; flex-direction: column; gap: 6px; }
.cal-day-tasks .cal-task { font-size: 13px; padding: 8px 12px; }

@media (max-width: 760px) {
  .cal-week-view { grid-template-columns: 1fr; }
  .cal-cell { min-height: 76px; }
  .cal-task-title { font-size: 10.5px; }
}

/* ================= LEAD PIPELINE ================= */
.pipeline-toolbar { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
.pipeline-toolbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.pipeline-sort { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.call-list-toolbar-right { display: flex; align-items: center; gap: 12px; }
.pipeline-sort select { width: auto; }
.pipeline-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.pipeline-col { flex: 0 0 232px; background: var(--canvas); border: 1px solid var(--rule); border-radius: 12px; padding: 10px; }
.pipeline-col-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.pipeline-col-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.pipeline-col-count { font-size: 11px; font-weight: 700; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 0 7px; }
.pipeline-col-value { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--green); }
.pipeline-col.stage-won .pipeline-col-title { color: var(--green); }
.pipeline-col.stage-lost .pipeline-col-title { color: var(--red); }
.pipeline-col-cards { display: flex; flex-direction: column; gap: 8px; }
.pipeline-col-empty { color: var(--ink-soft); font-size: 12px; text-align: center; padding: 8px 0; }
.pipeline-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 9px; padding: 9px 10px; box-shadow: var(--shadow); }
.pipeline-card-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.pipeline-card-name:hover { color: var(--accent); }
.pipeline-card-value { font-size: 12px; font-weight: 700; color: var(--green); margin-top: 2px; }
.pipeline-card-call { display: inline-block; font-size: 12px; color: var(--accent); text-decoration: none; margin-top: 4px; }
.pipeline-card-source { font-size: 11px; color: var(--ink-soft); margin-top: 3px; }
.pipeline-card-meta { font-size: 11px; color: var(--ink-soft); margin-top: 3px; }
.pipeline-stage-select { margin-top: 7px; width: 100%; }

/* ================= LEAD IMPORT ================= */
.import-page { max-width: 720px; }
.import-map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 18px; }
.import-map-row { display: flex; flex-direction: column; gap: 4px; }
.import-map-label { font-size: 12px; font-weight: 600; color: var(--ink); }
.import-preview { margin: 18px 0; }
.import-preview-title { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: 8px; }
.import-preview-table { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.import-preview-table th, .import-preview-table td { padding: 6px 10px; border-bottom: 1px solid var(--rule); text-align: left; }
.import-preview-table th { background: var(--canvas); font-weight: 600; color: var(--ink-soft); }
.import-result { display: flex; gap: 24px; margin: 8px 0 16px; }
.import-result-num { font-size: 28px; font-weight: 700; color: var(--green); }
.import-result-stat { font-size: 14px; }
.import-result-note {
  margin: 14px 0; padding: 12px 14px; font-size: 14px;
  background: var(--amber-lt); border-radius: 8px; color: var(--ink);
}
.import-result-note ul { margin: 6px 0 4px 18px; }
@media (max-width: 640px) { .import-map-grid { grid-template-columns: 1fr; } }

/* Contacts import (Phase 14) — builds on the shared .import-* styles above */
.import-source-note {
  background: var(--accent-lt);
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--ink-mid);
  border-radius: 0 7px 7px 0;
  margin-bottom: 14px;
}
.import-option-section {
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.import-option-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.import-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-mid);
  padding: 5px 0;
  cursor: pointer;
}
.import-radio input[type="radio"] { flex-shrink: 0; }

.import-preview-table tr.is-duplicate td { background: var(--amber-lt); }
.import-preview-table tr.is-skip td { opacity: 0.55; }
.action-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 5px;
}
.action-create { background: var(--green-lt); color: var(--green); }
.action-update { background: var(--accent-lt); color: var(--accent); }
.action-skip   { background: var(--canvas); color: var(--ink-soft); }

.import-result-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.import-result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--rule);
}
.import-result-row:last-child { border-bottom: none; }
.import-result-icon { font-size: 18px; width: 24px; text-align: center; }
.import-result-count { font-size: 22px; font-weight: 700; min-width: 34px; color: var(--ink); }
.import-result-label { color: var(--ink-mid); }

.import-error-list {
  background: var(--red-lt);
  border: 1px solid var(--red);
  border-radius: 9px;
  padding: 12px 14px;
}
.import-error-row { font-size: 12px; color: var(--red); padding: 3px 0; }

.import-history-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
}
.import-history-row:last-child { border-bottom: none; }
.import-history-file { font-weight: 600; color: var(--ink); flex: 0 0 auto; min-width: 140px; }
.import-history-meta { color: var(--ink-mid); flex: 1; }
.import-history-date { color: var(--ink-soft); white-space: nowrap; }

/* Webhooks (Phase 15) */
.webhook-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 8px;
}
.webhook-card.inactive { opacity: 0.6; }
.webhook-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.webhook-desc { font-size: 13px; font-weight: 600; color: var(--ink); }
.webhook-url {
  font-size: 11px;
  color: var(--ink-soft);
  font-family: monospace;
  word-break: break-all;
  margin-bottom: 6px;
}
.webhook-events { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.event-tag {
  font-size: 10px;
  font-weight: 600;
  background: var(--accent-lt);
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: monospace;
}
.webhook-last-delivery { font-size: 11px; color: var(--ink-soft); margin-bottom: 8px; }
.webhook-actions { display: flex; gap: 6px; }

.event-checkboxes { display: flex; flex-direction: column; gap: 8px; }
.event-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.event-checkbox-row:hover { border-color: var(--accent-mid); }
.event-checkbox-row input { margin-top: 2px; flex-shrink: 0; }
.event-checkbox-body { display: flex; flex-direction: column; gap: 2px; }
.event-label { font-size: 13px; font-weight: 500; }
.event-desc { font-size: 11px; color: var(--ink-soft); }

.secret-reveal-card { max-width: 560px; margin: 0 auto; text-align: center; padding: 24px 8px; }
.secret-reveal-icon { font-size: 40px; margin-bottom: 14px; }
.secret-reveal-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.secret-reveal-card > p { font-size: 13px; color: var(--ink-soft); margin-bottom: 20px; }
.secret-display {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  border-radius: 9px;
  padding: 12px 16px;
  margin-bottom: 20px;
  text-align: left;
}
.secret-display code {
  font-family: monospace;
  font-size: 12px;
  color: #e8e8f0;
  word-break: break-all;
  flex: 1;
}
.secret-usage { text-align: left; background: var(--canvas); border-radius: 9px; padding: 14px; }
.secret-usage pre {
  background: var(--ink);
  color: #e8e8f0;
  border-radius: 7px;
  padding: 12px;
  font-size: 11px;
  overflow-x: auto;
  margin-top: 8px;
}
.secret-usage pre code { color: #e8e8f0; }

.delivery-log { margin-top: 8px; }
.delivery-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
}
.delivery-row:last-child { border-bottom: none; }
.delivery-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.delivery-dot.success { background: var(--green); }
.delivery-dot.fail { background: var(--red); }
.delivery-event { font-weight: 500; min-width: 140px; color: var(--ink-mid); font-family: monospace; }
.delivery-code { min-width: 36px; font-family: monospace; color: var(--ink-soft); }
.delivery-time { color: var(--ink-soft); min-width: 90px; }
.delivery-attempts { color: var(--amber); font-size: 10px; min-width: 60px; }
.delivery-error { flex: 1; }
.delivery-error-text { color: var(--red); font-size: 11px; }
@media (max-width: 640px) {
  .delivery-event { min-width: 80px; }
  .delivery-attempts { display: none; }
}

/* Goal pyramids */
.goal-page { padding-bottom: 160px; }   /* room for a bottom-row box's editor popover */
.goal-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.goal-tool { position: relative; }
.goal-tool > summary { list-style: none; cursor: pointer; display: inline-flex; }
.goal-tool > summary::-webkit-details-marker { display: none; }
.goal-tool-body {
  position: absolute; z-index: 30; top: 100%; left: 0; margin-top: 6px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
  padding: 12px; width: 320px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.goal-layout { display: flex; gap: 20px; align-items: flex-start; }
.goal-pyramid { flex: 1; min-width: 0; }
.goal-side {
  width: 240px; flex-shrink: 0; background: var(--canvas);
  border: 1px solid var(--rule); border-radius: 10px; padding: 14px; font-size: 13px;
}
.goal-side h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); margin: 0 0 6px; }
.goal-statement {
  margin-top: 16px; text-align: center; font-style: italic; color: var(--ink-mid);
  font-size: 14px; padding: 10px; border-top: 1px solid var(--rule);
}
.goal-progress { font-size: 13px; color: var(--ink-mid); margin-bottom: 12px; }
.goal-progress strong { color: var(--ink); font-size: 15px; }
.goal-progress-complete { color: var(--green); font-weight: 600; }

.pyr-scroll { overflow-x: auto; padding-bottom: 8px; }
.pyr-grid { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: max-content; }
.pyr-row { display: flex; gap: 6px; justify-content: center; }
.pyr-box {
  position: relative; width: 158px; height: 72px; box-sizing: border-box;
  border: 1px solid var(--rule); border-radius: 7px; background: var(--surface);
  padding: 8px 11px; font-size: 12.5px; line-height: 1.35; color: var(--ink);
  overflow: hidden; cursor: pointer; display: flex; align-items: center;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.pyr-box:hover { border-color: var(--accent-mid); }
.pyr-text {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.pyr-apex {
  background: var(--accent); border-color: var(--accent); color: #fff;
  font-weight: 700; font-size: 13px; cursor: default; height: 80px; min-width: 240px;
}
.pyr-apex:hover { border-color: var(--accent); }
.pyr-blank { border-style: dashed; background: transparent; color: var(--ink-soft); }
.pyr-written { border-color: var(--ink-soft); }
.pyr-next { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-lt); }
.pyr-completed { background: var(--green-lt); border-color: var(--green); }
.pyr-completed .pyr-text { text-decoration: line-through; color: var(--ink-soft); }
.pyr-check { position: absolute; top: 3px; right: 4px; color: var(--green); font-weight: 700; font-size: 11px; }
.pyr-today { position: absolute; bottom: 3px; right: 4px; color: var(--accent); font-size: 9px; }
.pyr-dragging { opacity: 0.4; }
.pyr-drop-target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

.pyr-box.pyr-editing { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-lt); }
/* The editor is a fixed panel pinned to the bottom-centre of the screen, so it's
   always fully visible with all its buttons regardless of which box is edited. */
.pyr-edit-form {
  position: fixed; z-index: 60; left: 50%; bottom: 28px; transform: translateX(-50%);
  width: 440px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--accent); border-radius: 11px;
  padding: 16px; box-shadow: 0 16px 44px rgba(0,0,0,0.28);
  display: flex; flex-direction: column; gap: 11px;
}
.pyr-edit-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--ink-soft); }
.pyr-edit-input {
  width: 100%; box-sizing: border-box; border: 1px solid var(--rule);
  border-radius: 6px; padding: 9px 11px; font-size: 14px; font-family: inherit; color: var(--ink);
}
.pyr-edit-input:focus { border-color: var(--accent); outline: none; }
.pyr-edit-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.pyr-edit-actions--secondary { padding-top: 8px; border-top: 1px solid var(--rule); }
/* Readable buttons inside the box editor (overrides the tiny .btn-xs). */
.pyr-edit-actions .btn { font-size: 13px; padding: 7px 14px; line-height: 1.1; }
.btn-xs { font-size: 10px; padding: 3px 7px; }
@media (max-width: 720px) {
  .goal-layout { flex-direction: column; }
  .goal-side { width: 100%; }
}

/* Revenue dashboard (Phase 17) */
.rev-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.rev-kpi { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; }
.rev-kpi--alert { border-color: var(--red); background: var(--red-lt); }
.rev-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--ink-soft); font-weight: 700; }
.rev-kpi-num { font-family: Georgia, 'Times New Roman', serif; font-size: 28px; color: var(--ink); margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.rev-kpi-sub { font-size: 11px; color: var(--ink-soft); }
.rev-kpi--alert .rev-kpi-num { color: var(--red); }

.rev-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
.rev-card-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--ink-soft); margin-bottom: 14px; }
.rev-two-col { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; }

.rev-bars { display: flex; align-items: flex-end; gap: 8px; height: 180px; }
.rev-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.rev-bar-val { font-size: 9.5px; color: var(--ink-soft); margin-bottom: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rev-bar { width: 100%; max-width: 46px; min-height: 2px; background: var(--accent-lt); border-radius: 5px 5px 0 0; transition: height .2s; }
.rev-bar--current { background: var(--accent); }
.rev-bar-label { font-size: 10px; color: var(--ink-soft); margin-top: 6px; }

.rev-proj-num { font-family: Georgia, 'Times New Roman', serif; font-size: 32px; color: var(--green); font-variant-numeric: tabular-nums; }
.rev-proj-unit { font-size: 15px; color: var(--ink-soft); font-family: inherit; }

.rev-client-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 12.5px; }
.rev-client-name { width: 130px; flex-shrink: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-client-track { flex: 1; height: 8px; background: var(--canvas); border-radius: 5px; overflow: hidden; }
.rev-client-fill { height: 100%; background: var(--accent); border-radius: 5px; }
.rev-client-amt { width: 76px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-mid); }

.rev-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rev-table th { font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-soft); padding: 6px 10px; border-bottom: 1px solid var(--rule); text-align: left; }
.rev-table td { padding: 8px 10px; border-bottom: 1px solid var(--rule); color: var(--ink-mid); }
.rev-table td:last-child, .rev-table th.num, .rev-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .rev-kpis { grid-template-columns: 1fr 1fr; }
  .rev-two-col { grid-template-columns: 1fr; }
  .rev-client-name { width: 90px; }
}

/* Invoice chasing (Phase 18) */
.chase-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.chase-row:last-child { border-bottom: none; }
.chase-info { font-size: 13px; color: var(--ink-mid); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.chase-info strong { color: var(--ink); }
.chase-client { color: var(--ink-mid); }
.chase-amt { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.chase-days { color: var(--red); font-size: 11px; font-weight: 600; }
.chase-meta { color: var(--ink-soft); font-size: 11px; }
.chase-actions { display: flex; gap: 6px; flex-shrink: 0; }
.chase-tone { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 5px; margin-left: 6px; }
.chase-tone--reminder { background: var(--green-lt); color: var(--green); }
.chase-tone--follow_up { background: var(--amber-lt); color: var(--amber); }
.chase-tone--final { background: var(--red-lt); color: var(--red); }

/* Chase modal reuses the shared .modal-overlay/.modal-card convention
   (hidden by default, shown with the .visible class). */
.modal-card--wide { max-width: 560px; width: 560px; max-height: 90vh; overflow-y: auto; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-close { background: none; border: none; font-size: 18px; color: var(--ink-soft); cursor: pointer; line-height: 1; padding: 2px 6px; }
.modal-close:hover { color: var(--ink); }

/* ================= PROJECT CATEGORY / GROUPING ================= */
.project-category-chip { display: inline-block; font-size: 10.5px; font-weight: 600; color: var(--accent);
  background: var(--accent-lt); border-radius: 20px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; }
.project-card-client { font-size: 11.5px; color: var(--ink-soft); margin-left: 6px; }
.projects-toolbar-right { display: flex; align-items: center; gap: 16px; }
.group-by { font-size: 12px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; }
.group-by-opt { color: var(--ink-soft); text-decoration: none; padding: 2px 4px; border-radius: 5px; }
.group-by-opt:hover { color: var(--accent); }
.group-by-opt.is-active { color: var(--accent); font-weight: 600; }
.cat-hours { font-size: 12.5px; color: var(--ink-mid); min-width: 60px; text-align: right; }
.delete-page { max-width: 560px; }

/* ================= CALL LIST ================= */
.call-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.call-list-toolbar .client-tabs { margin-bottom: 0; }
.call-list-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.call-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.call-sort:hover { color: var(--accent); }
.call-sort.is-active { color: var(--accent); }
.call-sort-arrow { font-size: 9px; }
.call-list-table th { text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; padding: 8px 12px; border-bottom: 1px solid var(--rule); }
.call-list-table td { padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.call-row:hover { background: var(--canvas); }
.call-name a { font-weight: 600; color: var(--ink); text-decoration: none; }
.call-name a:hover { color: var(--accent); }
.call-rating { font-size: 11px; color: var(--amber); margin-left: 6px; }
.call-type, .call-postcode { color: var(--ink-soft); }
.call-name { padding-right: 28px; white-space: nowrap; } /* one line; modest gap to Type, not full auto-stretch */
.call-open { width: 100%; text-align: right; } /* soaks up leftover width so Lead/Type sit close */
.call-dial { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--accent);
  text-decoration: none; background: var(--accent-lt); border-radius: 20px; padding: 4px 12px; white-space: nowrap; }
.call-dial:hover { filter: brightness(.96); }
.call-stage select { width: auto; min-width: 120px; }

/* Prev / next record navigation */
.record-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.record-nav-count { font-size: 12.5px; color: var(--ink-soft); }
.record-nav-count a { color: var(--accent); text-decoration: none; }
.btn.is-disabled { opacity: .4; pointer-events: none; }

/* ================= SALES SCRIPT PANEL (slide-out) ================= */
.script-dock { position: fixed; top: 0; right: 0; height: 100vh; z-index: 350; pointer-events: none; }
/* Edge tab handle — always reachable while calling. */
.script-toggle {
  position: fixed; right: 0; top: 42%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  padding: 12px 7px; border-radius: 10px 0 0 10px; box-shadow: -2px 2px 10px rgba(0,0,0,.16);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; pointer-events: auto; z-index: 351;
}
.script-toggle-icon { font-size: 15px; }
.script-toggle-label { writing-mode: vertical-rl; text-orientation: mixed; text-transform: uppercase; }
.script-toggle:hover { filter: brightness(.96); }
.script-dock.open .script-toggle { right: min(420px, 88vw); }
/* The panel itself, hidden off the right edge until opened. */
.script-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(420px, 88vw);
  background: var(--surface); border-left: 1px solid var(--rule);
  box-shadow: -8px 0 26px rgba(0,0,0,.14);
  transform: translateX(100%); transition: transform .22s ease;
  display: flex; flex-direction: column; pointer-events: auto;
}
.script-dock.open .script-panel { transform: translateX(0); }
.script-panel-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.script-panel-head select { flex: 1; }
.script-panel-close { background: none; border: none; font-size: 16px; color: var(--ink-soft); cursor: pointer; line-height: 1; padding: 4px; }
.script-panel-close:hover { color: var(--ink); }
.script-body {
  flex: 1; overflow-y: auto; padding: 18px 18px 24px;
  font-size: 15px; line-height: 1.55; color: var(--ink);
}
.script-body .ss-h { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px;
  color: var(--accent); margin: 18px 0 8px; }
.script-body .ss-h:first-child { margin-top: 0; }
.script-body .ss-p { margin: 0 0 9px; }
.script-body .ss-quote { margin: 0 0 9px; color: var(--ink); }
.script-body .ss-hint { color: var(--ink-soft); font-size: 13px; margin: 0 0 9px; font-style: italic; }
.script-body .ss-bullet { position: relative; padding-left: 15px; margin: 0 0 5px; }
.script-body .ss-bullet::before { content: "•"; position: absolute; left: 2px; color: var(--ink-soft); }
.script-body .ss-callout { background: var(--amber-lt); color: var(--ink); border-radius: 8px;
  padding: 9px 12px; margin: 2px 0 11px; font-weight: 600; font-size: 14px; }
.script-body .ss-branch { border-radius: 8px; padding: 10px 12px; margin: 0 0 11px; border-left: 3px solid; }
.script-body .ss-branch.ok { background: var(--green-lt); border-color: var(--green); }
.script-body .ss-branch.no { background: var(--red-lt); border-color: var(--red); }
.script-body .ss-branch.down { background: var(--amber-lt); border-color: var(--amber); }
.script-body .ss-branch.up { background: var(--green-lt); border-color: var(--green); }
.script-body .ss-branch-t { font-weight: 700; margin-bottom: 5px; }
.script-body .ss-branch-l { margin-top: 3px; }
.script-panel-foot { padding: 12px 16px; border-top: 1px solid var(--rule); font-size: 12.5px; }
.script-panel-foot a { color: var(--accent); text-decoration: none; }
@media (max-width: 640px) { .script-toggle-label { display: none; } }

/* ---- Sales scripts management page ---- */
.scripts-page { max-width: 620px; }
.script-card { border: 1px solid var(--rule); border-radius: 12px; padding: 16px; margin-bottom: 16px; background: var(--surface); }
.script-card--new { background: var(--canvas); }
.script-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.script-name { flex: 1; font-weight: 600; }
.script-badge { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  color: var(--accent); background: var(--accent-lt); padding: 3px 9px; border-radius: 20px; }
.script-text { width: 100%; resize: vertical; line-height: 1.55; margin-bottom: 10px; font-family: inherit; }
.script-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.script-delete { margin-left: auto; color: var(--red); }
.script-format-help { margin: 4px 0 18px; }
.script-format-help summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.script-format-list { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
.script-format-list code { background: var(--canvas); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 5px; font-size: 12px; color: var(--ink); }

/* ---- Log time manually (task detail panel) ---- */
.task-log-manual { margin-top: 12px; }
.task-log-manual summary { cursor: pointer; font-size: 12.5px; color: var(--accent); list-style: none; }
.task-log-manual summary::-webkit-details-marker { display: none; }
.task-log-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.task-log-row { display: flex; align-items: center; gap: 6px; }
.task-log-row input[type="number"] { width: 58px; }
.task-log-row input[type="date"] { flex: 1; }
.task-log-unit { font-size: 12px; color: var(--ink-soft); margin-right: 4px; }

/* ================= PROPOSALS (Phase 13) ================= */
.proposals-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.proposal-counts { display: flex; gap: 8px; flex-wrap: wrap; }
.proposal-count-chip { font-size: 12px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--rule);
  border-radius: 20px; padding: 4px 12px; text-decoration: none; }
.proposal-count-chip.is-active { border-color: var(--accent); color: var(--accent); }
.proposal-count-chip strong { color: var(--ink); }
.proposal-list { display: flex; flex-direction: column; gap: 5px; }
.proposal-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 9px; padding: 12px 16px;
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); transition: border-color .15s; }
.proposal-card:hover { border-color: var(--accent-mid); }
.prop-number { font-weight: 600; font-size: 13px; min-width: 84px; }
.prop-title { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prop-amount { font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.prop-date { font-size: 11px; color: var(--ink-soft); min-width: 78px; text-align: right; }

.status-badge { font-size: 10.5px; font-weight: 600; border-radius: 20px; padding: 2px 9px; text-transform: none; white-space: nowrap; }
.status-badge.status-draft { background: var(--canvas); color: var(--ink-soft); }
.status-badge.status-sent { background: var(--accent-lt); color: var(--accent); }
.status-badge.status-accepted { background: var(--green-lt); color: var(--green); }
.status-badge.status-declined { background: var(--red-lt); color: var(--red); }
.status-badge.status-expired { background: var(--canvas); color: var(--ink-soft); }

/* Editor */
.proposal-actions-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.proposal-detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.proposal-side { display: flex; flex-direction: column; gap: 14px; }
.proposal-side .panel-card h3 { margin-bottom: 10px; }

.proposal-section { background: var(--surface); border: 1px solid var(--rule); border-radius: 9px; margin-bottom: 6px; overflow: hidden; transition: border-color .15s; }
.proposal-section.open { border-color: var(--accent-mid); }
.section-accordion-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; user-select: none; }
.section-accordion-title { font-size: 13px; font-weight: 500; flex: 1; }
.section-accordion-arrow { font-size: 11px; color: var(--ink-soft); transition: transform .2s; }
.proposal-section:not(.open) .section-accordion-arrow { transform: rotate(-90deg); }
.section-word-count { font-size: 10px; color: var(--ink-soft); }
.autosave-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rule); transition: background .3s; }
.autosave-dot.saving { background: var(--amber); }
.autosave-dot.saved { background: var(--green); }
.section-accordion-body { display: none; padding: 0 14px 14px; }
.proposal-section.open .section-accordion-body { display: block; }
.section-hint { font-size: 11px; color: var(--ink-soft); margin-bottom: 8px; font-style: italic; }
.section-textarea { width: 100%; min-height: 120px; border: 1px solid var(--rule); border-radius: 7px; padding: 10px 12px;
  font-size: 13px; font-family: inherit; color: var(--ink); line-height: 1.6; resize: vertical; outline: none; background: var(--canvas); }
.section-textarea:focus { border-color: var(--accent); }

/* Fee builder */
.fee-builder .fee-field { margin-bottom: 10px; }
.fee-builder .fee-field label { display: block; font-size: 11px; color: var(--ink-soft); margin-bottom: 3px; }
.fee-row { display: flex; gap: 8px; }
.fee-row .fee-field { flex: 1; }
.fee-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.fee-item-row { display: flex; gap: 6px; align-items: center; }
.fee-item-desc { flex: 1; }
.fee-item-amt { width: 80px; }
.fee-item-del { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.fee-item-del:hover { color: var(--red); }
.fee-totals { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.fee-total-row { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; color: var(--ink-mid); }
.fee-total-row strong { font-variant-numeric: tabular-nums; }
.fee-total-row.grand { font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rule); }

/* Client proposal rows */
.client-proposal-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.client-proposal-row:last-child { border-bottom: none; }
.client-proposal-row > a { font-weight: 600; color: var(--accent); text-decoration: none; }
.client-proposal-row .prop-title { flex: 1; color: var(--ink-mid); }

/* Accept modal */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(20,20,40,.4); align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.visible { display: flex; }
.modal-card { background: var(--surface); border-radius: 12px; padding: 22px; max-width: 440px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.modal-title { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }

@media (max-width: 760px) { .proposal-detail-grid { grid-template-columns: 1fr; } }

/* ================= CLIENT NOTES (Phase 11) ================= */
.client-notes-section .detail-card-hint { margin: -4px 0 12px; }
.note-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 10px; background: var(--accent-lt); color: var(--accent); font-size: 12px; font-weight: 700; }
.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 4px; }

/* Note cards always sit on a light pastel tint → keep text dark in both themes. */
.note-card { border: 1px solid var(--rule); border-radius: 10px; padding: 14px; position: relative; min-height: 96px;
  color: #26303f; transition: border-color .15s, box-shadow .15s; }
.note-card:hover { border-color: var(--accent-mid); box-shadow: 0 2px 10px rgba(20,20,40,.10); }
.note-card.pinned { border-color: var(--amber); }
.note-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.note-title { font-size: 13px; font-weight: 600; color: #1c2434; flex: 1; line-height: 1.3; text-decoration: none; }
.note-title:hover { color: var(--accent); }
.pin-indicator { font-size: 11px; margin-right: 3px; }
.note-card-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; flex-shrink: 0; }
.note-card:hover .note-card-actions { opacity: 1; }
.note-action-btn { background: none; border: none; cursor: pointer; font-size: 13px; padding: 2px; border-radius: 4px; }
.note-action-btn:hover { background: rgba(0,0,0,.06); }
.note-action-btn.delete:hover { background: var(--red-lt); }
.note-preview-link { text-decoration: none; display: block; }
.note-preview { font-size: 12px; color: #56606f; line-height: 1.5; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 10px; min-height: 18px; }
.note-empty-hint { font-style: italic; opacity: .6; }
.note-card-footer { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: #79828f; }
.note-project-tag { font-weight: 600; }
.note-card-footer .note-date { margin-left: auto; }
.note-wordcount { opacity: .8; }

/* Full-screen note editor — hide the app chrome */
.note-editor-page .sidebar,
.note-editor-page .topbar,
.note-editor-page .trial-banner,
.note-editor-page .today-ticker { display: none !important; }
.note-editor-page .main { width: 100%; max-width: 100%; }
.note-editor-page .content { padding: 0; height: 100vh; overflow: hidden; }
.note-editor-layout { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.editor-topbar { display: flex; align-items: center; gap: 14px; padding: 10px 20px; border-bottom: 1px solid var(--rule);
  background: var(--surface); flex-shrink: 0; }
.editor-back-link { font-size: 12px; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.editor-back-link:hover { color: var(--accent); }
.note-title-input { flex: 1; border: none; outline: none; font-size: 16px; font-weight: 600; font-family: inherit;
  color: var(--ink); background: transparent; min-width: 0; }
.note-title-input::placeholder { color: var(--ink-soft); font-weight: 400; }
.editor-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.editor-project-select { border: 1px solid var(--rule); border-radius: 7px; padding: 5px 8px; font-size: 11px;
  font-family: inherit; color: var(--ink-mid); background: var(--surface); outline: none; }
.autosave-indicator { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.colour-tint-picker { display: flex; gap: 5px; align-items: center; }
.colour-tint { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--rule); cursor: pointer; transition: transform .15s; }
.colour-tint:hover { transform: scale(1.2); }
.colour-tint.active { border-color: var(--ink); transform: scale(1.15); }
.editor-body { flex: 1; overflow: hidden; display: flex; }
.editor-write-pane { flex: 1; display: flex; padding: 32px; max-width: 780px; margin: 0 auto; width: 100%; }
.note-textarea { width: 100%; height: 100%; border: none; outline: none; font-size: 15px; font-family: inherit;
  color: var(--ink); line-height: 1.8; resize: none; background: transparent; }
.note-textarea::placeholder { color: var(--ink-soft); opacity: .55; }
.editor-preview-pane { flex: 1; overflow-y: auto; padding: 32px; max-width: 780px; margin: 0 auto; width: 100%; }
.markdown-preview { font-size: 15px; line-height: 1.8; color: var(--ink); }
.markdown-preview h1 { font-size: 26px; font-weight: 700; margin: 0 0 16px; letter-spacing: -.01em; }
.markdown-preview h2 { font-size: 18px; font-weight: 600; margin: 20px 0 8px; }
.markdown-preview h3 { font-size: 15px; font-weight: 600; margin: 16px 0 6px; }
.markdown-preview p { margin: 0 0 12px; }
.markdown-preview ul, .markdown-preview ol { padding-left: 20px; margin-bottom: 12px; }
.markdown-preview li { margin-bottom: 4px; }
.markdown-preview code { background: var(--canvas); border: 1px solid var(--rule); border-radius: 4px;
  padding: 1px 5px; font-size: 13px; font-family: ui-monospace, monospace; }
.markdown-preview pre { background: #1c2233; color: #e8e8f0; border-radius: 8px; padding: 16px; overflow-x: auto; margin-bottom: 12px; }
.markdown-preview pre code { background: none; border: none; color: inherit; padding: 0; }
.markdown-preview strong { font-weight: 700; }
.markdown-preview a { color: var(--accent); }
.markdown-preview blockquote { border-left: 3px solid var(--accent); padding-left: 14px; color: var(--ink-mid); margin: 0 0 12px; }

/* Sidebar notes search */
.sidebar-search { padding: 2px 12px 12px; }
.sidebar-search-input { width: 100%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px; padding: 6px 10px; font-size: 12px; font-family: inherit; color: rgba(255,255,255,.8); outline: none; }
.sidebar-search-input::placeholder { color: rgba(255,255,255,.35); }
.sidebar-search-input:focus { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.1); }
.search-results { margin-top: 6px; max-height: 320px; overflow-y: auto; }
.search-result-item { display: block; padding: 8px 10px; border-radius: 7px; text-decoration: none; }
.search-result-item:hover { background: rgba(255,255,255,.07); }
.search-result-title { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85); }
.search-result-client { font-size: 10px; color: rgba(255,255,255,.45); margin-top: 2px; }
.search-result-snippet { font-size: 10px; color: rgba(255,255,255,.4); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-group-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.38); padding: 9px 10px 3px; }
.search-empty { font-size: 11px; color: rgba(255,255,255,.4); padding: 8px 10px; }
.search-empty { font-size: 11px; color: rgba(255,255,255,.4); padding: 8px 10px; }

/* Project notes section */
.project-notes-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.project-notes-section .section-action { font-size: 12px; color: var(--accent); text-decoration: none; }
.project-note-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0;
  border-bottom: 1px solid var(--rule); font-size: 13px; }
.project-note-row:last-child { border-bottom: none; }
.project-note-title { color: var(--accent); text-decoration: none; font-weight: 500; }
.project-note-title:hover { text-decoration: underline; }
.project-note-row .note-date { color: var(--ink-soft); font-size: 11px; }

@media (max-width: 640px) {
  .notes-grid { grid-template-columns: 1fr; }
  .editor-topbar { flex-wrap: wrap; gap: 8px; }
  .editor-write-pane, .editor-preview-pane { padding: 16px; }
}

/* ================= SUB-PROJECTS ================= */
.subproject-line { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--rule);
  border-radius: 9px; margin-bottom: 7px; text-decoration: none; color: var(--ink); background: var(--surface); }
.subproject-line:hover { border-color: var(--accent); }
.subproject-name { font-weight: 600; }
.subproject-meta { margin-left: auto; color: var(--ink-soft); font-size: 12.5px; }
.subproject-line .project-line-go { color: var(--accent); font-size: 12.5px; margin-left: 12px; }
.rollup-tag { font-size: 9.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-soft);
  background: var(--canvas); padding: 1px 7px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }
/* nested sub-projects under a main in the client / projects lists */
.project-subline { padding-left: 26px; position: relative; }
.project-subline::before { content: "↳"; position: absolute; left: 8px; color: var(--ink-soft); }
.project-main-row { font-weight: 600; }
.project-badge-sub { font-size: 10px; color: var(--accent); background: var(--accent-lt); border-radius: 8px; padding: 1px 6px; margin-left: 6px; }

/* ================= BUGS ================= */
.list-section-title { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft);
  font-weight: 700; margin: 4px 0 8px; }
.bug-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.bug-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bug-section-title { display: flex; align-items: center; gap: 8px; margin: 0; }
.pill-bug { background: var(--red-lt); color: var(--red); font-weight: 600; }
.task-row.is-bug .priority-bar { background: var(--red); }
.bug-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 10px; background: var(--red-lt); color: var(--red); font-size: 12px; font-weight: 700; }
.bug-group { margin-bottom: 22px; }
.bug-group-head { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink);
  font-weight: 600; padding: 8px 0; }
.bug-group-head:hover { color: var(--accent); }

/* ================= SUPPLIERS ================= */
.suppliers-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.suppliers-total { font-size: 13px; color: var(--ink-soft); }
.suppliers-table .num, .call-list-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.suppliers-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.supplier-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .supplier-detail-grid { grid-template-columns: 1fr; } }
.supplier-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 4px 0 0; font-size: 14px; }
.supplier-facts dt { color: var(--ink-soft); }
.supplier-facts dd { margin: 0; color: var(--ink); }
.supplier-facts a { color: var(--accent); text-decoration: none; }
.supplier-notes { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); white-space: pre-wrap; font-size: 14px; color: var(--ink-mid); }
.supplier-spend-total { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.supplier-cost-form { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 16px; }
.supplier-cost-row { display: flex; gap: 8px; }
.supplier-cost-row input[type="date"] { flex: 1; }
.supplier-cost-row input[type="number"] { width: 120px; }
.supplier-cost-list { display: flex; flex-direction: column; }
.supplier-cost-item { display: grid; grid-template-columns: 92px 1fr auto auto; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.supplier-cost-date { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.supplier-cost-desc { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supplier-cost-inv { color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-left: 8px; font-size: 12px; }
.supplier-cost-domain { color: var(--accent); background: var(--accent-lt); border-radius: 4px; padding: 1px 6px; margin-left: 8px; font-size: 11.5px; }
.supplier-spend-head { display: flex; align-items: center; gap: 12px; }
.supplier-cost-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.supplier-cost-del { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.supplier-cost-del:hover { color: var(--red); }

/* ================= RECURRENCE ================= */
.recurrence-indicator { font-size: 11px; color: var(--accent); margin-left: 5px; vertical-align: middle; opacity: .75; }
.recurrence-badge { display: flex; align-items: center; gap: 6px; padding: 3px 0; flex-wrap: wrap; }
.recurrence-badge.inactive { opacity: .8; }
.recurrence-icon { font-size: 14px; color: var(--accent); }
.recurrence-icon.muted { color: var(--ink-soft); }
.recurrence-label { font-size: 12.5px; color: var(--ink-mid); }
.recurrence-label.muted { color: var(--ink-soft); }
.recurrence-actions { display: flex; align-items: center; gap: 12px; margin-top: 5px; }
.recurrence-edit-btn { background: none; border: none; font-size: 12px; color: var(--accent); cursor: pointer; padding: 0; }
.recurrence-edit-btn:hover { text-decoration: underline; }
.recurrence-stop-btn { background: none; border: 1px solid var(--rule); border-radius: 5px; padding: 2px 8px; font-size: 11px; cursor: pointer; color: var(--ink-soft); transition: all .15s; }
.recurrence-stop-btn:hover { border-color: var(--red); color: var(--red); }
.recurrence-form-card { background: var(--canvas); border: 1px solid var(--rule); border-radius: 9px; padding: 14px; margin-top: 6px; }
.recurrence-form-title { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.custom-days-picker { margin-bottom: 10px; }
.day-picker-row { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.day-pill { cursor: pointer; }
.day-pill input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.day-pill span { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;
  color: var(--ink-soft); transition: all .15s; user-select: none; }
.day-pill input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.day-pill:hover span { border-color: var(--accent-mid); }
.recurrence-history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.recurrence-history-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.recurrence-history-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--rule); font-size: 12px; }
.recurrence-history-row:last-child { border-bottom: none; }
.recurrence-history-row.current { font-weight: 600; }
.done-indicator { color: var(--green); font-weight: 700; }
.occ-date { flex: 1; color: var(--ink-mid); }
.occ-completed { color: var(--ink-soft); font-size: 10.5px; }

/* ================= INVOICES ================= */
.nav-badge--alert { background: var(--red); color: #fff; }
.invoice-summary-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.invoice-summary-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; }
.invoice-summary-card.overdue { border-color: var(--red); }
.invoice-summary-number { font-size: 24px; font-weight: 700; color: var(--ink); }
.invoice-summary-card.overdue .invoice-summary-number { color: var(--red); }
.invoice-summary-label { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.invoices-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.invoices-toolbar .client-tabs { margin-bottom: 0; }
.invoice-list { display: flex; flex-direction: column; gap: 5px; }
.invoice-card { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 9px; padding: 12px 16px; transition: border-color .15s; }
.invoice-card:hover { border-color: var(--accent-mid); }
.invoice-card.overdue { border-left: 3px solid var(--red); }
.inv-number { font-weight: 600; font-size: 13px; min-width: 82px; }
.inv-client { flex: 1; font-size: 13px; }
.inv-amount { font-weight: 600; font-size: 13px; min-width: 70px; text-align: right; }
.inv-date { font-size: 11px; color: var(--ink-soft); min-width: 90px; text-align: right; }
.inv-date.overdue, .outstanding-row .overdue { color: var(--red); font-weight: 500; }

.status-badge { font-size: 11px; font-weight: 600; border-radius: 20px; padding: 2px 10px; white-space: nowrap; }
.status-badge.status-draft { background: var(--canvas); color: var(--ink-soft); }
.status-badge.status-sent { background: var(--accent-lt); color: var(--accent); }
.status-badge.status-paid { background: var(--green-lt); color: var(--green); }
.status-badge.status-overdue { background: var(--red-lt); color: var(--red); }
.status-badge.status-cancelled { background: var(--canvas); color: var(--ink-soft); opacity: .6; }

/* wizard */
.invoice-wizard { max-width: 720px; }
.wizard-step-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.wizard-step-desc { font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; }
.wizard-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.wizard-note { font-size: 11px; color: var(--ink-soft); }
.entries-table { width: 100%; border-collapse: collapse; }
.entries-table th { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding: 6px 8px; border-bottom: 1px solid var(--rule); text-align: left; }
.entries-table th:not(.col-desc):not(.col-check) { text-align: right; }
.entries-table td { padding: 8px; font-size: 12px; border-bottom: 1px solid var(--rule); }
.entries-table td:not(.col-desc):not(.col-check) { text-align: right; }
.entries-project-header td { background: var(--canvas); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.entries-table tfoot td { font-size: 13px; padding: 10px 8px; border-top: 2px solid var(--rule); border-bottom: none; }
.entry-date { font-size: 10px; color: var(--ink-soft); margin-left: 6px; }
.col-check { width: 30px; } .col-desc { width: 55%; }
.entries-empty { padding: 24px; text-align: center; color: var(--ink-soft); font-size: 13px; }

/* detail */
.invoice-actions-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.invoice-detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.invoice-preview-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 26px; box-shadow: var(--shadow); }
.ip-head { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); margin-bottom: 18px; }
.ip-sender-name { font-size: 17px; font-weight: 700; }
.ip-muted { font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.ip-meta { text-align: right; }
.ip-invoice-word { font-size: 22px; font-weight: 300; color: var(--accent); letter-spacing: -.01em; }
.ip-number { font-size: 13px; font-weight: 700; margin: 2px 0 6px; }
.ip-billto { margin-bottom: 14px; }
.ip-label { font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.ip-client { font-size: 14px; font-weight: 600; }
.ip-period { background: var(--canvas); border-left: 3px solid var(--accent); padding: 7px 12px; font-size: 12px; color: var(--ink-soft); margin-bottom: 16px; }
.ip-terms { margin-top: 14px; font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.ip-notes { margin-top: 14px; font-size: 12px; color: var(--ink-soft); font-style: italic; }

.line-items { margin: 6px 0; }
.line-item-head, .line-item-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.line-item-head { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1.5px solid var(--ink); }
.li-desc { flex: 1; font-size: 13px; }
.li-desc.editable { cursor: pointer; }
.li-desc.editable:hover { color: var(--accent); }
.li-qty { width: 56px; text-align: right; font-size: 12px; color: var(--ink-soft); }
.li-rate { width: 68px; text-align: right; font-size: 12px; color: var(--ink-soft); }
.li-amount { width: 74px; text-align: right; font-size: 13px; font-weight: 500; }
.li-x { width: 22px; text-align: right; }
.item-delete-btn { background: none; border: none; color: var(--rule); cursor: pointer; font-size: 12px; }
.item-delete-btn:hover { color: var(--red); }
.line-item-empty { padding: 12px 0; color: var(--ink-soft); font-size: 13px; }
.li-edit-form { display: flex; gap: 6px; width: 100%; align-items: center; flex-wrap: wrap; }
.li-edit-form input[name="description"] { flex: 1; min-width: 140px; }
.li-edit-form input[name="quantity"], .li-edit-form input[name="unit_price"] { width: 80px; }
.li-edit-form .field-input { margin-bottom: 0; }
.ip-add-forms { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.ip-add-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ip-add-form input[name="description"] { flex: 1; min-width: 160px; }
.ip-add-form input[type="number"] { width: 92px; }
.ip-add-form .field-input { margin-bottom: 0; }
.invoice-totals { margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--rule); }
.invoice-total-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: var(--ink-mid); }
.invoice-total-row.grand { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rule); }
.invoice-side { display: flex; flex-direction: column; gap: 16px; }
.logo-preview { max-height: 60px; margin-bottom: 12px; display: block; }

.client-invoice-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 12px; }
.client-invoice-row:last-child { border-bottom: none; }
.client-invoice-row a { font-weight: 600; color: var(--accent); text-decoration: none; min-width: 70px; }
.client-invoice-row .civ-amount { margin-left: auto; font-weight: 600; }
.outstanding-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 12px; }
.outstanding-row:last-child { border-bottom: none; }
.outstanding-row a { color: var(--accent); font-weight: 600; text-decoration: none; }
.outstanding-row strong { margin-left: auto; }

@media (max-width: 720px) {
  .invoice-detail-grid { grid-template-columns: 1fr; }
  .invoice-summary-strip { grid-template-columns: 1fr 1fr; }
  .inv-date { display: none; }
}

/* ================= USER GUIDE ================= */
.guide { max-width: 800px; }
.guide-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
.guide-hero .guide-lede { font-size: 15px; color: var(--ink-soft); max-width: 60ch; margin: 6px 0 0; }
.guide-toc { list-style: none; margin: 0 0 34px; padding: 18px 0 0; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.guide-toc a { display: flex; gap: 10px; padding: 8px 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); font-size: 14px; }
.guide-toc a:hover { color: var(--accent); }
.guide-toc .n { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 700; width: 2ch; }
.guide-section { padding: 26px 0; border-top: 1px solid var(--rule); }
.guide-section:first-of-type { border-top: none; }
.guide-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.guide-section h2 { font-size: 23px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 12px; }
.guide-section h3 { font-size: 15px; font-weight: 700; margin: 20px 0 6px; }
.guide-section p { max-width: 66ch; margin: 0 0 13px; line-height: 1.6; color: var(--ink); }
.guide-section p.lead { font-size: 16.5px; color: var(--ink-soft); }
.guide-section ul, .guide-section ol { max-width: 66ch; margin: 0 0 14px; padding-left: 20px; line-height: 1.55; }
.guide-section li { margin: 5px 0; }
.guide-kbd { font-family: ui-monospace, Menlo, monospace; font-size: .85em; background: var(--accent-lt);
  color: var(--accent); padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.guide-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.guide-feat .card { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; }
.guide-feat .card h4 { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.guide-feat .card p { margin: 0; font-size: 13px; color: var(--ink-soft); }
.guide-steps { counter-reset: gstep; list-style: none; padding: 0; max-width: 66ch; }
.guide-steps li { counter-increment: gstep; position: relative; padding-left: 34px; margin: 10px 0; }
.guide-steps li::before { content: counter(gstep); position: absolute; left: 0; top: 0; width: 22px; height: 22px;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.guide-tip { background: var(--accent-lt); border-radius: 10px; padding: 14px 18px; margin: 18px 0; max-width: 66ch; }
.guide-tip .lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 4px; }
.guide-tip p { margin: 0; }
/* Screenshots embedded in the guide */
.guide-shot { margin: 16px 0 22px; max-width: 900px; }
.guide-shot img { width: 100%; height: auto; display: block; border: 1px solid var(--rule);
  border-radius: 10px; box-shadow: 0 8px 26px rgba(20, 20, 40, .10); }
.guide-shot figcaption { font-size: 12.5px; color: var(--ink-soft); margin-top: 8px; }
@media (prefers-color-scheme: dark) { .guide-shot img { box-shadow: 0 8px 26px rgba(0, 0, 0, .4); } }
.guide-stages { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 18px; align-items: center; }
.guide-stages span.chip { font-size: 12px; padding: 4px 10px; border-radius: 20px; background: var(--surface); border: 1px solid var(--rule); color: var(--ink-soft); }
.guide-stages span.chip.won { color: var(--green); border-color: var(--green); }
.guide-stages span.chip.lost { color: var(--red); }
.guide-stages .arr { color: var(--ink-soft); font-size: 12px; }
.guide-kv { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 14px 0; }
.guide-kv th, .guide-kv td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.guide-kv th { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.guide-kv td.k { font-weight: 650; white-space: nowrap; }
@media (max-width: 640px) { .guide-toc, .guide-feat { grid-template-columns: 1fr; } }

/* Print any page cleanly (used by the guide's Save-as-PDF). */
@media print {
  .sidebar, .topbar, #today-ticker, #task-detail-panel, #task-panel-overlay, .quick-add-wrap { display: none !important; }
  .layout, .main, .content { display: block !important; margin: 0 !important; padding: 0 !important; }
  .guide-section { break-inside: avoid; }
  .btn { display: none !important; }
}

/* ================= RESPONSIVE ================= */
/* Tablet: keep a narrower sidebar, stack the wide grids. */
@media (max-width: 1024px) and (min-width: 641px) {
  .sidebar { width: 190px; }
  .today-layout, .client-detail-grid, .project-detail-grid { grid-template-columns: 1fr; }
  .report-cards, .pricing-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .today-grid, .detail-grid, .clients-grid, .project-detail-grid, .today-layout, .client-detail-grid { grid-template-columns: 1fr; }
  .report-cards, .marketing-features, .comparison-grid { grid-template-columns: 1fr; }
  .period-summary { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .pricing-grid, .marketing-features { grid-template-columns: 1fr; }
  .marketing-headline { font-size: 32px; }
}

/* Phone: sidebar becomes a fixed bottom nav bar. */
@media (max-width: 640px) {
  /* The sidebar's content moves into the menu sheet rather than being squashed
     into a strip: nine 39px targets, no badges, and every group menu opening
     off the right-hand edge of the screen. */
  .sidebar { display: none; }
  .mobile-bar { display: flex; }
  .main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  .content { padding: 16px 14px; }
  .topbar { padding: 0 14px; column-gap: 8px; }
  /* The FAB already adds tasks on a phone, so the topbar button gives up its
     space to the account controls it was crowding out. */
  .quick-add-wrap { display: none; }
  /* Present but off-screen, so opening is a transition rather than a repaint.
     `visibility` keeps it out of the tab order and away from screen readers
     while it's closed — `transform` alone would not. */
  .mobile-sheet { display: flex; visibility: hidden; }
  .mobile-sheet.open { visibility: visible; }
  .mobile-sheet-overlay.open { display: block; }
  .topbar-account { display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0; font-size: 18px; line-height: 1;
    background: none; border: none; cursor: pointer; text-decoration: none;
    color: var(--ink-soft); -webkit-tap-highlight-color: transparent; }
  .topbar-account:active { color: var(--ink); }
  .topbar-actions { gap: 2px; }
  .topbar-title h1 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .today-right-panel { order: -1; }
  .timer-task-name { display: none; }
  .timer-pill.running .timer-elapsed { font-size: 30px; }
  .timer-pill.running { padding: 6px 8px 6px 12px; gap: 10px; }
  /* Let grid/flex children shrink below their content width (kills h-overflow). */
  .today-layout > *, .client-detail-grid > *, .project-detail-grid > *,
  .clients-grid > *, .detail-grid > * { min-width: 0; }
  .today-task-row, .task-row, .log-entry-row, .client-card, .project-card,
  .row-card, .followup-item, .contact-card { min-width: 0; max-width: 100%; }
  .today-task-body, .task-body, .entry-body { min-width: 0; }
  /* To-Do List: the actions block never shrinks (the "Assign to…" select sizes
     itself to the widest client name), so on a phone it left the title a sliver.
     Give the title the width of the row and put the controls under it. */
  .inbox-row { flex-wrap: wrap; align-items: flex-start; row-gap: 8px; padding: 12px; }
  .inbox-row-body { flex: 1 1 auto; flex-wrap: wrap; row-gap: 6px; align-items: flex-start; }
  .inbox-row-actions { flex: 1 0 100%; justify-content: flex-end; }
  .inbox-assign { flex: 1 1 auto; max-width: 190px; }
  .inbox-add { flex-wrap: wrap; }
  .inbox-add-input { flex: 1 1 100%; }
  .inbox-bulk-actions .field-input--sm { max-width: 100%; }

  /* Today's call strip: four columns across 365px is 91px each. */
  .today-calls-grid { grid-template-columns: 1fr 1fr; }

  /* The pipeline board is 960px wide inside a horizontal scroller, so it
     doesn't break the page — but it does mean thumbing across five near-
     offscreen columns. One column at a time, snapping, is how a board works on
     a phone, and cold-calling is the thing most likely to be done away from a
     desk. */
  .prospect-board { min-width: 0; grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: 82vw;
    scroll-snap-type: x mandatory; }
  .prospect-board-scroll { scroll-padding-left: 14px; }
  .pboard-col { scroll-snap-align: start; }

  /* Week view: seven columns of event text at ~52px each is unreadable. Let it
     scroll within itself rather than shrink past legibility. (The month grid is
     also seven columns, but those hold a date, so they're fine.) */
  .cal-week-view { grid-template-columns: repeat(7, minmax(124px, 1fr));
    overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .today-task-meta, .task-meta { min-width: 0; }
  .task-detail-panel { width: 100%; }
  .period-summary { grid-template-columns: 1fr 1fr; }
  .clients-grid, .today-layout, .detail-grid, .project-detail-grid, .client-detail-grid { grid-template-columns: 1fr; }
  .entry-meta { flex-wrap: wrap; gap: 4px; }
  .time-summary-bar { flex-wrap: wrap; gap: 12px; padding: 12px 14px; }
  .bar-label { width: 84px; font-size: 10px; }
  .marketing-nav-links a:not(.btn) { display: none; }
  .marketing-hero { padding: 48px 20px 40px; }
  .marketing-features-section, .marketing-comparison-section, .marketing-pricing-section, .marketing-about-section { padding: 40px 20px; }

  /* Touch targets */
  .task-check, .timer-btn, .task-action-btn, .today-remove-btn, .followup-done-btn,
  .billable-toggle, .btn-icon { min-width: 44px; min-height: 44px; }
  .btn { min-height: 44px; }
  .btn-sm, .btn-xs { min-height: 34px; }
  /* The FAB used to float directly above the Menu button, crowding it. It now
     sits *in* the bar, in a slot the nav items leave free — so the nav shifts
     left and nothing overlaps. */
  .qc-fab { bottom: calc(6px + env(safe-area-inset-bottom)); right: 10px;
            width: 46px; height: 46px; font-size: 22px; box-shadow: none; }
  .mobile-bar { padding-right: 62px; }
}
@media (max-width: 600px) {
  .period-summary { grid-template-columns: 1fr; }
  .bar-label { width: 80px; }
}
@media (max-width: 768px) {
  .client-detail-grid { grid-template-columns: 1fr; }
  .client-header-row { flex-direction: column; }
}

/* ═══════════════════ EXPENSES (Phase 22) ═══════════════════ */
.expenses-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.expenses-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.expenses-main { min-width: 0; }

/* Quick-add form */
.quick-expense-form {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
}
.quick-expense-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.quick-exp-input, .quick-exp-select {
  border: 1px solid var(--rule); border-radius: 7px; padding: 7px 10px;
  font-size: 13px; color: var(--ink); background: var(--canvas); outline: none;
  transition: border-color .15s;
}
.quick-exp-input:focus, .quick-exp-select:focus { border-color: var(--accent); }
.quick-exp-date { width: 140px; flex-shrink: 0; }
.quick-exp-desc { flex: 1; min-width: 160px; }
.quick-exp-select { font-size: 12px; color: var(--ink-mid); max-width: 150px; }
.quick-exp-amount-wrap {
  display: flex; align-items: center; border: 1px solid var(--rule);
  border-radius: 7px; background: var(--canvas); overflow: hidden; flex-shrink: 0;
}
.quick-exp-amount-wrap .currency-prefix { padding: 0 4px 0 10px; font-size: 13px; color: var(--ink-soft); }
.quick-exp-amount { border: none; background: transparent; width: 78px; padding: 7px 10px 7px 2px; font-size: 13px; color: var(--ink); outline: none; }
.quick-exp-billable { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-mid); cursor: pointer; white-space: nowrap; flex-shrink: 0; }

.expense-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* Expense rows */
.expense-list { display: flex; flex-direction: column; gap: 4px; }
.expense-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 9px;
  transition: border-color .15s;
}
.expense-row:hover { border-color: var(--accent); }
.expense-date { font-size: 12px; color: var(--ink-soft); white-space: nowrap; min-width: 52px; padding-top: 2px; }
.today-tag { display: block; font-size: 9px; font-weight: 700; color: var(--accent); letter-spacing: .5px; text-transform: uppercase; }
.expense-desc-col { flex: 1; min-width: 0; }
.expense-description { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.expense-meta-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.expense-tag { font-size: 10px; font-weight: 500; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
.client-tag { background: var(--canvas); color: var(--ink-soft); border: 1px solid var(--rule); }
.category-tag { background: var(--accent-lt); color: var(--accent); }
.billable-tag { background: var(--amber-lt); color: var(--amber); }
.invoiced-tag { background: var(--green-lt); color: var(--green); }
.expense-receipt-col { flex-shrink: 0; width: 26px; text-align: center; padding-top: 1px; }
.receipt-link { font-size: 16px; text-decoration: none; opacity: .75; }
.receipt-link:hover { opacity: 1; }
.receipt-upload-btn { font-size: 16px; cursor: pointer; opacity: .35; display: block; transition: opacity .15s; }
.receipt-upload-btn:hover { opacity: .85; }
.expense-amount { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; padding-top: 2px; }
.expense-actions { display: flex; gap: 4px; flex-shrink: 0; }
.expense-action-btn {
  width: 26px; height: 26px; border: 1px solid var(--rule); border-radius: 5px;
  background: transparent; cursor: pointer; font-size: 12px; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s;
}
.expense-action-btn:hover { border-color: var(--accent); color: var(--accent); }
.expense-action-btn.delete:hover { border-color: var(--red); color: var(--red); }

/* Summary sidebar */
.expenses-side { position: sticky; top: 80px; }
.expense-summary-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 16px; }
.expense-summary-stat { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.expense-summary-label { color: var(--ink-soft); }
.expense-summary-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-amber { color: var(--amber); }
.category-chart { margin-top: 14px; }
.category-chart-title { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.category-chart-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 11px; }
.category-chart-label { width: 118px; flex-shrink: 0; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.category-chart-bar-wrap { flex: 1; height: 5px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.category-chart-bar { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.category-chart-amount { width: 52px; text-align: right; font-weight: 500; color: var(--ink-mid); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.expense-unbilled-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-mid); }
.expense-unbilled-note a { display: inline-block; margin-top: 4px; }

/* Edit modal overlay */
.expense-detail-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(20,20,40,.4); align-items: flex-start; justify-content: center;
  padding: 60px 16px; overflow-y: auto;
}
.expense-detail-overlay.visible { display: flex; }
.expense-detail-card { background: var(--surface); border-radius: 12px; padding: 20px; width: 480px; max-width: 100%; box-shadow: 0 12px 40px rgba(20,20,40,.25); }
.expense-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.expense-detail-title { font-size: 15px; font-weight: 600; }
.expense-detail-close { width: 28px; height: 28px; border: none; background: none; font-size: 18px; color: var(--ink-soft); cursor: pointer; border-radius: 5px; }
.expense-detail-close:hover { background: var(--canvas); }
.expense-detail-receipt { margin-top: 12px; }
.receipt-attached { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); padding: 8px; background: var(--canvas); border-radius: 7px; }
.receipt-attached span { flex: 1; }

/* Client / project expense sections */
.client-expense-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 12.5px; }
.client-expense-row:last-child { border-bottom: none; }
.client-expense-date { color: var(--ink-soft); min-width: 46px; }
.client-expense-desc { flex: 1; font-weight: 500; }
.client-expense-amount { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.unbilled-total { font-size: 13px; font-weight: 600; color: var(--amber); }
.project-expense-list { margin-top: 8px; }
.project-expense-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; border-top: 1px solid var(--rule); }
.pe-date { color: var(--ink-soft); min-width: 42px; }
.pe-desc { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-val--amber { color: var(--amber); }

.rev-kpi--net { background: var(--accent-lt); border-color: transparent; }

@media (max-width: 900px) {
  .expenses-layout { grid-template-columns: 1fr; }
  .expenses-side { position: static; }
  .quick-expense-row { flex-direction: column; align-items: stretch; }
  .quick-exp-date, .quick-exp-select, .quick-exp-amount-wrap { max-width: 100%; width: 100%; }
}

/* ═══════════════════ CLIENT PORTAL — management UI (Phase 23) ═══════════════════ */
.portal-settings-card { }
.portal-settings-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 10px;
}
.portal-status-active, .portal-status-inactive {
  display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-bottom: 10px;
}
.portal-status-active { color: var(--green); }
.portal-status-inactive { color: var(--ink-soft); }
.portal-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.portal-status-dot.active { background: var(--green); }
.portal-status-dot.inactive { background: var(--ink-soft); }
.portal-url-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.portal-url-display {
  flex: 1; min-width: 0; font-size: 11px; color: var(--ink-soft); background: var(--canvas);
  padding: 6px 8px; border-radius: 6px; border: 1px solid var(--rule);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.portal-last-viewed { font-size: 11px; color: var(--ink-soft); margin-bottom: 6px; }
.portal-preview-link { display: block; font-size: 11px; color: var(--accent); text-decoration: none; margin-bottom: 10px; }
.portal-preview-link:hover { text-decoration: underline; }
.portal-settings-details { border-top: 1px solid var(--rule); padding-top: 10px; margin-top: 10px; }
.portal-settings-details summary { font-size: 12px; color: var(--ink-mid); cursor: pointer; user-select: none; margin-bottom: 8px; }
.portal-show-toggle { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-mid); padding: 4px 0; cursor: pointer; }
.portal-danger-row { display: flex; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.portal-danger-link {
  font-size: 11px; color: var(--ink-soft); background: none; border: none; cursor: pointer;
  font-family: inherit; padding: 0; text-decoration: underline; transition: color 0.15s;
}
.portal-danger-link:hover { color: var(--red); }
.portal-enable-desc { font-size: 12px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 10px; }
.btn-full { width: 100%; text-align: center; justify-content: center; }

/* Task panel: client-visibility toggle */
.panel-visibility-toggle {
  display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--ink-mid);
  padding: 10px 0; margin-top: 4px; border-top: 1px solid var(--rule); cursor: pointer;
}
.panel-visibility-toggle input { margin-top: 2px; flex-shrink: 0; }
.panel-visibility-hint { color: var(--ink-soft); font-weight: 400; }

/* ═══════════════════ CALENDAR — WEEK WORKLOAD (Phase 24) ═══════════════════ */
.week-summary-strip {
  display: flex; background: var(--surface); border: 1px solid var(--rule);
  border-radius: 10px; margin-bottom: 16px; overflow: hidden;
}
.week-summary-stat { flex: 1; text-align: center; padding: 12px 8px; border-right: 1px solid var(--rule); }
.week-summary-stat:last-child { border-right: none; }
.wss-value { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.wss-over { color: var(--red); }
.wss-near { color: var(--amber); }
.wss-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); font-weight: 600; }

.week-overdue-banner {
  background: var(--red-lt); border: 1px solid rgba(224,82,82,0.3); border-radius: 8px;
  padding: 10px 14px; font-size: 13px; color: var(--red); margin-bottom: 16px;
}
.week-overdue-link { color: var(--red); font-weight: 600; text-decoration: none; margin-left: 8px; }
.week-overdue-link:hover { text-decoration: underline; }

.week-workload-wrap {
  position: relative; background: var(--surface); border: 1px solid var(--rule);
  border-radius: 12px; padding: 24px 16px 12px; margin-bottom: 24px;
}
.week-capacity-line {
  position: absolute; left: 0; right: 0; height: 0; z-index: 1;
  border-top: 1px dashed var(--accent); opacity: 0.55; pointer-events: none;
}
.week-capacity-label {
  position: absolute; right: 0; top: -14px; font-size: 9px; color: var(--accent);
  font-weight: 600; white-space: nowrap;
}
.week-workload-bars { position: relative; display: flex; gap: 6px; height: 160px; align-items: flex-end; }
.workload-day-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.workload-shabbat { opacity: 0.5; }
.workload-bar-container { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.workload-bar {
  width: 100%; border-radius: 4px 4px 0 0; overflow: hidden;
  display: flex; flex-direction: column-reverse; min-height: 3px;
}
.workload-bar-segment { width: 100%; opacity: 0.72; border-top: 1px solid rgba(255,255,255,0.25); }
.workload-day-label { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.workload-day-name { font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--ink-soft); letter-spacing: 0.5px; }
.workload-day-num { font-size: 13px; font-weight: 600; color: var(--ink); }
.day-num-today { color: var(--accent); }
.workload-hours-label { font-size: 11px; font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.hours-over { color: var(--red); font-weight: 700; }
.hours-near { color: var(--amber); font-weight: 700; }
.workload-task-pips { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; max-width: 100%; }
.workload-task-pip { width: 5px; height: 5px; border-radius: 50%; }
.workload-pip-more { font-size: 8px; color: var(--ink-soft); }
.workload-shabbat-label { font-size: 10px; opacity: 0.6; }

.week-tasks-section { margin-top: 8px; }
.week-tasks-title { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.week-tasks-day-group { margin-bottom: 16px; }
.week-tasks-day-header {
  font-size: 12px; font-weight: 600; color: var(--ink-mid); padding: 6px 0;
  border-bottom: 1px solid var(--rule); margin-bottom: 6px; display: flex; align-items: center; gap: 8px;
}
.day-header-today { color: var(--accent); }
.today-badge {
  font-size: 9px; font-weight: 700; background: var(--accent); color: #fff;
  padding: 1px 6px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.5px;
}
.week-task-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.week-task-row:last-child { border-bottom: none; }
.week-task-pip { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.priority-pip-high { background: var(--red); }
.priority-pip-medium { background: var(--amber); }
.priority-pip-low { background: var(--accent); }
.week-task-body { flex: 1; min-width: 0; }
.week-task-title { font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: none; display: block; }
.week-task-title:hover { color: var(--accent); }
.week-task-project { font-size: 11px; margin-top: 2px; font-weight: 500; }
.week-task-status { font-size: 10px; color: var(--ink-soft); white-space: nowrap; padding: 2px 7px; background: var(--canvas); border-radius: 8px; }

@media (max-width: 640px) {
  .week-summary-strip { flex-wrap: wrap; }
  .week-summary-stat { min-width: 50%; border-bottom: 1px solid var(--rule); }
  .week-workload-bars { height: 120px; }
  .workload-day-name { display: none; }
}

/* ═══════════════════ TEAM MEMBERS (Phase 25) ═══════════════════ */
.team-seats-line { margin-bottom: 14px; }
.team-seats-badge {
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  padding: 4px 10px; background: var(--canvas); border: 1px solid var(--rule); border-radius: 20px;
}
.team-section {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  padding: 16px; margin-bottom: 14px;
}
.team-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 12px;
}
.team-member-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.team-member-row:last-child { border-bottom: none; }
.team-pending-row { opacity: 0.8; }
.team-member-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pending-avatar { background: var(--ink-soft); }
.team-member-body { flex: 1; min-width: 0; }
.team-member-name { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.team-member-email { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.team-member-meta { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.team-member-you { font-size: 11px; color: var(--ink-soft); font-style: italic; }
.team-member-actions { flex-shrink: 0; display: flex; gap: 4px; }
.team-remove-btn:hover { color: var(--red); border-color: var(--red); }
.team-role-badge {
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 8px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.role-owner { background: var(--accent-lt); color: var(--accent); }
.role-admin { background: var(--amber-lt); color: var(--amber); }
.role-member { background: var(--canvas); color: var(--ink-soft); border: 1px solid var(--rule); }
.invite-form-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.invite-role-desc { font-size: 11px; color: var(--ink-soft); line-height: 1.6; margin-top: 10px; }
.team-seats-full {
  background: var(--canvas); border: 1px solid var(--rule); border-radius: 10px;
  padding: 16px; display: flex; align-items: center; gap: 12px; font-size: 13px;
}

/* Accept-invite (public) page */
.invite-page { display: flex; justify-content: center; padding: 60px 20px; min-height: 100vh; background: var(--canvas); }
.invite-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 16px;
  padding: 40px; width: 100%; max-width: 440px; text-align: center;
}
.invite-icon { font-size: 40px; margin-bottom: 12px; }
.invite-title { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.invite-subtitle { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 20px; }
.invite-workspace-preview {
  background: var(--canvas); border: 1px solid var(--rule); border-radius: 10px;
  padding: 14px; margin-bottom: 20px; text-align: left;
}
.invite-workspace-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); margin-bottom: 4px; }
.invite-workspace-name { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.invite-workspace-email { font-size: 12px; color: var(--ink-soft); }
.invite-existing-note, .invite-new-note { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 20px; text-align: left; }
.invite-form { text-align: left; }
.invite-form .form-field { margin-bottom: 14px; }
.invite-form label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-mid); margin-bottom: 4px; }
.invite-form input { width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; font-size: 14px; }
.invite-terms { font-size: 11px; color: var(--ink-soft); margin-top: 14px; }
.btn-lg { padding: 14px 28px; font-size: 15px; width: 100%; justify-content: center; }

/* Sidebar member badge */
.plan-badge.member { background: var(--accent-lt); color: var(--accent); }

@media (max-width: 640px) {
  .invite-form-row { flex-direction: column; }
  .invite-form-row .field-input, .invite-form-row .btn { width: 100%; }
  .invite-card { padding: 24px; }
}

/* ═══════════════════ YOUR DATA / GDPR (Phase 26) ═══════════════════ */
.settings-data-section { margin-top: 8px; }
.data-action-block {
  display: flex; align-items: flex-start; gap: 16px; padding: 16px;
  background: var(--canvas); border: 1px solid var(--rule); border-radius: 10px; margin-bottom: 10px;
}
.data-action-body { flex: 1; }
.data-action-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.data-action-desc { font-size: 12px; color: var(--ink-soft); line-height: 1.6; margin: 0; }
.data-last-export { font-size: 11px; color: var(--ink-soft); margin-bottom: 16px; padding-left: 4px; }
.data-member-note {
  font-size: 12px; color: var(--ink-soft); padding: 14px 16px; background: var(--canvas);
  border: 1px solid var(--rule); border-radius: 10px; line-height: 1.6;
}
.data-danger-block { border-color: rgba(224,82,82,0.3); background: var(--red-lt); }
.btn-danger-ghost {
  background: transparent; border: 1px solid var(--red); color: var(--red); font-size: 13px;
  padding: 8px 14px; border-radius: 7px; cursor: pointer; font-family: inherit; font-weight: 500; white-space: nowrap;
}
.btn-danger-ghost:hover { background: rgba(224,82,82,0.08); }
.btn-danger {
  background: var(--red); color: #fff; border: none; font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: 7px; cursor: pointer; font-family: inherit;
}
.btn-danger:hover { opacity: 0.9; }
.delete-confirm-panel {
  background: var(--surface); border: 2px solid var(--red); border-radius: 10px; padding: 18px; margin-bottom: 12px;
}
.delete-confirm-warning { margin-bottom: 16px; }
.delete-confirm-warning > strong { font-size: 13px; color: var(--red); display: block; margin-bottom: 8px; }
.delete-confirm-list { margin: 0 0 10px; padding-left: 20px; font-size: 12px; color: var(--ink-mid); line-height: 1.8; }
.delete-confirm-note { font-size: 12px; color: var(--amber); font-weight: 500; margin: 0; }
.delete-confirm-actions { display: flex; gap: 8px; margin-top: 12px; }

.deletion-banner {
  display: flex; align-items: center; gap: 12px; background: var(--red-lt);
  border: 1px solid var(--red); border-radius: 9px; padding: 12px 16px; margin-bottom: 16px;
  font-size: 13px; color: #991b1b;
}
.deletion-banner-icon { font-size: 18px; flex-shrink: 0; }
.deletion-banner-body { flex: 1; line-height: 1.5; }
.deletion-banner-link { color: #991b1b; font-weight: 600; text-decoration: underline; margin-left: 6px; }
.deletion-banner-cancel {
  background: #fff; border: 1px solid var(--red); color: var(--red); font-weight: 600; white-space: nowrap;
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 12px;
}
.deletion-banner-cancel:hover { background: rgba(224,82,82,0.05); }

@media (max-width: 640px) {
  .data-action-block { flex-direction: column; }
  .deletion-banner { flex-direction: column; align-items: flex-start; }
  .delete-confirm-actions { flex-direction: column; }
}

/* ── Inbox bulk actions (BUG-08) ──────────────────────────── */
.inbox-bulk-controls { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; min-height: 34px; }
.inbox-selectall { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; user-select: none; }
.inbox-selectall input { width: 15px; height: 15px; cursor: pointer; }
.inbox-bulk-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--accent-lt); border: 1px solid var(--accent); border-radius: 9px; padding: 6px 12px;
}
.inbox-bulk-bar[hidden] { display: none; }
.inbox-bulk-count { font-size: 12.5px; color: var(--accent); white-space: nowrap; }
.inbox-bulk-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inbox-bulk-actions .field-input--sm { max-width: 150px; }
.inbox-bulk-delete:hover { border-color: var(--red); color: var(--red); }
.inbox-check-wrap { display: flex; align-items: center; flex-shrink: 0; padding-left: 4px; cursor: pointer; }
.inbox-check { width: 16px; height: 16px; cursor: pointer; }

/* ═══ PHASE 28 — TASK DEPENDENCIES ═══════════════════════════ */
.dependency-panel { background: var(--canvas); border: 1px solid var(--rule); border-radius: 10px; padding: 14px; margin-top: 6px; }
.dep-panel-title { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.dep-blocked-badge { font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; background: rgba(239,68,68,0.12); color: var(--red); padding: 2px 8px; border-radius: 10px; }
.dep-section { margin-bottom: 12px; }
.dep-section-label { font-size: 10px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.dep-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.dep-row:last-child { border-bottom: none; }
.dep-row-complete { opacity: 0.55; }
.dep-row-complete .dep-row-title { text-decoration: line-through; }
.dep-row-downstream { opacity: 0.85; }
.dep-row-status { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; }
.dep-done { background: rgba(16,185,129,0.15); color: var(--green); }
.dep-progress { background: var(--accent-lt); color: var(--accent); }
.dep-todo { background: var(--rule); color: var(--ink-soft); }
.dep-row-title { color: var(--ink); text-decoration: none; font-weight: 500; cursor: pointer; }
.dep-row-title:hover { color: var(--accent); }
.dep-row-project { font-size: 11px; font-weight: 500; }
.dep-remove-btn { width: 22px; height: 22px; border: 1px solid var(--rule); border-radius: 5px; background: none; cursor: pointer; font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dep-remove-btn:hover { border-color: var(--red); color: var(--red); }
.dep-add-form { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.dep-add-select { flex: 1; border: 1px solid var(--rule); border-radius: 7px; padding: 6px 9px; font-size: 12px; background: var(--surface); color: var(--ink-mid); outline: none; }
.dep-add-select:focus { border-color: var(--accent); }
.dep-no-candidates { font-size: 11px; color: var(--ink-soft); font-style: italic; margin-top: 8px; }
.dep-error { background: rgba(239,68,68,0.1); border: 1px solid var(--red); border-radius: 7px; padding: 10px 12px; font-size: 12px; color: var(--red); margin-top: 8px; }

.blocked-indicator { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; background: rgba(239,68,68,0.1); color: var(--red); padding: 2px 7px; border-radius: 10px; font-weight: 600; flex-shrink: 0; cursor: help; }
.blocked-count { font-size: 10px; }
.timer-btn:disabled, .task-action-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.today-unblocked-widget { background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.3); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.unblocked-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(16,185,129,0.15); font-size: 13px; }
.unblocked-row:last-child { border-bottom: none; }
.unblocked-title { font-weight: 500; color: var(--ink); text-decoration: none; cursor: pointer; }
.unblocked-title:hover { color: var(--accent); }
.unblocked-project { font-size: 11px; font-weight: 500; }

.task-filter-deps { margin-left: auto; }
.dep-header-badge { font-size: 11px; font-weight: 600; background: rgba(239,68,68,0.12); color: var(--red); padding: 3px 9px; border-radius: 10px; }
.dep-chain-list { display: flex; flex-direction: column; gap: 18px; }
.dep-chain { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 16px; }
.dep-chain-node { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--canvas); border: 1px solid var(--rule); border-radius: 8px; font-size: 13px; }
.dep-chain-node a { color: var(--ink); text-decoration: none; font-weight: 500; cursor: pointer; }
.dep-chain-node a:hover { color: var(--accent); }
.dep-node-root { border-color: var(--accent); }
.dep-node-blocked { border-color: var(--red); background: rgba(239,68,68,0.04); }
.dep-node-done { opacity: 0.6; }
.dep-node-done a { text-decoration: line-through; }
.dep-node-status { font-size: 12px; flex-shrink: 0; }
.dep-node-multi { font-size: 10px; color: var(--ink-soft); margin-left: auto; }
.dep-chain-arrow { text-align: center; color: var(--ink-soft); font-size: 14px; padding: 2px 0; }
.dep-orphan-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; font-size: 13px; }
.dep-orphan-row a { color: var(--ink); text-decoration: none; font-weight: 500; cursor: pointer; }
.dep-orphan-row a:hover { color: var(--accent); }
.dep-orphan-blockers { font-size: 11px; color: var(--ink-soft); margin-left: auto; }
@media (max-width: 640px) { .dep-add-form { flex-direction: column; } .dep-row { flex-wrap: wrap; } .unblocked-row { flex-wrap: wrap; } }

/* ═══ PHASE 29 — REVENUE FORECASTING ════════════════════════ */
.revenue-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--rule); }
.revenue-tab { padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.revenue-tab:hover { color: var(--ink); }
.revenue-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.forecast-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.forecast-kpi { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 16px; }
.forecast-kpi-highlight { border-color: var(--accent); background: var(--accent-lt); }
.forecast-kpi-label { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.forecast-kpi-value { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 4px; letter-spacing: -.02em; }
.forecast-kpi-sub { font-size: 11px; color: var(--ink-soft); line-height: 1.5; }

.forecast-target-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; }
.forecast-target-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.forecast-target-input { display: inline-flex; align-items: center; gap: 4px; }
.forecast-target-input span { color: var(--ink-soft); font-weight: 600; }
.forecast-target-input input { width: 110px; padding: 6px 9px; border: 1px solid var(--rule); border-radius: 7px; background: var(--canvas); color: var(--ink); font-variant-numeric: tabular-nums; }
.forecast-target-hint { font-size: 11.5px; color: var(--ink-soft); margin-left: auto; }

.forecast-goal-warning { background: rgba(245,158,11,0.1); border: 1px solid var(--amber); border-radius: 9px; padding: 12px 16px; font-size: 13px; color: var(--amber); margin-bottom: 18px; }
.forecast-goal-warning strong { color: var(--amber); }

.forecast-chart-wrap { position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 24px 18px 14px; margin-bottom: 14px; }
.forecast-goal-line { position: absolute; left: 18px; right: 18px; height: 0; border-top: 1px dashed var(--amber); z-index: 2; }
.forecast-goal-label { position: absolute; right: 0; top: -15px; font-size: 9.5px; font-weight: 700; color: var(--amber); white-space: nowrap; }
.forecast-chart { display: flex; gap: 10px; align-items: flex-end; min-height: 200px; }
.forecast-column { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.forecast-bar-stack { width: 100%; max-width: 64px; display: flex; flex-direction: column-reverse; border-radius: 5px 5px 0 0; overflow: hidden; min-height: 2px; background: var(--rule); }
.forecast-bar { width: 100%; transition: height .4s ease; }
.bar-recurring { background: var(--green); }
.bar-confirmed { background: var(--accent); }
.bar-pipeline { background: var(--accent-lt); border-top: 1px dashed var(--accent-mid); }
.forecast-total-label { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.forecast-total-label.below-goal { color: var(--amber); }
.forecast-month-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); }

.forecast-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 24px; padding: 0 4px; }
.legend-item { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-soft); }
.legend-swatch { width: 14px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.swatch-recurring { background: var(--green); }
.swatch-confirmed { background: var(--accent); }
.swatch-pipeline { background: var(--accent-lt); border: 1px dashed var(--accent-mid); }

.forecast-table-section { margin-bottom: 20px; }
.forecast-table-title { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.forecast-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; font-size: 13px; }
.forecast-table th { text-align: left; padding: 10px 14px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); background: var(--canvas); border-bottom: 1px solid var(--rule); }
.forecast-table th.num, .forecast-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.forecast-table td { padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.forecast-table tr:last-child td { border-bottom: none; }
.total-cell { font-weight: 700; }
.total-cell.below-goal { color: var(--amber); }

.forecast-note { background: var(--canvas); border: 1px solid var(--rule); border-radius: 10px; padding: 16px; font-size: 12px; color: var(--ink-mid); line-height: 1.7; }
.forecast-note strong { display: block; margin-bottom: 8px; color: var(--ink); }
.forecast-note ul { margin: 0 0 10px 0; padding-left: 18px; }
.forecast-note-caveat { font-style: italic; color: var(--ink-soft); margin: 0; padding-top: 8px; border-top: 1px solid var(--rule); }

.recurring-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.recurring-add .field-input { flex: 1; min-width: 120px; margin-bottom: 0; }
.recurring-add-amount { display: inline-flex; align-items: center; gap: 4px; }
.recurring-add-amount span { color: var(--ink-soft); font-weight: 600; }
.recurring-add-amount .field-input { width: 90px; flex: none; }
.recurring-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.recurring-row:last-child { border-bottom: none; }
.recurring-row.inactive { opacity: .5; }
.recurring-desc { flex: 1; font-weight: 550; }
.recurring-client { font-size: 11px; color: var(--ink-soft); min-width: 100px; }
.recurring-amount { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; }
.recurring-dates { font-size: 11px; color: var(--ink-soft); min-width: 130px; }
.recurring-total-row { display: flex; justify-content: space-between; padding: 12px 0 4px; border-top: 2px solid var(--rule); margin-top: 8px; font-weight: 700; font-size: 14px; }

.proposal-probability { }
.prob-label { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 8px; }
.prob-options { display: flex; gap: 6px; margin-bottom: 10px; }
.prob-option { flex: 1; padding: 7px 4px; border: 1px solid var(--rule); border-radius: 7px; background: var(--surface); font-size: 12px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: all .15s; }
.prob-option:hover { border-color: var(--accent-mid); }
.prob-option.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.prob-forecast-value { font-size: 12px; color: var(--ink-soft); }

@media (max-width: 640px) {
  .forecast-chart { gap: 5px; }
  .forecast-legend { flex-direction: column; gap: 8px; }
  .forecast-table { font-size: 11px; }
  .forecast-table th, .forecast-table td { padding: 7px 8px; }
  .recurring-row { flex-wrap: wrap; }
  .recurring-add { flex-direction: column; align-items: stretch; }
}

/* ═══ PHASE 30 — LETTER TEMPLATES ═══════════════════════════ */
.letters-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 14px; }
.letter-tpl-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.letter-tpl-row:last-child { border-bottom: none; }
.letter-tpl-main { flex: 1; min-width: 0; }
.letter-tpl-name { font-weight: 650; font-size: 14px; }
.letter-tpl-desc { font-size: 12px; color: var(--ink-soft); margin-top: 1px; }
.letter-tpl-file { font-size: 11px; color: var(--ink-soft); font-family: ui-monospace, Menlo, monospace; margin-top: 2px; }
.letter-tpl-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.letter-upload-form .field-label { margin-top: 8px; }
.letter-upload-form .field-label:first-child { margin-top: 0; }
.placeholder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 18px; }
.placeholder-item { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.placeholder-item code { background: var(--accent-lt); color: var(--accent-deep, var(--accent)); padding: 2px 7px; border-radius: 6px; font-size: 12px; white-space: nowrap; font-family: ui-monospace, Menlo, monospace; }
.placeholder-item span { color: var(--ink-soft); }
.letter-generate-form .field, .letter-generate-form .field-row { margin-bottom: 12px; }
.letter-fee-fields { margin-top: 6px; border: 1px solid var(--rule); border-radius: 9px; padding: 10px 12px; }
.letter-fee-fields summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-mid); }
.letter-fee-fields[open] summary { margin-bottom: 10px; }
@media (max-width: 720px) { .letters-grid { grid-template-columns: 1fr; } }

/* ═══ SIDEBAR CUSTOMISATION ═════════════════════════════════ */
.nav { display: flex; flex-direction: column; }

/* Sidebar builder (Settings) — matches the tested prototype */
#nav-builder .nb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
#nav-builder .nb-zone { background: var(--canvas); border: 1px solid var(--rule); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
#nav-builder .nb-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
#nav-builder .nb-head input { font: inherit; font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; border: 1px solid transparent; border-radius: 6px; padding: 3px 7px; background: transparent; color: var(--ink); flex: 1; min-width: 0; }
#nav-builder .nb-head input:focus { border-color: var(--accent); background: var(--surface); outline: none; }
#nav-builder .nb-handle { cursor: grab; color: var(--ink-soft); font-size: 15px; }
#nav-builder .nb-del { margin-left: auto; border: none; background: none; color: var(--ink-soft); cursor: pointer; font-size: 17px; line-height: 1; }
#nav-builder .nb-del:hover { color: var(--red); }
#nav-builder .nb-list { display: flex; flex-direction: column; gap: 6px; min-height: 40px; padding: 2px; border-radius: 8px; }
#nav-builder .nb-list.drop { outline: 2px dashed var(--accent); outline-offset: -2px; }
#nav-builder .nb-chip { display: flex; align-items: center; gap: 9px; padding: 9px 11px; background: var(--surface); border: 1px solid var(--rule); border-radius: 9px; font-size: 13.5px; cursor: grab; user-select: none; }
#nav-builder .nb-chip:active { cursor: grabbing; }
#nav-builder .nb-chip .ic { width: 18px; text-align: center; }
#nav-builder .nb-chip .lbl { flex: 1; }
#nav-builder .nb-chip.nb-ghost { opacity: .35; }
#nav-builder .nb-chip.nb-chosen { border-color: var(--accent); box-shadow: 0 4px 14px -6px rgba(91,79,207,.5); }
#nav-builder .nb-hidden { background: repeating-linear-gradient(45deg, var(--canvas), var(--canvas) 9px, transparent 9px, transparent 18px); }
#nav-builder .nb-hidden .nb-chip { opacity: .72; }
/* A section switched off in "Your workspace" still holds its place in the
   builder, so it has somewhere to come back to. Greyed, and labelled, so the
   sidebar and this page don't appear to disagree. */
#nav-builder .nb-chip .off { display: none; }
#nav-builder .nb-chip.nb-off { opacity: .5; border-style: dashed; }
#nav-builder .nb-chip.nb-off .off { display: inline; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.nb-actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.nb-saved { color: var(--green); font-size: 13px; opacity: 0; transition: opacity .2s; }
.nb-saved.show { opacity: 1; }
@media (max-width: 640px) { #nav-builder .nb-cols { grid-template-columns: 1fr; } }

/* ═══ PRICING: DUO + ADD-ONS + ROADMAP ══════════════════════ */
.pricing-grid--duo { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; max-width: 640px; }
.pricing-desc { font-size: 13px; color: var(--ink-soft); margin: 2px 0 10px; }
.pricing-addons { max-width: 900px; margin: 34px auto 0; }
.pricing-addons-head { text-align: center; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.pricing-addons-sub { text-align: center; font-size: 13.5px; color: var(--ink-soft); margin: 4px 0 18px; }
.addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.addon-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 11px; padding: 14px 16px; position: relative; }
.addon-card.addon-soon { opacity: .82; }
.addon-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.addon-name { font-weight: 650; font-size: 14px; }
.addon-price { font-weight: 800; font-size: 16px; letter-spacing: -.02em; white-space: nowrap; }
.addon-unit { font-size: 11px; font-weight: 500; color: var(--ink-soft); margin-left: 1px; }
.addon-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.addon-badge { display: inline-block; margin-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-lt); padding: 2px 8px; border-radius: 6px; }
.addon-seats { margin-top: 10px; font-size: 12.5px; color: var(--ink-soft); }
.addon-seat-qty { width: 64px; margin-left: 6px; padding: 4px 6px; border: 1px solid var(--rule); border-radius: 6px; font-size: 14px; }

/* Live team estimate (Phase — seat/add-on pricing) */
.team-estimate { max-width: 420px; margin: 18px auto 0; }
.te-inner { background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; padding: 16px 18px; }
.te-enterprise { border-color: var(--rule); }
.te-head { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.te-lines { list-style: none; margin: 0 0 8px; padding: 0; }
.te-lines li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--rule); color: var(--ink-mid); }
.te-qty { color: var(--ink-soft); font-size: 11px; }
.te-sub { font-variant-numeric: tabular-nums; white-space: nowrap; }
.te-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; font-size: 15px; font-weight: 700; }
.te-total strong { font-size: 22px; }
.te-per { font-size: 12px; font-weight: 400; color: var(--ink-soft); margin-left: 2px; }
.te-note { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 4px 0 0; }

.marketing-roadmap-section { padding: 40px 20px 20px; text-align: center; }
.roadmap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; max-width: 900px; margin: 24px auto 0; }
.roadmap-item { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 20px 16px; }
.roadmap-icon { font-size: 26px; margin-bottom: 8px; }
.roadmap-title { font-weight: 700; font-size: 14.5px; margin-bottom: 5px; }
.roadmap-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 640px) { .pricing-grid--duo { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════
   PWA (Phase 36) — safe areas, touch targets, banners, cards
   ══════════════════════════════════════════════════════════ */

/* Safe area insets — clear the notch and home indicator */
.pwa-standalone body {
  padding-top:    env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
}
.pwa-standalone .sidebar { padding-top: calc(env(safe-area-inset-top) + 12px); }
.pwa-standalone .qc-fab  { bottom: calc(env(safe-area-inset-bottom) + 24px); }
/* …except on a phone, where the FAB has a slot in the bottom bar (above). */
@media (max-width: 640px) {
  .pwa-standalone .qc-fab { bottom: calc(6px + env(safe-area-inset-bottom)); }
}
.pwa-standalone html,
.pwa-standalone body { overscroll-behavior-y: none; }

/* ── Mobile touch targets ── */
@media (max-width: 640px) {
  .task-checkbox,
  .task-timer-btn,
  .expense-action-btn,
  .inbox-action-btn,
  .team-action-trigger { min-width: 44px; min-height: 44px; }

  .today-task-row { padding: 14px 12px; gap: 12px; }

  /* Prevent iOS zooming on input focus — needs 16px minimum */
  input[type="text"], input[type="email"], input[type="number"],
  input[type="password"], input[type="date"], select, textarea { font-size: 16px; }

  * { -webkit-tap-highlight-color: transparent; }

  .today-task-list, .expense-list, .client-list { -webkit-overflow-scrolling: touch; }
}

/* ── Update banner ── */
.sw-update-banner {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 16px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--surface);
  border-radius: 24px;
  padding: 10px 12px 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.28);
  z-index: 600;
  font-size: 13px;
  max-width: calc(100vw - 32px);
}
.sw-update-text { white-space: nowrap; }
.sw-update-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.sw-update-dismiss {
  background: none; border: none; color: rgba(255,255,255,0.5);
  font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1;
}

/* ── Install banner ── */
.pwa-install-banner {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 16px);
  left: 16px; right: 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.16);
  z-index: 590;
}
.pwa-install-icon  { font-size: 26px; flex-shrink: 0; }
.pwa-install-body  { flex: 1; }
.pwa-install-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.pwa-install-desc  { font-size: 12px; color: var(--ink-soft); }
.pwa-install-dismiss {
  background: none; border: none; color: var(--ink-soft);
  font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; flex-shrink: 0;
}

/* ── iOS install card (Settings) ── */
.ios-install-card {
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px;
}
.ios-install-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.ios-install-steps {
  margin: 0 0 10px 0; padding-left: 20px;
  font-size: 13px; color: var(--ink-mid); line-height: 2;
}
.ios-share-icon {
  display: inline-block;
  background: var(--accent-lt); color: var(--accent);
  border-radius: 4px; padding: 0 5px; font-size: 11px;
}
.ios-install-note { font-size: 12px; color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* ══════════════════════════════════════════════════════════
   AI TASK BREAKDOWN (Phase 37)
   ══════════════════════════════════════════════════════════ */
.ai-breakdown-intro { margin-bottom: 16px; }
.ai-project-context {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 16px; background: var(--canvas);
  border: 1px solid var(--rule); border-radius: 9px;
}
.ai-context-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink-soft);
}
.ai-context-value  { font-size: 14px; font-weight: 600; }
.ai-context-client { font-size: 12px; color: var(--ink-soft); }

.ai-breakdown-form textarea {
  width: 100%; font-family: 'Inter', sans-serif; font-size: 14px;
  line-height: 1.6; padding: 14px; border: 1px solid var(--rule);
  border-radius: 10px; background: var(--surface); color: var(--ink);
  resize: vertical; outline: none;
}
.ai-breakdown-form textarea:focus { border-color: var(--accent); }
.ai-char-counter {
  font-size: 11px; color: var(--ink-soft); text-align: right;
  margin-top: 5px; font-variant-numeric: tabular-nums;
}
.ai-char-counter.over-limit { color: var(--amber); font-weight: 600; }
.ai-form-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 14px; flex-wrap: wrap;
}
.ai-quota-note { font-size: 12px; color: var(--ink-soft); }
.ai-quota-exhausted {
  background: var(--amber-lt); border: 1px solid var(--amber);
  border-radius: 10px; padding: 18px; font-size: 13px; color: var(--ink);
}
.ai-quota-exhausted p { margin: 8px 0 12px; color: var(--ink-mid); }
.ai-tips {
  margin-top: 24px; padding: 16px; background: var(--canvas);
  border: 1px solid var(--rule); border-radius: 10px;
}
.ai-tips-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px;
}
.ai-tips ul { margin: 0; padding-left: 18px; font-size: 12px; color: var(--ink-mid); line-height: 1.9; }

.ai-review-note { font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; }
.ai-review-list { display: flex; flex-direction: column; gap: 8px; }
.ai-review-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 10px; transition: opacity 0.15s, border-color 0.15s;
}
.ai-review-row.row-deselected { opacity: 0.4; }
.ai-review-check { padding-top: 8px; flex-shrink: 0; }
.ai-review-body  { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ai-review-title {
  width: 100%; border: 1px solid transparent; border-radius: 6px;
  padding: 6px 8px; font-size: 14px; font-weight: 500;
  font-family: 'Inter', sans-serif; background: transparent; color: var(--ink); outline: none;
}
.ai-review-title:hover { border-color: var(--rule); }
.ai-review-title:focus { border-color: var(--accent); background: var(--canvas); }
.ai-review-desc {
  width: 100%; border: 1px solid transparent; border-radius: 6px;
  padding: 6px 8px; font-size: 12px; font-family: 'Inter', sans-serif;
  line-height: 1.5; background: transparent; color: var(--ink-soft); resize: vertical; outline: none;
}
.ai-review-desc:hover { border-color: var(--rule); }
.ai-review-desc:focus { border-color: var(--accent); background: var(--canvas); color: var(--ink-mid); }
.ai-review-controls { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; width: 110px; }
.ai-review-priority {
  border: 1px solid var(--rule); border-radius: 6px; padding: 5px 7px;
  font-size: 12px; font-family: 'Inter', sans-serif; background: var(--canvas); color: var(--ink-mid); outline: none;
}
.ai-review-hours-wrap {
  display: flex; align-items: center; border: 1px solid var(--rule);
  border-radius: 6px; background: var(--canvas); overflow: hidden;
}
.ai-review-hours {
  width: 100%; border: none; background: transparent; padding: 5px 0 5px 7px;
  font-size: 12px; font-family: 'Inter', sans-serif; color: var(--ink); outline: none;
}
.ai-hours-suffix { font-size: 11px; color: var(--ink-soft); padding-right: 8px; }
.ai-review-summary {
  display: flex; gap: 28px; padding: 16px; background: var(--canvas);
  border: 1px solid var(--rule); border-radius: 10px; margin-top: 14px;
}
.ai-summary-stat { display: flex; flex-direction: column; gap: 2px; }
.ai-summary-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ai-summary-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink-soft);
}
.ai-review-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }

.ai-usage-block { background: var(--canvas); border: 1px solid var(--rule); border-radius: 10px; padding: 16px; }
.ai-usage-headline { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.ai-usage-bar-wrap { height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.ai-usage-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s; }
.ai-usage-sub { font-size: 12px; color: var(--ink-soft); }

@media (max-width: 640px) {
  .ai-review-row      { flex-wrap: wrap; }
  .ai-review-controls { width: 100%; flex-direction: row; }
  .ai-review-summary  { gap: 16px; flex-wrap: wrap; }
  .ai-form-footer     { flex-direction: column; align-items: stretch; }
}

/* ══════════════════════════════════════════════════════════
   BUSINESS HUB (Phase 38) — Bible + Document Register
   ══════════════════════════════════════════════════════════ */
.business-tabs { display:flex; gap:2px; margin-bottom:20px; border-bottom:1px solid var(--rule); flex-wrap:wrap; }
.business-tab { padding:10px 18px; font-size:13px; font-weight:500; color:var(--ink-soft);
  text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px;
  display:flex; align-items:center; gap:6px; transition:color .15s, border-color .15s; }
.business-tab:hover { color:var(--ink); }
.business-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-badge { font-size:9px; font-weight:700; padding:1px 6px; border-radius:8px; background:var(--red); color:#fff; }

/* Bible */
.bible-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.bible-saved { font-size:12px; font-weight:600; color:var(--green); opacity:0; transition:opacity .2s; }
.bible-saved.show { opacity:1; }
.bible-section { background:var(--surface); border:1px solid var(--rule); border-radius:10px; margin-bottom:8px; overflow:hidden; }
.bible-section-header { display:flex; align-items:center; gap:10px; padding:12px 16px; }
.bible-section-title { flex:1; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-soft); }
.bible-section-body { padding:2px 16px 14px; }
.bible-field-row { display:grid; grid-template-columns:180px 1fr; align-items:center; gap:12px; padding:5px 0; border-bottom:1px solid var(--rule); }
.bible-field-row:last-child { border-bottom:none; }
.bible-field-label { font-size:12px; color:var(--ink-soft); font-weight:500; }
.bible-field-input { border:1px solid transparent; background:transparent; font-size:13px; font-family:'Inter',sans-serif;
  color:var(--ink); outline:none; width:100%; padding:4px 6px; border-radius:4px; }
.bible-field-input:hover { border-color:var(--rule); }
.bible-field-input:focus { background:var(--accent-lt); border-color:var(--accent-mid); }
.bible-list { display:flex; flex-direction:column; gap:6px; }
.bible-list-row { display:flex; gap:6px; align-items:center; }
.bible-list-row .bible-field-input { border:1px solid var(--rule); background:var(--canvas); }
.bible-row-x { flex:none; width:26px; height:26px; border:1px solid var(--rule); background:var(--canvas);
  border-radius:6px; color:var(--ink-soft); cursor:pointer; font-size:15px; line-height:1; }
.bible-row-x:hover { color:var(--red); border-color:var(--red); }

/* Documents */
.docs-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.doc-add-wrap { display:none; }
.doc-add-wrap.open { display:block; }
.doc-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.docs-filter { display:flex; gap:8px; margin:14px 0; align-items:center; }
.docs-filter .field-input { width:auto; }
.docs-attention-block { background:var(--red-lt); border:1px solid var(--red); border-radius:10px; padding:14px 16px; margin-bottom:16px; }
.docs-attention-title { font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--red); margin-bottom:10px; }
.docs-attention-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; padding:3px 0; }
.document-card { background:var(--surface); border:1px solid var(--rule); border-radius:9px; margin-bottom:6px; }
.document-card.expiry-critical, .document-card.expiry-expired { border-left:3px solid var(--red); }
.document-card.expiry-warning { border-left:3px solid var(--amber); }
.document-card-summary { display:flex; align-items:center; gap:14px; padding:12px 16px; cursor:pointer; list-style:none; }
.document-card-summary::-webkit-details-marker { display:none; }
.document-card-body { padding:4px 16px 16px; border-top:1px solid var(--rule); }
.doc-type-badge { font-size:9px; font-weight:700; padding:2px 7px; border-radius:4px; background:var(--canvas); color:var(--ink-soft); white-space:nowrap; }
.doc-title { flex:1; font-size:13px; font-weight:500; }
.doc-expiry-days { font-size:11px; font-weight:600; white-space:nowrap; }
.doc-expiry-days.critical, .doc-expiry-days.expired { color:var(--red); }
.doc-expiry-days.warning { color:var(--amber); }
.doc-expiry-days.ok { color:var(--ink-soft); }

@media (max-width:640px) {
  .bible-field-row { grid-template-columns:1fr; gap:3px; }
  .bible-list-row { flex-wrap:wrap; }
  .doc-form-grid { grid-template-columns:1fr; }
}

/* ── Business Hub · 13-Week Cashflow (Phase 39) ── */
.cashflow-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.cashflow-head-facts { display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--ink-soft); }
.cashflow-head-facts strong { color:var(--ink); font-variant-numeric:tabular-nums; }
.cashflow-table { width:100%; border-collapse:collapse; font-size:12px; min-width:560px; }
.cashflow-table th { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--ink-soft); padding:7px 10px; border-bottom:1px solid var(--rule); text-align:left; }
.cashflow-table th.right { text-align:right; }
.cashflow-table td { padding:9px 10px; border-bottom:1px solid var(--rule); vertical-align:top; }
.cashflow-table td.right { text-align:right; font-variant-numeric:tabular-nums; }
.cashflow-table tr.current-week td { background:var(--accent-lt); }
.cashflow-table tr.below-min td { background:var(--red-lt); }
.cashflow-income-detail { font-size:10px; color:var(--ink-soft); display:block; margin-top:3px; font-style:italic; }
.cash-in { color:var(--green); font-weight:500; } .cash-out { color:var(--red); font-weight:500; }
.cash-pos { color:var(--green); font-weight:600; } .cash-neg { color:var(--red); font-weight:600; }
.cash-balance { font-weight:700; } .cash-balance.low { color:var(--red); }
.cashflow-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:8px 0 16px; }
.cashflow-summary-card { background:var(--surface); border:1px solid var(--rule); border-radius:9px; padding:14px; text-align:center; }
.cashflow-summary-label { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
.cashflow-summary-value { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.cashflow-summary-sub { font-size:10px; color:var(--ink-soft); margin-top:3px; }
.cashflow-alert { border-radius:9px; padding:12px 16px; margin-bottom:16px; font-size:13px; }
.cashflow-alert.ok { background:var(--green-lt); color:var(--green); border:1px solid var(--green); }
.cashflow-alert.warning { background:var(--amber-lt); color:var(--ink); border:1px solid var(--amber); }
.cashflow-alert.danger { background:var(--red-lt); color:var(--ink); border:1px solid var(--red); }
.cashflow-alert a { color:inherit; font-weight:600; }
.recurring-item-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--rule); }
.recurring-item-row:last-child { border-bottom:none; }
.recurring-label-input { flex:1; border:1px solid var(--rule); border-radius:7px; padding:7px 10px; font-size:12px; font-family:'Inter',sans-serif; color:var(--ink); background:var(--canvas); outline:none; }
.recurring-label-input:focus { border-color:var(--accent); }
.today-cashflow-widget { display:flex; align-items:center; justify-content:space-between; gap:12px; text-decoration:none;
  background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:12px 14px; margin-bottom:16px; }
.today-cashflow-widget:hover { border-color:var(--accent-mid); }
.today-cashflow-label { font-size:11px; color:var(--ink-soft); }
.today-cashflow-balance { font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; }
.today-cashflow-link { font-size:11px; color:var(--accent); white-space:nowrap; }
@media (max-width:640px){ .cashflow-summary { grid-template-columns:1fr; } }

/* ── Business Hub · Overhead Budget (Phase 40) ── */
.budget-year-nav { display:flex; align-items:center; gap:10px; }
.budget-block-title { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-soft); margin:20px 0 8px; }
.rag { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--rule); }
.rag-green { background:var(--green); } .rag-amber { background:var(--amber); } .rag-red { background:var(--red); }
.rag-neutral { background:var(--rule); }

/* Roadmap status badges (marketing) */
.roadmap-live, .roadmap-soon { font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  padding:2px 7px; border-radius:20px; vertical-align:middle; margin-left:6px; }
.roadmap-live { background:rgba(16,185,129,.15); color:#0f9d6e; }
.roadmap-soon { background:rgba(91,79,207,.12); color:#5b4fcf; }

/* Invoice card-pay link box (Phase 42) */
.pay-link-box { background:var(--canvas); border:1px solid var(--rule); border-radius:9px; padding:10px 12px; margin:0 0 12px; max-width:520px; }
.pay-link-box .field-input { font-size:12px; }

/* ══════════════════════════════════════════════════════════
   SUPPORT DESK (Phase 43)
   ══════════════════════════════════════════════════════════ */
.support-filters { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.support-status-tabs { display:flex; gap:2px; }
.support-tab { padding:6px 12px; font-size:12px; font-weight:500; color:var(--ink-soft); text-decoration:none; border-radius:7px; }
.support-tab:hover { background:var(--canvas); color:var(--ink); }
.support-tab.active { background:var(--accent); color:#fff; }
.support-queue { display:flex; flex-direction:column; gap:6px; }
.ticket-row { display:flex; align-items:flex-start; gap:12px; padding:13px 16px; background:var(--surface);
  border:1px solid var(--rule); border-radius:9px; text-decoration:none; transition:border-color .15s; }
.ticket-row:hover { border-color:var(--accent-mid); }
.ticket-row.unanswered { border-left:3px solid var(--red); }
.ticket-status-dot { width:9px; height:9px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.status-new { background:var(--red); } .status-open { background:var(--accent); }
.status-waiting_client { background:var(--amber); } .status-resolved { background:var(--green); }
.status-closed { background:var(--ink-soft); }
.ticket-body { flex:1; }
.ticket-subject { font-size:13px; font-weight:500; margin-bottom:3px; color:var(--ink); }
.ticket-meta { font-size:11px; color:var(--ink-soft); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ticket-age { font-size:11px; color:var(--ink-soft); white-space:nowrap; }
.ticket-priority-tag { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:1px 6px; border-radius:8px; }
.priority-urgent { background:rgba(239,68,68,.15); color:var(--red); }
.priority-high { background:rgba(249,115,22,.15); color:#c2410c; }
.priority-normal, .priority-low { background:var(--canvas); color:var(--ink-soft); }

.support-detail-grid { display:grid; grid-template-columns:1fr 280px; gap:20px; align-items:start; max-width:900px; }
.ticket-thread { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.ticket-message { padding:12px 14px; border-radius:10px; font-size:13px; line-height:1.6; }
.message-client { background:var(--canvas); border:1px solid var(--rule); margin-right:40px; }
.message-user { background:var(--accent-lt); border:1px solid var(--accent-mid); margin-left:40px; }
.message-internal { background:var(--amber-lt); border:1px dashed var(--amber); margin-left:40px; }
.message-header { display:flex; justify-content:space-between; font-size:11px; color:var(--ink-soft); margin-bottom:6px; }
.message-internal-tag { font-size:9px; font-weight:700; text-transform:uppercase; color:var(--amber); }
.message-body { white-space:pre-wrap; }
.support-reply-form { margin-top:14px; }
.support-reply-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.support-internal-toggle { font-size:12px; color:var(--ink-soft); }
.support-logtime-form { margin-top:8px; }
.ticket-time-summary { font-size:14px; margin-bottom:8px; }
.support-summary-grid { display:flex; gap:20px; margin-bottom:12px; flex-wrap:wrap; }
.support-stat { display:flex; flex-direction:column; gap:2px; }
.support-stat-value { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.support-stat-label { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--ink-soft); }
@media (max-width:720px){ .support-detail-grid { grid-template-columns:1fr; }
  .message-client,.message-user,.message-internal { margin-left:0; margin-right:0; } }

/* ── Overview board (Phase 56) ─────────────────────────────────────────── */
.overview-actions { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.overview-config { display: none; margin-bottom: 20px; }
.overview-config.is-open { display: block; }
.overview-card-list { list-style: none; margin: 8px 0 12px; padding: 0; }
.overview-card-option { padding: 6px 8px; border-radius: 6px; cursor: grab; }
.overview-card-option:hover { background: var(--surface-2, #f6f6fa); }
.overview-card-option.is-dragging { opacity: .45; }
.overview-group { margin-bottom: 26px; }
.overview-group-title { font-size: 13px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-soft, #4a4a6a); margin: 0 0 10px; }
.overview-cards { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.overview-card { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  border: 1px solid var(--line, #e8e8f0); border-radius: 10px; background: var(--surface, #fff); }
.overview-card-label { font-size: 12px; color: var(--ink-soft, #4a4a6a); }
.overview-card-value { font-size: 26px; font-weight: 600; line-height: 1.15; }
.overview-card-detail { font-size: 12px; color: var(--ink-soft, #4a4a6a); }
.overview-card-change { font-size: 12px; }
.overview-card-change.is-up { color: #1f8b4c; }
.overview-card-change.is-down { color: #b3261e; }
.overview-card-change.is-level { color: var(--ink-soft, #4a4a6a); }
/* A product metric is a different bucket from your business — say so visually. */
.overview-card.is-product { border-style: dashed; background: transparent; }
.overview-card-tag { align-self: flex-start; font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; padding: 1px 6px; border-radius: 999px;
  background: var(--line, #e8e8f0); color: var(--ink-soft, #4a4a6a); margin-bottom: 4px; }

/* Utilisation interpretation line — informative, never a telling-off. */
.report-util-note { margin: 6px 0 18px; font-size: 13px; color: var(--ink-soft, #4a4a6a); }

/* Recovery codes — monospace so 0/O and 1/l can't be misread when copied out. */
.recovery-codes { list-style: none; padding: 0; margin: 14px 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.recovery-codes li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; letter-spacing: 1px; padding: 8px 10px; border-radius: 6px;
  background: var(--surface-2, #f6f6fa); text-align: center; }
.totp-qr svg { width: 100%; height: auto; display: block; }

/* ── IR35 (Phase 63) ───────────────────────────────────────────────────── */
.ir35-disclaimer { border: 1px solid var(--line, #e8e8f0); border-left: 3px solid #e8912a;
  border-radius: 8px; padding: 12px 14px; margin-bottom: 18px; font-size: 13px;
  line-height: 1.5; color: var(--ink-soft, #4a4a6a); }
.ir35-question { display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line, #e8e8f0); }
.ir35-question:last-child { border-bottom: none; }
.ir35-q-label { font-size: 14px; }
.ir35-q-answers { display: flex; gap: 10px; flex-shrink: 0; }
.ir35-radio { display: inline-flex; align-items: center; gap: 4px; font-size: 13px;
  color: var(--ink-soft, #4a4a6a); white-space: nowrap; }
.ir35-chip { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--line, #e8e8f0); color: var(--ink-soft, #4a4a6a); }
/* Deliberately not red/green: a status isn't a pass or a fail. */
.ir35-chip.ir35-outside { background: #e6f4ec; color: #1f8b4c; }
.ir35-chip.ir35-inside { background: #eef2fb; color: #3b5bdb; }
.ir35-chip.ir35-not_assessed { background: #fdf3e3; color: #9a6510; }

/* ── Booking (Phase 62) ────────────────────────────────────────────────── */
.booking-page { max-width: 560px; margin: 0 auto; }
.booking-title { font-size: 20px; margin: 0 0 6px; }
.booking-desc { color: var(--ink-soft, #4a4a6a); font-size: 14px; margin: 0 0 4px; }
.booking-tz { color: var(--ink-soft, #4a4a6a); font-size: 13px; margin: 0 0 18px; }
.booking-none { font-size: 14px; }
.booking-days { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px;
  max-height: 340px; overflow-y: auto; }
.booking-day-label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft, #4a4a6a); margin-bottom: 5px; }
.booking-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.booking-slot input { position: absolute; opacity: 0; }
.booking-slot span { display: inline-block; padding: 6px 12px; border-radius: 6px;
  border: 1px solid var(--line, #e8e8f0); font-size: 14px; cursor: pointer; }
.booking-slot input:checked + span { background: var(--accent, #5b4fcf); color: #fff;
  border-color: var(--accent, #5b4fcf); }
.booking-tick { font-size: 40px; color: #1f8b4c; }
.booking-window { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.booking-window .field-inline { min-width: 90px; margin: 0; }

/* Feature-usage bands — informative, not a scoreboard. No red. */
.usage-band { font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--line, #e8e8f0); color: var(--ink-soft, #4a4a6a); }
.usage-band.usage-core { background: #e6f4ec; color: #1f8b4c; }
.usage-band.usage-regular { background: #eef2fb; color: #3b5bdb; }
.usage-band.usage-unused { background: #fdf3e3; color: #9a6510; }

/* Business Plan interview screens */
.bp-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bp-conversation { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.bp-q { margin-bottom: 16px; }
.bp-q-text { font-size: 18px; font-weight: 600; color: var(--ink); }
.bp-q-help { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; }
.bp-error { background: #fdecea; color: #a3261d; border: 1px solid #f3b9b3; border-radius: 8px;
  padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
/* Answer inputs size themselves from the viewport, not from a guess at the
   device. A 16px font is not a style choice: iOS Safari zooms the page in
   whenever you focus an input smaller than that, and leaves it zoomed. */
.bp-answer-form textarea, .bp-answer-form select, .bp-answer-form input[type="text"],
.bp-answer-form input[type="date"], .bp-edit-form textarea, .bp-edit-form select,
.bp-edit-form input[type="text"], .bp-edit-form input[type="date"] {
  width: 100%; border: 1px solid var(--rule); border-radius: 8px;
  padding: 11px 12px; font-size: 16px; font-family: inherit; outline: none; }

/* A question asking for a story gets room for one; a date does not. */
.bp-answer-form textarea, .bp-edit-form textarea {
  min-height: 7.5em; line-height: 1.5; resize: vertical; }
.bp-answer-form select, .bp-edit-form select,
.bp-answer-form input[type="date"], .bp-edit-form input[type="date"] {
  max-width: 420px; }
.bp-answer-form textarea:focus, .bp-answer-form select:focus, .bp-answer-form input:focus,
.bp-edit-form textarea:focus, .bp-edit-form select:focus, .bp-edit-form input:focus {
  border-color: var(--accent); }
.bp-number { display: flex; align-items: center; gap: 6px; max-width: 420px; }
.bp-number input { flex: 1; min-width: 0; }
.bp-affix { color: var(--ink-soft); font-size: 15px; white-space: nowrap; }
.bp-check { display: block; font-size: 13px; margin: 4px 0; }
/* Enough air that the button reads as a separate act from typing the answer.
   At 14px the blue button sat close enough to the box below it to look like
   part of it. */
.bp-answer-actions { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.bp-why { margin-top: 20px; font-size: 12.5px; color: var(--ink-soft); }
.bp-why summary { cursor: pointer; }
.bp-done { text-align: center; padding: 40px 20px; }
.bp-dash-head, .bp-answers-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; }
.bp-conv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--rule); }
.bp-conv-row:last-child { border-bottom: none; }
.bp-conv-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.bp-conv-count { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.bp-case-card { display: block; text-decoration: none; color: inherit; }
/* A question and its answer read as a pair, stacked — the question above in
   a quieter weight, the answer below in the reading colour. Side by side
   they ran together into one block of text as soon as an answer was longer
   than "Yes". */
.bp-answer-row { border-bottom: 1px solid var(--rule); }
.bp-answer-row:last-of-type { border-bottom: none; }
.bp-answer-row[open] { background: var(--canvas); border-radius: 8px; }
.bp-answer-summary-stack { display: flex; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 13px 10px; list-style: none; }
.bp-answer-summary-stack::-webkit-details-marker { display: none; }
.bp-answer-summary-stack:hover { background: var(--canvas); border-radius: 8px; }
.bp-answer-summary-stack .bp-answer-q {
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; font-weight: 500; }
.bp-answer-summary-stack .bp-answer-a {
  font-size: 15px; color: var(--ink); line-height: 1.5;
  /* Three lines keeps the list scannable; the full text is one click away. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }
.bp-answer-summary-stack .bp-answer-a .optional { font-style: italic; }
.bp-answer-row[open] .bp-answer-a { -webkit-line-clamp: unset; }

.bp-answer-summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer;
  padding: 10px 4px; list-style: none; }
.bp-answer-summary::-webkit-details-marker { display: none; }
.bp-answer-q { font-size: 13.5px; color: var(--ink); flex: 1; }
.bp-answer-v { font-size: 13px; color: var(--ink-soft); text-align: right; }
.bp-edit-form { padding: 6px 4px 14px; }
/* Pressing Save advances to the next question, which is implicit
   confirmation and not enough after typing three paragraphs. This says so
   plainly and then gets out of the way — CSS only, so it behaves the same
   without JavaScript. */
.bp-saved-toast {
  position: fixed; left: 50%; transform: translateX(-50%); top: 18px;
  z-index: 60; background: var(--green); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 9px 20px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  animation: bp-saved-fade 2.2s ease forwards; pointer-events: none; }
@keyframes bp-saved-fade {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  12%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-saved-toast { animation: bp-saved-hold 2.2s steps(1) forwards; }
  @keyframes bp-saved-hold { 0%,70% { opacity: 1; } 100% { opacity: 0; } }
}

.bp-saved-flag { display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--green);
  margin-right: 8px; }

/* On a phone the answer is the whole job of the screen: nothing is capped,
   the box is taller, and the buttons stack full width so they can be hit
   with a thumb. 640px matches the breakpoint the rest of the app uses. */
@media (max-width: 640px) {
  .bp-wrap { max-width: 100%; }
  .bp-number,
  .bp-answer-form select, .bp-edit-form select,
  .bp-answer-form input[type="date"], .bp-edit-form input[type="date"] {
    max-width: 100%; }
  .bp-answer-form textarea, .bp-edit-form textarea { min-height: 10em; }
  .bp-q-text { font-size: 19px; line-height: 1.35; }
  .bp-answer-actions { flex-direction: column; align-items: stretch; gap: 10px;
    margin-top: 28px; }
  .bp-answer-actions .btn { width: 100%; padding-top: 12px; padding-bottom: 12px; }
  .bp-answer-summary { flex-direction: column; gap: 2px; }
  .bp-answer-v { text-align: left; }
  .bp-answer-summary-stack { padding: 14px 6px; }
  .bp-answer-summary-stack .bp-answer-a { font-size: 15.5px; }
  .bp-dash-head, .bp-answers-head { flex-direction: column; gap: 10px; }
}

/* TPS screening state on a prospect row. The green mark means a current,
   clear screening — it is the only state that permits a call, so it is the
   only one that gets a colour anyone reads as "go". Expired screening is
   deliberately not green: "call this whenever you like" stops being true
   after 28 days, and a badge still saying otherwise would be the most
   expensive kind of wrong. */
.tps-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 12px; font-weight: 700; line-height: 1; flex: none;
}
.tps-badge.tps-clear    { background: #dcfce7; color: #15803d; }
.tps-badge.tps-blocked  { background: #fee2e2; color: #b91c1c; }
.tps-badge.tps-stale    { background: #fef3c7; color: #b45309; }
.tps-badge.tps-unknown  { background: var(--surface); color: var(--ink-soft); border: 1px solid var(--rule); }
.tps-badge.tps-none     { background: transparent; color: var(--ink-soft); }

/* ── Click-to-dial ───────────────────────────────────────────────────────
   Feedback on the number itself rather than in a toast: the click happened
   there, and a call that failed should say so where you are looking. States
   are transient and never block. */
[data-dial].dial-pending { opacity: 0.55; }
[data-dial].dial-success { color: var(--green, #1e7e34); font-weight: 600; }
[data-dial].dial-error   { color: var(--red, #c0392b); text-decoration: line-through; }

/* Only shown where a page opts in, so the ordinary case stays quiet. */
.dial-hint { display: none; font-size: 11px; color: #666; }
body.dialler-ready .dial-hint--desk { display: inline; }
body.dialler-absent .dial-hint--tel { display: inline; }

@media (prefers-reduced-motion: reduce) {
  [data-dial] { transition: none !important; }
}

/* ── Follow-up queue ─────────────────────────────────────────────────────
   A worklist, not a board: one row per business, warmest at the top, and the
   row leaves when it has been dealt with. */
.follow-row { border: 1px solid var(--rule); border-radius: 9px; padding: 11px 14px;
  margin-bottom: 8px; background: var(--surface); }
.follow-row--overdue { border-color: #3b82f6; background: rgba(59,130,246,.05); }
.follow-row-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.follow-name { font-weight: 600; color: var(--ink); text-decoration: none; }
.follow-name:hover { color: var(--accent); }
.follow-meta { font-size: 11px; color: var(--ink-soft); }
.follow-dial { font-size: 13px; color: var(--accent); text-decoration: none;
  white-space: nowrap; margin-left: auto; }
.follow-dial:hover { text-decoration: underline; }
.follow-dur { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.follow-flag { font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.follow-flag--hot { color: #b9770e; }
.follow-flag--warm { color: var(--accent); }
.follow-flag--overdue { color: #3b82f6; }
.follow-summary { font-size: 12px; color: var(--ink-soft); margin: 7px 0 0;
  line-height: 1.45; }
.follow-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }

/* ── Books: ledger, bank, reconciliation ─────────────────────────────────
   The reconciliation row is the screen that gets used most, so it is built
   to be worked down at speed: one line, one obvious action, and the amount
   large enough to check against a statement without leaning in. */
.books-subtabs { display: flex; gap: 6px; margin: 0 0 16px; flex-wrap: wrap; }
.books-subtab { padding: 7px 14px; border-radius: 8px; font-size: 13.5px;
  color: var(--muted); text-decoration: none; border: 1px solid transparent; }
.books-subtab:hover { background: var(--surface); }
.books-subtab.active { background: var(--surface); border-color: var(--rule);
  color: var(--text); font-weight: 600; }

.books-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.books-verdict { margin: 4px 0 0; font-size: 13px; }
.books-verdict.ok { color: var(--ok, #16794a); }
.books-verdict.bad { color: var(--danger, #b3261e); font-weight: 600; }
.books-filter { display: flex; gap: 8px; align-items: end; margin: 10px 0 14px; flex-wrap: wrap; }
.books-table .num, .data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.stat-val.ok { color: var(--ok, #16794a); }
.stat-val.bad { color: var(--danger, #b3261e); font-weight: 600; }

.journal-lines { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.journal-line { font-size: 12px; color: var(--muted); }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--rule); font-size: 11.5px; }
.pill.muted { color: var(--muted); }

.stacked-form, .statement-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.stacked-form label, .statement-form label { display: flex; flex-direction: column;
  gap: 4px; font-size: 12.5px; color: var(--muted); }
.statement-form input, .statement-form select,
.stacked-form input, .stacked-form select { min-width: 140px; }

.recon-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px;
  padding: 12px 0; border-top: 1px solid var(--rule); align-items: start; }
.recon-desc { font-weight: 600; }
.recon-meta { font-size: 12px; color: var(--muted); }
.recon-amount { font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 600;
  white-space: nowrap; }
.recon-amount.in { color: var(--ok, #16794a); }
.recon-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center; }
.recon-match { display: flex; align-items: center; gap: 8px; }
.recon-note { font-size: 11.5px; color: var(--muted); }
.recon-cat { display: flex; gap: 6px; }
.table-scroll { overflow-x: auto; }

/* Phone: the reconciliation row stacks rather than squeezing the amount. */
@media (max-width: 640px) {
  .recon-row { grid-template-columns: 1fr; }
  .recon-amount { font-size: 18px; }
  .statement-form label, .stacked-form label { width: 100%; }
  .statement-form input, .statement-form select,
  .stacked-form input, .stacked-form select { width: 100%; min-width: 0; }
}

/* The registered-company line at the foot of an invoice. Quiet and centred,
   the way it appears on the bottom of a letterhead — it is a legal
   requirement rather than something anybody reads on purpose. */
.ip-statutory {
  margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--rule);
  font-size: 11px; color: var(--muted); text-align: center;
}

/* ── IR35: reading the answers back ──────────────────────────────────────
   Styled to read as a summary rather than a verdict. No large single word,
   no traffic-light badge — the moment it looks like an answer it becomes one
   somebody relies on, and HMRC only stands behind CEST. */
.ir35-warning {
  margin: 0 0 16px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--danger, #b3261e); background: rgba(179,38,30,.06);
  font-size: 13.5px; line-height: 1.5;
}
.ir35-reading .ir35-tests { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.ir35-test { flex: 1 1 200px; padding: 10px 12px; border: 1px solid var(--rule);
  border-radius: 9px; background: var(--surface); }
.ir35-test.statutory { border-color: var(--rule); }
.ir35-test-name { font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }
.ir35-test-points { font-size: 14px; font-weight: 600; }
.ir35-outside { color: var(--ok, #16794a); }
.ir35-inside  { color: var(--danger, #b3261e); }
.ir35-mixed, .ir35-unknown { color: var(--muted); font-weight: 500; }
.ir35-signals { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.ir35-signal { padding: 10px 12px; border-radius: 9px; font-size: 13px;
  line-height: 1.5; background: var(--surface); border: 1px solid var(--rule); }

@media (max-width: 640px) { .ir35-test { flex: 1 1 100%; } }

/* The advisory, and the gate in front of it. The warning is full size and
   bold on purpose: a caveat set in grey 11px is a caveat nobody read. */
.ir35-gate-warning, .ir35-advisory-warning {
  font-size: 14px; line-height: 1.55; margin: 12px 0;
  padding: 12px 14px; border-radius: 9px;
  border: 2px solid var(--danger, #b3261e); background: rgba(179,38,30,.05);
}
.ir35-ack { display: block; margin: 14px 0; font-size: 13.5px; line-height: 1.5; }
.ir35-ack input { margin-right: 8px; }
.ir35-advisory-label { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.ir35-verdict-outside .ir35-advisory-label { color: var(--ok, #16794a); }
.ir35-verdict-inside .ir35-advisory-label { color: var(--danger, #b3261e); }
.ir35-verdict-undetermined .ir35-advisory-label { color: var(--muted); }
.ir35-advisory-because { font-size: 13.5px; line-height: 1.55; color: var(--soft, #4a4a6a); }