/* ============================================================
   CRM: the app's own styles. Ported from funops tools/crm-lead/tool.css.
   Load after styles.css: tokens and shared components (.btn, .btn-mono,
   .icon-btn, .input, .pop-menu, .opt, .account, dialog, .notice, drag)
   live there. Here only what the CRM adds, on those tokens, light + dark.

   Three rules:
   1. panels and cards sit ON the page: a step of colour, a line, a shadow.
   2. a full-screen app, not a document: the PAGE never scrolls, each
      column scrolls on its own.
   3. motion answers a gesture (a panel opens, the view changes), never
      starts on its own.
   ============================================================ */

/* ---- full-screen shell ----
   Exact height, nothing to scroll: a page even a few pixels taller than the
   window jumped on every focus() and every panel opening. Under 900px it is
   a normal page again: on a phone a 100dvh box full of scrollers is a trap. */
html, body { height: 100%; }
.page--app { min-height: 100dvh; }
.appshell { display: flex; flex-direction: column; flex: none; }
.app { display: flex; flex-direction: column; min-height: 0; flex: 1; position: relative; }

@media (min-width: 900px) {
  html, body { overflow: hidden; }
  .page--app { height: 100dvh; }
  .appshell { height: 100dvh; }
}

/* ============================================================
   THE TOOLBAR. One, and low.
   ============================================================ */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex: none;
}
.toolbar__id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.toolbar__right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.toolbar__right .icon-btn { color: var(--muted); }

/* back to Home: the AP Sales emblem, first thing on the left */
.toolbar__home {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease);
}
.toolbar__home:hover { background: var(--hover); }
.toolbar__home svg { width: 22px; height: 22px; }

