/* Twinmark — platform design system
   Deep forest ground · bronze accent */

:root {
  --bg:        #0B0C10;
  --bg-rgb:    11,12,16;
  --bg-2:      #0E1015;
  --bg-2-rgb:  14,16,21;
  --surface:   #14161D;
  --surface-2: #1C1F29;
  --line:      #252938;
  --line-2:    #333849;
  --text:      #ECEDF2;
  --muted:     #9096A8;
  --faint:     #5C6275;
  /* Accent is metallic gold. Vars keep the --amber names for history; they
     hold gold values. --on-accent is the text colour that sits ON the accent,
     --accent-deep the shadow end used in gradients. */
  --amber:     #EDA93F;
  --amber-hi:  #F7BE63;
  --amber-rgb: 237,169,63;
  --amber-dim: rgba(237,169,63,0.12);
  --accent-deep: #A96C1E;
  --on-accent: #1A1006;
  --live:      #3DD68C;
  --live-rgb:  61,214,140;
  --up:        #3DD68C;
  --down:      #FF5C5C;
  --down-rgb:  255,92,92;
  --radius:    10px;
  --radius-s:  7px;
  --shadow-1:  0 1px 2px rgba(0,0,0,.25), 0 2px 10px rgba(0,0,0,.18);
  --shadow-2:  0 4px 16px rgba(0,0,0,.30);
  --shadow-3:  0 12px 48px rgba(0,0,0,.50);
  --t-fast: 120ms cubic-bezier(.2,.7,.3,1);
  --t:      160ms cubic-bezier(.2,.7,.3,1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: rgba(var(--amber-rgb), 0.22); }
button { font-family: inherit; cursor: pointer; color: inherit; }
a { color: inherit; }
:is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── WORDMARK ── */
.wordmark {
  display: flex; align-items: baseline; gap: 1px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.02em;
  user-select: none; text-decoration: none;
}
.wordmark .tld { color: var(--faint); font-weight: 500; }
.caret {
  display: inline-block; width: 7px; height: 15px;
  background: var(--amber); margin-left: 3px;
  transform: translateY(2px);
  animation: blink 1.2s step-end infinite;
}
@keyframes blink { 0%, 65% { opacity: 1; } 66%, 100% { opacity: 0; } }

/* ── LOGO ──
   The peaks + diamond symbol, one alpha mask (img/logo-symbol.png, merged from
   the logo-lab pieces) painted in currentColor — black-and-white everywhere,
   any colour by changing `color`. Sized by height; width follows the art. */
.logo-mark {
  display: inline-block; flex-shrink: 0;
  height: 1em; aspect-ratio: 480 / 203;
  background: currentColor;
  -webkit-mask: url("../img/logo-symbol.png") center / contain no-repeat;
          mask: url("../img/logo-symbol.png") center / contain no-repeat;
}
.wordmark .logo-mark { height: 13px; margin-right: 8px; align-self: center; color: var(--text); }
.login-card .wordmark .logo-mark { height: 15px; }

/* ── APP SHELL ── */
.shell { display: none; min-height: 100vh; min-height: 100dvh; }
body.ready .shell { display: flex; }

.sidebar {
  width: 240px; flex-shrink: 0;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--bg);
  padding: 18px 12px 14px;
}
.sidebar .wordmark { padding: 2px 10px 0; }

.workspace {
  margin: 20px 0 6px;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface);
}
.workspace-avatar {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--bg); border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
}
.workspace-avatar .logo-mark { height: 9px; }
.workspace-name { font-size: 12.5px; font-weight: 500; line-height: 1.2; }
.workspace-plan { font-size: 10.5px; color: var(--faint); line-height: 1.3; }

/* The nav owns the scroll, not the sidebar: the wordmark and workspace stay
   pinned at the top and Sign out at the bottom, while the items between them
   scroll. Expanding the Prospects sub-nav adds up to a dozen rows, which on a
   windowed (non-fullscreen) browser pushed Pipeline, Contacts, Companies and
   Tasks off the bottom with no way to reach them.
   `min-height: 0` is what makes it work at all — a flex child defaults to
   min-height:auto and refuses to shrink below its content, so the overflow
   never engages and the sidebar just grows past the viewport instead. */
.nav {
  display: flex; flex-direction: column; gap: 1px; margin-top: 14px;
  flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  /* room for the thumb so it never sits on top of a nav label */
  margin-right: -4px; padding-right: 4px;
}
/* Flex children shrink before they overflow by default, so without this the
   nav items would squash flatter and flatter instead of the nav scrolling. */
.nav > * { flex-shrink: 0; }
.nav::-webkit-scrollbar { width: 7px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
.nav::-webkit-scrollbar-thumb:hover { background: var(--faint); }

/* Sign out must not be squeezed away by a long nav — it is the one row that
   always has to be reachable. */
.signout-row { flex-shrink: 0; }
.sidebar .wordmark, .workspace { flex-shrink: 0; }
.nav-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint);
  padding: 14px 10px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--radius-s);
  font-size: 13px; color: var(--muted); text-decoration: none;
  border: none; background: none; width: 100%; text-align: left;
  position: relative;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-item svg { flex-shrink: 0; opacity: 0.85; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--surface-2); color: var(--text); font-weight: 500; }
.nav-item.active::before {
  content: ''; position: absolute; left: -12px; top: 7px; bottom: 7px;
  width: 2px; border-radius: 2px; background: var(--amber);
}
.nav-item.active svg { color: var(--amber); opacity: 1; }
.nav-item[aria-disabled="true"] { opacity: 0.45; cursor: default; pointer-events: none; }

/* ── NAV GROUP (expandable sub-nav, e.g. Prospects → statuses) ── */
.nav-item.nav-parent { padding: 0; gap: 0; }
.nav-parent-link {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  padding: 7px 4px 7px 10px; color: inherit; text-decoration: none;
}
.nav-chevron-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; align-self: stretch; flex-shrink: 0;
  background: none; border: none; color: inherit; cursor: pointer;
}
.nav-chevron { transition: transform var(--t); opacity: 0.7; }
.nav-chevron.collapsed { transform: rotate(-90deg); }
.nav-sub-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t); }
.nav-sub-wrap.collapsed { grid-template-rows: 0fr; }
.nav-sub {
  overflow: hidden; display: flex; flex-direction: column; gap: 1px;
  margin: 2px 0 6px 22px; padding-left: 10px; border-left: 1px solid var(--line);
}
.nav-sub-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-s);
  font-size: 12px; color: var(--muted); text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-sub-item:hover { background: var(--surface-2); color: var(--text); }
.nav-sub-item.active { background: var(--surface-2); color: var(--text); font-weight: 500; }
.nav-sub-item.nav-sub-overview {
  color: var(--text); font-weight: 600;
  margin-bottom: 5px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
}
.nav-sub-item.nav-sub-overview svg { flex-shrink: 0; opacity: 0.85; color: var(--amber); }
.nav-sub-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dot, var(--muted)); flex-shrink: 0; }
.nav-sub-count { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--faint); }

.soon-pill {
  margin-left: auto; font-size: 9px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 5px;
}
/* Still grows, so Sign out stays pinned to the bottom when the nav is short.
   Its flex-basis is 0, so when the sidebar overflows it contributes nothing to
   shrink and the nav absorbs all of it — which is what makes the nav, and only
   the nav, become the scrolling part. */
.sidebar-spacer { flex: 1 1 0; min-height: 0; }
/* the right rail (renderRail) is styled and shown by glass.css; without it, it stays out of the way */
.rail { display: none; }

.signout-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-s);
  font-size: 12.5px; color: var(--muted);
  background: none; border: none; width: 100%; text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
}
.signout-row:hover { background: var(--surface-2); color: var(--text); }

/* ── MAIN / TOPBAR ── */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-2); }
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: 54px; flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(var(--bg-rgb), 0.86);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.view-title { font-size: 13px; font-weight: 500; }
.topbar-spacer { flex: 1; }

.search-stub {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; min-width: 190px;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface); color: var(--faint); font-size: 12px;
}
.search-stub:hover { border-color: var(--line-2); color: var(--muted); }
.kbd {
  margin-left: auto; font-family: var(--mono); font-size: 10px;
  color: var(--faint); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 5px; background: var(--bg);
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--radius-s);
  font-size: 12.5px; font-weight: 500; text-decoration: none;
  border: 1px solid transparent; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn-ghost { color: var(--muted); border-color: var(--line); background: transparent; }
.btn-ghost:hover { color: var(--text); border-color: var(--line-2); }
/* Primary button — a conic gold ramp rotates behind it, and a dark face inset
   by 1.5px covers all but the rim, so what reads is a lit metal edge rather
   than a painted gradient. The glow underneath is drawn from two ends of the
   ramp, so it's the button's own colour instead of generic black. */