/* the side panel button: menu icon + the app's name */
.sidebtn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 8px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--muted); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.sidebtn:hover { color: var(--fg); border-color: var(--line-strong); background: var(--hover); }
.sidebtn__name {
  font-family: var(--button); font-size: 13px; font-weight: 500; color: var(--fg);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The four views: the open one is a raised, bold segment, like a real
   switch. Blue stays for the action button. */
.switch {
  display: flex; gap: 2px; padding: 3px;
  background: var(--base); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.switch__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  background: none; border: 0; border-radius: var(--r-xs);
  color: var(--muted); font-family: var(--button); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.switch__btn:hover { color: var(--fg); background: var(--hover); }
.switch__btn.is-current { background: var(--raised); color: var(--fg); font-weight: 600; box-shadow: var(--shadow-card); }
.switch__btn [data-role="urgency"]:empty { display: none; }

/* The number on the Today tab: red if something is overdue, amber if it's
   due today. The detail is in its title and in the three numbers in Today. */
.tabbadge {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 18px; padding: 0 6px; margin-left: 1px;
  border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
.tabbadge--danger { background: var(--danger-fill); color: var(--on-accent); }
.tabbadge--warn { background: var(--amber-9); color: var(--brand-ink); }

/* On a laptop the bar must fit one line: first the view icons go, which the
   words already say, and the first name next to the avatar. */
@media (max-width: 1299px) {
  .switch__btn > .ico { display: none; }
  .toolbar .account__first { display: none; }
}

.search { position: relative; display: flex; align-items: center; min-width: 0; flex: 1 1 160px; max-width: 280px; }
.search .ico { position: absolute; left: 10px; color: var(--muted); pointer-events: none; }
/* double specificity on purpose: .input's `padding` shorthand would reset
   this and put the lens over the placeholder's first letter */
.search .search__input { width: 100%; padding-left: 34px; }
@media (prefers-color-scheme: dark) {
  .search__input::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }
}

button.text-link { background: none; border: 0; cursor: pointer; padding: 0; }
a.text-link { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================
   MENUS THAT OPEN. .pop-menu (styles.css) is the box; lib/pop.js
   writes its position. Here: the CRM's variants.
   ============================================================ */

.pop { position: relative; display: inline-flex; }

.pop-menu.menu { display: grid; gap: 10px; width: 264px; padding: 12px; }
.pop-menu--list { display: grid; gap: 1px; padding: 5px; }
.pop-menu--cal { width: auto; padding: 10px; }

.pop__badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 9px; font-weight: 500;
}
.pop > .btn-mono { position: relative; }

.menu__label { display: block; font-size: 15px; font-weight: 650; color: var(--fg); }
.menu__note { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.menu__note strong { color: var(--fg); font-weight: 600; }
.menu__note.is-warn { color: var(--warn); }
.menu__sep { height: 1px; background: var(--line); margin: 2px 0; }
.menu__sub { margin: 0; font-size: 13px; font-weight: 600; color: var(--fg); }
.pop-menu.menu .btn-mono { justify-content: flex-start; width: 100%; border-color: var(--line); }

/* ---- the field that opens a menu ---- */

.sel { position: relative; display: block; }
.sel__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left; cursor: pointer;
}
.sel__btn[aria-expanded="true"] { border-color: var(--accent); }
.sel__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel__btn .ico { flex: none; color: var(--muted); }

/* ---- the date field ---- */

.dt { display: flex; align-items: center; gap: 6px; }
.dt__text { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.dt__text.is-bad { border-color: var(--danger); }
.dt__open {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--muted); cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.dt__open:hover, .dt__open[aria-expanded="true"] { color: var(--fg); border-color: var(--accent); }

.dtbtn { position: relative; display: inline-flex; }
.dtbtn__btn { border-color: var(--line); }
.dtbtn__btn.is-set { color: var(--accent-text); border-color: var(--accent-line); }
.dtbtn__btn span:empty { display: none; }

/* ---- the small calendar inside the menu ---- */

.mcal { display: grid; gap: 8px; width: 244px; }
.mcal__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mcal__title { font-family: var(--button); font-size: 13px; font-weight: 600; }
.mcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mcal__dow {
  display: grid; place-items: center; height: 22px;
  font-family: var(--text); font-size: 11px; font-weight: 500; color: var(--muted);
}
.mcal__pad { height: 30px; }
.mcal__day {
  height: 30px; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--fg); font-family: var(--mono); font-size: 12px; cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.mcal__day:hover { background: var(--hover); }
.mcal__day.is-today { box-shadow: inset 0 0 0 1px var(--line-strong); }
.mcal__day.is-on { background: var(--accent); color: var(--on-accent); }
.mcal__foot { display: flex; gap: 4px; justify-content: space-between; border-top: 1px solid var(--line-soft); padding-top: 6px; }

/* ---- the armed button (two-click confirm) ---- */

.icon-btn.is-armed { width: auto; gap: 5px; padding: 6px 9px; font-size: 11px; }
.icon-btn.is-armed span { font-family: var(--text); font-size: 12px; font-weight: 600; }
[data-confirm].is-armed {
  color: var(--danger);
  background: var(--danger-soft);
  box-shadow: inset 0 0 0 1px var(--danger);
}

/* ---- the drag hint ---- */
/* block, not flex: with flex every run of text becomes its own item */
.hint { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.7; }
/* styles.css makes every svg a block; inside a line of text it must not be */
.hint > .ico { display: inline-block; vertical-align: -2px; margin-right: 3px; }
.hint strong { color: var(--fg); font-weight: 500; }
.hint__grip {
  display: inline-flex; padding: 1px 3px; vertical-align: -3px;
  border: 1px solid var(--line); border-radius: var(--r-xs);
}

/* ---- save badge, banner, flash ---- */

.slot:empty { display: none; }

/* Save state as a dot: green saved, amber pulsing while saving, red with an
   icon when something is wrong. */
.save-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--muted); white-space: nowrap;
}
.save-badge__dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--gray-9); flex: none; }
.save-badge.is-saved .save-badge__dot { background: var(--green-9); box-shadow: 0 0 0 3px var(--green-a4); }
.save-badge.is-saving { color: var(--fg); }
.save-badge.is-saving .save-badge__dot { background: var(--amber-9); animation: pulse 900ms var(--ease-in-out) infinite alternate; }
.save-badge.is-error { color: var(--danger); background: var(--danger-soft); padding: 5px 10px; }
.save-badge.is-error .ico { color: var(--danger); }
@keyframes pulse { to { opacity: .35; transform: scale(.75); } }

/* The flash and the banner float together at the bottom, above an open Lead
   and its backdrop: a lost connection must show, and its button must work,
   whatever is open. The flash sits on top of the banner. */
.notices {
  position: fixed; z-index: 130;
  left: 50%; bottom: 22px; transform: translateX(-50%);
  width: min(640px, calc(100vw - 32px));
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
}
.notices > .slot { pointer-events: auto; max-width: 100%; }
.notices > [data-role="banner-slot"] { width: 100%; }

.banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--danger-soft); border: 1px solid var(--red-7); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  color: var(--fg); font-size: 14px;
  animation: pop-in var(--t) var(--ease);
}
.banner p { margin: 0; flex: 1 1 240px; }
.banner .ico { color: var(--danger); flex: none; }

/* The confirmation FLOATS (.notices), it doesn't sit in the flow: a full-width
   strip pushed everything down for four seconds, then back up. */
.flash {
  max-width: 460px;
  padding: 10px 16px;
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r-pill); box-shadow: var(--shadow-pop);
  color: var(--fg); font-size: 13.5px; text-align: center;
  animation: flash-in var(--t-slow) var(--ease);
}
.flash--error { background: var(--danger-soft); border-color: var(--red-7); color: var(--red-12); }
@keyframes flash-in { from { opacity: 0; transform: translateY(10px); } }

/* counters: a number in a neutral pill, never in the accent colour */
.count-pill {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; min-width: 24px;
  padding: 1px 8px;
  background: var(--gray-a3);
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; line-height: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.dot { width: 7px; height: 7px; border-radius: var(--r-pill); display: inline-block; flex: none; }
.dot--danger { background: var(--red-9); }
.dot--accent { background: var(--accent); }
.dot--warn { background: var(--amber-9); }
.dot--muted { background: var(--gray-9); }

/* ============================================================
   THE SIDE PANEL
   ============================================================ */

.side-scrim { position: fixed; inset: 0; z-index: 70; background: var(--backdrop); }
.side {
  position: fixed; inset: 0 auto 0 0; z-index: 80;
  width: min(400px, 100vw);
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
}
.side.is-in { animation: side-in var(--t-slow) var(--ease); }
@keyframes side-in { from { transform: translateX(-14px); opacity: 0; } }
body.side-open { overflow: hidden; }

.side__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft); flex: none;
}
.side__brand {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.01em;
}
.side__brand svg { width: 20px; height: 20px; }
.side__body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: grid; gap: 20px; align-content: start; }