.btn-primary {
  --gb-1: #b8651f; --gb-2: #e0932f; --gb-3: #f6c667; --gb-4: #ffe9a8; --gb-5: #d98a2b;
  --gb-glow-a: rgba(240,168,92,0.75);
  --gb-glow-b: rgba(184,101,31,0.70);
  --gb-face:    linear-gradient(155deg, #1a140c 0%, #0b0a08 52%, #17110a 100%);
  --gb-face-hi: linear-gradient(155deg, #2a2012 0%, #14110c 52%, #241a0e 100%);
  position: relative; isolation: isolate; overflow: hidden;
  border: 0; background: none;
  color: #fff; font-weight: 650; letter-spacing: 0.005em;
  box-shadow: 0 6px 24px -12px var(--gb-glow-a), 0 10px 34px -16px var(--gb-glow-b);
  transition: transform var(--t), box-shadow var(--t);
}
.btn-primary::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 240%; aspect-ratio: 1; z-index: -2;
  background: conic-gradient(from 0deg, var(--gb-1), var(--gb-2), var(--gb-3), var(--gb-4), var(--gb-5), var(--gb-1));
  /* resting angle lives here as well as in the keyframes: with animation
     suppressed the element falls back to this rule, and without the translate
     it would hang off centre and light only one corner */
  transform: translate(-50%, -50%) rotate(-28deg);
  animation: ctaRamp 7s linear infinite;
}
@keyframes ctaRamp {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.btn-primary::after {
  content: ''; position: absolute; inset: 1.5px; z-index: -1;
  border-radius: calc(var(--radius-s) - 1.5px);
  background: var(--gb-face);
  transition: background var(--t);
}
.btn-primary:hover, .btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px -10px var(--gb-glow-a), 0 14px 44px -14px var(--gb-glow-b);
}
/* the face lifts a shade too, so the whole button brightens rather than only
   the shadow under it */
.btn-primary:hover::after, .btn-primary:focus-visible::after { background: var(--gb-face-hi); }
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }
.btn:disabled:hover { transform: none; }
.btn-danger { color: var(--down); border-color: rgba(var(--down-rgb), 0.3); background: rgba(var(--down-rgb), 0.06); }
.btn-danger:hover { background: rgba(var(--down-rgb), 0.12); }
.btn-danger-solid { color: #fff; border-color: var(--down); background: var(--down); }
.btn-danger-solid:hover { background: #E24B4B; }
.btn-sm { padding: 4px 10px; font-size: 11.5px; }

.chip-act {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500; color: var(--amber);
  background: var(--amber-dim); border: 1px solid rgba(var(--amber-rgb), 0.22);
  border-radius: 6px; padding: 4px 10px; text-decoration: none; cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.chip-act:hover { background: rgba(var(--amber-rgb), 0.16); }
.chip-act:active { transform: translateY(1px); }

/* ── CONTENT / CARDS ── */
.content { width: 100%; max-width: 1128px; margin: 0 auto; padding: 30px 28px 56px; }
.content-wide { max-width: none; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px 20px;
  box-shadow: var(--shadow-1);
}
.card-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.card-title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; }
.card-hd-spacer { flex: 1; }

.rise { opacity: 0; transform: translateY(10px); animation: rise 0.45s cubic-bezier(0.2,0.6,0.2,1) forwards; }
.d1 { animation-delay: 0.03s; } .d2 { animation-delay: 0.09s; }
.d3 { animation-delay: 0.15s; } .d4 { animation-delay: 0.21s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ── KPIs ── */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px 15px;
  box-shadow: var(--shadow-1);
}
.kpi-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.kpi-val {
  font-size: 27px; font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.kpi-sub { font-size: 11px; color: var(--faint); margin-top: 7px; }

/* ── CALL STRIP (today's dials, above the prospect queues) ── */
.call-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 15px; margin-bottom: 12px;
  box-shadow: var(--shadow-1);
}
.call-strip-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.call-strip-stat { font-size: 12.5px; color: var(--faint); }
.call-strip-stat b {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 14.5px; font-weight: 600; color: var(--text); margin-right: 5px;
}
.call-strip-rate b { color: var(--amber); margin-right: 0; }
.call-strip-sep { width: 1px; height: 13px; background: var(--line-2); }

/* ── LIVE DOT ── */
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(var(--live-rgb), 0.18);
  animation: pulse 2.6s ease infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(var(--live-rgb), 0.18); }
  50%       { box-shadow: 0 0 0 5px rgba(var(--live-rgb), 0.05); }
}

/* ── FORMS ── */
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.input, select.input, textarea.input {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s);
  color: var(--text); font-family: var(--font); font-size: 13px;
  padding: 8px 11px; width: 100%;
  transition: border-color var(--t-fast);
}
.input:hover { border-color: var(--line-2); }
.input:focus { outline: none; border-color: var(--amber); }
.input::placeholder { color: var(--faint); }
textarea.input { resize: vertical; min-height: 70px; }
select.input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.pw-field { position: relative; }
.pw-field .input { padding-right: 52px; }
.toggle-pw {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted);
  font-family: var(--font); font-size: 10px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; padding: 6px; transition: color var(--t-fast);
}
.toggle-pw:hover { color: var(--text); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .span2 { grid-column: span 2; }

/* ── TABLE ── */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.data th {
  text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  white-space: nowrap; cursor: pointer; user-select: none;
}
table.data th .sort-arrow { color: var(--amber); font-size: 9px; margin-left: 4px; }
table.data td { padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
table.data tbody tr { cursor: pointer; transition: background var(--t-fast); }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: none; }
.td-muted { color: var(--muted); }
.td-mono { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.avatar {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: var(--on-accent);
  background: linear-gradient(135deg, var(--amber), var(--accent-deep));
  vertical-align: middle;
}
.avatar.co { border-radius: 6px; background: linear-gradient(135deg, var(--line-2), var(--surface-2)); color: var(--muted); }
.name-cell { display: flex; align-items: center; gap: 9px; }

/* ── KANBAN ── */
.board-wrap { position: relative; }
.board-wrap::before, .board-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 20px; width: 44px;
  pointer-events: none; opacity: 0; transition: opacity var(--t-fast); z-index: 1;
}
.board-wrap::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.board-wrap::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.board-wrap.fade-left::before { opacity: 1; }
.board-wrap.fade-right::after { opacity: 1; }
.board {
  display: flex; gap: 10px; align-items: flex-start;
  overflow-x: auto; padding: 2px 2px 20px;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.board::-webkit-scrollbar { height: 8px; }
.board::-webkit-scrollbar-track { background: transparent; }
.board::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
.board::-webkit-scrollbar-thumb:hover { background: var(--faint); }
.kcol {
  flex: 1 1 0; min-width: 208px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 248px);
  max-height: calc(100dvh - 248px);
  box-shadow: var(--shadow-1);
}
.kcol.drag-over { border-color: var(--amber); background: var(--surface-2); }
.kcol-hd {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 12px 9px; border-bottom: 1px solid var(--line);
}
.kcol-name { font-size: 12px; font-weight: 600; }
.kcol-count {
  font-family: var(--mono); font-size: 10px; color: var(--faint);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 5px;
}
.kcol-sum { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.kcol.won .kcol-name { color: var(--live); }
.kcol.lost .kcol-name { color: var(--faint); }
.kcol-body { padding: 8px; display: flex; flex-direction: column; gap: 7px; overflow-y: auto; min-height: 40px; }
.kcol-add {
  margin: 0 8px 8px; padding: 6px; border: 1px dashed var(--line); border-radius: var(--radius-s);
  background: none; color: var(--faint); font-size: 11.5px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.kcol-add:hover { color: var(--amber); border-color: rgba(var(--amber-rgb), 0.4); }

.kcard {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 10px 12px; cursor: grab;
  transition: border-color var(--t-fast), opacity var(--t-fast), box-shadow var(--t-fast);
}
.kcard:hover { border-color: var(--line-2); }
.kcard.dragging { opacity: 0.4; cursor: grabbing; box-shadow: var(--shadow-2); }
.kcard-name { font-size: 12.5px; font-weight: 500; margin-bottom: 3px; }
.kcard-co { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.kcard-foot { display: flex; align-items: center; gap: 8px; }
.kcard-value { font-family: var(--mono); font-size: 11px; color: var(--amber); }
.kcard-days { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--faint); }
.kcard-days.stale { color: var(--down); }

.ktray { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ktray-zone {
  flex: 1 1 280px; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 10px 14px; min-height: 46px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.ktray-zone.drag-over { border-color: var(--amber); background: var(--surface-2); }
.ktray-zone.won .kcol-name { color: var(--live); }
.ktray-zone.lost .kcol-name { color: var(--faint); }
.ktray-hd { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.ktray-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ktray-hint { font-size: 11px; color: var(--faint); }
.kchip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; font-size: 11px; cursor: grab;
  transition: border-color var(--t-fast), opacity var(--t-fast), box-shadow var(--t-fast);
}
.kchip:hover { border-color: var(--line-2); }
.kchip.dragging { opacity: 0.4; cursor: grabbing; box-shadow: var(--shadow-2); }
.kchip-val { font-family: var(--mono); font-size: 10.5px; color: var(--amber); }

/* ── SIDE PANEL ── */
/* Every entity detail — prospect, contact, company, deal — opens in this
   centered dialog. It was a 460px drawer pinned to the right edge, which was
   already tight before prospects grew a niche, a URL, a city, a lead source
   and four setup fields; the same change was made in the logistics app for the
   same reason. The body flows into two newspaper columns on a wide screen, so
   one readable card replaces a long scroll down a narrow strip. */
.panel-scrim {
  position: fixed; inset: 0; z-index: 90; /* above the phone tab bar (60) */
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--t); pointer-events: none;
}
.panel-scrim.open { opacity: 1; pointer-events: auto; }
.panel {
  position: fixed; top: 50%; left: 50%; z-index: 95;
  width: min(940px, calc(100vw - 40px));
  max-height: min(86vh, 880px); max-height: min(86dvh, 880px);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow-3);
  transform: translate(-50%, -50%) scale(0.975); opacity: 0; pointer-events: none;
  transition: transform var(--t), opacity var(--t);
  display: flex; flex-direction: column; overflow: hidden;
}
.panel.open { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
.panel:focus, .panel:focus-visible { outline: none; }
.panel-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 22px 15px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.panel-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-x {
  background: none; border: none; color: var(--faint); font-size: 16px;
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.panel-x:hover { background: var(--surface-2); color: var(--text); }
.panel-body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 22px 28px;
  columns: 2; column-gap: 34px; column-rule: 1px solid var(--line);
}
/* a section split down the middle of a column break is unreadable */
.panel-sec { margin-bottom: 22px; break-inside: avoid; }

/* The calendar's day view stays a right-hand drawer. It isn't an entity
   detail — it's a day, read alongside the grid it belongs to, and Mark
   approved that layout from preview-calendar.html. Only records moved. */
.panel.panel-drawer {
  top: 0; left: auto; right: 0; bottom: 0;
  width: min(460px, 94vw); max-width: none; max-height: none;
  border: none; border-left: 1px solid var(--line); border-radius: 0;
  transform: translateX(102%); opacity: 1; pointer-events: auto;
  transition: transform var(--t);
}
.panel.panel-drawer.open { transform: none; }
.panel.panel-drawer .panel-body { columns: 1; column-rule: none; }

@media (max-width: 900px) { .panel-body { columns: 1; } }
@media (max-width: 760px) {
  /* bottom sheet on phones — a centered box with a keyboard open is a slot */
  .panel {
    top: auto; left: 0; bottom: 0; transform: translateY(8%);
    width: 100%; max-width: none; max-height: 92vh; max-height: 92dvh;
    border-radius: var(--radius) var(--radius) 0 0;
    border-left: none; border-right: none; border-bottom: none;
  }
  .panel.open { transform: none; }
  .panel-hd { padding: 15px 16px 13px; }
  /* on a phone the drawer was already effectively full-width; let it sheet too */
  .panel.panel-drawer {
    top: auto; left: 0; right: 0; width: 100%;
    border-left: none; border-radius: var(--radius) var(--radius) 0 0;
    transform: translateY(8%);
  }
  .panel.panel-drawer.open { transform: none; }
}
.panel-sec-title {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.prop-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.prop-label { width: 110px; flex-shrink: 0; font-size: 11.5px; color: var(--muted); }
.prop-val { flex: 1; min-width: 0; }
.prop-val .input { padding: 5px 9px; font-size: 12.5px; background: transparent; border-color: transparent; }
.prop-val .input:hover { background: var(--surface-2); border-color: var(--line); }
.prop-val .input:focus { background: var(--surface-2); border-color: var(--amber); }

/* ── PHONE FIELD (country + number) ── */
.phone-field { display: flex; gap: 6px; }
.phone-field .phone-country { flex: 0 0 92px; padding-left: 6px; padding-right: 2px; }
.phone-field .phone-number { flex: 1; min-width: 0; }
.linked-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 9px; cursor: pointer; text-decoration: none;
}
.linked-chip:hover { border-color: var(--line-2); }

/* ── TIMELINE ── */
.composer { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.composer-row { display: flex; gap: 8px; }
.composer select { width: 110px; flex-shrink: 0; }
.tl-item { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tl-item:last-child { border-bottom: none; }
.tl-dot {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.tl-body { flex: 1; min-width: 0; }
.tl-text { font-size: 12.5px; white-space: pre-wrap; word-break: break-word; }
.tl-text.sys { color: var(--muted); font-style: italic; }
.tl-time { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.tl-time-edit {
  background: none; border: none; color: var(--faint); font-size: 10px; padding: 0;
  text-decoration: underline; text-decoration-style: dotted; cursor: pointer; opacity: 0.7;
}
.tl-time-edit:hover { color: var(--amber); opacity: 1; }
.tl-time-del:hover { color: var(--down); opacity: 1; }

/* ── TASKS ── */
.task-group { margin-bottom: 22px; }
.task-group-hd {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.task-group-hd.overdue { color: var(--down); }
.task-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 9px 13px; margin-bottom: 6px;
}
.task-row.done .task-title { text-decoration: line-through; color: var(--faint); }
.task-check {
  width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0;
  border: 1.5px solid var(--line-2); background: none;
  display: flex; align-items: center; justify-content: center;
  color: transparent; transition: all var(--t-fast); padding: 0;
}
.task-check:hover { border-color: var(--amber); }
.task-check:active { transform: scale(0.9); }
.task-check.on { background: var(--live); border-color: var(--live); color: var(--bg); }
.task-title { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-due { font-family: var(--mono); font-size: 10.5px; color: var(--faint); flex-shrink: 0; }
.task-due.overdue { color: var(--down); }
.task-del {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0; padding: 0;
  border: none; background: none; border-radius: var(--radius-s);
  color: var(--faint); opacity: 0.6;
  transition: color var(--t-fast), opacity var(--t-fast), background var(--t-fast);
}
.task-del:hover { color: var(--down); opacity: 1; background: rgba(var(--down-rgb), 0.1); }

/* ── PROSPECTS ── */
.prospect-group { margin-bottom: 18px; }
.prospect-group-hd {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 6px 2px 8px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  transition: opacity var(--t-fast);
}
.prospect-group-hd:hover { opacity: 0.8; }
.prospect-group-count { font-family: var(--mono); font-size: 10.5px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--faint); }
.prospect-group-chevron { margin-left: auto; flex-shrink: 0; opacity: 0.7; transition: transform var(--t); }
.prospect-group-hd.collapsed .prospect-group-chevron { transform: rotate(-90deg); }
.prospect-group-rows {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows var(--t);
}
.prospect-group-rows.collapsed { grid-template-rows: 0fr; }
.prospect-group-rows-inner { overflow: hidden; min-height: 0; }

.prospect-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-left-width: 5px; border-left-style: solid;
  border-radius: var(--radius-s); padding: 10px 13px 10px 11px; margin-bottom: 6px;
  cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast);
}
.prospect-row:hover { border-color: var(--line-2); }
.prospect-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.prospect-main { min-width: 0; flex: 2 1 260px; }
.prospect-name { font-size: 12.5px; font-weight: 500; }
.prospect-row[data-status="not_interested"] .prospect-name { color: var(--faint); text-decoration: line-through; }
.prospect-sub { font-size: 11px; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prospect-notes { flex: 1 1 200px; min-width: 0; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prospect-meta { flex-shrink: 0; text-align: right; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.prospect-meta .overdue { color: var(--down); }
/* The row used to carry a button per status. That worked at four statuses and
   fell apart at eleven — the wall pushed the business name into a three-line
   column and ran off the right edge. Filing is now one compact control, and
   actually logging a call belongs to the console or the panel's "Log a call". */
.prospect-status-select { flex: 0 0 auto; width: auto; max-width: 152px; padding: 5px 9px; font-size: 11.5px; }
.prospect-call { flex: 0 0 auto; padding: 5px 10px; text-decoration: none; }

@media (max-width: 620px) {
  .prospect-row { flex-wrap: wrap; }
  .prospect-notes { display: none; }
  /* one dropdown instead of a wall of tiny wrapped buttons — same actions,
     one comfortable control; the buttons remain in the prospect panel */
  .prospect-status-select { flex: 1 1 100%; max-width: none; margin-top: 2px; }
  .prospect-row { padding: 9px 11px; margin-bottom: 5px; }
  .prospect-sub { margin-top: 2px; }
}

/* ── MODAL ── */
.modal-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.5);
  display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
}
.modal-scrim.open { display: flex; }
.confirm-scrim { z-index: 130; padding-top: 20vh; } /* stacks above an already-open modal/palette */
.confirm-body { font-size: 13px; color: var(--muted); line-height: 1.55; white-space: pre-line; }
.modal {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px;
  width: 100%; max-width: 480px; max-height: 76vh; max-height: 76dvh; overflow-y: auto;
  padding: 20px 22px 22px;
  box-shadow: var(--shadow-3);
  animation: modalIn var(--t) forwards;
}
.modal.modal-wide { max-width: 760px; }

/* ── STATUS EDITOR ── */
.status-editor-list { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow-y: auto; padding-right: 2px; }
.status-editor-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--line); border-left-width: 4px; border-left-style: solid;
  border-radius: var(--radius-s); padding: 10px 12px;
}
.status-editor-row .input { padding: 5px 9px; font-size: 12px; }
.status-swatch {
  width: 24px; height: 24px; padding: 0; border-radius: 7px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.18); cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.status-swatch:hover { border-color: rgba(255,255,255,0.45); transform: scale(1.06); }
.swatch-row { width: 100%; display: flex; gap: 9px; flex-wrap: wrap; padding: 4px 2px 2px; }
.swatch-dot {
  width: 20px; height: 20px; padding: 0; border-radius: 50%; flex-shrink: 0;
  border: 2px solid transparent; cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.swatch-dot:hover { transform: scale(1.18); }
.swatch-dot.sel { border-color: var(--text); }
.status-name-input { flex: 1 1 140px; min-width: 100px; }
.status-flag { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.status-days-input { width: 52px; flex-shrink: 0; }

/* flex, not a fixed column count — chips size to their labels and wrap, so
   adding a flag to STATUS_FLAGS doesn't need a grid change or overflow a cell */
.status-flags { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 520px; }
.flag-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  flex: 1 1 auto; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.flag-chip:hover { border-color: var(--line-2); color: var(--text); }
.flag-chip.on { background: var(--amber-dim); border-color: rgba(var(--amber-rgb), 0.4); color: var(--amber); font-weight: 600; }
.flag-chip-check { font-size: 9px; width: 9px; opacity: 0; transition: opacity var(--t-fast); }
.flag-chip.on .flag-chip-check { opacity: 1; }
/* the one chip whose "on" state is a warning rather than a setting */
.flag-chip-danger.on { background: rgba(var(--down-rgb), 0.1); border-color: rgba(var(--down-rgb), 0.4); color: var(--down); }

/* ── MANAGE LISTS ──
   The status editor grew into the editor for every configurable list —
   statuses, call outcomes, niches, objections and the small attribute lists.
   All five reuse .status-editor-row above; only these few pieces are new. */
.modal.modal-xwide { max-width: 920px; }
/* five tabs overflow a phone: let the bar scroll rather than wrap or squash */
.lists-tabs { margin-bottom: 14px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.lists-tabs::-webkit-scrollbar { display: none; }
.lists-tabs .seg-btn { white-space: nowrap; }
.list-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.list-group .panel-sec-title { margin-bottom: 0; }
.list-count {
  font-family: var(--mono); font-size: 10.5px; color: var(--faint);
  white-space: nowrap; flex-shrink: 0;
}

/* ── CALL CONSOLE ──
   One prospect at a time. Approved from preview-console.html before it went
   near production; these are the same rules, moved in. Two columns on a desk
   (who you're calling / what happened), one on a phone, with the outcome grid
   going full width and the digit badges hidden where there is no keyboard. */
.console-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.console-progress { font-family: var(--mono); font-size: 12px; color: var(--text); }
.console-progress b { color: var(--amber); }
.console-track { flex: 1 1 120px; min-width: 80px; height: 3px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.console-track span { display: block; height: 100%; background: var(--amber); transition: width var(--t); }
.console-filter { width: auto; padding: 4px 8px; font-size: 11.5px; }
.console-today { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.console-today b { color: var(--text); }

.console-main { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

.console-biz { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.console-sub { margin-top: 5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }

/* the single most important control on the screen */
.console-phone-row { display: flex; align-items: stretch; gap: 8px; margin-top: 15px; }
.console-phone-row .console-phone { margin-top: 0; flex: 1; min-width: 0; }
.console-copy { flex-shrink: 0; font-size: 11.5px; }
.console-phone {
  display: flex; align-items: center; gap: 10px; margin-top: 15px;
  padding: 13px 15px; border-radius: var(--radius-s);
  background: var(--surface-2); border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 19px; color: var(--text); text-decoration: none;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
a.console-phone:hover { border-color: var(--amber); background: var(--amber-dim); color: var(--amber); }
.console-phone svg { flex-shrink: 0; opacity: 0.8; }
.console-phone-hint { margin-left: auto; font-family: var(--font); font-size: 10.5px; color: var(--faint); }

.console-facts { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.console-fact { display: flex; gap: 10px; font-size: 12px; }
.console-fact-k { width: 74px; flex-shrink: 0; color: var(--muted); font-size: 11.5px; }
.console-fact-v { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.console-fact-v a { color: var(--amber); text-decoration: none; }
.console-fact-v a:hover { text-decoration: underline; }

.setup-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.setup-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: 10.5px; color: var(--text);
}
.setup-chip i { font-style: normal; color: var(--faint); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; }

/* the same four facts, editable — half of them are learned looking the
   business up before the call, not during it */
.setup-edit { display: grid; grid-template-columns: 1.3fr 1fr 0.8fr 1fr; gap: 7px; margin-top: 9px; }
.setup-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.setup-field > span {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.setup-field .input { padding: 5px 7px; font-size: 11.5px; border-color: var(--line); }
/* filled reads as answered rather than blank-by-default */
.setup-field.set .input { color: var(--amber); border-color: rgba(var(--amber-rgb), 0.32); background: var(--amber-dim); }
@media (max-width: 620px) { .setup-edit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.console-note { margin-top: 14px; }
.console-note textarea { width: 100%; font-size: 12.5px; }

.console-sec-title {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--faint); margin-bottom: 10px;
}
.hist-row { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); font-size: 11.5px; }
.hist-row:first-of-type { border-top: 0; }
.hist-n { font-family: var(--mono); font-size: 10px; color: var(--faint); width: 26px; flex-shrink: 0; }
.hist-when { font-family: var(--mono); font-size: 10.5px; color: var(--muted); width: 58px; flex-shrink: 0; }
.hist-what { flex: 1; min-width: 0; }

/* the 1–9 wall */
.outcome-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.outcome-btn {
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 10px 11px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text); font-size: 12px; font-weight: 500;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.outcome-btn:hover { border-color: var(--line-2); }
.outcome-btn:active { transform: translateY(1px); }
.outcome-btn.on { background: var(--oc-bg); border-color: var(--oc-bd); color: var(--oc); font-weight: 600; }
.outcome-key {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 4px;
  display: grid; place-items: center; font-family: var(--mono); font-size: 10px;
  background: var(--surface); border: 1px solid var(--line); color: var(--faint);
}
.outcome-btn.on .outcome-key { border-color: var(--oc-bd); color: var(--oc); }
.outcome-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-left: auto; }

/* what that key is about to do — a rule you cannot see is one you stop trusting */
.outcome-effect {
  margin-top: 11px; padding: 10px 12px; border-radius: var(--radius-s);
  background: var(--amber-dim); border: 1px solid rgba(var(--amber-rgb), 0.28);
  font-size: 11.5px; color: var(--amber); line-height: 1.5;
}
.outcome-effect.idle { background: var(--surface-2); border-color: var(--line); color: var(--faint); }
.outcome-effect b { color: var(--text); font-weight: 600; }

/* the rule proposes, you dispose — the callback date is editable where you
   read it, so overruling the outcome costs one keypress instead of a detour */
.when-box {
  margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-s);
  background: var(--surface-2); border: 1px solid var(--line);
}
.when-box.needs { border-color: rgba(var(--amber-rgb), 0.45); }
.when-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.when-k { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.when-v { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--text); }
.when-rel { color: var(--muted); font-weight: 500; }
.when-src { margin-left: auto; font-size: 10px; color: var(--faint); }
.when-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.when-chip {
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); font-size: 11px;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.when-chip:hover { border-color: var(--line-2); color: var(--text); }
.when-chip.on { background: var(--amber-dim); border-color: rgba(var(--amber-rgb), 0.45); color: var(--amber); font-weight: 600; }
.when-reset { color: var(--faint); font-family: var(--mono); font-size: 10.5px; }
.when-date { width: 138px; padding: 3px 8px; font-size: 11px; min-height: 0; background: var(--surface); }
/* the box it sits in is already surface-2, and the UA glyph is drawn for a
   light page — lift both so the field reads as a field */
.when-date::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.5; cursor: pointer; }
.when-date::-webkit-calendar-picker-indicator:hover { opacity: 0.9; }

.obj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.obj-chip {
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); font-size: 11px;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.obj-chip:hover { border-color: var(--line-2); color: var(--text); }
.obj-chip.on { background: var(--amber-dim); border-color: rgba(var(--amber-rgb), 0.4); color: var(--amber); font-weight: 600; }
.obj-chip.niche { border-style: dashed; }
.obj-add { color: var(--faint); }
.obj-scope { font-size: 10px; color: var(--faint); margin-top: 9px; }

.console-actions {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  margin-top: 14px; border-top: 1px solid var(--line);
  background: linear-gradient(to top, var(--bg-2) 72%, transparent);
}
.console-timer { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.console-timer b { color: var(--text); }
.console-spacer { flex: 1; }
.kbd-hint { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.done-card { text-align: center; padding: 54px 20px; }

/* ── REPORTS ── */
.reports-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; align-items: start; }
.rate-list { display: flex; flex-direction: column; gap: 11px; margin-top: 12px; }
.rate-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.rate-label { width: 132px; flex-shrink: 0; color: var(--muted); }
.rate-track { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; min-width: 40px; }
.rate-track span { display: block; height: 100%; border-radius: 3px; transition: width var(--t); }
.rate-val { width: 40px; text-align: right; font-family: var(--mono); font-size: 11.5px; color: var(--text); }
.rate-n { width: 34px; text-align: right; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

.funnel { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; }
.funnel-step { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: var(--radius-s); overflow: hidden; }
.funnel-bar { position: absolute; inset: 0 auto 0 0; background: var(--amber-dim); border-right: 2px solid rgba(var(--amber-rgb), 0.45); transition: width var(--t); }
.funnel-txt { position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.funnel-label { font-size: 12px; font-weight: 500; }
.funnel-hint { font-size: 10px; color: var(--faint); }
.funnel-nums { position: relative; text-align: right; flex-shrink: 0; }
.funnel-nums b { font-family: var(--mono); font-size: 14px; }
.funnel-step-pct { display: block; font-size: 9.5px; color: var(--faint); font-family: var(--mono); }

.cell-pct { display: block; font-size: 9.5px; color: var(--faint); }
/* report tables don't sort — don't dress them up as if they do */
table.data.static th, table.data.static tbody tr { cursor: default; }
table.data.static tbody tr:hover { background: transparent; }

@media (max-width: 1060px) {
  .console-main, .reports-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .console-biz { font-size: 18px; }
  .console-phone { font-size: 17px; padding: 14px; }
  .outcome-grid { grid-template-columns: 1fr; }
  .outcome-btn { padding: 12px 11px; font-size: 12.5px; }
  /* digit badges and keyboard hints mean nothing without a keyboard */
  .outcome-key, .kbd-hint, .console-phone-hint { display: none; }
  .console-fact-k { width: 66px; }
  /* clear the fixed tab bar rather than sitting behind it */
  .console-actions { bottom: calc(55px + env(safe-area-inset-bottom, 0px)); padding-bottom: 12px; }
  .rate-label { width: 104px; font-size: 11.5px; }
}

/* ── FIND THE NUMBER ──
   A bought row is trustworthy about who and where, not about how to reach.
   When there is no number the console offers the lookup instead of an empty
   slot, and takes the one you come back with. */
.console-find {
  margin-top: 15px; padding: 13px 14px; border-radius: var(--radius-s);
  background: var(--surface-2); border: 1px dashed var(--line-2);
}
.console-find-go {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--amber); text-decoration: none; font-size: 13.5px; font-weight: 600;
}
.console-find-go:hover { text-decoration: underline; }
.console-find-row { display: flex; gap: 8px; margin-top: 11px; }
.console-find-row .input { flex: 1; min-width: 0; font-family: var(--mono); }
.console-find-hint { margin-top: 8px; font-size: 10.5px; color: var(--faint); }

/* ── REMOVE A PROSPECT ──
   Two options presented side by side rather than one destructive button,
   because "delete" and "never show me this again" are different things and
   picking the wrong one costs the same row again on the next import. */
.remove-opt {
  padding: 13px 14px; border-radius: var(--radius-s);
  background: var(--surface-2); border: 1px solid var(--line);
  margin-bottom: 10px;
}
.remove-opt-hd { font-size: 12.5px; font-weight: 600; }
.remove-opt-sub { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin-top: 4px; }
.remove-opt-row { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.remove-opt-row .input { flex: 1; min-width: 0; padding: 5px 9px; font-size: 12px; }

/* ── IMPORT FIELD MAPPING ──
   Hidden until you want it. The point of exporting every column and filtering
   here is that the dialog does the remembering, so the default state is a
   one-line summary, not seventeen dropdowns. */
.map-summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); margin-top: 2px;
}
.map-summary > span { flex: 1; min-width: 0; }
.map-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px;
  margin-top: 10px; padding: 11px; border-radius: var(--radius-s);
  background: var(--surface-2); border: 1px solid var(--line);
  max-height: 40vh; overflow-y: auto; overscroll-behavior: contain;
}
.map-row { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.map-label { font-size: 10.5px; color: var(--muted); }
.map-row .input { padding: 4px 8px; font-size: 11.5px; }
@media (max-width: 620px) { .map-grid { grid-template-columns: 1fr; } }

/* a mapped field that is empty in every row — mapped, but not actually there */
.setup-chip.fill-none { color: var(--down); border-color: rgba(var(--down-rgb), 0.35); background: rgba(var(--down-rgb), 0.07); }
.setup-chip.fill-none i { color: var(--down); opacity: 0.8; }
.setup-chip.fill-part { color: var(--muted); }

/* ── IMPORT TALLY ──
   What a file contains, shown before it is imported rather than counted in a
   toast afterwards. Re-pulling an overlapping page from a data provider is
   normal, so the overlap has to be visible at the moment you can still act. */
.import-tally { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.import-tally-row { font-size: 12px; color: var(--muted); }
.import-tally-row b { font-family: var(--mono); font-size: 13px; margin-right: 5px; }
.import-tally-row b.ok { color: var(--live); }
.import-tally-row b.warn { color: var(--amber); }
.import-dups {
  margin-top: 7px; padding: 8px 10px; border-radius: var(--radius-s);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 10.5px; color: var(--faint); line-height: 1.6;
}

/* ── NICHE CHIP ──
   On a prospect row, so a mixed queue is scannable without reading labels.
   Colour comes from the niche's own row in `picklists`, inline — the palette
   is user-chosen data, which is the one thing tokens can't cover. */
.niche-chip {
  display: inline-block; vertical-align: baseline; margin-right: 6px;
  padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
}
.dnc-tag {
  display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px;
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--down); background: rgba(var(--down-rgb), 0.1);
  border: 1px solid rgba(var(--down-rgb), 0.3);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
.modal-title { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* ── COMMAND PALETTE ── */
.palette-scrim {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(0,0,0,0.5);
  display: none; align-items: flex-start; justify-content: center;
  padding: 14vh 16px 16px;
}
.palette-scrim.open { display: flex; }
.palette {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px;
  width: 100%; max-width: 560px; overflow: hidden;
  box-shadow: var(--shadow-3);
  animation: modalIn var(--t) forwards;
}
.palette-input {
  width: 100%; background: none; border: none; color: var(--text);
  font-family: var(--font); font-size: 15px; padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.palette-input:focus { outline: none; }
.palette-results { max-height: 320px; overflow-y: auto; padding: 6px; }
.palette-group {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint); padding: 8px 12px 4px;
}
.palette-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius-s);
  font-size: 13px; cursor: pointer; width: 100%;
  background: none; border: none; text-align: left;
}
.palette-item .sub { color: var(--faint); font-size: 11.5px; margin-left: auto; }
.palette-item.sel, .palette-item:hover { background: var(--surface-2); }
.palette-item.sel { box-shadow: inset 2px 0 0 var(--amber); }
.palette-empty { padding: 22px; text-align: center; color: var(--faint); font-size: 12.5px; }

/* ── TOAST ── */
.toast {
  position: fixed; z-index: 200;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  right: calc(28px + env(safe-area-inset-right, 0px));
  padding: 12px 18px; max-width: 320px;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius-s);
  font-size: 13px; color: var(--text);
  box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--t), transform var(--t);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.err { border-color: rgba(var(--down-rgb), 0.4); }

/* ── EMPTY STATES ── */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 48px 20px; text-align: center;
}
.empty-icon { font-size: 26px; opacity: 0.5; }
.empty-title { font-size: 14px; font-weight: 600; }
.empty-sub { font-size: 12px; color: var(--muted); max-width: 320px; }

/* ── VIEW TOOLBAR ── */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .input { width: 240px; }
.toolbar-spacer { flex: 1; }
.result-count { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

/* ── LOGIN PAGE ── */
.login-wrap {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; position: relative;
}
.login-wrap::before {
  content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--amber-rgb), 0.5), transparent);
}
.login-card {
  width: 100%; max-width: 360px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 34px 30px 30px;
  box-shadow: var(--shadow-2);
}
.login-card .wordmark { justify-content: center; margin-bottom: 6px; }
.login-sub { text-align: center; font-size: 12px; color: var(--muted); margin-bottom: 26px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-err {
  font-size: 12px; color: var(--down);
  background: rgba(var(--down-rgb), 0.07); border: 1px solid rgba(var(--down-rgb), 0.25);
  border-radius: var(--radius-s); padding: 8px 12px; display: none;
}
.login-err.show { display: block; }

/* ── RESPONSIVE ── */
@media (max-width: 1060px) {
  .kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .sidebar { width: 60px; padding: 18px 8px 14px; }
  .sidebar .wordmark { justify-content: center; padding: 2px 0 0; }
  .sidebar .wordmark .word, .sidebar .wordmark .tld, .sidebar .caret { display: none; }
  .sidebar .wordmark .logo-mark { margin-right: 0; height: 12px; }
  .workspace-name, .workspace-plan, .nav-item span, .nav-label,
  .soon-pill, .signout-row span { display: none; }
  .workspace { justify-content: center; padding: 6px; }
  .nav-item { justify-content: center; padding: 9px 0; }
  .nav-parent-link { justify-content: center; padding: 9px 0; }
  .nav-chevron-btn, .nav-sub-wrap { display: none; }
  .signout-row { justify-content: center; padding: 9px 0; }
  .search-stub { min-width: 0; }
  .search-stub .search-txt { display: none; }
}
@media (max-width: 620px) {
  /* phone layout: the sidebar rail goes away — the bottom tab bar takes over */
  .sidebar { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 12px 13px 11px; }
  .kpi-label { font-size: 10px; margin-bottom: 6px; }
  .kpi-val { font-size: 20px; }
  .kpi-sub { font-size: 10.5px; margin-top: 4px; }
  .card { padding: 14px 14px 15px; }
  .content { padding: 14px 12px calc(92px + env(safe-area-inset-bottom, 0px)); }
  .topbar { padding: 0 14px; gap: 8px; }
  .kbd { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span2 { grid-column: span 1; }
  .toolbar .input { width: 100%; }
  .kcol { max-height: calc(100dvh - 316px); }
  /* stays one line on a phone — it sits above the queue Mark works from */
  .call-strip { gap: 9px; padding: 9px 12px; }
  .call-strip-label { font-size: 10px; }
  .call-strip-stat { font-size: 11.5px; }
  .call-strip-stat b { font-size: 13px; margin-right: 4px; }
}

/* ── SKELETON (boot loading state) ── */
.sk {
  background: linear-gradient(100deg, var(--surface-2) 30%, var(--line) 50%, var(--surface-2) 70%);
  background-size: 300% 100%;
  animation: shimmer 1.6s ease infinite;
  border-radius: var(--radius-s);
  display: block;
}
@keyframes shimmer { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } }

.boot-skeleton {
  position: fixed; inset: 0; z-index: 5;
  display: flex; background: var(--bg);
}
body.ready .boot-skeleton { display: none; }
.boot-skeleton .sidebar { background: var(--bg); }
.boot-skeleton-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.boot-skeleton-topbar {
  height: 54px; flex-shrink: 0; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; padding: 0 28px;
}
.boot-skeleton-content { padding: 30px 28px; flex: 1; }
.boot-skeleton-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 12px; }
.boot-skeleton-kpi {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 15px;
  display: flex; flex-direction: column; gap: 10px;
}
.boot-skeleton-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 20px;
}
.boot-skeleton-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.boot-skeleton-row:last-child { border-bottom: none; }

@media (max-width: 860px) {
  .boot-skeleton .sidebar { width: 60px; }
  .boot-skeleton-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .boot-skeleton .sidebar { display: none; }
  .boot-skeleton-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .boot-skeleton-content { padding: 14px 12px; }
  .boot-skeleton-topbar { padding: 0 14px; }
}

/* ── CALENDAR ── */
.cal-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.cal-month { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; min-width: 148px; }
.cal-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-s);
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
  cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast);
}
.cal-step:hover { color: var(--text); border-color: var(--line-2); }
.cal-step:active { transform: translateY(1px); }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.seg-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-family: var(--font); font-size: 11.5px; font-weight: 500;
  padding: 5px 12px; transition: background var(--t-fast), color var(--t-fast);
}
.seg-btn:hover { color: var(--text); }
.seg-btn:active { transform: translateY(1px); }
.seg-btn.on { background: var(--amber); color: var(--on-accent); font-weight: 600; }

.layers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.layer {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  color: var(--faint); cursor: pointer; user-select: none;
  font-family: var(--font); font-size: 11px; padding: 4px 11px 4px 9px;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.layer:hover { border-color: var(--line-2); color: var(--muted); }
.layer:active { transform: translateY(1px); }
.layer.on { color: var(--text); background: var(--surface-2); border-color: var(--line-2); }
.layer .ldot { width: 7px; height: 7px; border-radius: 50%; background: var(--ld, var(--muted)); flex-shrink: 0; opacity: 0.35; }
.layer.on .ldot { opacity: 1; }

.cal-grid { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.cal-dow { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); border-bottom: 1px solid var(--line); }
.cal-dow span {
  padding: 9px 10px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
/* Hairlines come from the 1px grid gap showing the container through, not from
   per-cell borders — borders doubled at some seams and left a heavier edge down
   one side. This way every line is exactly 1px and the outer edges match. */
.cal-weeks {
  display: grid; grid-template-columns: repeat(7, minmax(0,1fr));
  gap: 1px; background: var(--line);
}
.cal-cell {
  min-height: 116px; padding: 7px 8px 8px; border: none;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  cursor: pointer; transition: background-color var(--t-fast); text-align: left;
  font-family: var(--font); color: var(--text); background-color: var(--surface);
}
.cal-cell:hover { background-color: var(--surface-2); }
.cal-cell:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
/* tint via background-image so it composites over the cell, never over the gap */
.cal-cell.pad { background-image: linear-gradient(rgba(var(--bg-rgb), 0.35), rgba(var(--bg-rgb), 0.35)); }
.cal-cell.pad .cal-num { color: var(--faint); }
.cal-cell.wknd { background-image: linear-gradient(rgba(var(--bg-rgb), 0.18), rgba(var(--bg-rgb), 0.18)); }
.cal-num {
  font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--muted); margin-bottom: 2px; display: flex; align-items: center; gap: 5px;
}
.cal-cell.today .cal-num { color: var(--amber); font-weight: 600; }
.cal-cell.today .cal-num .n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px;
  background: var(--amber); color: var(--on-accent);
}
.cal-net { margin-left: auto; font-family: var(--mono); font-size: 10px; }
.cal-net.pos { color: var(--live); }
.cal-net.neg { color: var(--down); }

.chip {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 11px; line-height: 1.35; padding: 2px 5px; border-radius: 4px;
  background: var(--surface-2); color: var(--text);
  border-left: 2px solid var(--cc, var(--muted));
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.chip .ct { overflow: hidden; text-overflow: ellipsis; }
.chip .cm { margin-left: auto; font-family: var(--mono); font-size: 10px; flex-shrink: 0; }
.chip.in  { --cc: var(--live); } .chip.in .cm  { color: var(--live); }
.chip.out { --cc: var(--down); } .chip.out .cm { color: var(--down); }
.chip.event { --cc: var(--amber); }
.chip.sub {
  --cc: var(--amber); background: transparent; color: var(--muted);
  border: 1px dashed var(--line-2); border-left: 2px solid var(--amber);
}
.chip.task { --cc: var(--muted); color: var(--muted); }
.chip.task.late { --cc: var(--down); color: var(--down); }
.chip.deal { --cc: var(--amber); } .chip.deal .cm { color: var(--amber); }
.chip.pros { --cc: var(--pc, var(--muted)); }
.chip.log {
  background: transparent; border-left-color: transparent; color: var(--faint);
  font-family: var(--mono); font-size: 10px; padding-left: 0;
}
.cal-more { font-size: 10.5px; color: var(--faint); padding-left: 5px; }
.cal-cell:hover .cal-more { color: var(--amber); }
.cal-time { font-family: var(--mono); font-size: 10px; color: var(--faint); flex-shrink: 0; }

.cal-weeks.week .cal-cell { min-height: 300px; }
.cal-weeks.week .chip { font-size: 11.5px; padding: 4px 7px; }

.cal-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  margin-top: 10px; padding: 11px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-1); font-size: 11.5px; color: var(--muted);
}
.cal-foot b {
  font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums;
  font-weight: 500; color: var(--text);
}
.cal-foot b.pos { color: var(--live); }
.cal-foot b.neg { color: var(--down); }
.cal-foot-spacer { flex: 1; }

/* ── MONEY ── */
.sub-name { display: flex; align-items: center; gap: 9px; }
.dir-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dir-dot.in { background: var(--live); }
.dir-dot.out { background: var(--down); }
.amt { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.amt.in { color: var(--live); }
.amt.out { color: var(--down); }
.pill {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap;
}
.pill.active { color: var(--live); border-color: rgba(var(--live-rgb), 0.35); background: rgba(var(--live-rgb), 0.07); }
.pill.due { color: var(--amber); border-color: rgba(var(--amber-rgb), 0.35); background: var(--amber-dim); }
.pill.paused { color: var(--faint); }

.card-flush { padding: 18px 0 0; }
.card-flush .card-hd { padding: 0 20px; }
.card-flush .table-wrap { border: none; border-radius: 0; box-shadow: none; margin-top: 10px; }

/* ── EVENT SHEET (grouped-rows form, iOS-style structure) ── */
.ev-sheet { display: flex; flex-direction: column; gap: 10px; }
.ev-block {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-s); overflow: hidden;
}
.ev-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; min-height: 44px;
  border-bottom: 1px solid var(--line);
}
.ev-row:last-child { border-bottom: none; }
.ev-row.stack { flex-direction: column; align-items: stretch; gap: 8px; }
.ev-ico { width: 15px; height: 15px; flex-shrink: 0; color: var(--faint); display: inline-flex; }
.ev-lab { font-size: 12.5px; color: var(--muted); flex-shrink: 0; }
.ev-fill { flex: 1; min-width: 0; }
.ev-end { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ev-title-input {
  width: 100%; background: none; border: none; color: var(--text);
  font-family: var(--font); font-size: 15.5px; font-weight: 500;
  padding: 14px 13px;
}
.ev-title-input:focus { outline: none; }
.ev-title-input::placeholder { color: var(--faint); font-weight: 400; }
.ev-row .input { padding: 6px 9px; font-size: 12.5px; width: auto; }
.ev-row .input.grow { width: 100%; }
.ev-row.dim { opacity: 0.4; pointer-events: none; }

.switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1; }
.switch .track {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--line-2); transition: background var(--t-fast); pointer-events: none;
}
.switch .thumb {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text); transition: transform var(--t-fast); pointer-events: none;
}
.switch input:checked ~ .track { background: var(--amber); }
.switch input:checked ~ .thumb { transform: translateX(16px); }
.switch input:focus-visible ~ .track { outline: 2px solid var(--amber); outline-offset: 2px; }