.side__block { display: grid; gap: 10px; }
.side__block + .side__block { border-top: 1px solid var(--line-soft); padding-top: 20px; }
.side__block.is-flagged { animation: flag-in 1.1s var(--ease); }
@keyframes flag-in { 0%, 60% { background: var(--accent-soft); } 100% { background: transparent; } }
.side__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 650; color: var(--fg); }
.side__title .ico { color: var(--muted); }
.side__sub { display: block; margin: 0; }
.side__note { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.side__note strong { color: var(--fg); font-weight: 600; }
.side__note.is-warn { color: var(--warn); }
.side__note.is-ok { color: var(--ok); }
.side__sep { height: 1px; background: var(--line-soft); margin: 2px 0; }
.side__block .btn-mono { justify-content: flex-start; border-color: var(--line); }

/* the footer: back to Home */
.side__block--foot { display: grid; gap: 12px; justify-items: start; }

/* ---- the stages, as a list ---- */

.stagelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.stagerow { display: flex; align-items: center; gap: 4px; }
.stagerow__ord { flex: none; width: 18px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
/* Rename by typing over it, no pencil first. The border shows when it
   matters, so eleven fields in a row don't read as a form. */
.stagerow .stagerow__name {
  flex: 1; min-width: 0; padding: 6px 8px; font-size: 13px;
  background: none; border-color: transparent;
}
.stagerow .stagerow__name:hover { border-color: var(--line); background: var(--raised); }
.stagerow .stagerow__name:focus { border-color: var(--accent); background: var(--raised); }
.stagerow__n { flex: none; min-width: 20px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.stagerow .icon-btn { padding: 5px; }

.stageadd { display: flex; gap: 6px; align-items: center; }
.stageadd .input { flex: 1; }

/* ---- switch (on/off) ---- */

.toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; text-align: left;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--muted); font-family: var(--text); font-size: 13.5px; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.toggle:hover { border-color: var(--line-strong); color: var(--fg); }
.toggle.is-on { color: var(--fg); }
.toggle__text { display: inline-flex; align-items: center; gap: 8px; }
.toggle__box {
  flex: none; width: 34px; height: 20px; padding: 2px;
  background: var(--press); border-radius: var(--r-pill);
  transition: background var(--t) var(--ease);
}
.toggle.is-on .toggle__box { background: var(--accent); }
.toggle__dot {
  display: block; width: 16px; height: 16px; border-radius: var(--r-pill);
  background: var(--muted); transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.toggle.is-on .toggle__dot { transform: translateX(14px); background: var(--on-accent); }

/* ============================================================
   THE VIEW BOX
   ============================================================ */

.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.view.is-in { animation: view-in 500ms var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }

.viewbox { flex: 1; min-height: 0; }
.viewbox--scroll { overflow-y: auto; padding: 20px 18px 32px; }
.viewbox--center { display: grid; place-items: center; padding: 40px 18px; }

.blank { max-width: 380px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.blank h2 { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -.02em; margin: 0; }
.blank p { margin: 0; color: var(--muted); font-size: 14px; }

.empty-state {
  display: grid; place-items: center; min-height: 88px;
  margin: 0; padding: 16px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  color: var(--muted); font-size: 14px; text-align: center;
}

/* ---- Today ---- */

.agenda__wrap { max-width: 760px; margin: 0 auto; display: grid; gap: 22px; }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* The day's three numbers: big and in the colour of their state. At zero
   they go faint: nothing to look at. */
.tile {
  display: grid; gap: 8px;
  padding: 14px 16px 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
.tile__label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
.tile__n {
  font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--fg);
}
.tile--danger .tile__n { color: var(--danger); }
.tile--warn .tile__n { color: var(--warn); }
.tile.is-zero .tile__n { color: var(--faint); }

.agenda { display: grid; gap: 10px; }
.agenda__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 650; }
.agenda__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.agenda__row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.agenda__row:hover { background: var(--hover); border-color: var(--line-strong); }
.agenda__check {
  flex: none; width: 22px; height: 22px;
  display: grid; place-items: center;
  background: none; border: 1.5px solid var(--line-strong); border-radius: var(--r-xs);
  color: transparent; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.agenda__check:hover { color: var(--ok); border-color: var(--ok); }
.agenda__glyph { flex: none; width: 22px; display: grid; place-items: center; color: var(--muted); }
.agenda__open {
  flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
}
.agenda__name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda__note { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda__date { flex: none; font-family: var(--mono); font-size: 12.5px; font-weight: 400; }
.agenda__all { display: flex; justify-content: center; margin: 4px 0 0; }

/* ---- the pipeline ---- */

.board { flex: 1; min-height: 0; display: flex; flex-direction: column; }
@media (min-width: 900px) { .board { flex-direction: row; } }

.rail {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  flex: none;
}
@media (min-width: 900px) {
  .rail { width: 280px; border-bottom: 0; border-right: 1px solid var(--line-soft); overflow-y: auto; }
}
@media (min-width: 1280px) { .rail { width: 320px; } }
.rail.is-receiving { box-shadow: inset 0 0 0 1px var(--accent); }

.rail__divider { height: 1px; background: var(--line-soft); margin: 4px 0; }

/* The steps: the open one is a step darker and bold, its counter lights up.
   Blue is for dragging, when a step is about to take a card. */
.rail__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 12px; text-align: left;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--muted); font-family: var(--button); font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.rail__item:hover { color: var(--fg); background: var(--hover); border-color: var(--line-strong); }
.rail__item.is-current { background: var(--press); border-color: var(--line-strong); color: var(--fg); font-weight: 600; box-shadow: var(--shadow-card); }
.rail__item.is-current .count-pill { background: var(--gray-a5); color: var(--fg); }
.rail__item--entry { background: none; border-style: dashed; }
.rail__label { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.rail__label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the zone about to receive shows, clearly: the finger covers the card */
.rail__item.is-dropzone {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
  color: var(--fg);
}
.rail__add {
  display: flex; align-items: center; gap: 7px; justify-content: center;
  margin-top: 4px; padding: 8px 12px;
  background: none; border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  color: var(--muted); font-family: var(--text); font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.rail__add:hover { color: var(--fg); border-color: var(--line-strong); background: var(--hover); }

.board__main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.board__head {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 13px 18px; border-bottom: 1px solid var(--line); flex: none;
}
.board__title {
  margin: 0; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board__body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 24px; }

.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* A card: no coloured stripe on the edge. The red or amber date pill
   already says the follow-up state, in words. */
.leadcard {
  position: relative;
  display: grid; gap: 10px; align-content: start;
  padding: 14px 15px;
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-card);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.leadcard:hover { border-color: var(--line-strong); background: var(--hover); }

.leadcard__top { display: flex; align-items: flex-start; gap: 8px; }
.leadcard__open {
  flex: 1; min-width: 0; display: grid; gap: 3px; text-align: left;
  background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
}
.leadcard__name { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.leadcard__contact { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leadcard__tools { display: flex; gap: 2px; flex: none; }
.leadcard__foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.linkico { width: 15px; height: 15px; display: block; }
.stagepill {
  justify-self: start; padding: 2px 8px;
  background: var(--gray-a3); border-radius: var(--r-xs);
  font-size: 12px; font-weight: 500; color: var(--muted);
}
.pot {
  padding: 2px 8px; border-radius: var(--r-xs);
  background: var(--ok-soft); color: var(--ok);
  font-size: 12px; font-weight: 600;
}
.notecount { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.fu {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: var(--r-xs);
  font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums;
  background: var(--gray-a3); color: var(--muted);
  width: fit-content;
}
.fu--overdue { background: var(--danger-soft); color: var(--danger); }
.fu--soon { background: var(--warn-soft); color: var(--warn); }

/* The handle is its own element, not the whole card: touch-action:none on
   the card would stop the grid scrolling under a finger. */
.grip {
  display: grid; place-items: center;
  width: 26px; height: 26px; padding: 0;
  background: none; border: 0; border-radius: var(--r-xs);
  color: var(--muted); cursor: grab; touch-action: none;
}
.grip:hover { color: var(--fg); background: var(--hover); }
.grip:active { cursor: grabbing; }

.icon-btn--danger:hover:not(:disabled) { color: var(--danger); }

/* ============================================================
   CALENDAR
   ============================================================ */

.cal { max-width: 1180px; margin: 0 auto; display: grid; gap: 14px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* the two arrows stick to the month name: paging three months shouldn't
   cross the screen three times */
.cal__nav { display: flex; align-items: center; gap: 2px; }
.cal__month {
  margin: 0 6px; font-family: var(--display); font-weight: 700; font-size: 20px;
  letter-spacing: -.015em; white-space: nowrap;
}

.cal__layout { display: grid; gap: 14px; align-items: start; }
@media (min-width: 1080px) {
  .cal__layout.has-day { grid-template-columns: minmax(0, 1fr) 300px; }
}

.cal__grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.cal__grid.is-receiving { box-shadow: 0 0 0 1px var(--accent); }
.cal__dow { background: var(--hover); padding: 8px 6px; text-align: center; }
/* The whole cell opens the day, and the pointer says so everywhere in it.
   Days of the month sit a step ABOVE the blank cells. */
.cal__cell {
  background: var(--surface); min-height: 92px; padding: 5px;
  display: grid; gap: 3px; align-content: start;
  transition: background var(--t-fast) var(--ease);
  cursor: pointer;
}
.cal__cell:hover { background: var(--hover); }
.cal__cell--blank { cursor: default; background: var(--base); }
.cal__cell--blank:hover { background: var(--base); }
/* the tint goes over an opaque cell: on its own it would show the grid's
   line colour through */
.cal__cell.is-today, .cal__cell.is-dropzone {
  background-color: var(--surface);
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
}
.cal__cell.is-today:hover { box-shadow: inset 0 0 0 1px var(--accent-line); }
.cal__cell.is-open { box-shadow: inset 0 0 0 2px var(--faint); }
.cal__cell.is-dropzone { box-shadow: inset 0 0 0 1px var(--accent); }

.cal__num {
  justify-self: start;
  min-width: 22px; height: 22px; padding: 0 5px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-pill);
  font-family: var(--text); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--muted); cursor: pointer;
}
.cal__num:hover { background: var(--hover); color: var(--fg); }
.cal__num.is-today { background: var(--accent); color: var(--on-accent); }
.cal__more {
  justify-self: start; padding: 1px 4px;
  background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 11.5px;
}
.cal__more:hover { color: var(--fg); }

.calchip {
  display: flex; align-items: center; gap: 5px;
  width: 100%; padding: 3px 6px;
  background: var(--gray-a3); border: 0; border-radius: var(--r-xs);
  color: var(--fg); font-family: var(--text); font-size: 11.5px; font-weight: 500;
  text-align: left; cursor: grab; touch-action: none;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.calchip:hover { background: var(--gray-a5); }
.calchip:active { cursor: grabbing; }
.calchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calchip .ico { flex: none; }
/* the tint stays on hover (a darker tint would drop the text under AA): a ring instead */
.calchip--overdue { background: var(--danger-soft); color: var(--danger); }
.calchip--overdue:hover { background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--red-7); }
.calchip--soon { background: var(--warn-soft); color: var(--warn); }
.calchip--soon:hover { background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); }
/* done: grey and struck through, not faded (faded text fails AA) */
.calchip.is-done { background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); text-decoration: line-through; }

/* ---- the open day, at the side ---- */

.dayside {
  display: grid; gap: 10px; align-content: start;
  padding: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-card);
}
.dayside__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dayside__title { display: block; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.dayside__sub { display: block; margin-top: 2px; }
.dayside__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dayside__empty { display: grid; gap: 10px; justify-items: start; color: var(--muted); font-size: 13px; }
.dayside__empty p { margin: 0; }

.dayrow {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-sm);
}
/* no stripe on the edge: the state is in the line under the name */
.dayrow--overdue .dayrow__note { color: var(--danger); }
.dayrow--soon .dayrow__note { color: var(--warn); }
.dayrow.is-done .dayrow__name { color: var(--muted); text-decoration: line-through; }
.dayrow__open {
  flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left;
  background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
}
.dayrow__name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dayrow__note { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- the undated strip: also a drop zone ---- */

.cloud {
  display: grid; gap: 10px;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cloud.is-dropzone, .cloud.is-receiving { border-color: var(--accent); background: var(--accent-soft); }
.cloud__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 650; }
.cloud__items { display: flex; flex-wrap: wrap; gap: 6px; }
.cloud__none { margin: 0; color: var(--muted); font-size: 13px; }
.cloud__chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px 5px 7px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--fg); font-size: 12.5px; font-weight: 500; cursor: grab; touch-action: none;
}
.cloud__chip:hover { border-color: var(--line-strong); background: var(--hover); }
.cloud__chip:active { cursor: grabbing; }
.cloud__chip .ico { color: var(--muted); flex: none; }

/* ---- archive ---- */

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--text); font-size: 13px; font-weight: 500; color: var(--muted);
}
.table td { padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tbody tr { transition: background var(--t-fast) var(--ease); }
.table tbody tr:hover { background: var(--hover); }
.table__muted { color: var(--muted); font-size: 13.5px; }
.table__foot { color: var(--muted); font-size: 13px; }
.table__right, .table th.table__right { text-align: right; white-space: nowrap; }
.table__open { background: none; border: 0; padding: 0; color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.table__open:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   THE LEAD PANEL: a window in the middle
   ============================================================ */

/* The blur says «look at this for now»; the board stays readable behind. */
.scrim {
  position: fixed; inset: 0; z-index: 90;
  background: var(--backdrop);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in var(--t) var(--ease);
}

/* inset:0 + margin:auto + a fitting height = centred on both axes WITHOUT a
   transform. A lasting transform on a fixed element becomes the containing
   block of its fixed children, and the dropdowns inside the panel (fixed on
   purpose, to escape the scrolling body) would place themselves against the
   panel instead of the window. */
.panel {
  position: fixed; inset: 0; z-index: 100; margin: auto;
  width: min(620px, calc(100vw - 28px));
  height: fit-content;
  max-height: min(780px, calc(100dvh - 40px - var(--banner-room, 0px)));
  bottom: var(--banner-room, 0px);   /* above the banner, if one shows (shell.js) */
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
/* not `forwards`: once done it leaves no transform behind (see above) */
.panel.is-in { animation: panel-in 500ms var(--ease); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
body.panel-open { overflow: hidden; }

.panel__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft); flex: none;
}
.panel__title {
  flex: 1; margin: 0; min-width: 0;
  font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.panel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; display: grid; gap: 14px; align-content: start; }

/* The button that matters is ALWAYS in view, not under the notes. */
.panel__foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 18px; flex: none;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}
.panel__foot-gap { flex: 1; }
.kbd-hint { font-family: var(--text); font-size: 12px; font-weight: 500; color: var(--muted); }

/* The shortcut letter, written on the button that runs it: a shortcut you
   can't see doesn't exist. */
.kbd {
  display: inline-grid; place-items: center;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--r-xs);
  /* on the blue button: an outline only, a light fill would drop the white
     letter under AA */
  background: none;
  border: 1px solid color-mix(in srgb, var(--on-accent) 50%, transparent);
  font-family: var(--mono); font-size: 10px; line-height: 1;
}
.btn--ghost .kbd, .btn-mono .kbd, .opt .kbd {
  background: var(--hover);
  border-color: var(--line);
}

.created-note {
  display: flex; align-items: center; gap: 7px; margin: 0;
  padding: 6px 12px;
  background: var(--ok-soft);
  border: 1px solid var(--green-7);
  border-radius: var(--r-pill);
  color: var(--ok); font-size: 12.5px; font-weight: 500; white-space: nowrap;
  animation: fade-in var(--t-slow) var(--ease);
}
.created-note .ico { flex: none; }

.archived-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--base);
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  color: var(--muted); font-size: 13px;
}
.archived-note span { flex: 1 1 160px; }