.swatches { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-left: auto; }
.swatch {
  width: 20px; height: 20px; border-radius: 50%; padding: 0;
  border: 2px solid transparent; background-clip: padding-box; cursor: pointer;
  transition: transform var(--t-fast);
}
.swatch:hover { transform: scale(1.12); }
.swatch.on { border-color: var(--text); }
.swatch:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ── DAY PANEL ── */
.day-sec { margin-bottom: 20px; }
.day-sec-title {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 7px;
}
.day-sec-title .n { font-family: var(--mono); font-weight: 400; letter-spacing: 0; color: var(--faint); }
.day-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.day-row:last-child { border-bottom: none; }
.day-row .rt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-row.clickable { cursor: pointer; }
.day-row.clickable:hover .rt { color: var(--amber); }
.day-del {
  background: none; border: none; color: var(--faint); cursor: pointer; padding: 2px 4px;
  display: inline-flex; opacity: 0; transition: opacity var(--t-fast), color var(--t-fast);
}
.day-row:hover .day-del { opacity: 1; }
.day-del:hover { color: var(--down); }

/* ── OVERVIEW: next 7 days strip ── */
.next7 { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 8px; margin-top: 8px; }
.next7-day {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 9px 8px; min-height: 74px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font); color: var(--text);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.next7-day:hover { border-color: var(--line-2); }
.next7-day:active { transform: translateY(1px); }
.next7-day.today { border-color: var(--amber); }
.next7-dow {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.next7-day.today .next7-dow { color: var(--amber); }
.next7-num { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1; }
.next7-dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; }
.next7-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--dc, var(--muted)); }
.next7-none { font-size: 10px; color: var(--faint); margin-top: auto; }