.fld { display: grid; gap: 5px; min-width: 0; }
.fld__label { display: block; }
.fld__hint { color: var(--muted); font-size: 12px; }
.fld__err { color: var(--danger); font-size: 12px; }
.fld-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .fld-grid { grid-template-columns: 1fr 1fr; } }

/* ---- the four links ---- */

.linkrows { display: grid; gap: 6px; }
.linkrow { display: grid; grid-template-columns: 22px 1fr 30px; align-items: center; gap: 8px; }
.linkrow__logo { width: 18px; height: 18px; justify-self: center; }
.linkrow__logo--ico { display: grid; place-items: center; color: var(--muted); }
.linkrow .input { font-size: 13px; padding: 7px 10px; }
.linkrow__pad { width: 30px; }
.linkrow__err { grid-column: 2 / -1; }

/* ---- notes, like a conversation ---- */

.thread { display: grid; gap: 10px; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.thread h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-family: var(--text); letter-spacing: 0; font-size: 15px; font-weight: 650; color: var(--fg); }
.thread h3 .ico { color: var(--muted); }
/* Not a note: the lead's birth date. No box, no bin, nothing to delete. */
.thread__born {
  display: flex; align-items: center; gap: 6px; margin: 0;
  color: var(--muted); font-size: 12.5px;
}
.thread__born .ico { flex: none; }