@media (max-width: 900px) {
  .cal-cell { min-height: 82px; padding: 5px; }
  .cal-cell .chip .ct { display: none; }
  .cal-cell .chip { justify-content: center; }
  .cal-weeks.week .cal-cell { min-height: 150px; }
  .cal-weeks.week .chip .ct { display: block; }
  .cal-dow span { padding: 7px 5px; font-size: 9.5px; }
  .cal-month { min-width: 0; font-size: 13.5px; }
  .next7 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .next7 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .cal-foot { gap: 12px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise { opacity: 1; transform: none; }
}

/* ── MOBILE / TOUCH (2026-07-14 mobile audit) ──
   Everything below is scoped to touch devices or small widths;
   desktop rendering is unchanged. */

/* no double-tap-zoom delay; kill the default gray tap flash (components
   already have their own :active/hover states) */
a, button, input, select, textarea,
.kcard, .kchip, .prospect-row, table.data tbody tr { touch-action: manipulation; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }

/* overlay layers own their scroll — no chaining to the page behind */
.panel-body, .modal, .palette-results, .board, .kcol-body, .status-editor-list {
  overscroll-behavior: contain;
}
body.scroll-lock { overflow: hidden; }

/* prospect group header: "Open" link to the status's own page — only shown
   when the sidebar collapses to the icon rail and its sub-nav disappears */
.prospect-group-hdrow { display: flex; align-items: center; gap: 8px; }
.prospect-group-hdrow .prospect-group-hd { flex: 1; width: auto; min-width: 0; }
.prospect-group-open {
  display: none; flex-shrink: 0;
  color: var(--faint); text-decoration: none;
  font-size: 11px; font-weight: 500; padding: 4px 6px;
  transition: color var(--t-fast);
}
.prospect-group-open:hover { color: var(--amber); }
@media (max-width: 860px) { .prospect-group-open { display: inline-flex; } }

/* ── BOTTOM TAB BAR (phones only; sidebar serves ≥621px) ── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; gap: 2px;
  padding: 6px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(var(--bg-rgb), 0.92);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-top: 1px solid var(--line);
}
@media (max-width: 620px) { .tabbar { display: flex; } }
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; padding: 5px 0 3px;
  color: var(--muted); font-family: var(--font); font-size: 9.5px; font-weight: 500;
  text-decoration: none; border-radius: 8px;
  transition: color var(--t-fast);
}
.tab svg { opacity: 0.9; }
.tab.active { color: var(--amber); }

/* ── TOOLBAR ACTIONS: inline on desktop, one swipeable line on phones ── */
.toolbar-actions { display: contents; }
@media (max-width: 620px) {
  .toolbar-actions {
    display: flex; align-items: center; gap: 8px;
    flex: 1 1 100%; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .toolbar-actions::-webkit-scrollbar { display: none; }
  .toolbar-actions .btn { flex-shrink: 0; }
}

@media (pointer: coarse) {
  /* iOS Safari auto-zooms the page on focusing any input under 16px */
  .input, select.input, textarea.input, .palette-input,
  .prop-val .input, .status-editor-row .input { font-size: 16px; }

  /* comfortable tap sizes — invisible hit-area extension where the visual
     size is part of the design (checkbox, ✕, timeline text-buttons, swatches) */
  .btn-sm { padding: 8px 12px; font-size: 12.5px; }
  .task-check, .task-del, .panel-x, .tl-time-edit, .status-swatch, .swatch-dot { position: relative; }
  :is(.tl-time-edit, .status-swatch, .swatch-dot, .toggle-pw)::after {
    content: ''; position: absolute; inset: -8px -4px;
  }
  :is(.task-check, .task-del, .panel-x)::after {
    content: ''; position: absolute; inset: -10px;
  }
  .linked-chip { padding: 6px 11px; }
  .chip-act { padding: 7px 12px; }
  table.data th { padding: 12px 14px; }
  .panel-body { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 620px) {
  /* tables: keep the identity columns, drop the rest — full record lives in
     the side panel a tap away */
  table.data td { max-width: 42vw; }
  .t-contacts th:nth-child(4), .t-contacts td:nth-child(4),
  .t-contacts th:nth-child(5), .t-contacts td:nth-child(5),
  .t-contacts th:nth-child(6), .t-contacts td:nth-child(6),
  .t-companies th:nth-child(2), .t-companies td:nth-child(2),
  .t-companies th:nth-child(3), .t-companies td:nth-child(3),
  .t-companies th:nth-child(6), .t-companies td:nth-child(6),
  .t-billing th:nth-child(4), .t-billing td:nth-child(4) { display: none; }

  /* modals & palette: work with the height the on-screen keyboard leaves */
  .modal-scrim, .palette-scrim { padding: 20px 12px 12px; }
  .modal { max-height: calc(100dvh - 32px); }
  .palette-results { max-height: 50dvh; }

  .toast {
    left: 16px; right: 16px; max-width: none;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)); /* clears the tab bar */
  }
}

/* pipeline: long-press-to-drag on touch. Cards are drag handles on every
   device, so text selection / iOS long-press callout never make sense here */
.kcard, .kchip {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 300;
  pointer-events: none; opacity: 0.95;
  box-shadow: var(--shadow-3);
  cursor: grabbing;
}

/* ── LOGO LAB (dashboard.html → js/logo-lab.js) ──
   The canvas column stays in view while the controls scroll past it. Below
   900px the whole tool gives way to a note: dragging corner handles on a
   phone-sized canvas isn't a tool anyone can use. */
.ll { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.ll-small { display: none; }
@media (max-width: 900px) {
  .ll { display: none; }
  .ll-small { display: flex; flex-direction: column; align-items: center; }
}
.ll-stage-col { position: sticky; top: 66px; min-width: 0; }
.ll-stage-card { padding: 12px 12px 14px; }
.ll-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ll-readout {
  font-family: var(--mono); font-size: 11px; color: var(--faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ll-well {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 300px; padding: 22px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s);
}
.ll-loading { font-size: 12.5px; color: var(--faint); }
/* the ring keeps the canvas edge visible when its background matches the well */
.ll-board {
  position: relative; flex-shrink: 0; touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 0 0 1px var(--line-2), var(--shadow-3);
}
/* keep a focused control clear of the sticky topbar when tabbing scrolls to it */
.ll :is(button, input, [tabindex]) { scroll-margin-top: 72px; scroll-margin-bottom: 16px; }
.ll-board.is-clear {
  background-color: var(--surface-2);
  background-image:
    linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%),
    linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.ll-canvas { display: block; width: 100%; height: 100%; }

.ll-piece {
  position: absolute; cursor: grab; border-radius: 2px;
  outline: 1px dashed transparent; outline-offset: 4px;
  transition: outline-color var(--t-fast);
}
.ll-piece:hover { outline-color: rgba(var(--amber-rgb), 0.5); }
.ll-piece.on { outline: 1px solid var(--amber); }
.ll-piece:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 2px; }
.ll-piece.dragging { cursor: grabbing; }
.ll-handle {
  position: absolute; display: none; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  background: var(--text); border: 2px solid var(--amber); border-radius: 3px;
}
.ll-handle::before { content: ''; position: absolute; inset: -7px; }   /* bigger hit area */
.ll-piece.on .ll-handle { display: block; }
.ll-handle[data-c="nw"] { left: -4px; top: -4px; cursor: nwse-resize; }
.ll-handle[data-c="ne"] { left: calc(100% + 4px); top: -4px; cursor: nesw-resize; }
.ll-handle[data-c="sw"] { left: -4px; top: calc(100% + 4px); cursor: nesw-resize; }
.ll-handle[data-c="se"] { left: calc(100% + 4px); top: calc(100% + 4px); cursor: nwse-resize; }
.ll-guide { position: absolute; background: var(--amber); opacity: 0; pointer-events: none; transition: opacity var(--t-fast); }
.ll-guide.v { top: 0; bottom: 0; left: 50%; width: 1px; }
.ll-guide.h { left: 0; right: 0; top: 50%; height: 1px; }
.ll-guide.show { opacity: 0.75; }

.ll-hint { font-size: 11.5px; line-height: 1.7; color: var(--faint); margin-top: 10px; }
.ll-key {
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; background: var(--bg);
}

.ll-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ll-card { padding: 14px 16px 16px; }
.ll-card .card-hd { margin-bottom: 6px; min-height: 28px; }
.ll-card .card-title { font-size: 13px; }
.ll-sub { font-size: 11.5px; line-height: 1.5; color: var(--faint); margin-bottom: 10px; }
.ll-card > :last-child, .ll-card [data-set] > :last-child { margin-bottom: 0; }

.ll-part {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--line); font-size: 12.5px;
}
.ll-part:first-child { border-top: 0; padding-top: 0; }
.ll-part-name { display: inline-flex; align-items: center; gap: 8px; }
.ll-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--line-2);
}

.ll-color { display: flex; align-items: center; gap: 8px; }
.ll-swatch {
  width: 38px; height: 35px; flex-shrink: 0; padding: 0; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s);
  transition: border-color var(--t-fast);
}
.ll-swatch:hover { border-color: var(--line-2); }
.ll-swatch::-webkit-color-swatch-wrapper { padding: 4px; }
.ll-swatch::-webkit-color-swatch { border: none; border-radius: 4px; }
.ll-swatch::-moz-color-swatch { border: none; border-radius: 4px; }
.ll-hex { font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; }

.ll-drop {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 16px 12px; text-align: center; font-size: 12px; color: var(--muted);
  border: 1px dashed var(--line-2); border-radius: var(--radius-s);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.ll-drop svg { color: var(--faint); }
.ll-drop.over { border-color: var(--amber); background: var(--amber-dim); }
.ll-photo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ll-thumb {
  width: 48px; height: 48px; flex-shrink: 0; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--radius-s);
}
.ll-photo-meta { min-width: 0; }
.ll-photo-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-photo-acts { display: flex; gap: 6px; margin-top: 6px; }
.ll-range {
  display: grid; grid-template-columns: 78px minmax(0, 1fr) 38px; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--muted); margin-bottom: 4px;
}
.ll-range input { width: 100%; accent-color: var(--amber); }
.ll-range output { font-family: var(--mono); font-size: 11px; color: var(--faint); text-align: right; font-variant-numeric: tabular-nums; }
.ll-ghost-note { margin-top: 8px; }