.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.note {
  display: grid; gap: 6px;
  padding: 10px 12px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md);
}
.note--pending { border-style: dashed; }
.note.is-done .note__text { color: var(--muted); text-decoration: line-through; }
.note__text { margin: 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.note__foot { display: flex; align-items: center; gap: 8px; }
.note__when { margin-left: auto; }
.note__due { border: 0; cursor: pointer; font-family: var(--text); }

.composer {
  display: grid; gap: 8px; padding: 10px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md);
}
.composer .composer__text { resize: vertical; min-height: 52px; background: none; border-color: transparent; padding: 4px; box-shadow: none; }
/* under the text, a chat bar: due date as an icon on the left, Send on the right */
.composer__row { display: flex; align-items: center; gap: 8px; }
.composer__spacer { flex: 1; }
.composer .btn { padding: 8px 16px; font-size: 13px; }

/* drag: the generic classes are in styles.css; a dragged card loses its tools */
.drag-ghost .leadcard__tools { display: none; }

/* ---- «X added»: the small window after creating a lead ---- */

.created-dlg { max-width: min(420px, calc(100vw - 40px)); }
.created { position: relative; padding: 30px 28px 24px; display: grid; gap: 16px; justify-items: center; }
.created__x { position: absolute; top: 10px; right: 10px; }
.created__tick {
  display: grid; place-items: center; margin: 0;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: var(--ok-soft);
  border: 1px solid var(--green-7);
  color: var(--ok);
}
.created__title {
  margin: 0; text-align: center;
  font-family: var(--display); font-weight: 700; letter-spacing: -0.02em;
  font-size: 24px; line-height: 1.15;
}
/* two equal buttons side by side: two answers, neither is the "right" one */
.created__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.created__btn { padding: 11px 12px; font-size: 13.5px; gap: 6px; }
.created__btn .ico { flex: none; }
@media (max-width: 420px) {
  .created__actions { grid-template-columns: 1fr; }
}