.ll-presets { display: flex; flex-direction: column; }
.ll-preset-row { display: flex; align-items: center; gap: 4px; margin: 0 -8px; }
.ll-preset {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border: none; background: none; border-radius: var(--radius-s);
  color: var(--text); font-size: 12.5px; text-align: left;
  transition: background var(--t-fast), transform var(--t-fast);
}
.ll-preset span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-preset:hover { background: var(--surface-2); }
.ll-preset:active { transform: translateY(1px); }
.ll-mini {
  display: inline-flex; align-items: center; gap: 3px; padding: 0 5px;
  width: 34px; height: 20px; flex-shrink: 0;
  border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line-2);
}
.ll-mini i { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(var(--bg-rgb), 0.35); }
.ll-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0; margin-right: 4px;
  border: none; background: none; color: var(--faint); border-radius: 6px;
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.ll-del:hover { color: var(--down); background: rgba(var(--down-rgb), 0.08); }
.ll-del.asking { width: auto; padding: 0 8px; font-size: 11.5px; font-weight: 500; color: var(--down); background: rgba(var(--down-rgb), 0.08); }
.btn.asking { color: var(--down); border-color: rgba(var(--down-rgb), 0.3); }
.ll-del:active { transform: translateY(1px); }
.ll-save { display: flex; gap: 6px; margin-top: 10px; }
.ll-save .input { padding: 6px 9px; font-size: 12.5px; }
.ll-export .btn-primary { width: 100%; justify-content: center; padding: 9px 13px; }
.ll-export-name { font-family: var(--mono); font-size: 11px; }