/* ============================================================
   NARROW SCREENS
   ============================================================ */

@media (max-width: 899px) {
  /* Eleven stacked rows push the cards off screen: on a phone the rail is a
     strip that scrolls sideways, cards right below it. */
  .rail { flex-direction: row; overflow-x: auto; gap: 6px; padding: 10px 14px; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail__item { width: auto; flex: none; }
  .rail__divider { width: 1px; height: auto; margin: 0 2px; flex: none; }
  .rail__add { flex: none; margin: 0; white-space: nowrap; }
  .panel { max-height: calc(100dvh - 24px - var(--banner-room, 0px)); width: calc(100vw - 20px); }
}

@media (max-width: 780px) {
  /* Two rows, not three: search shares the second row with Filters and +. */
  .toolbar { padding: 8px 12px; row-gap: 7px; }
  .toolbar .search { order: 3; flex: 1 1 120px; max-width: none; }
  .toolbar > .pop { order: 4; }
  .toolbar__right { order: 5; }
  .viewbox--scroll { padding: 16px 12px 28px; }
  .board__head, .board__body { padding-left: 14px; padding-right: 14px; }
  .tiles { grid-template-columns: 1fr; }
  .cal__cell { min-height: 68px; }
  /* the view name goes, the due count stays */
  .switch__btn > span:not([data-role='urgency']) { display: none; }
  .switch__btn > .ico { display: block; }       /* back: the words are gone now */
  .switch__btn { padding: 7px 10px; }
  .sidebtn__name { display: none; }
  .sidebtn { padding: 6px 8px; }
  /* on a phone the New button is just "+": no keyboard for the letter */
  .toolbar__right [data-action='new'] span, .toolbar__right [data-action='new'] .kbd { display: none; }
  .toolbar__right [data-action='new'] { padding: 8px 11px; }
}