/* ==========================================================================
   Coordinator Desk — design tokens
   Shared warm neutrals; only the brand language changes with the location:
     DA   : blue #468FFF primary, red #EB1C24 reserved for critical/emphasis
     SREG : red  #EB1C24 primary, black structural accent
   Light and dark are separately tuned palettes, not inversions.
   ========================================================================== */
:root {
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  /* neutrals — light */
  --bg: #F7F6F3; --panel: #FFFFFF; --panel-2: #FBFAF8; --ink: #1F2328; --ink-2: #3D4450; --muted: #5F6672; --line: #E6E4DF; --muted-bg: #F0EEE9;
  --shadow: 0 1px 2px rgba(31,35,40,.05), 0 6px 20px rgba(31,35,40,.06);
  /* status — light */
  --crit: #C8161D; --crit-bg: #FCE8E9; --crit-line: #F3B8BB;
  --warn: #8A5A00; --warn-bg: #FFF3D6; --warn-line: #F1D48A;
  --ok: #1B7F4B; --ok-bg: #E4F5EA; --ok-line: #A9DFC0;
  --info-bg: #EEF2F7;
  --radius: 14px; --radius-sm: 9px;
  /* One height for every control in a toolbar — buttons, dropdowns, toggles, search. */
  --ctl: 36px;
  --shadow-pop: 0 2px 6px rgba(31,35,40,.06), 0 16px 40px rgba(31,35,40,.14);
  --shadow-lift: 0 2px 4px rgba(31,35,40,.05), 0 10px 24px rgba(31,35,40,.09);
  /* Urgency is not the brand. DA's brand is blue, so red carries the alert; SREG's brand IS red
     (#EB1C24), so amber carries it there — see the per-brand blocks below. */
  --urgency: var(--crit);
  --fs-body: 15px; --fs-small: 13px; --fs-title: 26px; --fs-h2: 17px;
  color-scheme: light;
}
:root[data-brand="da"] {
  --brand: #468FFF; --brand-ink: #FFFFFF; --brand-soft: #E5EEFF; --brand-line: #B9D0FF; --brand-deep: #2E6FDB;
  --accent: #EB1C24; --heading: #1F2328;
}
:root[data-brand="sreg"] {
  --brand: #EB1C24; --brand-ink: #FFFFFF; --brand-soft: #FDE9EA; --brand-line: #F5B8BB; --brand-deep: #C4141B;
  --accent: #000000; --heading: #000000;
  --urgency: var(--warn);
}
:root[data-theme="dark"] {
  --bg: #15171B; --panel: #1E2126; --panel-2: #23262C; --ink: #ECEDEF; --ink-2: #C5C9D0; --muted: #9AA1AB; --line: #2E323A; --muted-bg: #272B32;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-pop: 0 2px 8px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.5);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.45);
  --crit: #FF6B70; --crit-bg: #3A1B1D; --crit-line: #6B2A2E;
  --warn: #F2C14E; --warn-bg: #3A2F14; --warn-line: #6B5620;
  --ok: #5CCB8A; --ok-bg: #173A26; --ok-line: #24603C;
  --info-bg: #262C36;
  color-scheme: dark;
}
:root[data-theme="dark"][data-brand="da"]   { --brand: #6EA6FF; --brand-ink: #0B1730; --brand-soft: #1C2B47; --brand-line: #2F4A7A; --brand-deep: #8DB8FF; --accent: #FF6B70; --heading: #ECEDEF; }
:root[data-theme="dark"][data-brand="sreg"] { --brand: #FF4B52; --brand-ink: #2A0A0C; --brand-soft: #3A1B1D; --brand-line: #6B2A2E; --brand-deep: #FF7A80; --accent: #FFFFFF; --heading: #FFFFFF; }

* { box-sizing: border-box; }
/* Checkboxes, radios, range sliders and progress take the business's colour, not the browser's blue. */
:root { accent-color: var(--brand); }
/* One focus ring, in the brand colour, shown only to someone moving by keyboard — a mouse click
   leaves no outline behind. Text fields keep their own focus style below. */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
.nav a:focus-visible { outline-offset: -2px; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs-body)/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; }
a { color: var(--brand-deep); }
button { font: inherit; cursor: pointer; color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--font-display); color: var(--heading); font-weight: 600; letter-spacing: -.01em; margin: 0; }
h1 { font-size: var(--fs-title); line-height: 1.15; }
h2 { font-size: var(--fs-h2); display: flex; align-items: center; gap: 10px; }
h2 .count { font: 600 12px var(--font-ui); background: var(--muted-bg); border-radius: 999px; padding: 2px 9px; color: var(--muted); }
h3 { font-size: 15px; }
p { margin: 0 0 10px; }
.muted { color: var(--muted); } .small { font-size: var(--fs-small); }
.sr { position: absolute; left: -9999px; }

/* layout */
.app { min-height: 100vh; display: grid; grid-template-columns: 236px 1fr; }
.sidebar { background: var(--panel-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 18px 14px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font: 700 15px var(--font-ui); letter-spacing: .02em; }
.brand-name { font-family: var(--font-display); font-size: 17px; color: var(--heading); line-height: 1.1; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: 14px; transition: background .12s, color .12s; }
.nav a .ico { width: 18px; height: 18px; display: inline-grid; place-items: center; color: var(--muted); }
.nav a .ico .i { width: 18px; height: 18px; }
.nav a:hover { background: var(--muted-bg); }
.nav a.active { background: var(--panel); color: var(--heading); font-weight: 600; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(31,35,40,.05); }
.nav a.active .ico { color: var(--brand); }
.sidebar-foot { margin-top: auto; }
.user { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid var(--line); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-deep); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.user .who { min-width: 0; }
.user .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user .role { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.user button { border: 0; background: none; color: var(--muted); font-size: 12px; padding: 0; margin-left: auto; }
.role-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--muted-bg); color: var(--ink-2); }
.role-badge.admin { background: var(--brand-soft); color: var(--brand-deep); }

/* The one control on a person's row in Users & permissions. Shut, it says what they hold; open,
   it lists every Desk role with a tick and a question mark. A second role adds a line inside it,
   never a column to the table. */
.rolepick { display: inline-block; min-width: 170px; }
.rolepick > summary { cursor: pointer; list-style: none; padding: 3px 22px 3px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); font-size: 13px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rolepick > summary::-webkit-details-marker { display: none; }
.rolepick > summary::after { content: '\25be'; position: absolute; right: 8px; top: 3px; color: var(--ink-2); }
.rolepick[open] > summary { border-color: var(--brand); }
.rolepick-body { margin-top: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.rolepick-body .check { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.rolepick-body .helpmark { margin-left: 4px; vertical-align: middle; }

/* "Add contact" is the button until it is clicked, and the panel once it is. Folding the three
   fields away keeps the card to what is actually there — searching GoHighLevel is the quicker
   route in most cases, and the form was taking more room than the list it sits under. */
.addnew { margin-top: 12px; }
.addnew > summary { display: inline-block; cursor: pointer; list-style: none; }
.addnew > summary::-webkit-details-marker { display: none; }
.addnew[open] > summary { display: none; }
.addnew[open] { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--muted-bg); }

.content { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 28px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.menu-btn { display: none; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius-sm); width: 36px; height: 36px; place-items: center; padding: 0; color: var(--ink-2); }
.loc-toggle { display: inline-flex; background: var(--muted-bg); border: 1px solid var(--line); border-radius: 10px; padding: 2px; }
.loc-toggle button { border: 0; background: transparent; color: var(--muted); height: 30px; padding: 0 14px; border-radius: 8px; font-weight: 600; font-size: 13px; letter-spacing: .02em; transition: background .12s, color .12s; }
.loc-toggle button[aria-checked="true"] { background: var(--brand); color: var(--brand-ink); }
.search { position: relative; flex: 1 1 260px; max-width: 560px; }
.search input { width: 100%; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font-size: 14px; }
.search input:focus { outline: 2px solid var(--brand-line); border-color: var(--brand); }
.search-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 600 11px/1 var(--font-ui); color: var(--muted);
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 3px 6px; background: var(--panel-2); pointer-events: none; }
.search:focus-within .search-kbd, .search:has(input:not(:placeholder-shown)) .search-kbd { display: none; }
.search-results .row:focus { outline: none; background: var(--brand-soft); }
@media (max-width: 900px) { .search-kbd { display: none; } }
.search-results { position: absolute; top: 42px; left: 0; right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); max-height: 60vh; overflow: auto; z-index: 30; padding: 6px 0; }
.search-results h4 { margin: 8px 14px 4px; font: 600 11px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.search-results .row { display: block; width: 100%; text-align: left; padding: 8px 14px; border: 0; background: none; color: var(--ink); }
.search-results .row:hover { background: var(--muted-bg); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.updated { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.updated .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; }
.updated .dot.stale { background: var(--warn); } .updated .dot.err { background: var(--crit); }
.icon-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); display: inline-grid; place-items: center; padding: 0; transition: background .12s, color .12s; }
.icon-btn:hover { background: var(--muted-bg); color: var(--heading); }

.main { flex: 1; padding: 6px 28px 32px; width: 100%; display: flex; flex-direction: column; min-height: 0; }
.main > .fill { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.page-head { display: flex; align-items: flex-end; gap: 12px; margin: 22px 0 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 30px; letter-spacing: -.02em; }
.page-head .sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.page-head .spacer { flex: 1; }

/* components */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.section { padding: 18px 20px; }
.btn { border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: 14px; line-height: 1.2; transition: background .12s, border-color .12s, color .12s, filter .12s; }
.btn:hover { background: var(--muted-bg); }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.btn.primary:hover { background: var(--brand-deep); color: var(--brand-ink); }
.btn.danger { background: var(--crit); color: #fff; border-color: transparent; }
/* Destructive but secondary: kept quiet and set apart, so it can never be mistaken for the
   button beside it that finishes the work. */
.btn.quiet-danger { background: transparent; border-color: transparent; color: var(--crit); }
.btn.quiet-danger:hover { background: var(--crit-bg); border-color: var(--crit-line); }
.toolbar > .spacer { flex: 1; }
.drawer-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 2px 40px 4px 0; }
.btn.danger:hover { background: var(--crit-deep, var(--crit)); filter: brightness(0.9); }
.btn.sm { padding: 6px 12px; font-size: 13px; border-radius: 9px; }
.btn:disabled { opacity: .5; cursor: default; }
/* Pressed: a click that lands looks like it landed. */
.btn:not(:disabled):active, .icon-btn:active, .iconbtn:active, .seg button:active, .loc-toggle button:active, .lc-chip:active, .tabs button:active {
  transform: translateY(1px) scale(.98); filter: brightness(.96); transition-duration: .05s; }
/* Working: the label gives way to a small spinner until GoHighLevel answers. */
.btn.is-busy, .icon-btn.is-busy, .iconbtn.is-busy { position: relative; color: transparent !important; pointer-events: auto; }
.btn.is-busy > *, .icon-btn.is-busy > *, .iconbtn.is-busy > * { visibility: hidden; }
.btn.is-busy::after, .icon-btn.is-busy::after, .iconbtn.is-busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--muted) var(--muted) var(--muted) transparent; animation: spin .7s linear infinite; }
/* The refresh button already spins itself while it works. */
#syncNowBtn.is-busy { color: var(--ink-2) !important; } #syncNowBtn.is-busy > * { visibility: visible; } #syncNowBtn.is-busy::after { display: none; }
.btn.primary.is-busy::after, .btn.danger.is-busy::after { border-color: var(--brand-ink) var(--brand-ink) var(--brand-ink) transparent; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--muted-bg); color: var(--ink-2); }
.tag.critical { background: var(--crit-bg); color: var(--crit); }
.tag.warning { background: var(--warn-bg); color: var(--warn); }
.tag.info { background: var(--info-bg); color: var(--ink-2); }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.brand { background: var(--brand-soft); color: var(--brand-deep); }
.empty { color: var(--muted); padding: 28px; text-align: center; }
/* Skeletons: the shape of what is coming, instead of a blank page with one word on it. Drawn in
   CSS from gradient bars, so any "Loading…" placeholder gets one by its class alone; where it
   sits decides the shape — a page, a drawer, or the body of a table. */
.empty.loading { --sk: var(--muted-bg); --sk-hi: color-mix(in srgb, var(--muted-bg) 40%, var(--panel)); position: relative; padding: 0; min-height: 260px; text-align: left; overflow: hidden;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(90deg, transparent, var(--sk-hi), transparent),
    linear-gradient(var(--sk) 0 0), linear-gradient(var(--sk) 0 0),
    linear-gradient(var(--panel) 0 0), linear-gradient(var(--panel) 0 0), linear-gradient(var(--panel) 0 0);
  background-size: 40% 100%, 220px 28px, 320px 14px, calc(33.3% - 14px) 150px, calc(33.3% - 14px) 150px, calc(33.3% - 14px) 150px;
  background-position: -40% 0, 0 18px, 0 58px, 0 100px, 50% 100px, 100% 100px;
  animation: sk-shimmer 1.3s ease-in-out infinite; border-radius: var(--radius); }
.drawer .empty.loading, .table-wrap .empty.loading, #taskBody .empty.loading, .panel .empty.loading {
  min-height: 200px; margin: 8px 0;
  background-image: linear-gradient(90deg, transparent, var(--sk-hi), transparent),
    linear-gradient(var(--sk) 0 0), linear-gradient(var(--sk) 0 0), linear-gradient(var(--sk) 0 0), linear-gradient(var(--sk) 0 0), linear-gradient(var(--sk) 0 0);
  background-size: 40% 100%, 55% 22px, 85% 12px, 70% 12px, 90% 12px, 60% 12px;
  background-position: -40% 0, 16px 16px, 16px 60px, 16px 88px, 16px 116px, 16px 144px; animation-name: sk-shimmer-lines; }
@keyframes sk-shimmer-lines { from { background-position-x: -40%, 16px, 16px, 16px, 16px, 16px; } to { background-position-x: 140%, 16px, 16px, 16px, 16px, 16px; } }
@keyframes sk-shimmer { from { background-position-x: -40%, 0, 0, 0, 50%, 100%; } to { background-position-x: 140%, 0, 0, 0, 50%, 100%; } }
@media (prefers-reduced-motion: reduce) { .empty.loading { animation: none; } }
input, select, textarea { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; font-size: var(--fs-body); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-line); border-color: var(--brand); }
textarea { width: 100%; min-height: 140px; }
label { display: block; font-size: var(--fs-small); color: var(--muted); margin: 12px 0 5px; font-weight: 500; }
.field-ro { padding: 9px 12px; background: var(--muted-bg); border-radius: var(--radius-sm); color: var(--ink-2); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
.form-grid .full { grid-column: 1 / -1; }
.people-pick { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; margin-top: 4px; }
.people-pick label.inline { margin: 0; font-weight: normal; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* A row of controls at the top of a page is one height, whatever each control is — a select,
   a search box, a button, a segmented switch. Forms keep their roomier inputs. */
.page-head > select, .toolbar > select, .toolbar > input:not([type=checkbox]):not([type=radio]),
.filters > select, .filters > input { height: var(--ctl); }
/* Buttons get a minimum, not a fixed height: a long label that wraps in a narrow drawer must grow
   the button rather than spill out of it. */
.page-head > .btn, .page-head .seg + .btn, .toolbar > .btn, .filters > .btn { min-height: var(--ctl); }
.page-head > select, .toolbar > select, .toolbar > input:not([type=checkbox]):not([type=radio]),
.filters > select, .filters > input { padding-top: 0; padding-bottom: 0; font-size: 14px; }
.page-head > .btn, .toolbar > .btn, .filters > .btn { display: inline-flex; align-items: center; }

/* triage */
/* Five sections, and a fifth wrapping onto a row of its own reads worse than five even
   columns. 300px fits all five across a normal wide screen; below that they wrap as
   before. auto-fit collapses the tracks beyond the fifth, so a very wide screen just
   stretches the five rather than opening empty ones. */
/* Other screens borrow the grid (Diagnostics): a wide table scrolls inside its own panel rather
   than spilling across the panel beside it. */
.triage:not(.triage-cols) > .panel { min-width: 0; overflow-x: auto; }
.triage { display: grid; gap: 22px 20px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* Triage: the four sections always side by side, in their order of work, empty or not — the
   columns are where things are, and a section that moves when it empties is one you have to
   look for. All side by side, narrowing to fit, down to a tablet; two across there, one on a phone. */
.triage.triage-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; }
@media (max-width: 900px) { .triage.triage-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .triage.triage-cols { grid-template-columns: minmax(0, 1fr); } }
.section.critical h2 { color: var(--accent); }
[data-brand="sreg"] .section.critical h2 { color: var(--brand); }
/* Triage's columns are headings over a stack of cards, not boxes of their own. A box around a
   box around each card was three borders deep before any words; the heading is now a small
   label, and the cards carry the surface. */
.triage-cols > .section { background: transparent; border: 0; box-shadow: none; padding: 0; }
.triage-cols > .section > h2 { font: 600 12px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 4px 2px 12px; gap: 8px; }
.triage-cols > .section > h2 .count { background: transparent; padding: 0; color: inherit; font-size: 12px; }
.triage-cols > .section.critical > h2 { color: var(--urgency); }
.triage-cols > .section.critical > h2::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--urgency); box-shadow: 0 0 0 4px color-mix(in srgb, var(--urgency) 16%, transparent); }
/* A column with nothing in it says so in a quiet dashed box, not a card-sized panel. */
.triage-cols > .section:not(:has(.item)) > :not(h2) { padding: 14px 16px; border: 1px dashed var(--line); border-radius: var(--radius-sm); text-align: left; font-size: 13px; color: var(--muted); }
.triage-cols > .section:not(:has(.item)) > h2 { opacity: .75; }
/* One card style everywhere: the column a card sits in is said by its heading, not by giving
   the same object two appearances. 16px on every side, one border, one shadow. */
.item { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
        box-shadow: 0 1px 2px rgba(31,35,40,.04); padding: 16px; margin: 0 0 10px; overflow: hidden;
        transition: box-shadow .16s, transform .16s, border-color .16s; }
/* A card on its way out: fades, drops back a touch, and folds its space shut (see leaveCard). */
.item.leaving { overflow: hidden; opacity: 0; transform: scale(.97); margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0;
  transition: opacity .18s ease-out, transform .2s ease-out, height .28s cubic-bezier(.4, 0, .2, 1) .06s, margin .28s .06s, padding .28s .06s; pointer-events: none; }
.item:hover { box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--line) 60%, var(--muted)); }
.item:last-of-type { margin-bottom: 0; }
/* The left edge encodes URGENCY, never category. Red is the alert colour on DA, where the brand
   is blue; on SREG the brand IS red, so red on an edge reads as branding rather than as a
   warning, and amber does the job instead. */
.item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.item.urgent::before { background: var(--urgency); }
/* The card's own type scale, one step below the page: the title carries --fs-small at 600, and
   everything under it is 12px. A Triage column is read by scanning, and a 15px bold title on
   every card made each one look like a heading of its own. */
.item .title { font-weight: 600; font-size: 14px; line-height: 1.4; display: flex; align-items: flex-start; gap: 8px; }
/* How far through its stage this step is — the bar carries it, the number is on the hover. */
/* Same weight as a task's preview below it: every card in a column reads the same. Two lines at
   most, so a column of cards stays scannable; what matters on an approval — which message, how
   long it has waited — is in the first line, and the whole text is on the hover and in the drawer. */
/* Everything a card says can be read: long text scrolls inside the card rather than being cut off. */
.item .detail { color: var(--ink-2); font-size: 12px; margin: 3px 0 8px; max-height: 7.5em; overflow-y: auto; overscroll-behavior: contain; }
/* One caption above the title — kind, stage, when — in place of two stacked pills. */
.item .meta { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; min-width: 0; }
.item .meta .caption { font-size: 11px; color: var(--muted); letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A deal as seen from the client's own record: one block per opportunity, separated by a rule
   rather than a box, so several of them read as a list and not as a stack of cards. */
.opp-card + .opp-card { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.opp-card h2 { margin: 0; font-size: 16px; }
.opp-card .toolbar { margin-top: 10px; align-items: center; gap: 8px; }
/* A dialog that refuses to finish says why, where the person is already looking. */
.dialog-fields .err { color: var(--crit); margin: 6px 0 0; }
.item .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.item .actions:not(:empty) { margin-top: 12px; }
/* A card's own buttons are a way IN, not an alarm. Filled with --brand they were the loudest
   thing on the card — and on SREG, where the brand is red, "Fill out Seller Lead Sheet" read
   as a destructive action. The card's edge bar already says how urgent it is; the button only
   has to be findable, and being the only button on the card is enough. */
.item .btn.primary { background: var(--info-bg); color: var(--ink); border-color: var(--line); }
.item .btn.primary:hover { background: var(--muted-bg); color: var(--ink); }
/* One exception, asked for by name: the lead sheet is the whole of the New Lead stage — nothing
   else on the client can start until it is filled in — so its button is the one on a card that
   is allowed to shout. Red, not the brand, so it reads the same on both businesses. */
.item .btn.primary.urgent { background: var(--crit); color: #fff; border-color: transparent; }
.item .btn.primary.urgent:hover { background: var(--crit); filter: brightness(0.92); color: #fff; }
.item .handled { font-size: 11px; color: var(--muted); margin-top: 6px; }
/* An overdue card is marked by the ! alone — the word "Overdue task" beside it was the widest
   thing in the row and said what the red already says. */
/* Who it is for the attention of: one informational accent, not the green that used to read as
   "done" on a card whose whole point is that it is not. */
.item .tag.assignee { background: var(--info-bg); color: var(--ink-2); font-size: 11px; font-weight: 600; padding: 2px 8px; }
.item .tag.assignee.muted { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-weight: 500; }
/* The task's own text. It carried margin-top:-4px from when it always followed the detail line
   and had to be pulled up against it; on a card where it is the only body text that -4px is 7px
   less space under the title than a card whose body is a .detail line, which is exactly how two
   cards side by side stopped matching. Same rhythm as .detail now. */
.item .desc { color: var(--ink-2); font-size: 12px; margin: 3px 0 8px; max-height: 7.5em; overflow-y: auto; overscroll-behavior: contain; }
/* …and when a card has both, they are two paragraphs of the same body, not two blocks. */
.item .detail + .desc { margin-top: -4px; }
/* The footer is two zones — for whom on the left, for whose attention on the right — with a
   hairline above it so the card body stops where the attribution starts. */
.item .who { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; font-size: 12px;
             margin: 10px 0 0; padding: 0; }
.item .who .whom { display: flex; gap: 2px 14px; align-items: center; flex-wrap: wrap; min-width: 0; }
.item .who .linklike { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; font: inherit; }
.item .who .linklike:hover { color: var(--brand-deep); text-decoration: underline; }
/* Line icons at one size and one colour: an emoji cannot take a token, so these are drawn.
   SIZED WHEREVER THEY APPEAR, not per container. This was scoped to .who, so the same clock
   drawn on the "Waiting on" line had no width, no height and no fill:none — it filled the card
   and painted its circle solid black. An icon that is only styled in the one place it was first
   used is an icon waiting to do that again somewhere else. */
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.assoc-group h3 { font-size: 14px; }
/* The Desk's own icon set (js/icons.js). 1em square by default so an icon takes the size of the
   text it sits in — a button, a label, a nav row — and currentColor so it takes the colour too. */
.i { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.18em; fill: none; stroke: currentColor;
     stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.btn .i, .chip .i { margin-right: 6px; }
.icon-btn .i, .iconbtn .i, .menu-btn .i { width: 18px; height: 18px; vertical-align: middle; margin: 0; }
.i.lock { width: .95em; height: .95em; color: var(--muted); }
.checkmark.ok { color: var(--ok); } .checkmark.bad { color: var(--crit); }
.msg .call .i { margin-right: 4px; }

/* kanban */
.board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 14px; align-items: stretch; flex: 1; min-height: calc(100vh - 330px); }
.column { flex: 1 1 0; min-width: 210px; display: flex; flex-direction: column; background: var(--muted-bg); border-radius: var(--radius); padding: 10px; min-height: 140px; }
.column.over { outline: 2px dashed var(--brand-line); outline-offset: -2px; }
.column h3 { font: 600 13px var(--font-ui); color: var(--muted); margin: 4px 6px 10px; display: flex; justify-content: space-between; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: grab; box-shadow: 0 1px 2px rgba(31,35,40,.05); transition: box-shadow .16s, border-color .16s; }
.card:hover { box-shadow: var(--shadow-lift); }
.card.dragging { opacity: .35; transform: scale(.97); box-shadow: none; }
/* While a card is being dragged every column says it can be dropped on, and the one under the
   pointer says so loudly. */
.board.is-dragging .column { transition: background .15s, box-shadow .15s; }
.board.is-dragging .column.over { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand-line); outline: none; }
.card.landing { animation: card-land .32s cubic-bezier(.2, 1.2, .4, 1); }
.card.is-moving { position: relative; }
.card.is-moving::after { content: ''; position: absolute; bottom: 12px; right: 12px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--muted); border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes card-land { from { transform: scale(.94); opacity: .4; } 60% { transform: scale(1.015); opacity: 1; } to { transform: none; } }
.card.rejected { animation: shake .3s; border-color: var(--crit); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes drawer-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Things arrive rather than appear: a drawer slides in from the edge it lives on, a dialog and a
   menu settle into place. Short enough never to be waited on, and off for anyone who has asked
   their system for less motion. */
.drawer { animation: drawer-in .22s cubic-bezier(.2, .8, .2, 1); }
.drawer.ghost-out { animation: drawer-out .2s cubic-bezier(.4, 0, 1, 1) forwards; }
.scrim.ghost-out { animation: fade-out .2s ease-in forwards; }
@keyframes drawer-out { to { opacity: 0; transform: translateX(36px); } }
@keyframes fade-out { to { opacity: 0; } }
.scrim, .dialog-scrim { animation: fade-in .18s ease-out; }
.dialog { animation: pop-in .18s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .drawer, .scrim, .dialog-scrim, .dialog, .lc-pop, .notif-list, .toast { animation: none; }
  .item, .card, .item:hover, .card:hover { transition: none; transform: none; }
}
@keyframes shake { 25% { transform: translateX(-4px);} 75% { transform: translateX(4px);} }
.card .name { font-weight: 600; }
.card .row { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; color: var(--muted); }
.card .badges { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.card .links { margin-top: 8px; display: flex; gap: 10px; font-size: 13px; }

/* drawer */
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(600px, 100vw); background: var(--panel); border-left: 1px solid var(--line); box-shadow: -8px 0 30px rgba(0,0,0,.18); z-index: 40; overflow: auto; padding: 22px 24px; }
/* The grab strip on the drawer's left edge. Sits just inside it, wider than it looks so it can
   be caught without aiming, and invisible until the pointer finds it. */
.drawer-resizer { position: absolute; top: 0; left: 0; width: 8px; height: 100%; cursor: col-resize;
  z-index: 3; background: transparent; touch-action: none; }
.drawer-resizer:hover, .drawer.resizing .drawer-resizer { background: var(--brand-line); }
.drawer.resizing { user-select: none; }
@media (max-width: 900px) { .drawer-resizer { display: none; } }
.drawer .close { position: absolute; top: 18px; right: 18px; border: 1px solid var(--line); background: var(--panel); width: 34px; height: 34px; border-radius: 10px; font-size: 18px; line-height: 1; color: var(--muted); display: grid; place-items: center; padding: 0; z-index: 2; transition: background .12s, color .12s; }
.drawer .close:hover { background: var(--muted-bg); color: var(--heading); }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 35; }
.step { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; display: grid; grid-template-columns: 30px 1fr; gap: 10px; background: var(--panel-2); }
.step .icon { display: grid; place-items: start center; padding-top: 1px; color: var(--muted); }
.step .icon .i { width: 20px; height: 20px; }
.step.done .icon { color: var(--ok); }
/* Just finished (completeStepCard): the tick draws itself, then the step folds away. */
.step.completing { border-color: var(--ok-line); background: color-mix(in srgb, var(--ok-bg) 60%, var(--panel-2)); transition: background .2s, border-color .2s; }
.step.completing .icon { color: var(--ok); }
.step.completing .icon .i { animation: tick-pop .35s cubic-bezier(.2, 1.4, .4, 1); }
.step.completing .icon .i path { stroke-dasharray: 16; stroke-dashoffset: 16; animation: tick-draw .35s .12s ease-out forwards; }
.step.folding { height: 0 !important; opacity: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; overflow: hidden;
  transition: height .3s cubic-bezier(.4, 0, .2, 1), opacity .2s, margin .3s, padding .3s; }
@keyframes tick-pop { from { transform: scale(.5); } to { transform: none; } }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
.step.awaiting_approval .icon { color: var(--brand); }
.step.approved_waiting .icon, .step.pending .icon { color: var(--ink-2); }
.step.skipped_no_contact .icon, .step.stopped .icon { color: var(--crit); }
.step.waiting .icon, .step.parked .icon { color: var(--warn); }
.step .t { font-weight: 600; }
/* A step title that opens something reads as a link, but only on hover/focus: underlining every
   finished step would turn a long plan into a wall of blue. */
.step .t a.steplink { color: inherit; text-decoration: none; }
.step .t a.steplink:hover, .step .t a.steplink:focus-visible { color: var(--brand-deep); text-decoration: underline; }
/* Finished work, folded. The summary is a quiet line, not a heading. */
.done-fold { margin: 4px 0 8px; }
.done-fold > summary { cursor: pointer; padding: 4px 0; }
.done-fold[open] > summary { margin-bottom: 2px; }
.step .m { color: var(--muted); font-size: 13px; margin-top: 2px; }
.step .act { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.step.awaiting_approval { border-color: var(--warn-line); background: var(--warn-bg); }
.step.skipped_no_contact { border-color: var(--crit-line); }
.step.superseded { opacity: .55; }
.version { font-size: 13px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--info-bg); color: var(--ink-2); margin: 10px 0; }
.version.stale { background: var(--warn-bg); color: var(--warn); }
.msg { border-radius: 14px; padding: 10px 14px; margin: 8px 0; max-width: 86%; white-space: pre-wrap; }
.msg.inbound { background: var(--muted-bg); } .msg.outbound { background: var(--brand-soft); margin-left: auto; }
.msg .who { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.msg.scheduled { border: 1px dashed var(--warn-line); background: var(--warn-bg); }
.msg.synthetic { border: 1px dashed var(--line); background: var(--muted-bg); opacity: .9; }
.msg .act { margin-top: 8px; }

/* tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
tr.link:hover td { background: var(--panel-2); cursor: pointer; }

/* list controls: sort / filter / group-by toolbar, and collapsible group rows */
/* One row: Filters (folded), Group by, and a chip for each filter that is on. Every control is
   the same height and every dropdown the same width, so the row reads as one row — the panel's
   dropdowns included, because they are the same controls, only put away. */
.list-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 8px; padding: 0; margin: 0 0 18px; border: 0; }
.list-controls .lc-field { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); font-weight: 500; }
.list-controls select,
.list-controls input[type="search"] { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 10px; height: var(--ctl);
  background: var(--panel); color: var(--ink); font-size: 13.5px; width: 180px; }
.list-controls .btn.sm { height: var(--ctl); }
.list-controls .lc-reset { padding: 0 14px; }
.lc-filters { position: relative; }
.lc-toggle { display: inline-flex; align-items: center; }
.lc-toggle.on { border-color: var(--brand-line); color: var(--brand-deep); background: var(--brand-soft); }
.lc-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 7px; border-radius: 999px;
  background: var(--brand); color: var(--brand-ink); font-size: 11px; font-weight: 700; }
.lc-pop { position: fixed; z-index: 40; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 14px; display: grid; gap: 10px; min-width: 300px;
  animation: pop-in .14s ease-out; }
.lc-pop .lc-field { display: grid; grid-template-columns: 90px 180px; align-items: center; }
.lc-pop-foot { display: flex; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--line); }
.lc-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px 0 12px; border-radius: 999px; border: 1px solid var(--brand-line);
  background: var(--brand-soft); color: var(--brand-deep); font-size: 12.5px; cursor: pointer; }
.lc-chip b { font-weight: 600; }
.lc-chip span { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 14px; line-height: 1; opacity: .7; }
.lc-chip:hover span { opacity: 1; background: var(--brand-line); }
/* Sitting on top of a table, the bar is part of the panel: inset, with a rule under it. */
.panel .list-controls { padding: 12px 16px; margin: 0; border-bottom: 1px solid var(--line); }
@media (max-width: 760px) {
  .lc-pop { left: 16px !important; right: 16px; top: auto; bottom: 16px; min-width: 0; box-shadow: 0 -8px 40px rgba(0,0,0,.18); }
  .lc-pop .lc-field { grid-template-columns: 90px 1fr; }
  .lc-pop .lc-field select { width: 100%; }
}
tr.group-head td { background: var(--muted-bg); font-weight: 600; cursor: pointer; user-select: none; }
tr.group-head:hover td { background: var(--panel-2); }
tr.group-head .disclosure { display: inline-block; width: 12px; }
tr.group-head .count { font-weight: 400; color: var(--muted); }
/* The divider between who did a thing and what the thing was. A gap alone was not enough to
   read as a break between two different facts. */
.item .title .sep { color: var(--line); font-weight: 400; }
/* The outstanding work folds like the finished work does. Same affordance, so neither looks
   like the special one. */
/* Contracts: each section folds, and the two are not stuck together. Outstanding work starts
   open because it is the reason somebody came; signed work starts shut because it is history. */
/* The lead sheet beside the script it is filled in from. The script scrolls on its own, so a
   long one cannot push the form off the bottom of the drawer. */
.sheet-split { display: grid; grid-template-columns: minmax(280px, 2fr) 3fr; gap: 16px; align-items: start; }
.sheet-script { max-height: 78vh; overflow: auto; padding-right: 12px; border-right: 1px solid var(--line); }
.sheet-split.no-script { grid-template-columns: 1fr; }
.paper-read { margin-bottom: 12px; }
.review-form { max-height: 78vh; overflow: auto; padding-right: 6px; }
.review-group { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; margin: 0 0 12px; }
.review-group legend { font-weight: 700; padding: 0 6px; }
.review-row { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 10px; align-items: center; margin: 6px 0; }
.review-row > label { font-size: 13px; color: var(--muted); }
.review-form textarea { min-height: 56px; }
.review-boxes { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.review-boxes label { display: inline-flex; gap: 5px; align-items: center; }
@media (max-width: 700px) { .review-row { grid-template-columns: 1fr; gap: 2px; } }
.paper-unclear { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--warn-line); border-radius: 8px; background: var(--warn-bg); font-size: 13px; }
.paper-unclear ul { margin: 4px 0 0; padding-left: 18px; }
.paper-lines { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 4px 10px; margin: 0; font-size: 13px; }
.paper-lines dt { color: var(--muted); }
.paper-lines dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.paper-script summary { cursor: pointer; font-weight: 600; margin: 6px 0; }
.sheet-split.no-script .sheet-script { display: none; }
.sheet-note-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.sheet-script .script-body { font-size: 13px; line-height: 1.5; }
.sheet-script .script-body p { margin: 0 0 8px; }
@media (max-width: 1100px) { .sheet-split { grid-template-columns: 1fr; } .sheet-script { max-height: 30vh; border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 10px; } }
.ct-fold { margin-bottom: 16px; }
.ct-fold > summary { cursor: pointer; list-style: none; }
.ct-fold > summary::-webkit-details-marker { display: none; }
.ct-fold > summary h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.ct-fold > summary h2::before { content: '▸'; display: inline-block; width: 14px; }
.ct-fold[open] > summary h2::before { content: '▾'; }
.live-fold > summary, .done-fold > summary { cursor: pointer; list-style: none; padding: 4px 0; }
.live-fold > summary::-webkit-details-marker, .done-fold > summary::-webkit-details-marker { display: none; }
.live-fold > summary::before, .done-fold > summary::before { content: '▸'; display: inline-block; width: 14px; }
.live-fold[open] > summary::before, .done-fold[open] > summary::before { content: '▾'; }
.group-section > summary { cursor: pointer; font-weight: 600; font-size: 15px; padding: 4px 0; list-style: none; }
.group-section > summary::-webkit-details-marker { display: none; }
.group-section > summary::before { content: '▸'; display: inline-block; width: 14px; }
.group-section[open] > summary::before { content: '▾'; }
.group-section > summary .count { font-weight: 400; color: var(--muted); }
.group-section + .group-section { margin-top: 10px; }
/* The stages a property's deals are sitting in, on the group's own header. It is the thing you
   want before deciding whether to open the group, so it sits beside the count and before the
   "needs attention now" tag rather than after it. */
.group-section > summary .tag { margin-left: 8px; font-weight: 500; vertical-align: 1px; }
.kv { display: grid; grid-template-columns: minmax(180px, max-content) 1fr; gap: 8px 20px; font-size: 14px; align-items: start; }
.kv dt { color: var(--muted); white-space: nowrap; padding-top: 1px; } .kv dd { margin: 0; }
pre.raw { background: var(--muted-bg); padding: 10px; border-radius: var(--radius-sm); font-size: 12px; overflow: auto; max-height: 300px; }

/* What a Triage card still waits for. Muted, because it is context rather than the work — but
   it sits above the who/whom line so it is read before somebody opens the card to find out. */
.card .waiting, .item .waiting { color: var(--muted); margin: 4px 0 2px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.card .waiting b, .item .waiting b { color: var(--ink); font-weight: 600; }
.card .waiting .ic, .item .waiting .ic { flex: 0 0 auto; }

/* Linked records on a custom-object record: grouped by what kind of thing they are, the way
   GoHighLevel groups them, so Contacts and Opportunities read as two lists rather than one. */
.relgroup { font: 600 14px var(--font-ui); color: var(--heading); margin: 16px 0 8px; }
.relgroup:first-child { margin-top: 4px; }
.relgroup .count { color: var(--muted); font-weight: 500; }
.dealline { margin: 2px 0 6px; }
.dealline .tag { margin-left: 4px; }

/* Something is happening. A sliver across the top, after 250ms — long enough that a write
   which lands quickly never flashes it, short enough that a slow one is never silent. */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; overflow: hidden; background: transparent; pointer-events: none; }
.progress::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 40%; border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, transparent, var(--accent, var(--ink)), transparent); animation: cd-progress 1.1s ease-in-out infinite; }
@keyframes cd-progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
/* The control that was clicked, while its write is in the air. */
button.working, .btn.working { opacity: .6; cursor: progress; }
body.working { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .progress::after { animation: none; width: 100%; opacity: .5; } }

/* Messages stack at the bottom centre, newest last, and slide up into place. */
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--bg); padding: 10px 12px 10px 14px; border-radius: 12px;
  max-width: min(560px, calc(100vw - 32px)); box-shadow: var(--shadow-pop); font-size: 14px; line-height: 1.35; animation: toast-in .22s cubic-bezier(.2, .8, .2, 1); }
.toast.leaving { animation: toast-out .2s ease-in forwards; }
.toast .toast-i { width: 18px; height: 18px; flex: none; color: var(--ok-bg); }
.toast .toast-msg { flex: 1; min-width: 0; padding-right: 4px; }
.toast .toast-act { border: 0; background: color-mix(in srgb, var(--bg) 16%, transparent); color: inherit; font: 600 13px var(--font-ui); padding: 6px 12px; border-radius: 8px; cursor: pointer; flex: none; }
.toast .toast-act:hover { background: color-mix(in srgb, var(--bg) 26%, transparent); }
.toast.error { background: var(--crit); color: #fff; }
.toast.error .toast-i { color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
.login { max-width: 400px; margin: 12vh auto; padding: 32px; }
.login h1 { margin-bottom: 6px; }
.login input { width: 100%; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--muted-bg); }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 45; width: 250px; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: none; }
  .menu-btn { display: inline-grid; }
  .topbar { padding: 12px 14px; flex-wrap: wrap; }
  .search { order: 5; flex-basis: 100%; max-width: none; }
  .main { padding: 4px 14px 30px; }
  .column { flex-basis: 84vw; }
  .kv { grid-template-columns: 1fr; }
  .updated { display: none; }
}

/* pipeline: KPI tiles, filters, phase columns, table view */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filters input, .filters select { padding: 0 12px; }
.seg { display: inline-flex; background: var(--muted-bg); border: 1px solid var(--line); border-radius: 10px; padding: 2px; margin-left: auto; }
.seg button { border: 0; background: transparent; height: 30px; padding: 0 14px; border-radius: 8px; font-weight: 600; font-size: 13.5px; color: var(--muted); transition: background .12s, color .12s; }
/* A segmented switch built on real radio buttons (the reply box's Text / Email): the radio stays
   in the form and takes the click, invisibly, and the label draws the segment. */
.seg.seg-radio { margin-left: 0; }
.seg-radio label { position: relative; margin: 0; display: inline-flex; }
.seg-radio input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg-radio span { display: inline-flex; align-items: center; height: 30px; padding: 0 16px; border-radius: 8px; font-weight: 600; font-size: 13.5px; color: var(--muted); transition: background .12s, color .12s; }
.seg-radio input:checked + span { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(31,35,40,.08), 0 0 0 1px var(--line); }
.seg-radio input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
.send-row select[name=when] { width: auto; min-width: 170px; }
.send-row input[name=sendAt] { width: auto; }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(31,35,40,.08), 0 0 0 1px var(--line); }
.column .phase { font: 600 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 4px 6px 0; }
.column h3.stage { font-family: var(--font-display); font-size: 17px; color: var(--heading); margin: 0 6px 10px; display: flex; justify-content: space-between; align-items: baseline; }
.column h3.stage .count { font: 600 12px var(--font-ui); background: var(--panel); border-radius: 999px; padding: 1px 8px; color: var(--muted); }
.column.empty-col { min-height: 220px; }
.column .cards { flex: 1; }
.column .none { color: var(--muted); font-size: 13px; text-align: center; padding: 40px 10px; }
.card .top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.card .name b { font-family: var(--font-display); font-size: 15px; }
.card .client { color: var(--muted); font-weight: 400; font-size: 13px; margin-top: 2px; }
.card { position: relative; }
.card .top { padding-right: 30px; }
.card .owner-mark { --oc: #64748B; position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--oc); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .2px; cursor: default; }
.card .owner-mark.unowned { background: var(--muted-bg); color: var(--muted); }
.card .client a, .card .name .person a { color: inherit; text-decoration: none; }
.card .client a:hover, .card .name .person a:hover { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 2px; }
.card .avatar { width: 26px; height: 26px; font-size: 11px; background: var(--heading); color: var(--bg); }
.card .line { color: var(--ink-2); font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.card .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; margin-top: 8px; background: var(--muted-bg); color: var(--ink-2); }
.card .pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.card .pill.ok { background: var(--ok-bg); color: var(--ok); } .card .pill.warning { background: var(--warn-bg); color: var(--warn); } .card .pill.critical { background: var(--crit-bg); color: var(--crit); }
.card .next { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.card .next .t { color: var(--heading); font-weight: 500; }
.card .next .d { color: var(--muted); }
.card .next .w { color: var(--warn); font-weight: 600; }
.card .next .w span { color: var(--ink-2); font-weight: 400; }
.reply { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; }
.task { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.task input[type=checkbox] { margin-top: 4px; width: 18px; height: 18px; }
.task .t { font-weight: 500; } .task.done .t { text-decoration: line-through; color: var(--muted); }
.task .d { font-size: 12px; color: var(--muted); }
.task .x { margin-left: auto; display: flex; gap: 4px; }
.tiny-link { font-size: 12px; color: var(--muted); }
.name-link { cursor: pointer; }
.name-link:hover { text-decoration: underline; color: var(--brand-deep); }
.card .pillrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.card .pillrow .pill { margin-top: 0; }

/* clients grid + notifications */
.health { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.health.ok { background: var(--ok); } .health.warning { background: var(--warn); } .health.critical { background: var(--crit); }
.flags { display: flex; gap: 4px; flex-wrap: wrap; }
.bell { position: relative; }
.bell .n { position: absolute; top: -4px; right: -4px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center; }
[data-brand="sreg"] .bell .n { background: var(--brand); }
.notif-list { position: absolute; right: 0; top: 44px; width: min(420px, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); z-index: 30; max-height: 70vh; overflow: auto; animation: pop-in .14s ease-out; }
.notif { padding: 12px 44px 12px 30px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s; }
.notif:hover { background: var(--panel-2); }
/* Unread is a dot beside the line, not a coloured block: a panel of four unread reminders was
   solid blue from top to bottom and nothing in it stood out. */
.notif.unread::before { content: ''; position: absolute; left: 13px; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.notif:not(.unread):not(.notif-foot) .s { font-weight: 500; color: var(--ink-2); }
.notif .t .tag { font-size: 10.5px; padding: 1px 7px; margin-right: 7px; vertical-align: 1px; }
.notif .s { font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--heading); } .notif .b { font-size: 13px; color: var(--muted); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .notif .t { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.seg.mine { margin-left: 0; }
.summary-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.summary-strip .tag { font-size: 13px; padding: 6px 12px; }

/* sign-in: its own full-page light layout */
.app.login-mode { grid-template-columns: 1fr; min-height: 100vh; background: linear-gradient(160deg, #F7F6F3 0%, #EEF3FB 55%, #FBEDEE 100%); }
.app.login-mode .content { min-height: 100vh; justify-content: center; }
.login-wrap { display: grid; grid-template-columns: 1.1fr 1fr; max-width: 980px; width: 100%; margin: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 80px rgba(31,35,40,.12); overflow: hidden; }
.login-side { padding: 48px 44px; background: #1F2328; color: #fff; display: flex; flex-direction: column; gap: 22px; }
.login-side .marks { display: flex; gap: 12px; }
.login-side .mark { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 700 15px var(--font-ui); color: #fff; }
.login-side .mark.da { background: #468FFF; } .login-side .mark.sreg { background: #EB1C24; }
.login-side h1 { color: #fff; font-size: 34px; line-height: 1.1; }
.login-side p { color: #C5C9D0; font-size: 16px; }
.login-side ul { margin: 0; padding: 0; list-style: none; color: #C5C9D0; font-size: 15px; display: grid; gap: 10px; }
.login-side li::before { content: '✓  '; color: #6EA6FF; font-weight: 700; }
.login-form { padding: 48px 44px; }
.login-form h2 { font-size: 24px; margin-bottom: 6px; }
.login-form input { width: 100%; padding: 12px 14px; font-size: 16px; }
.login-form .btn { width: 100%; padding: 12px; font-size: 15px; }
.login-form .btn.primary { background: #1F2328; color: #fff; }
.login-form .btn.primary:hover { background: #000; }
@media (max-width: 820px) { .login-wrap { grid-template-columns: 1fr; margin: 12px; } .login-side { padding: 32px 26px; } .login-form { padding: 28px 26px; } }

/* logo, icon buttons, tabs, wide drawer, tag picker */
.brand img.logo { max-width: 180px; max-height: 96px; display: block; margin: 0 auto; }
.brand .caption { font-size: 13px; font-weight: 700; color: var(--heading); margin-top: 6px; }
.brand.with-logo { flex-direction: column; align-items: center; text-align: center; gap: 0; }
.iconbtn { border: 1px solid var(--line); background: var(--panel); width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 15px; color: var(--muted); cursor: pointer; }
.iconbtn:hover { background: var(--muted-bg); color: var(--ink); }
.iconbtn.danger { background: var(--crit-bg); color: var(--crit); border-color: var(--crit-line); }
.iconbtn.danger:hover { background: var(--crit); color: #fff; border-color: var(--crit); }
.user .iconbtn { margin-left: auto; }
/* A tab row wider than the screen scrolls sideways, and says so: the far edge fades out rather
   than cutting a word in half ("Automation Revie"), which read as a rendering fault. */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 14px 0 18px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs.overflowing { --fl: 0px; --fr: 48px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); }
.tabs.overflowing.scrolled { --fl: 48px; }
.tabs.overflowing.at-end { --fr: 0px; }
.tabs button { border: 0; background: none; padding: 10px 12px; font-weight: 600; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .12s, border-color .12s; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--heading); border-bottom-color: var(--brand); }
.drawer.wide { width: min(1100px, 60vw); min-width: min(760px, 100vw); }
.drawer .back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--brand-deep); font-weight: 600; padding: 0; margin-bottom: 10px; cursor: pointer; }
.drawer-head { display: flex; align-items: flex-start; gap: 10px; }
.drawer-head .grow { flex: 1; min-width: 0; }
.tagpick { position: relative; }
.tagpick .chips { margin-bottom: 6px; }
.tagpick .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; }
.tagpick .chip button { border: 0; background: none; color: inherit; padding: 0; font-size: 14px; line-height: 1; cursor: pointer; }
.tagpick .menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: 5; max-height: 220px; overflow: auto; }
.tagpick .menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 12px; }
.tagpick .menu button:hover { background: var(--muted-bg); }
.pipe-select { padding: 0 14px; border-radius: 10px; font-weight: 600; min-width: 220px; }
details.more > summary { cursor: pointer; font-weight: 600; color: var(--brand-deep); margin: 16px 0 6px; list-style: none; }
details.more > summary::before { content: '▸ '; } details.more[open] > summary::before { content: '▾ '; }
@media (max-width: 900px) { .drawer.wide { width: 100vw; min-width: 0; } }
.drawer-head { padding-right: 48px; }   /* keep header actions clear of the close button */

/* user chip: full name line, bigger visible sign-out */
.user .fullname { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.user .logout-btn { width: 38px; height: 38px; color: var(--ink-2); border-color: var(--line); }
.user .logout-btn:hover { background: var(--crit-bg); color: var(--crit); border-color: var(--crit-line); }

.notif { position: relative; }
.notif .notif-x { position: absolute; top: 8px; right: 8px; opacity: .55; width: 28px; height: 28px; border-color: transparent; background: transparent; }
.notif .notif-x:hover { opacity: 1; }
/* Same corner ×, same behaviour, on a handled Triage card. */
.item .item-x { position: absolute; top: 10px; right: 10px; opacity: .5; border-color: transparent; background: transparent; width: 28px; height: 28px; transition: opacity .12s; }
/* Put away until the card is pointed at, where there is a pointer to point with. A phone has no
   hover, so there it stays visible. */
@media (hover: hover) { .item .item-x { opacity: 0; } .item:hover .item-x, .item .item-x:focus-visible { opacity: .6; } }
.item .item-x:hover { opacity: 1; }
/* What was actually booked, listed on the opportunity's Appointment Details tab. */
.appt-row { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.appt-row:hover { background: var(--muted-bg); }
.appt-row.past { opacity: .62; }
.notif.notif-foot { display: flex; gap: 4px; justify-content: flex-start; align-items: center; padding: 8px 10px; cursor: default; position: sticky; bottom: 0; background: var(--panel); border-bottom: 0; border-top: 1px solid var(--line); }
.notif.notif-foot:hover { background: var(--panel); }
.notif.notif-foot .btn.sm { white-space: nowrap; border-color: transparent; background: transparent; padding: 6px 8px; font-size: 12.5px; color: var(--ink-2); }
.notif.notif-foot .btn.sm:hover { background: var(--muted-bg); color: var(--heading); }
.notif.notif-foot .spacer { flex: 1; }

.dialog-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dialog { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.25); width: min(560px, 100%); padding: 26px 28px; }
.dialog-text p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.dialog-text p:empty { display: none; }
.dialog-input { width: 100%; margin: 14px 0 4px; padding: 11px 12px; font-size: 14px; }
.dialog-fields { margin: 14px 0 4px; text-align: left; }
.dialog-fields label { display: block; margin-top: 10px; font-size: var(--fs-small); color: var(--muted); }
.dialog-fields input, .dialog-fields select { width: 100%; padding: 9px 11px; font-size: 14px; }
.dialog-fields .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dialog-fields label.check { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.dialog-fields label.check input { width: auto; padding: 0; }
.follower-list { display: grid; gap: 6px; }
.add-follower { margin-top: 6px; padding: 2px 0; border: 0; background: none; color: var(--brand-deep); font-size: var(--fs-small); cursor: pointer; }
.add-follower:hover { text-decoration: underline; }
.add-follower[hidden] { display: none; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
/* The title is the way in, but it is read before it is clicked: ink, not link-blue, until the
   pointer is on it. A column of blue titles was the loudest thing on the screen. */
.item .title.link { cursor: pointer; color: var(--heading); }
.item .title.link:hover { color: var(--brand-deep); }
.item .title.link:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
/* The page's own `label` rule carries `margin: 12px 0 5px` for form labels, and this label is
   one — so the checkbox sat 12px below the title it belongs to. Reset the margin, and give the
   box the title's line-height so it centres on the FIRST line however far the title wraps. */
.item .title label.done { display: inline-flex; align-items: center; justify-content: center;
                          height: 1.4em; margin: 0; flex: none; }
.item .title label.done input { width: 17px; height: 17px; margin: 0; cursor: pointer; }
/* Selecting several (22 Oct): the pick box takes the done box's place while picking. */
.item .title label.pick { display: none; align-items: center; justify-content: center; height: 1.4em; margin: 0; flex: none; }
.item .title label.pick input { width: 17px; height: 17px; margin: 0; cursor: pointer; accent-color: var(--brand); }
.picking .item .title label.pick { display: inline-flex; } .picking .item .title label.done { display: none; }
.picking .item:has(.pick-box:checked) { outline: 2px solid var(--brand); outline-offset: -2px; }
.pick-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1150; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow-pop, 0 8px 24px rgba(31,35,40,.18)); }
.pick-bar.inline { position: static; transform: none; margin: 0 0 8px; box-shadow: none; }
.btn.on { background: var(--brand-soft); color: var(--brand-deep); border-color: var(--brand-line, var(--brand)); }

/* Conversations: one timeline across channels, GHL-style */
.conv-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.chips.channels .chip { border: 1px solid var(--line); background: var(--panel); cursor: pointer; font: inherit; font-size: 12px; }
.chips.channels .chip.on { background: var(--brand-soft); color: var(--brand-deep); border-color: var(--brand-line); font-weight: 600; }
.thread { max-height: 55vh; overflow: auto; padding: 4px 2px; }
.day-sep { text-align: center; margin: 14px 0 6px; position: relative; }
.day-sep span { font-size: 11px; color: var(--muted); background: var(--panel); padding: 0 8px; position: relative; }
.day-sep::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.msg-row { display: flex; gap: 8px; align-items: flex-end; }
.msg-row.outbound { justify-content: flex-end; }
.msg-row .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--muted-bg); color: var(--ink-2); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; margin-bottom: 8px; }
.msg-row .msg { max-width: 78%; }
.msg.inbound { border-bottom-left-radius: 4px; } .msg.outbound { border-bottom-right-radius: 4px; }
.msg.email { max-width: 100%; width: 100%; border: 1px solid var(--line); background: var(--panel); white-space: normal; }
.msg-row.outbound .msg.email { border-color: var(--brand-line); }
.msg .subject { display: block; margin-bottom: 4px; }
.msg .email-body { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; contain: content; overflow-x: auto; }
/* contain: nothing inside an email can be drawn outside its own box, whatever its styles say. */
.msg .email-body img { max-width: 100%; height: auto; }
.msg .email-body blockquote { border-left: 3px solid var(--line); margin: 6px 0; padding-left: 8px; color: var(--ink-2); }
.msg .call { font-weight: 600; }
.msg .attachments { margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }
.msg .status { font-size: 11px; color: var(--muted); text-align: right; margin-top: 4px; }
.msg .status.bad { color: var(--crit); font-weight: 600; }
.sys-note { text-align: center; font-size: 12px; color: var(--ink-2); background: var(--muted-bg); border-radius: 999px; padding: 4px 12px; margin: 8px auto; width: fit-content; max-width: 90%; }
.email-thread { border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; overflow: hidden; }
.email-thread-head { background: var(--muted-bg); padding: 8px 12px; font-size: 14px; }
.email-thread .msg-row { padding: 0 8px; }
.email-thread .msg.email { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; margin: 0; }
.email-thread .msg-row:last-child .msg.email { border-bottom: 0; }
#replyThread .linklike { background: none; border: 0; padding: 0; color: var(--brand-deep); cursor: pointer; font: inherit; margin-left: 6px; }
.email-thread-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.msg .reply-btn { float: right; margin: -2px 0 0 8px; }

/* Appointments */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 900px) { .week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.week .day { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; min-height: 140px; }
.week .day.today { border-color: var(--brand-line); box-shadow: inset 0 3px 0 var(--brand); }
.week .day h3 { font-size: 13px; margin: 0 0 6px; color: var(--ink-2); }
.appt { border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; cursor: pointer; background: var(--bg); }
.appt:hover { background: var(--muted-bg); }
.appt .t { font-size: 12px; color: var(--ink-2); }
.appt .who { font-size: 13px; }
.appt .tag { margin-top: 4px; font-size: 11px; padding: 1px 8px; }
.book .bstep { border-top: 1px solid var(--line); padding: 14px 0; }
.book .bstep:first-child { border-top: 0; padding-top: 4px; }
.book label.inline, .toolbar label.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--ink-2); font-weight: 500; }
.book .bstep .toolbar input[type=text], .book .bstep .toolbar input:not([type]) { min-width: 140px; }
.book .bstep details summary { cursor: pointer; color: var(--brand-deep); font-size: 13px; margin-top: 8px; }
.book h3 { font-size: 14px; margin: 0 0 8px; }
.book .chips .chip { cursor: pointer; border: 1px solid var(--line); background: var(--panel); font: inherit; font-size: 13px; }
.book .chips .chip.on { background: var(--brand-soft); color: var(--brand-deep); border-color: var(--brand-line); font-weight: 600; }
.book .results { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; position: relative; z-index: 2; }
.book details { position: relative; z-index: 1; }
.book details:not([open]) summary { display: inline-block; }
.book .results .chip { cursor: pointer; border: 1px solid var(--line); background: var(--panel); font: inherit; font-size: 13px; }
.book .slots { margin-top: 8px; display: grid; gap: 8px; }
/* Day, then time, then who: one labelled row each, so the choice is small at every step. */
.book .pickrow { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: baseline; }
.book .picklabel { font-size: 12px; color: var(--muted); font-weight: 600; }
@media (max-width: 560px) { .book .pickrow { grid-template-columns: 1fr; gap: 2px; } }
.book .pickrow + .pickrow { margin-top: 8px; }
.book select.pick { min-width: 280px; max-width: 100%; }
.linklike { background: none; border: 0; padding: 0; color: var(--brand-deep); cursor: pointer; font: inherit; }

/* Appointments — month view */
.month { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.month .dow, .month .grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month .dow span { padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); }
.month .cell { min-height: 110px; padding: 6px 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.month .cell:nth-child(7n) { border-right: 0; }
.month .cell.other { background: var(--panel-2); opacity: .7; }
.month .cell.today { box-shadow: inset 0 3px 0 var(--brand); }
.month .cell h4 { margin: 0 0 4px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.month .daynum { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--heading); cursor: pointer; }
.month .cell.today .daynum { background: var(--brand); color: var(--brand-ink); border-radius: 999px; width: 22px; height: 22px; }
.month .appt { padding: 3px 6px; margin-bottom: 4px; border-left-width: 3px; }
.month .appt .t { font-size: 11px; }
.month .appt .who { font-size: 12px; line-height: 1.2; }
.month .appt .tag { display: none; }
.month .appt[title] .who b::after { content: ''; }
@media (max-width: 900px) { .month .cell { min-height: 70px; } .month .appt .who { display: none; } }
.seg.left { margin-left: 0; }
.tabs.wrap { flex-wrap: wrap; overflow: visible; row-gap: 0; }

/* Opportunity drawer: 70% wide, folder tabs down the left, one field per row */
.drawer.wide.xwide { width: min(1500px, 70vw); }
/* On a phone it is the whole screen, like every other drawer (19 Oct: 70% of 390px hid the form). */
@media (max-width: 900px) { .drawer.wide.xwide { width: 100vw; } }
.opp-layout { display: grid; grid-template-columns: 210px 1fr; gap: 20px; margin-top: 14px; align-items: start; }
.vtabs { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); padding-right: 10px; position: sticky; top: 0; }
.vtabs button { text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 8px; font-weight: 600; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.vtabs button:hover { background: var(--muted-bg); color: var(--heading); }
.vtabs button.on { background: var(--brand-soft); color: var(--brand-deep); }
.fields-v { display: flex; flex-direction: column; }
.fields-v .fv { padding: 9px 0; border-bottom: 1px solid var(--line); }
.fields-v .fv .k { font-size: 12px; color: var(--muted); font-weight: 500; margin-bottom: 2px; }
.fields-v .fv .v { font-size: 14px; }
/* A plan step whose Attachment Link column names a document it has to carry. */
.needs-file { margin: 8px 0 4px; padding: 8px 10px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-deep); font-size: 13px; }
.pickfiles { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.pickfiles .chip { cursor: pointer; }
/* One document's fields under the name they share (Listing Agreement: File, Uploaded?, Signed?). */
.fgroup { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-deep); margin: 18px 0 2px; }
.fgroup:first-child { margin-top: 4px; }
.fields-v .fgroup + .fv, .form-grid .fgroup + .fv { border-top: 1px solid var(--line); }
.form-grid.vertical { grid-template-columns: 1fr; max-width: 560px; }
/* Fields two to a row in a deal drawer wide enough for it (15 Oct: "we don't want to scroll all
   the way to the bottom when some fields can be compressed"). */
#oBody { container-type: inline-size; min-width: 0; }
@container (min-width: 620px) {
  #oBody .fields-v { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  #oBody .fields-v > .fgroup, #oBody .fields-v > .wide { grid-column: 1 / -1; }
  #oBody .fields-v .fgroup + .fv + .fv:not(.wide) { border-top: 1px solid var(--line); }
  #oBody .form-grid.vertical { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; max-width: none; }
  #oBody .form-grid.vertical > .fgroup, #oBody .form-grid.vertical > :has(textarea), #oBody .form-grid.vertical > :has(input[type=file]) { grid-column: 1 / -1; }
}
.form-grid.vertical input:not([type=checkbox]):not([type=file]), .form-grid.vertical select, .form-grid.vertical textarea { width: 100%; }
.files { margin: 4px 0 0; padding-left: 18px; }
.files li { margin: 2px 0; }
@media (max-width: 900px) { .opp-layout { grid-template-columns: 1fr; } .vtabs { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 8px; position: static; } }

#syncNowBtn { font-size: 20px; line-height: 1; }
#syncNowBtn.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.card .next a.t { display: block; text-decoration: none; }
.card .next a.t:hover { text-decoration: underline; }
#tierSeg, #progBox { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
#tierSeg .chip, #progBox .chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; padding: 6px 12px; }
#tierSeg .chip:has(input:checked), #progBox .chip:has(input:checked) { background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; }

/* ---- Dashboard (admin) --------------------------------------------------------
   Typography is the Desk's, not the chart library's: headings are plain h2/h3 in the
   display face like every other page, labels are --fs-small and muted, and nothing
   here introduces a size, weight or letter-spacing the rest of the app doesn't use.
   Charts are inline SVG/flex bars, so every colour is a theme token. */
.dash-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 4px; }
.dash-stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(31,35,40,.04); padding: 14px 16px; }
.dash-stat .lbl { font-size: var(--fs-small); color: var(--muted); font-weight: 500; margin-bottom: 6px; }
.dash-stat .val { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: var(--heading); }
/* Same rule as the Opportunities tiles: the number is always the heading colour, and what it
   means is a dot beside its label. */
.dash-stat .val { font-size: 26px; letter-spacing: -.02em; }
.dash-stat:has(.val.crit) .lbl::before, .dash-stat:has(.val.warn) .lbl::before, .dash-stat:has(.val.ok) .lbl::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.dash-stat:has(.val.crit) .lbl::before { background: var(--crit); }
.dash-stat:has(.val.warn) .lbl::before { background: var(--warn); }
.dash-stat:has(.val.ok) .lbl::before { background: var(--ok); }

.dash h2 { margin: 26px 0 10px; }
.dash > .sub { color: var(--muted); margin: 10px 0 0; }
.dash .tabs { margin-top: 4px; }

/* Filter bar — the same controls the list views use, laid out in a row. */
.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 16px 0 4px; }
.f-group { display: flex; align-items: center; gap: 6px; }
.f-group label { margin: 0; white-space: nowrap; }
.f-group select { padding: 5px 9px; border-radius: 8px; font-size: var(--fs-small); }
.f-group input[type=date] { padding: 4px 8px; border-radius: 8px; font-size: var(--fs-small); border: 1px solid var(--line, #d9d6d0); background: var(--panel, #fff); color: inherit; }
.f-count { color: var(--muted); font-size: var(--fs-small); margin-left: auto; }

/* A Triage item sitting in the task list says so, so a count can be read back. */
.tag.from-triage { background: var(--brand-soft); color: var(--brand-deep); }

.dash-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.dash-grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.chart-card h3 { margin-bottom: 12px; }
.chart-empty { color: var(--muted); font-size: var(--fs-small); padding: 22px 0; text-align: center; }

.chart-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.chart-row svg { flex: 0 0 auto; max-width: 100%; height: auto; }
.donut-total { font-family: var(--font-display); font-size: 22px; font-weight: 600; fill: var(--heading); }
.donut-sub { font-size: 11px; fill: var(--muted); }
.chart-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-small); min-width: 0; }
.chart-legend.inline { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.chart-legend li { display: flex; align-items: center; gap: 7px; color: var(--ink-2); }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.chart-legend b { margin-left: auto; padding-left: 10px; color: var(--ink); font-weight: 600; }

.bars { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(70px, 30%) 1fr auto; align-items: center; gap: 10px; font-size: var(--fs-small); }
.bar-label { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { display: flex; height: 16px; background: var(--muted-bg); border-radius: 5px; overflow: hidden; }
.bar-seg { display: block; height: 100%; }
.bar-val { color: var(--ink); font-weight: 600; min-width: 20px; text-align: right; }

.dash-pipelines { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); align-items: start; }
.p-card h3 { margin-bottom: 10px; }
.p-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.p-card td.is-crit { color: var(--crit); font-weight: 600; }

tr.row-crit { background: var(--crit-bg); }
tr.row-warn { background: var(--warn-bg); }

/* The four buckets side by side, the way Triage shows its sections — the whole day
   on one screen instead of four full-width panels stacked down it. */
.task-columns { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.task-columns .task-block { margin-bottom: 0; }

/* One task per block: the title on its own line, everything about it underneath.
   As a table these fields stretched across the whole screen with the client and
   assignee stranded in the middle of it. */
.task-list { list-style: none; margin: 0; padding: 0; }
.task-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.task-item:last-child { border-bottom: 0; padding-bottom: 0; }
.task-item:first-child { padding-top: 0; }
.task-item .t-title { font-weight: 600; }
.task-item .t-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 5px; }
.task-item .t-who { color: var(--muted); font-size: var(--fs-small); }
.task-block .none { color: var(--muted); font-size: var(--fs-small); }

.task-block h3 { margin-bottom: 10px; }
.task-block h3.critical { color: var(--crit); }
.task-block h3.warning  { color: var(--warn); }
.task-block h3.ok       { color: var(--ok); }
.task-block td.t-title { font-weight: 600; }
.task-block td.muted { color: var(--muted); }

@media (max-width: 640px) {
  .dash-grid, .dash-grid.two, .dash-pipelines { grid-template-columns: 1fr; }
  .chart-row { justify-content: center; }
  .bar-row { grid-template-columns: minmax(60px, 40%) 1fr auto; }
}

/* @mentions: the picker under a note composer, and the chip in a saved note. */
.mention-list { position: relative; z-index: 40; margin-top: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; }
.mention-list button { display: flex; width: 100%; gap: 10px; align-items: baseline; padding: 8px 12px; border: 0; background: none; text-align: left; color: var(--ink); }
.mention-list button.on, .mention-list button:hover { background: var(--brand-soft); }
.mention-list .n { font-weight: 600; }
.mention-list .r { font-size: var(--fs-small); color: var(--muted); }
.mention { color: var(--brand-deep); background: var(--brand-soft); border-radius: 4px; padding: 0 3px; font-weight: 600; }


/* What a stage is for: the workbook's own words, above its steps. */
/* A stage folds away unless it is the current one, or holds something waiting for a person. */
.stage-fold > summary { cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; list-style: none; padding: 4px 0; }
.stage-fold > summary::-webkit-details-marker { display: none; }
.stage-fold > summary::before { content: "▸"; color: var(--muted); font-size: 13px; }
.stage-fold[open] > summary::before { content: "▾"; }
.stage-fold > summary h2 { display: inline-flex; }
.stage-fold > summary:hover { color: var(--brand-deep); }
.stage-about { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--muted-bg); padding: 10px 14px; margin: 8px 0 12px; }
.stage-about summary { font-weight: 600; cursor: pointer; color: var(--heading); }
.stage-about p { margin: 10px 0 0; line-height: 1.55; }

/* ---- "What is this screen for?" ------------------------------------------------------
   A question mark beside a heading, and the explanation it opens underneath. The content
   lives in frontend/js/help.js, which the How to page reads from too, so the two cannot
   drift apart. */
.helpmark {
  flex: none; width: 20px; height: 20px; padding: 0; margin-left: 2px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--panel);
  color: var(--muted); font: 600 12px/1 var(--font-ui); cursor: pointer;
  align-self: center; transition: background .12s, color .12s, border-color .12s;
}
.helpmark:hover { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-deep); }
.helpmark.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.helpmark:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Inside the heading, so it reads "Workload (?)" on the same line. Nudged up a little and a
   touch smaller than the title's own line, so it sits with the word rather than looming. */
h1 > .helpmark, h2 > .helpmark, h3 > .helpmark {
  vertical-align: middle; position: relative; top: -2px; margin-left: 8px;
}

.help-panel {
  position: relative; border: 1px solid var(--brand-line); border-radius: var(--radius);
  background: var(--brand-soft); padding: 14px 16px 12px; margin: -8px 0 18px; max-width: 760px;
}
.help-panel .help-title { font: 600 var(--fs-h2)/1.3 var(--font-display); color: var(--heading); margin-bottom: 6px; }
.help-panel .help-what { margin: 0 0 10px; line-height: 1.55; }
.help-panel .help-lead, .help-doc .help-lead {
  margin: 0 0 4px; font-size: var(--fs-small); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.help-panel .help-list, .help-doc .help-list { margin: 0 0 10px; padding-left: 20px; line-height: 1.55; }
.help-panel .help-list li, .help-doc .help-list li { margin-bottom: 4px; }
.help-panel .help-note, .help-doc .help-note {
  margin: 0; padding-left: 11px; border-left: 3px solid var(--brand-line);
  color: var(--ink-2); line-height: 1.55; font-size: var(--fs-small);
}
.help-panel .help-close {
  position: absolute; top: 10px; right: 12px; border: 0; background: none;
  color: var(--brand-deep); font: 600 var(--fs-small) var(--font-ui); cursor: pointer; padding: 2px 4px;
}
.help-panel .help-close:hover { text-decoration: underline; }

/* The How to page in Settings: the same content, all of it, as a document. */
.help-doc h3 { margin: 22px 0 2px; font-size: var(--fs-h2); }
.help-doc .help-what { margin: 0 0 10px; line-height: 1.55; }
.help-doc .help-group {
  margin: 26px 0 6px; font: 600 var(--fs-small) var(--font-ui); color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.help-doc .help-entry { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.help-doc .help-entry:last-child { border-bottom: 0; }
/* The "?" for a Settings tab sits under the tab strip: the strip itself scrolls sideways on a
   phone, and a mark inside it would scroll out of reach. */
.tab-help { display: flex; align-items: center; gap: 7px; margin: -8px 0 14px; }
/* A thread we could not refresh from GHL: shown, but never as though it were current. */
.warn-note { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); margin-bottom: 12px; }

/* The attachment picker on an email approval: folded away unless the step asks for a document,
   so an appointment confirmation does not dangle the listing agreement under it. */
.pickfold { margin: 8px 0 4px; }
.pickfold > summary { cursor: pointer; padding: 4px 0; }
.pickfold[open] > summary { margin-bottom: 4px; }

/* Attaching a file to a message waiting for approval: the upload is the attach, the deal's own
   filed documents are a fold beside it. */
.attach-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0; }
.attached { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.attached:empty { display: none; }

/* A short list of people to tick — who may sign off a decision. A column rather than a wrapped
   row: names are read down the list, and a wrapped row makes it impossible to see how many are
   ticked at a glance. */
.checks { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.checks .check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.checks .check input[disabled] { cursor: default; }


/* A field whose value is a document rather than a word — "Gantt Chart" holds the whole listing
   timeline as JSON. One line, with the rest one click away: printed in full it buried every
   field under it and pushed the rest of the tab off the screen. */
.longval > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.longval > summary::-webkit-details-marker { display: none; }
.longval > summary::before { content: '▸'; display: inline-block; width: 12px; flex-shrink: 0; color: var(--muted); }
.longval[open] > summary::before { content: '▾'; }
.longval-body { margin-top: 6px; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.5;
  background: var(--muted-bg); border-radius: var(--radius-sm); padding: 8px; }


/* Who an approval goes from and to. The plan decides both and is usually right — but one deal
   can need a different title company without changing the default for every deal. */
/* From / To / Cc, each beside its own label rather than under it. Stacked, the three labels cost
   three whole lines and pushed the message itself off the screen on a laptop. The grid collapses
   back to stacked on a narrow screen, where a 52px label column would leave nothing for the
   field. */
.sendfields { margin-bottom: 10px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.sendfields > label { margin: 0; text-align: right; font-size: 12px; color: var(--muted); }
.sendfields > label + * { min-width: 0; }
.sendfields .hint, .sendfields [data-to-box] { grid-column: 2; }
.sendfields .hint { margin: -2px 0 2px; }
@media (max-width: 560px) {
  .sendfields { grid-template-columns: minmax(0, 1fr); }
  .sendfields > label { text-align: left; }
  .sendfields .hint, .sendfields [data-to-box] { grid-column: 1; }
}
.sendfields .toline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.sendfields [data-to-results] { margin-top: 6px; }
.sendfields .toopt { display: flex; align-items: center; gap: 8px; padding: 3px 0; }

/* The step card is a two-column grid (icon, content). A card that also carries a tick box gets
   a third column rather than pushing the icon out of its own lane — :has() so the cards that
   cannot be picked, a done step or a booked send, keep exactly the layout they had. */
.step:has(> .pick) { grid-template-columns: 20px 30px 1fr; }
/* Picking a run of steps to change together. The tick box is a column on the step card rather
   than a mode the screen goes into: the same cards, one extra control, and a bar that is not
   there until something is picked. */
.step .pick { display: flex; align-items: flex-start; padding-top: 2px; }
.step .pick input { margin: 0; }
.bulkbar { align-items: center; gap: 10px; flex-wrap: wrap; background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 8px; padding: 8px 10px; margin: 0 0 12px; }
.bulkbar label { margin: 0; display: inline-flex; align-items: center; gap: 6px; }

/* On a touch screen the things people tap are the size of a fingertip, even where they are drawn
   small: the tick box, the ×, the chips. The extra is invisible padding, not a bigger control. */
@media (pointer: coarse) {
  .item .title label.done { position: relative; }
  .item .title label.done::after { content: ''; position: absolute; inset: -12px; }
  .item .title label.done input { width: 20px; height: 20px; }
  .item .item-x, .notif .notif-x { width: 40px; height: 40px; top: 4px; right: 4px; }
  .lc-chip { height: 34px; }
  .nav a { padding: 11px 10px; }
  .btn.sm { min-height: 38px; }
}

/* Dark mode's alert red is light enough that white on it is hard to read; the small marks that
   sit on it take dark ink there instead. */
:root[data-theme="dark"] .bell .n { color: #1A0A0B; }

/* Settings → Plan rules. One folded line per workbook tab; unfolded, a table whose columns are the
   same fixed widths in every tab, so Step, Proposed rule, Why and the buttons line up the whole
   way down the page instead of each table sizing itself to its own longest sentence. */
.pr-tab { margin-top: 10px; padding: 0; overflow: hidden; }
.pr-tab > summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.pr-tab > summary::-webkit-details-marker { display: none; }
.pr-tab > summary::before { content: ''; width: 7px; height: 7px; flex: none; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; }
.pr-tab[open] > summary::before { transform: rotate(45deg); }
.pr-tab > summary:hover { background: var(--panel-2); }
.pr-tab .pr-name { font-weight: 600; color: var(--heading); min-width: 200px; }
.pr-tab .pr-counts { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.pr-tab[open] > summary { border-bottom: 1px solid var(--line); }
.pr-body { overflow-x: auto; }
.pr-table { width: 100%; table-layout: fixed; border-collapse: collapse; min-width: 820px; }
.pr-table col.c-step { width: 34%; } .pr-table col.c-rule { width: 26%; } .pr-table col.c-why { width: 22%; }
.pr-table col.c-conf { width: 118px; } .pr-table col.c-act { width: 170px; }
.pr-table th, .pr-table td { padding: 10px 14px; vertical-align: top; text-align: left; overflow-wrap: break-word; }
.pr-table th, .pr-table .tag { white-space: nowrap; }
.pr-table th { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.pr-table td { border-bottom: 1px solid var(--line); }
.pr-table tr:last-child td { border-bottom: 0; }
.pr-table td:last-child { white-space: nowrap; }

/* Four columns inside a group: a little tighter than the page's own, and an empty column is just
   its heading and a dash — a group with one card should not be three boxes saying "nothing". */
.triage-cols.in-group { margin-top: 12px; gap: 14px 14px; }
.triage-cols.in-group > .section > h2 { margin-bottom: 10px; }
.triage-cols.in-group > .section:not(:has(.item)) > .empty { padding: 8px 12px; font-size: 12px; }

/* Rehab estimator: prints as a clean sheet — no nav, no buttons, inputs read as text. */
@media print {
  .sidebar, nav, .topbar, header, .no-print, .toast, #toasts { display: none !important; }
  body, main, .panel { background: #fff !important; color: #000 !important; box-shadow: none !important; border: 0 !important; }
  .print-sheet input, .print-sheet select { border: 0 !important; background: none !important; color: #000 !important; padding: 0 !important; }
}
/* Projects: the board and purchase orders are Triage's columns — one per phase or status. */
.triage.triage-cols.rh-cols { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
@media (max-width: 900px) { .triage.triage-cols.rh-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .triage.triage-cols.rh-cols { grid-template-columns: minmax(0, 1fr); } }
.rh-cols .item[data-open]:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(31,35,40,.08); transform: translateY(-1px); }
#rhTabs { margin-bottom: 18px; }
.rh-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.rh-tiles > .panel { margin: 0; padding: 14px 16px; }
.rh-label { font: 600 12px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 4px 2px 12px; }
.ct-fold > summary { padding: 2px 0; }
.ct-fold:not([open]) { padding-top: 14px; padding-bottom: 14px; }
/* The deal's Rehab tab: the overview is a tidy three-across form, the money four small tiles. */
.rh-over { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; align-items: end; }
.rh-over .wide { grid-column: span 2; }
.rh-over label { display: block; margin-bottom: 4px; }
.rh-over input, .rh-over select { width: 100%; }
.rh-over .rh-save { grid-column: 1 / -1; }
@media (max-width: 760px) { .rh-over { grid-template-columns: minmax(0, 1fr); } .rh-over .wide { grid-column: auto; } }
.rh-money { margin: 16px 0 6px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.rh-money b { font-size: 18px; }
.rh-check { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; white-space: nowrap; }
/* Buttons that are links or file pickers look and line up exactly like buttons. */
.rh-bar { align-items: center; gap: 8px; }
.rh-bar .btn { display: inline-flex; align-items: center; margin: 0; text-decoration: none; cursor: pointer; }
.rh-cols .item .detail { white-space: normal; }
/* The estimator: fields fill their cells, so it reads as a form rather than scattered boxes. */
.rh-est input, .rh-est select { width: 100%; }
.rh-est td input[data-f=quantity], .rh-est td input[data-f=hours], .rh-est td input[data-f=unitPrice], .rh-est td input[data-f=rate] { width: 110px; }
/* A count beside a sidebar link: how many are waiting on you there. */
.nav a .nav-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.nav a .nav-count[hidden] { display: none; }
.tabs button .count { margin-left: 4px; }
/* The note a notification opened: outlined until you move on. */
.item.note.note-focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
/* Projects: phase bar, chips, lines, bars, tiles. */
.rh-stage { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rh-stage select { min-width: 200px; }
.rh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rh-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; background: var(--panel); }
.rh-line { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.rh-line:last-of-type { border-bottom: 0; }
.rh-line .spacer, .rh-stage .spacer { flex: 1; }
.rh-acts { white-space: nowrap; text-align: right; }
.rh-acts .btn { margin-left: 4px; }
.rh-bar-row { margin: 8px 0; }
.rh-bars { position: relative; height: 16px; margin-top: 4px; }
.rh-bars span { position: absolute; left: 0; height: 7px; border-radius: 4px; }
.rh-bars .est { top: 0; background: var(--line); }
.rh-bars .act { top: 9px; background: var(--brand); }
.rh-bars .act.over { background: var(--urgency, #c0392b); }
.tag.rh-st.green { background: #e3f4ea; color: #1d6b3f; }
.tag.rh-st.amber { background: #fdf1d8; color: #8a5a00; }
.tag.rh-st.red { background: #fde4e1; color: #a52a1c; }
.tag.rh-st.blue { background: #e3edfb; color: #1f4f91; }
.tag.rh-st.grey { background: var(--muted-bg); color: var(--ink-2); }
.rh-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .rh-grid2 { grid-template-columns: minmax(0, 1fr); } }
.rh-grid2 > .panel { margin: 0; }
.rh-h3 { font-size: 14px; margin: 0 0 8px; }
.rh-thumb { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; display: inline-block; background: var(--muted-bg); vertical-align: middle; }
.rh-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 600px) { .rh-three { grid-template-columns: minmax(0, 1fr); } }
.rh-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; }
.rh-phases input, .rh-phases textarea { width: 100%; }
.rh-phases td { vertical-align: top; }
.triage-cols > .section.rh-jumped > h2 { color: var(--brand); }
.rh-cat td { vertical-align: top; }
/* A note written in GoHighLevel's editor: paragraphs spaced, bold kept, nothing cramped. */
/* A note is read in full, however long — the notes list is where the whole record lives. */
.item.note .detail { max-height: none; overflow: visible; }
.note-body p { margin: 0 0 6px; }
.note-body p:last-child { margin-bottom: 0; }
.note-body ul, .note-body ol { margin: 4px 0 6px 18px; padding: 0; }
/* The board with many phases scrolls sideways rather than squeezing ten columns into the page. */
.triage.triage-cols.rh-cols.rh-wide { grid-template-columns: var(--tpl, repeat(var(--cols, 4), minmax(190px, 1fr))); overflow-x: auto; padding-bottom: 8px; }
@media (max-width: 760px) { .triage.triage-cols.rh-cols.rh-wide { grid-template-columns: repeat(var(--cols, 4), minmax(78vw, 1fr)); } }
/* The deal's Projects tab stays inside the window. */
#oBody { min-width: 0; }
.rh-over input:not([type=checkbox]), .rh-over select { width: 100%; min-width: 0; }
.rh-over > div { min-width: 0; }
.rh-money { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.rh-chip { flex-direction: row; margin: 0; font-weight: 400; }
.rh-chip input { margin: 0; width: auto; }
.rh-check input { width: auto; margin: 0; }
/* ---- Inside GoHighLevel -----------------------------------------------------------------------
   GHL already has a full menu on the left, so the Desk puts its own across the top instead: one
   bar with the menu, search, bell and who is signed in, and every page gets the full width.
   app.js moves the menu and the user box into the top bar; the side bar is not shown at all. */
.embedded .app:not(.login-mode) { grid-template-columns: 1fr; }
.embedded .sidebar, .embedded .menu-btn { display: none !important; }
.embedded .topbar { padding: 8px 20px; gap: 14px; }
.embedded .topbar .nav { flex-direction: row; gap: 4px; flex: 0 0 auto; }
.embedded .topbar .nav a { padding: 7px 12px; gap: 8px; white-space: nowrap; }
.embedded .topbar .nav a .nav-count { margin-left: 2px; }
.embedded .topbar .search { flex: 1 1 200px; }
/* GHL already shows who is signed in and signs them out — the Desk's avatar and sign-out are hidden. */
.embedded .topbar .user { display: none !important; }
/* With GHL's own menu open there is less room. The bar COMPRESSES rather than wraps: tighter
   items, then the "Updated" text goes (the refresh button stays), then the menu drops its icons
   and the search box narrows. Only below that does the menu take a line of its own. */
.embedded .topbar .nav { min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; }
.embedded .topbar .nav::-webkit-scrollbar { display: none; }
.embedded .topbar .top-right { flex: none; }
.embedded .topbar .search { min-width: 150px; }
@media (max-width: 1700px) {
  .embedded .topbar { gap: 10px; padding: 8px 14px; }
  .embedded .topbar .nav { gap: 2px; }
  .embedded .topbar .nav a { padding: 7px 9px; gap: 6px; }
}
@media (max-width: 1520px) { .embedded .topbar .updated { display: none; } }
@media (max-width: 1300px) {
  .embedded .topbar .nav a .ico { display: none; }
  .embedded .topbar .nav a { padding: 7px 8px; }
  .embedded .topbar .search { flex: 1 1 150px; }
}
/* Never a tab out of sight: app.js measures the menu, drops the icons when it does not fit, and
   when even that is not enough gives the menu a row of its own that wraps (fitNav). */
.embedded .topbar.nav-noicons .nav a .ico { display: none; }
.embedded .topbar.nav-noicons .nav a { padding: 7px 8px; }
.embedded .topbar.nav-row { flex-wrap: wrap; row-gap: 6px; }
.embedded .topbar.nav-row .nav { order: 9; flex: 1 0 100%; flex-wrap: wrap; overflow: visible; }
@media (max-width: 1060px) {
  .embedded .topbar { flex-wrap: wrap; row-gap: 6px; }
  .embedded .topbar .nav { order: 9; flex: 1 0 100%; flex-wrap: wrap; overflow: visible; }
  .embedded .topbar .nav::-webkit-scrollbar { display: none; }
  .embedded .topbar .nav a .ico { display: inline-flex; }
}
@media (max-width: 760px) {
  .embedded .topbar { padding: 8px 12px; }
  .embedded .topbar .updated { display: none; }
}
/* GHL already says which sub-account you are in; the Desk follows it, so no toggle to disagree with. */
.embedded-loc #locToggle { display: none !important; }
/* GoHighLevel sizes the Desk's frame to the whole window and puts it under its own header, so
   the frame's bottom sits below the screen and the last cards could not be scrolled into view
   (15 Oct). Room at the foot of every page and drawer brings the end back up. */
.embedded .main { padding-bottom: 140px; }
.embedded .drawer { padding-bottom: 140px; }
/* Inside GHL the top menu keeps only what GHL itself does not do: My Day, Projects, Approvals,
   New lead and Settings. Conversations, contacts, properties, the board and the rest are GHL's own menu.
   The hidden pages still open from links (a contact name, a mention). To bring the full rail
   back, delete this rule — see docs/GHL-EMBEDDED-RAIL.md. */
.embedded .nav a:not([data-view=dashboard]):not([data-view=triage]):not([data-view=next]):not([data-view=comments]):not([data-view=assistant]):not([data-view=rehab]):not([data-view=approvals]):not([data-view=settings]):not([data-view=newlead]):not([data-view=scheduling]):not([data-view=forms]):not([data-view=opportunities]) { display: none !important; }
/* New lead: the Desk's new-contact page with the lead sheet and its script, so "who should own
   this lead?" goes to whoever took the call. Outside GHL the Contacts page has it already. */
html:not(.embedded) .nav a[data-view=newlead] { display: none; }
.embedded .topbar .nav a[data-view=newlead] { color: var(--brand); }
.embedded .topbar .nav a[data-view=newlead] .ico { color: var(--brand); }

/* Forms and Scheduling (views/forms.js): GHL's forms and the booking screen, inside the Desk. */
.fm-sec + .fm-sec { margin-top: 28px; }
.fm-sec h2 { font-size: 18px; margin: 0 0 12px; }
.fm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .fm-grid { grid-template-columns: 1fr; } }
.fm-card { --c: var(--brand); display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s; }
.fm-card:hover { border-color: var(--c); transform: translateY(-1px); }
.fm-card.green { --c: #16A34A; } .fm-card.red { --c: #DC2626; } .fm-card.yellow { --c: #CA8A04; } .fm-card.blue { --c: #2563EB; }
.fm-card .fm-ico { flex: 0 0 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent); }
.fm-card b { flex: 1; min-width: 0; font-weight: 600; }
.fm-card .fm-go { color: var(--muted); } .fm-card:hover .fm-go { color: var(--c); }
button.fm-card { font: inherit; text-align: left; cursor: pointer; width: 100%; }
.fm-bar { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; }
.fm-frame { display: block; width: 100%; height: calc(100vh - 150px); min-height: 560px; border: 1px solid var(--line);
  border-radius: 12px; background: #fff; }

/* Menu items can be dragged into another order (app.js wireNavDrag). */
#nav > [draggable=true] { -webkit-user-drag: element; }
#nav > .nav-dragging { opacity: .4; }
#nav > .nav-off { display: none !important; }
/* Settings › My menu: one row per menu page, a tick to show it, dragged into order. */
.mymenu { max-width: 460px; display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.mymenu li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; cursor: grab; user-select: none; }
.mymenu li.dragging { opacity: .4; }
.mymenu li.off .mm-name { color: var(--muted); text-decoration: line-through; }
.mymenu .mm-grip { color: var(--muted); letter-spacing: -2px; font-size: 13px; }
.mymenu .mm-ico { display: inline-grid; place-items: center; width: 18px; color: var(--ink-2); }
.mymenu .mm-ico svg { width: 16px; height: 16px; }
.mymenu .mm-name { flex: 1; }
.mymenu input[type=checkbox] { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.mymenu .mm-mv { display: flex; gap: 2px; }
.mymenu .mm-mv button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px 4px; font-size: 12px; }
.mymenu .mm-mv button:hover { color: var(--ink); }

/* Triage "Compact" view: the cards without the task's description (views/triage.js). */
/* The same height as the Mine / Everyone switch and the buttons beside it, only as wide as its words. */
.page-head > select.tri-view { width: auto; min-width: 0; border-radius: 10px; font-weight: 600; font-size: 13.5px; padding: 0 30px 0 12px; }
.tri-compact .item .desc { display: none; }

/* Scheduling: the booking screen on the page itself, no box; it reports its height (views/forms.js). */
.sched-frame { display: block; width: 100%; height: 900px; border: 0; background: transparent; overflow: hidden; }

/* Inside GoHighLevel the Desk takes GHL's white page, so the two read as one screen (light theme;
   dark keeps its own). Cards keep their border to stand apart. */
:root.embedded:not([data-theme="dark"]) { --bg: #FFFFFF; --panel-2: #FAFAFA; --muted-bg: #F3F4F6; --line: #E5E7EB; }
:root.embedded:not([data-theme="dark"]) body { background: #FFFFFF; }
.embedded #themeBtn { display: none !important; }

/* ---- Triage, livelier: lanes, tiles, greeting, kind and due chips, initials ----
   Colour here says WHICH COLUMN and WHAT KIND. The card's left edge still says how urgent and
   nothing else, so no chip below uses the urgency colour. Every tint is mixed from one hue and
   the panel colour, so the same rules work in light and dark. */
/* Red, orange, blue, grey on both businesses: the columns read the same on SREG and DA. */
.lane-critical { --lane: #DC2626; }
.lane-due_soon { --lane: #EA580C; }
.lane-new      { --lane: #2563EB; }
.lane-other    { --lane: #64748B; }
:root[data-theme="dark"] .lane-critical { --lane: #FF6B70; }
:root[data-theme="dark"] .lane-due_soon { --lane: #FB923C; }
:root[data-theme="dark"] .lane-new { --lane: #6EA6FF; }
.triage-cols > .section.lane-critical { --urgency: var(--lane); }
.triage-cols > .section.critical > h2 { color: var(--lane); }
:root[data-theme="dark"] .lane-other { --lane: #9AA1AB; }
.triage-cols > .section { background: color-mix(in srgb, var(--lane) 6%, var(--panel)); border-radius: 14px; padding: 12px; }
.triage-cols > .section > h2 { color: var(--lane); margin: 2px 4px 12px; display: flex; align-items: center; }
.triage-cols > .section > h2 .count { background: var(--lane); color: #fff; border-radius: 999px; min-width: 22px; height: 20px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0; }
:root[data-theme="dark"] .triage-cols > .section > h2 .count { color: var(--bg); }
.triage-cols > .section > .item { border-color: transparent; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.triage-cols > .section > .item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.triage-cols > .section:not(:has(.item)) > .all-clear { border: 0; background: color-mix(in srgb, var(--ok) 9%, var(--panel)); color: var(--ok);
  text-align: center; font-weight: 600; padding: 18px; border-radius: 10px; }
.triage-cols > .section:not(:has(.item)) > .all-clear::before { content: '✓  '; }
.triage-cols > .section:not(:has(.item)) > h2 { opacity: 1; }
.triage-cols.in-group > .section { padding: 10px; }

.tri-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; }
.tri-tile { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; cursor: pointer; font: inherit; color: var(--ink); min-width: 0; transition: box-shadow .16s, transform .16s; }
.tri-tile:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.tri-tile .n { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font: 700 18px/1 var(--font-ui);
  color: var(--lane); background: color-mix(in srgb, var(--lane) 13%, var(--panel)); }
.tri-tile .l { min-width: 0; font-size: 12px; color: var(--muted); line-height: 1.35; }
.tri-tile .l b { display: block; color: var(--ink); font-size: 13.5px; }
.tri-tile .l, .tri-tile .l b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hello { display: flex; align-items: center; gap: 16px; border-radius: 14px; padding: 16px 20px; margin: 0 0 16px;
  background: linear-gradient(100deg, color-mix(in srgb, #3B82F6 9%, var(--panel)), color-mix(in srgb, #8B5CF6 8%, var(--panel)) 60%, color-mix(in srgb, #EC4899 7%, var(--panel))); }
.hello .ring { --p: 0; flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--ok) calc(var(--p) * 1%), color-mix(in srgb, var(--muted) 22%, var(--panel)) 0); }
.hello .ring span { width: 42px; height: 42px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; font: 700 12px/1 var(--font-ui); color: var(--ok); }
.hello-text { min-width: 0; }
.hello-title { font: 700 19px/1.25 var(--font-ui); color: var(--heading, var(--ink)); }
.hello-sub { margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.hello-sub b { color: var(--ink); }
.hello-sub .linklike { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.hello-sub .linklike:hover { color: var(--brand-deep); text-decoration: underline; }

/* The caption row: kind chip, due chip, then the stage, which gives way first when space runs
   short. Room is kept on the right for the card's × so nothing sits under it. */
.item .meta { gap: 6px; padding-right: 26px; flex-wrap: wrap; }
/* The stage moves under the chips rather than being cut to "Appoi…". */
.item .meta .caption { min-width: min(110px, 100%); flex: 1 1 0; }
.item .kind, .item .due { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font: 600 11px/1 var(--font-ui); white-space: nowrap; }
.item .kind { --k: #64748B; color: var(--k); background: color-mix(in srgb, var(--k) 13%, var(--panel)); }
.k-call  { --k: #0284C7 !important; } .k-email { --k: #7C3AED !important; } .k-sms { --k: #16A34A !important; } .k-todo { --k: #64748B !important; }
.k-note  { --k: #0D9488 !important; } .k-money { --k: #B45309 !important; } .k-info { --k: #DB2777 !important; } .k-plan { --k: #4F46E5 !important; }
.k-msg   { --k: #0F766E !important; } .k-sign { --k: #BE123C !important; } .k-doc { --k: #9333EA !important; } .k-lead { --k: #2563EB !important; }
:root[data-theme="dark"] .item .kind { color: color-mix(in srgb, var(--k) 55%, #fff); background: color-mix(in srgb, var(--k) 26%, var(--panel)); }
.item .due.late  { color: var(--crit); background: var(--crit-bg); }
.item .due.soon  { color: var(--warn); background: var(--warn-bg); }
.item .due.later { color: var(--ok); background: var(--ok-bg); }

/* For whom on the left (client, then each property on its own line), whose on the right,
   lined up on the client's row.
   In a narrow column the owner drops to its own line, still on the right, instead of cutting the
   client's name to "Maria …". */
.item .who { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; }
.item .who .whom { flex: 1 1 96px; min-width: 0; flex-direction: column; align-items: flex-start; gap: 6px; }
.item .who .owner { margin-left: auto; }
/* A narrow card keeps client and owner on one line by showing the owner's first name only;
   the full name is on the hover. */
.triage-cols .item { container-type: inline-size; }
@container (max-width: 300px) { .item .who .owner .sur, .item .card-prop .owner .sur { display: none; } }
.item .who .whom > .linklike { max-width: 100%; text-align: left; align-items: flex-start; line-height: 22px; }
.item .who .whom > .linklike .ic { height: 22px; }
.item .who .whom > .linklike .nm, .item .who .owner .nm, .item .card-prop .owner .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.item .who .whom > .linklike:has(.cav) { color: var(--ink); font-weight: 600; }
.item .who .whom > .linklike .ic { flex: none; margin: 0 3px; }
.cav, .av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font: 700 9.5px/1 var(--font-ui); letter-spacing: .02em; }
.cav { color: hsl(var(--h) 55% 30%); background: hsl(var(--h) 70% 91%); }
.av  { color: #fff; background: hsl(var(--h) 52% 46%); }
.av.none { background: color-mix(in srgb, var(--muted) 35%, var(--panel)); }
:root[data-theme="dark"] .cav { color: hsl(var(--h) 70% 82%); background: hsl(var(--h) 30% 24%); }
/* The owner as a pill in their own colour: tinted ground, initials circle and name in that colour. */
.item .who .owner, .item .card-prop .owner { --oc: #64748B; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; max-width: 160px; height: 26px;
  padding: 0 10px 0 2px; border-radius: 999px; color: color-mix(in srgb, var(--oc) 80%, #000); background: color-mix(in srgb, var(--oc) 13%, var(--panel)); }
.item .who .owner .av, .item .card-prop .owner .av { background: var(--oc); }
:root[data-theme="dark"] .item .who .owner, :root[data-theme="dark"] .item .card-prop .owner { color: color-mix(in srgb, var(--oc) 55%, #fff); background: color-mix(in srgb, var(--oc) 24%, var(--panel)); }
.item .who .owner.muted, .item .card-prop .owner.muted { color: var(--muted); font-weight: 500; background: var(--muted-bg); }
.item.flash { animation: tri-flash 1.2s ease-out; }
@keyframes tri-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--brand); } 100% { box-shadow: 0 0 0 0 transparent; } }

@media (max-width: 900px) { .tri-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .tri-tiles { gap: 10px; } .tri-tile { padding: 10px; gap: 10px; } .tri-tile .l span, .tri-tile .l { font-size: 11px; }
  .hello { padding: 14px; gap: 12px; } .hello-title { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .item.flash { animation: none; } .triage-cols > .section > .item:hover, .tri-tile:hover { transform: none; } }

/* ---- Shared lively pieces: stat tiles, person pills, due chips, tinted columns ----------- */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0 0 16px; }
.stat-tile { --c: #64748B; display: flex; align-items: center; gap: 12px; min-width: 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; }
.stat-tile .n { flex: none; min-width: 40px; height: 40px; padding: 0 9px; border-radius: 10px; display: grid; place-items: center;
  font: 700 18px/1 var(--font-ui); color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--panel)); white-space: nowrap; }
.stat-tile .l { min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.stat-tile[data-kpi] { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.stat-tile[data-kpi]:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.kpi-list { display: flex; flex-direction: column; gap: 6px; max-height: min(60vh, 520px); overflow: auto; margin-top: 4px; }
.kpi-row { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 9px 12px; color: var(--ink); }
.kpi-row:hover { background: var(--muted-bg); }
.kpi-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kpi-why { color: var(--ink-2); text-align: right; max-width: 45%; }
.person-pill { --oc: #64748B; display: inline-flex; align-items: center; gap: 6px; height: 26px; max-width: 170px; padding: 0 10px 0 2px; border-radius: 999px;
  font: 600 12px/1 var(--font-ui); color: color-mix(in srgb, var(--oc) 80%, #000); background: color-mix(in srgb, var(--oc) 13%, var(--panel)); flex: none; }
.person-pill .av { background: var(--oc); color: #fff; }
.person-pill .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-pill.unowned { --oc: #94A3B8; color: var(--muted); font-weight: 500; background: var(--muted-bg); }
:root[data-theme="dark"] .person-pill { color: color-mix(in srgb, var(--oc) 55%, #fff); background: color-mix(in srgb, var(--oc) 24%, var(--panel)); }
.due-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font: 600 11px/1 var(--font-ui); white-space: nowrap; }
.due-chip.late { color: var(--crit); background: var(--crit-bg); }
.due-chip.soon { color: var(--warn); background: var(--warn-bg); }
.due-chip.later { color: var(--ok); background: var(--ok-bg); }
/* A column in its own colour (Opportunities stages, Projects phases): soft ground, coloured head and count. */
.tint-col { --sc: #64748B; background: color-mix(in srgb, var(--sc) 6%, var(--panel)) !important; border-radius: 14px; }
.tint-col .phase { color: var(--sc) !important; }
.tint-col h3.stage, .tint-col > h2 { color: color-mix(in srgb, var(--sc) 85%, var(--ink)) !important; }
.tint-col .count { background: var(--sc) !important; color: #fff !important; border-radius: 999px; min-width: 22px; height: 20px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
:root[data-theme="dark"] .tint-col .count { color: var(--bg) !important; }

/* Opportunities */
.board .card { border-color: transparent; box-shadow: 0 1px 3px rgba(15,23,42,.08); transition: transform .16s, box-shadow .16s; }
.board .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.board .card .top { align-items: center; gap: 8px; }
.board .card .person a, .board .card .client a { display: inline-flex; align-items: center; gap: 8px; }
.board .card .next { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .board .card:hover { transform: none; } }
/* Projects */
.rh-cols > .tint-col { padding: 12px !important; }
.rh-cols > .tint-col > .empty { background: color-mix(in srgb, var(--panel) 60%, transparent); border: 0 !important; }
.rh-cols .item { border-color: transparent; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.rh-cols .item .rh-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rh-cols .item .tag { white-space: nowrap; }
.rh-cols .item .rh-lead { margin-top: 8px; }
.spend-bar { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 18%, var(--panel)); overflow: hidden; margin: 4px 0 2px; }
.spend-bar i { display: block; height: 100%; border-radius: 99px; background: var(--bc); }
.color-pick { display: inline-flex; align-items: center; gap: 8px; }
.color-pick .swatch { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.color-pick select { width: auto; min-width: 120px; }
.color-pick select { height: 34px; border-radius: 8px; font-size: 13px; }
#usersForm .rolepick > summary { height: 34px; line-height: 26px; border-radius: 8px; }
#usersForm .rolepick > summary::after { top: 7px; }
#usersForm td { vertical-align: middle; }
@media (max-width: 560px) {
  .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-tile { padding: 10px; gap: 10px; }
  .stat-tile .n { min-width: 34px; height: 34px; font-size: 15px; }
  .stat-tile .l { font-size: 12px; }
}
.rh-cols .item .rh-title { flex-wrap: nowrap; }
.rh-cols .item .rh-title > span:not(.cav):not(.tag) { min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.rh-cols .item .rh-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* Phase names run to one or two lines; the heading keeps one height so the counts line up. */
.rh-cols > .tint-col > h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; line-height: 1.25; margin-bottom: 12px; }
/* A "not signed yet" card: the documents by file name, one per line */
.item .doc-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; max-height: 13.5em; overflow-y: auto; overscroll-behavior: contain; }
.item .doc-list li { font-size: 12px; line-height: 1.35; }
.item .doc-list a, .item .doc-list li > span { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--ink-2); text-decoration: none; }
.item .doc-list a:hover { color: var(--brand-deep); text-decoration: underline; }
.item .doc-list .ic, .doc-row .ic { flex: none; margin-top: 1px; }
.doc-rows { display: grid; gap: 10px; }
.doc-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel); }
.doc-row .doc-name { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; font-size: 13.5px; }
.doc-row .doc-name a { color: var(--ink); }
.doc-row .doc-name a:hover { color: var(--brand-deep); }
.doc-row .doc-missing { color: var(--crit); margin-top: 4px; }
.doc-row > .small { margin-left: 24px; }

/* The Dashboard on its own, inside GHL's dashboard widget: no Desk menu, no search, no bell —
   just the page, full width. */
.dash-only .topbar, .dash-only #sidebar, .dash-only #menuScrim { display: none !important; }
.dash-only .app, .dash-only body { grid-template-columns: 1fr !important; }
.dash-only #main { padding-top: 16px; }
/* Dashboard: each number in its own colour, with a coloured top edge; people in their colour */
.dash-stat { --c: #64748B; border-top: 3px solid var(--c); background: color-mix(in srgb, var(--c) 5%, var(--panel)); }
.dash-stat .val { color: var(--c); }
.dash-stat .lbl { font-weight: 600; color: var(--ink-2); }
.bar-label.person { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.bar-label.person .av { width: 20px; height: 20px; font-size: 8.5px; color: #fff; }
.bar-label.person .av.unowned { background: color-mix(in srgb, var(--muted) 40%, var(--panel)); }
.bar-label .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bars:has(.bar-label.person) .bar-row { grid-template-columns: minmax(110px, 42%) 1fr auto; }
/* DASHBOARD ROWS COMPRESS INSTEAD OF WRAPPING. Every row of tiles, chart cards, task columns and
   pipeline / team cards keeps its cards side by side and shares the width out evenly, so nothing
   (like "No due date") drops to a line of its own. Up to four cards per row; more continue on the
   next row in the same four columns. A tablet takes two per row, a phone one. */
.dash-grid, .dash-grid.two, .task-columns, .dash-pipelines {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.dash-grid:has(> :nth-child(5)), .task-columns:has(> :nth-child(5)), .dash-pipelines:has(> :nth-child(5)) {
  grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dash-grid > *, .task-columns > *, .dash-pipelines > * { min-width: 0; }
/* Cards in one row end level with each other; task columns keep their own length. */
.dash-grid, .dash-pipelines { align-items: stretch; }
.p-card td:first-child { white-space: nowrap; }
/* Tiles: the whole set on one line, the number shrinking with the room it has. */
.dash-stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.dash-stat { min-width: 0; padding: 12px 14px; }
.dash-stat .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-stat .val { font-size: clamp(17px, 1.75vw, 26px); overflow-wrap: anywhere; }
/* Narrow cards: the donut sits above its legend, task meta wraps, tables scroll inside the card. */
.chart-card .chart-row { justify-content: center; }
.p-card .table-wrap, .task-block { overflow-x: auto; }
@media (max-width: 900px) {
  .dash-grid, .dash-grid.two, .task-columns, .dash-pipelines,
  .dash-grid:has(> :nth-child(5)), .task-columns:has(> :nth-child(5)), .dash-pipelines:has(> :nth-child(5)) {
    grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .dash-stats { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dash-stats:has(> :nth-child(6)):not(:has(> :nth-child(7))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-stat .val { font-size: 22px; }
}
@media (max-width: 760px) {
  .dash-grid, .dash-grid.two, .task-columns, .dash-pipelines,
  .dash-grid:has(> :nth-child(5)), .task-columns:has(> :nth-child(5)), .dash-pipelines:has(> :nth-child(5)) {
    grid-template-columns: minmax(0, 1fr); }
  .dash-stats, .dash-stats:has(> :nth-child(6)):not(:has(> :nth-child(7))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A long number (money) sits above its label instead of squeezing the label onto three lines. */
.stat-tile.long { flex-direction: column; align-items: flex-start; gap: 6px; }
.stat-tile.long .n { height: 34px; font-size: 16px; }
/* On a phone the window's name gets the full line and its buttons go underneath, instead of the
   buttons sitting on top of the name. */
@media (max-width: 600px) {
  .drawer-head { flex-wrap: wrap; row-gap: 10px; padding-right: 0; }
  .drawer-head .grow { flex: 1 0 100%; padding-right: 44px; }   /* only the name has to clear the × */
  .drawer-head > .btn { flex: 0 0 auto; }
}
/* Fields in a form grid fill their column, so a row of two lines up with the full-width field below. */
.form-grid > div > input:not([type=checkbox]):not([type=radio]), .form-grid > div > select, .form-grid > div > textarea { width: 100%; }
/* A form in a side window is one column: its fields use the window's width, not a narrow default. */
.drawer form > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
.drawer form > select, .drawer form > textarea,
.drawer form > div:not(.toolbar):not(.chips) > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
.drawer form > div:not(.toolbar):not(.chips) > select { width: 100%; max-width: 640px; }
/* Phones: an odd last tile takes the whole row instead of sitting alone on the left. */
@media (max-width: 560px) { .stat-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Phones: filter rows become an even two-column grid (search across the top), and the page's own
   buttons sit full width under the title instead of wherever they wrapped to. */
@media (max-width: 560px) {
  .filters, .rh-bar { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filters > input[type=search], .filters > input[type=text], .rh-bar > input[type=search] { grid-column: 1 / -1; max-width: none !important; width: 100%; }
  .filters > *, .rh-bar > * { width: 100%; min-width: 0; }
  .filters > .seg { grid-column: 1 / -1; margin-left: 0; justify-content: stretch; }
  .filters > .seg button { flex: 1; }
  .rh-bar > .spacer { display: none; }
  .page-head > select, .page-head > .btn, .page-head > .toolbar { width: 100%; }
}
@media (max-width: 560px) {
  .page-head > select.tri-view, .page-head > .seg { width: 100%; }
  .page-head > .seg button { flex: 1; }
  .tri-tile .l, .tri-tile .l b { white-space: normal; }   /* "Needs attention" in full, not "Needs atte…" */
}
@media (max-width: 560px) { .page-head > .btn { justify-content: center; text-align: center; } }
/* Settings forms: every field in a row the same width and height, with the label above it
   allowed to run two lines without pushing its field out of line. */
#sBody .form-grid > div > input:not([type=checkbox]):not([type=radio]), #sBody .form-grid > div > select { width: 100%; }
/* Phones: the deal window's sections become one row of pills that scrolls sideways, instead of a
   tall list above the content. */
@media (max-width: 760px) {
  .vtabs { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; overflow-x: auto; gap: 6px; border-right: 0 !important; border-bottom: 1px solid var(--line); padding: 0 0 8px !important; margin-bottom: 12px; scrollbar-width: none; width: auto !important; }
  .vtabs::-webkit-scrollbar { display: none; }
  .vtabs button { flex: none; white-space: nowrap; padding: 6px 12px !important; font-size: 13px !important; border-radius: 999px !important; }
}
/* The deal window's title: the property name reads as the title (left, heading colour) and is
   still clickable — underline on hover says so. */
#oppTitle .linklike { color: var(--heading, var(--ink)); font: inherit; text-align: left; padding: 0; background: none; border: 0; cursor: pointer; }
#oppTitle .linklike:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Phases in even rows of five (ten phases = two full rows). */
.phase-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .phase-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .phase-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Dashboard widget inside GHL: a compact sign-in at the top, so it and the note fit the widget. */
.dash-only .app.login-mode .content { justify-content: flex-start; padding-top: 24px; }
.dash-only .login-wrap { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
.dash-only .login-side { display: none; }

/* Projects board: an empty phase folds to a slim column, its name running down the side. */
.rh-cols > .tint-col.rh-slim { padding: 10px 4px !important; min-width: 0; }
.rh-cols > .tint-col.rh-slim > h2 { writing-mode: vertical-rl; transform: rotate(180deg); flex-direction: row-reverse;
  justify-content: flex-end; margin: 0 auto; min-height: 0; gap: 10px; white-space: nowrap; }
.rh-cols > .tint-col.rh-slim > h2 .count { transform: rotate(180deg); }
.rh-cols > .tint-col.rh-slim > .empty { display: none; }
/* Number tiles stay on one line and share the width, down to a tablet; then two across. */
@media (min-width: 761px) {
  .stat-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .stat-tiles.phase-tiles { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .stat-tiles { gap: 10px; } .stat-tile { padding: 10px 12px; gap: 10px; } .stat-tile .l { font-size: 12px; }
}
@media (max-width: 760px) and (min-width: 561px) { .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Junk: texts filed as spam. */
.junk-list .junk { padding: 14px 16px; margin-bottom: 10px; }
.junk-top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.junk-top .muted:last-child { margin-left: auto; }
.junk-body { margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); }
.junk-why { display: flex; gap: 8px; align-items: center; color: var(--muted); margin-bottom: 10px; flex-wrap: wrap; }
/* Hand-off list: what each task is, under its title. */
.task-desc { color: var(--ink-2); margin-top: 3px; line-height: 1.4; }
/* The team's shorthand, explained on hover. */
abbr[title] { text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 2px; cursor: help; }
.abbr-list { border-collapse: collapse; margin: 4px 0 8px; width: auto !important; }
.abbr-list th { text-align: left; padding: 4px 16px 4px 0; font-weight: 700; color: var(--heading); white-space: nowrap; }
.abbr-list td { padding: 4px 0; color: var(--ink-2); }
.pkg { margin-top: 16px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.pkg summary { cursor: pointer; font-size: 14px; }
.pkg-part { margin-top: 8px; font-size: 13px; }
.pkg-part ul { margin: 4px 0 0; padding-left: 18px; }
.pkg-part li { margin: 2px 0; }
.ck-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-top: 8px; font-size: 13px; }
.ck-item { display: block; margin: 0; font-weight: normal; cursor: pointer; }
.ck-item input { margin: 0 6px 0 0; vertical-align: -2px; }
.ck-item .small { margin-left: 22px; }
.ck-lic { font-size: 10.5px; padding: 0 6px; margin-left: 4px; color: var(--crit); background: color-mix(in srgb, var(--crit) 10%, transparent); }
@media (max-width: 640px) { .ck-list { grid-template-columns: 1fr; } }

/* A stage's plan paused while the client is in that stage, with the two ways back. */
.paused-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 8px 0; padding: 10px 12px;
  border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: 10px; background: var(--panel-2); font-size: var(--fs-small); }
.paused-bar .act { display: flex; gap: 6px; flex-wrap: wrap; }

/* The line above a Seller Lead Sheet: what happens on submit, and the paper-sheet button. */
.sheet-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 4px 0 12px; }

/* The Agreement Signed Gate: the agent's note to the TCs, and a deal an agent sees read-only. */
.gate-docs { margin: 0; padding-left: 18px; font-size: var(--fs-small); }
.gate-note { white-space: pre-wrap; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: 10px; background: var(--panel-2); font-size: var(--fs-small); }
.readonly-bar { margin: 6px 0 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); font-size: var(--fs-small); }
.opp-stage-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.opp-stage-row > .small { flex: 1 1 260px; }
.fix-select { width: auto; font-size: var(--fs-small); padding: 4px 8px; border-radius: 8px; }
/* The waiting bar for Claude's reads (ui.js progressBar). */
.progress-panel { position: fixed; top: 14px; z-index: 1200; box-sizing: border-box; padding: 12px 14px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow-pop); transition: opacity .25s; }
.progress-panel.leaving { opacity: 0; }
.progress-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.progress-label { font-weight: 600; }
.progress-time, .progress-hint { font-size: var(--fs-small); color: var(--muted); }
.progress-hint { margin-top: 6px; }
.progress-track { height: 8px; margin-top: 8px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.progress-fill { height: 100%; width: 0; border-radius: 99px; background: var(--brand); transition: width .5s linear; }
.progress-panel.failed { border-color: var(--crit); }
.progress-panel.failed .progress-track { display: none; }
.progress-panel.failed .progress-label { color: var(--crit); }
.progress-x { margin-left: auto; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--muted); }
/* What's next? (views/next.js) */
.next-pick { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.next-pick input { flex: 1 1 220px; }
.next-pick select { flex: 2 1 320px; }
.next-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.next-head h2 { margin: 0 0 2px; font-size: var(--fs-h2); }
.next-sec h3 { margin: 0 0 8px; font-size: 15px; }
.next-list { margin: 0; padding-left: 20px; }
.next-list li { margin: 0 0 8px; line-height: 1.4; }
.next-list li.crit .next-what { color: var(--crit); }
.next-open { text-align: left; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.next-open:hover .next-what { text-decoration: underline; }
.next-meta { font-size: var(--fs-small); color: var(--muted); }
.next-due.late { color: var(--crit); }
/* Phone with its type (Mobile / Work / Landline / Home), required together. */
.phone-row { display: flex; gap: 6px; }
.phone-row select, .form-grid.vertical .phone-row select { flex: 0 0 auto; width: auto; }
.phone-row input { flex: 1 1 auto; min-width: 0; }

/* Deal panel: contact details, additional contacts, linked records, payments (dealPanel.js) */
.dp-h { font-size: 14px; margin: 16px 0 6px; display: flex; align-items: baseline; gap: 8px; }
.dp-h:first-child { margin-top: 0; }
.dp-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dp-row .grow { flex: 1; min-width: 0; }
.dp-search { width: 100%; max-width: 420px; }
.warn-text { color: var(--warn); }
.danger-text { color: var(--crit); }
td.num, th.num { text-align: right; white-space: nowrap; }
#oContactBox { margin: 14px 0 6px; }
.dp-pickrow { display: flex; gap: 8px; align-items: center; max-width: 520px; }
.dp-pickrow .dp-search { flex: 1; min-width: 0; }
.inline-select { display: inline-block; width: auto; max-width: 260px; padding: 2px 6px; font-size: 13px; height: auto; }

/* Change a task's date from its Triage card: the due chip is the button (15 Oct). */
.due-btn { display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--muted); border-radius: 999px; }
.due-btn .ic { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .55; }
.due-btn:hover .due { box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent); }
.due-btn:hover .ic { opacity: 1; color: var(--ink); }
.redate-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 16px 0 6px; }
.redate-head [data-all] { margin-left: auto; }
.redate-list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.dialog-fields .redate-step { display: grid; grid-template-columns: auto 1fr auto 150px; gap: 10px; align-items: center; margin: 0; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink); }
.dialog-fields .redate-step input { width: auto; padding: 0; margin: 0; }
.redate-step .nm { min-width: 0; }
.dialog-fields .redate-step:hover { background: var(--muted-bg); }
.dialog-fields .redate-step.off { opacity: .55; cursor: not-allowed; }
.redate-step .when { color: var(--muted); white-space: nowrap; text-align: right; }
.redate-step .to { color: var(--brand-deep); font-weight: 600; }
/* Comments on a deal (15 Oct): the deal's tab and the page with every deal's comments. */
.cm-thread { display: flex; flex-direction: column; gap: 4px; }
.cm { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.cm-thread .cm:first-child, .cm-deal-head + .cm { border-top: 0; }
.cm-av { --oc: #64748B; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--font-ui); color: #fff; background: var(--oc); }
.cm-main { min-width: 0; flex: 1; }
.cm-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cm-head b { color: var(--heading); font-size: 14px; }
.cm-body { font-size: 14px; line-height: 1.5; margin-top: 2px; overflow-wrap: anywhere; }
.cm-me { background: color-mix(in srgb, var(--warn-bg) 55%, transparent); border-radius: 10px; padding-left: 8px; padding-right: 8px; }
.cm-form { margin-top: 12px; }
.cm-form textarea { width: 100%; min-height: 70px; }
.cm-form .toolbar { margin-top: 6px; }
.cm-page { display: flex; flex-direction: column; gap: 12px; }
.cm-deal { padding: 14px 18px; }
.cm-deal-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.cm-deal-head .linklike b { font-size: 16px; color: var(--heading); }
/* The property on top of every Triage card (15 Oct). */
.item .card-prop { margin: -2px 26px 6px 0; font-weight: 700; font-size: 15px; color: var(--heading); line-height: 1.3; }
.item .card-prop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.item .card-prop .owner { flex: none; font-size: var(--fs-small); }
.item .card-prop > .linklike, .item .card-prop > span:first-child { min-width: 0; }
.item .card-prop .linklike, .item .card-prop > span { display: inline-flex; align-items: center; gap: 6px; color: inherit; font: inherit; text-align: left; }
.item .card-prop .ic { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--brand-deep); stroke-width: 1.6; }
.item .card-prop .linklike:hover span { text-decoration: underline; }

/* Forms page: an appointment form can be filled in online or printed (15 Oct). */
.fm-card.fm-two { cursor: default; }
.fm-card .fm-acts { display: flex; gap: 6px; flex: none; }
/* On a phone the buttons go under the name rather than past the edge of the screen. */
@media (max-width: 560px) { .fm-card.fm-two { flex-wrap: wrap; } .fm-card.fm-two .fm-acts { width: 100%; justify-content: flex-end; } }
/* Money on this client folds away (15 Oct). */
.money-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.money-fold > summary::-webkit-details-marker { display: none; }
.money-fold > summary h2 { margin: 0 0 8px; display: inline-flex; align-items: center; gap: 8px; }
.money-fold > summary h2::before { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; margin-right: 4px; }
.money-fold[open] > summary h2::before { transform: rotate(45deg); margin-top: -4px; }
.money-fold[open] .money-when-folded { display: none; }

.dialog-fields .redate-step .redate-date { width: 150px; padding: 5px 8px; font-size: 13px; }
.dialog-fields .redate-step .redate-date:disabled { opacity: .45; }
.dialog:has(.redate-list) { width: min(680px, 100%); }
/* What's next? as tiles (15 Oct): red needs you now, amber is waiting on somebody, green is on its own. */
.nx-legend { display: flex; gap: 14px; font-size: 13px; color: var(--muted); align-items: center; margin-right: 6px; }
.nx-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.nx-legend i.red { background: var(--crit); } .nx-legend i.amber { background: #D99A00; } .nx-legend i.green { background: var(--ok); }
.nx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.nx-tile { --h: var(--ok); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--panel); border: 1px solid transparent; border-radius: 14px; box-shadow: 0 1px 3px rgba(15,23,42,.08); padding: 14px 16px 14px 20px; transition: transform .12s, box-shadow .12s; }
.nx-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.nx-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--h); }
.nx-tile.red { --h: var(--crit); } .nx-tile.amber { --h: #D99A00; } .nx-tile.green { --h: var(--ok); }
.nx-top { display: flex; align-items: flex-start; gap: 8px; }
.nx-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nx-name b { font-size: 16px; color: var(--heading); }
.nx-name span { font-size: 13px; color: var(--muted); }
.nx-health { flex: none; font: 700 11px var(--font-ui); padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--h) 14%, var(--panel)); color: var(--h); white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.nx-tile.amber .nx-health { color: var(--warn); }
.nx-track { display: flex; gap: 3px; margin: 12px 0 4px; }
.nx-track span { flex: 1; height: 6px; border-radius: 3px; background: var(--muted-bg); }
.nx-track span.done { background: color-mix(in srgb, var(--h) 45%, var(--panel)); } .nx-track span.now { background: var(--h); }
.nx-stage { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.nx-next { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px; display: flex; gap: 8px; align-items: flex-start; }
.nx-next .i { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--ink-2); }
.nx-next > span { flex: 1; min-width: 0; } .nx-next b { color: var(--heading); }
.nx-chip { font: 600 11.5px var(--font-ui); padding: 2px 8px; border-radius: 999px; background: var(--muted-bg); color: var(--ink-2); white-space: nowrap; }
.nx-chip.late { background: var(--crit-bg); color: var(--crit); } .nx-chip.today { background: var(--warn-bg); color: var(--warn); }
.nx-counts { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.nx-counts:empty { display: none; }
.nx-latest { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--line); font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.nx-latest li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-latest li b { color: var(--heading); font-weight: 600; }
.nx-latest .nx-said { color: var(--ink-2); }
.nx-latest.big { border-top: 0; padding-top: 0; margin: 0 0 12px; font-size: 13.5px; gap: 8px; }
.nx-latest.big li { white-space: normal; }
.nx-banner { border-radius: 14px; padding: 14px 18px; display: flex; gap: 12px; align-items: center; border: 1px solid; margin-bottom: 14px; }
.nx-banner .i { width: 20px; height: 20px; flex: none; }
.nx-banner .big { font-weight: 700; font-size: 16px; }
.nx-banner.red { background: var(--crit-bg); border-color: var(--crit-line); color: var(--crit); }
.nx-banner.amber { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.nx-banner.green { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.nx-banner .small { color: var(--ink-2); }
.nx-stagebar { display: flex; background: var(--panel); border-radius: 14px; padding: 14px 10px; box-shadow: 0 1px 3px rgba(15,23,42,.08); margin-bottom: 14px; overflow-x: auto; }
.nx-stagebar .s { flex: 1 0 90px; text-align: center; font-size: 12px; color: var(--muted); position: relative; padding-top: 22px; }
.nx-stagebar .s::before { content: ''; position: absolute; top: 6px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--muted-bg); transform: translateX(-50%); border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line); z-index: 1; }
.nx-stagebar .s::after { content: ''; position: absolute; top: 11px; left: -50%; right: 50%; height: 3px; background: var(--muted-bg); }
.nx-stagebar .s:first-child::after { display: none; }
.nx-stagebar .s.done::before { background: var(--ok); box-shadow: none; } .nx-stagebar .s.done::after, .nx-stagebar .s.now::after { background: var(--ok); }
.nx-stagebar .s.now { color: var(--heading); font-weight: 700; } .nx-stagebar .s.now::before { background: var(--brand); width: 16px; height: 16px; top: 4px; box-shadow: 0 0 0 4px var(--brand-soft); }
.nx-detail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .nx-detail { grid-template-columns: minmax(0, 1fr); } }
.nx-col { display: flex; flex-direction: column; gap: 16px; }
.nx-card { background: var(--panel); border-radius: 14px; box-shadow: 0 1px 3px rgba(15,23,42,.08); padding: 16px 18px; }
.nx-card h3 { font-family: var(--font-display); font-size: 18px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.nx-card h3 .n { font: 700 12px var(--font-ui); background: var(--muted-bg); border-radius: 999px; padding: 2px 8px; }
.nx-row { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 9px 4px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; border-radius: 8px; }
.nx-card h3 + .nx-row { border-top: 0; }
.nx-row:not(.static):hover { background: var(--muted-bg); }
.nx-row.static { cursor: default; font-size: 14px; }
.nx-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.nx-ic .i { width: 16px; height: 16px; }
.nx-ic.call { background: #E5EEFF; color: #2E6FDB; } .nx-ic.sms { background: #E4F5EA; color: #1B7F4B; } .nx-ic.todo { background: var(--muted-bg); color: var(--ink-2); }
.nx-ic.email { background: #F3E8FF; color: #7C3AED; } .nx-ic.wait { background: var(--warn-bg); color: var(--warn); } .nx-ic.crit { background: var(--crit-bg); color: var(--crit); }
.nx-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nx-row-main b { color: var(--heading); font-weight: 600; font-size: 14.5px; }
.nx-row-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }

/* The Assistant (15 Oct). */
.as-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; height: calc(100vh - 220px); min-height: 520px; }
@media (max-width: 860px) { .as-grid { grid-template-columns: minmax(0, 1fr); height: auto; } }
.as-side { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.as-side .lbl { font: 700 12px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.as-side select { width: 100%; }
.as-qa { display: flex; gap: 8px; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--panel-2); font: inherit; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.as-qa:hover { border-color: var(--brand-line); color: var(--heading); }
.as-chat { display: flex; flex-direction: column; padding: 0; min-height: 0; }
.as-msgs { flex: 1; overflow: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; min-height: 300px; }
.as-empty { margin: auto; max-width: 520px; text-align: center; font-size: 14px; line-height: 1.6; }
.as-b { max-width: 80%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.as-b.me { align-self: flex-end; background: var(--brand); color: var(--brand-ink); border-bottom-right-radius: 4px; }
.as-b.ai { align-self: flex-start; background: var(--muted-bg); color: var(--ink); border-bottom-left-radius: 4px; }
.as-copy { display: block; margin-top: 6px; }
.as-act { border: 1px solid #D8C8FF; background: color-mix(in srgb, #7C3AED 6%, var(--panel)); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.as-act .h { font-weight: 700; color: #6D28D9; font-size: 13px; display: flex; gap: 6px; align-items: center; }
.as-act ul { margin: 6px 0 10px; padding-left: 18px; font-size: 13.5px; }
.as-act.done { color: var(--ok); font-weight: 600; font-size: 13px; display: flex; gap: 6px; align-items: center; }
.as-draft { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-size: 13.5px; white-space: pre-wrap; }
.as-acts { display: flex; gap: 8px; }
.as-compose { border-top: 1px solid var(--line); padding: 12px 16px; display: flex; gap: 10px; align-items: flex-end; }
.as-compose textarea { flex: 1; resize: vertical; min-height: 44px; }
.as-typing { display: flex; gap: 4px; padding: 14px; }
.as-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: as-dot 1s infinite ease-in-out; }
.as-typing span:nth-child(2) { animation-delay: .15s; } .as-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes as-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
/* The deal drawer's actions as icons, named on hover (15 Oct). */
.dr-icons { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dr-ib { position: relative; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); display: inline-grid; place-items: center; color: var(--ink-2); cursor: pointer; padding: 0; text-decoration: none; }
.dr-ib:hover, .dr-ib:focus-visible { background: var(--muted-bg); color: var(--heading); }
.dr-ib.ai { background: linear-gradient(135deg, #F3E8FF, #E5EEFF); border-color: #D8C8FF; color: #6D28D9; }
.dr-ib .i { width: 17px; height: 17px; }
.dr-ib[data-tip]:hover::after, .dr-ib[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; top: 42px; left: 50%; transform: translateX(-50%); background: #1F2328; color: #fff; font: 500 12px var(--font-ui); padding: 6px 9px; border-radius: 7px; white-space: nowrap; z-index: 50; pointer-events: none; }
.dr-sep { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
/* Every tab in the top menu inside GHL has its own border, so each reads as something to click
   (15 Oct). The open one is filled in the brand colour's light shade. */
.embedded .topbar .nav { gap: 6px; }
.embedded .topbar .nav a { border: 1px solid var(--line); background: var(--panel); box-shadow: 0 1px 2px rgba(31,35,40,.04); }
.embedded .topbar .nav a:hover { border-color: var(--brand-line); background: var(--panel); color: var(--heading); }
.embedded .topbar .nav a.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); box-shadow: none; }
.embedded .topbar .nav a[data-view=newlead] { border-color: var(--brand-line); }

/* Inside GoHighLevel the search is a magnifier and the freshness is just the dot (15 Oct). */
.search-toggle { display: none; }
.embedded .search-toggle { display: inline-grid; }
.embedded .topbar .search { display: none; }
.embedded .topbar.search-open .search { display: block; position: absolute; top: calc(100% + 6px); right: 20px; width: min(480px, calc(100vw - 40px)); z-index: 45;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 8px; max-width: none; }
.embedded .topbar.search-open .search-results { top: 52px; }
.embedded .topbar .updated, .embedded .topbar .updated[style] { display: inline-flex !important; font-size: 0; gap: 0; cursor: help; padding: 0 4px; }
.embedded .topbar .updated .dot { width: 10px; height: 10px; }

/* New lead, on Triage under the greeting (15 Oct): one dashed bar instead of a menu tab. */
.nl-strip { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 16px; padding: 14px 18px; border: 2px dashed var(--brand-line); border-radius: 14px;
  background: color-mix(in srgb, var(--brand-soft) 45%, var(--panel)); color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; transition: background .12s, border-color .12s; }
.nl-strip:hover { border-color: var(--brand); background: var(--brand-soft); }
.nl-strip .plus { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font: 700 20px var(--font-ui); }
.nl-strip b { color: var(--brand-deep); }
.nl-strip .go { margin-left: auto; font-weight: 600; color: var(--brand-deep); white-space: nowrap; }
@media (max-width: 640px) { .nl-strip .go { display: none; } }
/* Settings › Diagnostics › Claude (AI): connected / works, or not. */
#claudeBox .pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; margin-right: 4px; }
#claudeBox .pill.success { background: var(--ok-bg); color: var(--ok); }
#claudeBox .pill.danger { background: var(--crit-bg, #FDECEC); color: var(--crit); }

/* 19 Oct (Denise): Dashboard numbers, slices, bars and rows open what is behind them. */
.dash [data-go], .dash .task-item.link { cursor: pointer; }
.dash-stat[data-go] { transition: transform .12s ease, box-shadow .12s ease; }
.dash-stat[data-go]:hover, .dash-stat[data-go]:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(31,35,40,.10); outline: none; }
.dash .chart-legend li[data-go], .dash .bar-row[data-go] { border-radius: 6px; padding: 2px 4px; margin: 0 -4px; }
.dash .chart-legend li[data-go]:hover, .dash .bar-row[data-go]:hover, .dash .task-item.link:hover { background: var(--panel-2); }
.dash .p-card h3 .linklike { font: inherit; color: inherit; }
.dash .p-card h3 .linklike:hover { text-decoration: underline; }

/* ---- Deal drawer look (19 Oct: "any way to enhance the look of the opportunity drawer?") ---- */
.opp-head { margin: -4px -4px 0; padding: 4px 4px 14px; border-bottom: 1px solid var(--line); }
.opp-head h2 { margin: 0 44px 2px 0; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
.opp-head .sub { font-size: 14px; }
.opp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 320px; min-width: 0; }
.opp-chips .chip { font-size: 12.5px; padding: 3px 10px; line-height: 20px; color: var(--ink-2); }
.opp-chips .chip.stage { background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; }
.opp-chips .chip.quiet { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.opp-chips .chip.owner { background: none; padding: 0; }
.opp-chips .opp-value { font-size: 12.5px; line-height: 20px; padding: 3px 10px; border-radius: 999px; font-weight: 700; color: var(--ok, #16A34A); background: color-mix(in srgb, var(--ok, #16A34A) 10%, var(--panel)); }
.opp-layout { margin-top: 18px; }
@media (min-width: 901px) { .opp-layout { grid-template-columns: 200px 1fr; gap: 24px; } .vtabs { border-right: 0; padding-right: 0; gap: 1px; } }
.vtabs .vt-group { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 12px 12px 4px; }
.vtabs .vt-group:first-child { padding-top: 2px; }
.vtabs button { font-size: 14px; font-weight: 500; padding: 7px 12px; color: var(--ink-2); border-left: 3px solid transparent; border-radius: 0 8px 8px 0; }
.vtabs button.on { font-weight: 600; border-left-color: var(--brand); }
#oBody > .fields-v, #oBody form > .form-grid { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px 18px 6px; box-shadow: 0 1px 2px rgba(31,35,40,.04); }
#oBody > .fields-v + .fields-v, #oBody > #oContactBox + .fields-v { margin-top: 14px; }
#oBody .fields-v .fv:last-child, #oBody .fields-v .fv:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
#oBody .fields-v .fv .v { color: var(--heading); font-weight: 500; }
#oBody .fields-v .fv .v:has(> .muted:only-child), #oBody .fields-v .fv .v.empty-v { color: var(--muted); font-weight: 400; }
#oBody > h3 { font-size: 11px !important; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 20px 0 8px !important; }
#oContactBox:not(:empty) { margin-top: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; box-shadow: 0 1px 2px rgba(31,35,40,.04); }
#oBody > .toolbar { border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 900px) { .vtabs .vt-group { display: none; } .vtabs button { border-left: 0; border-radius: 8px; } #oBody > .fields-v, #oBody form > .form-grid, #oContactBox:not(:empty) { padding-left: 12px; padding-right: 12px; } }

/* What's next as a board (19 Oct): Needs you · Waiting · On track. */
.nx-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.nx-col { --h: var(--ok); background: color-mix(in srgb, var(--h) 5%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--h) 18%, var(--line)); border-radius: 14px; padding: 12px; min-width: 0; }
.nx-col.red { --h: var(--crit); } .nx-col.amber { --h: #D99A00; }
.nx-col h3 { display: flex; align-items: center; gap: 8px; margin: 2px 4px 12px; font: 700 12px var(--font-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--h); }
.nx-col h3 i { width: 9px; height: 9px; border-radius: 50%; background: var(--h); }
.nx-col h3 .count { margin-left: auto; background: color-mix(in srgb, var(--h) 14%, var(--panel)); color: var(--h); border-radius: 999px; padding: 1px 9px; font-size: 12px; letter-spacing: 0; }
.nx-col-body { display: flex; flex-direction: column; gap: 10px; }
.nx-col .nx-none { color: var(--muted); font-size: var(--fs-small); text-align: center; padding: 14px 0; }
@media (max-width: 1100px) { .nx-board { grid-template-columns: 1fr; } }

/* Dashboard › Tasks as one grouped table (19 Oct: "looks messy"). */
.dash-tasks table { width: 100%; table-layout: fixed; }
.dash-tasks thead th:nth-child(1) { width: 92px; } .dash-tasks thead th:nth-child(3) { width: 18%; } .dash-tasks thead th:nth-child(4) { width: 16%; }
.dash-tasks thead th:nth-child(5) { width: 96px; } .dash-tasks thead th:nth-child(6) { width: 150px; }
.dash-tasks td { vertical-align: middle; padding-top: 9px; padding-bottom: 9px; }
.dash-tasks .t-title { font-weight: 500; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-tasks .t-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.dash-tasks .c-prop { color: var(--heading); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-tasks .c-client { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-tasks .due { font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.dash-tasks .due.late { color: var(--crit); } .dash-tasks .due.none { color: var(--muted); font-weight: 400; }
.dash-tasks .t-head th { background: var(--panel-2); text-align: left; font: 700 12px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: 10px 12px; border-top: 1px solid var(--line); }
.dash-tasks .t-head .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--muted); vertical-align: 1px; }
.dash-tasks .t-group.critical .t-head .dot { background: var(--crit); } .dash-tasks .t-group.warning .t-head .dot { background: var(--warn); } .dash-tasks .t-group.ok .t-head .dot { background: var(--ok); }
.dash-tasks .t-head .tag { margin-left: 6px; letter-spacing: 0; }
.dash-tasks .t-group.done .t-head .dot { background: var(--ok, #1B7F4B); } .dash-tasks .due.done { color: var(--ok, #1B7F4B); font-weight: 600; } .dash-stat .val.done, #dashByCoord td.is-done { color: var(--ok, #1B7F4B); }
.dash-tasks .t-more td { text-align: center; padding: 8px; }
.dash-tasks td.none { color: var(--muted); text-align: center; padding: 14px; }
@media (max-width: 760px) { .dash-tasks thead th:nth-child(4), .dash-tasks td.c-client, .dash-tasks thead th:nth-child(5), .dash-tasks td.c-type { display: none; } .dash-tasks thead th:nth-child(3) { width: 30%; } .dash-tasks thead th:nth-child(6) { width: 110px; } }

/* New contact: Lite or Full (19 Oct). */
.lead-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.lead-pick { display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; cursor: pointer; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); transition: border-color .12s, box-shadow .12s, transform .12s; }
.lead-pick b { font-size: 15px; color: var(--heading); }
.lead-pick span { font-size: var(--fs-small); color: var(--muted); }
.lead-pick:hover, .lead-pick:focus-visible { border-color: var(--brand); box-shadow: 0 4px 12px rgba(31,35,40,.08); transform: translateY(-1px); outline: none; }
.lead-pick:active, .lead-pick.chosen { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); }

/* 1.01 Agreement Signed cards: are both agreements signed? (20 Oct) */
.card .signed-row { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 2px; font-size: 12.5px; font-weight: 600; }
.card .signed-row .yes { color: var(--ok); } .card .signed-row .no { color: var(--crit); }

/* Deal drawer (20 Oct): Listing Details in two sections; every file in one list on Documents; the tier. */
#oBody .fields-v > .fsection, .fsection { grid-column: 1 / -1; font: 700 12px var(--font-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--heading); margin: 14px 0 2px; padding-top: 10px; border-top: 2px solid var(--line); }
#oBody .fields-v > .fsection:first-child { margin-top: 2px; padding-top: 4px; border-top: 0; }
.doc-box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(31,35,40,.04); }
.doc-head { margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.doc-bulk { display: flex; align-items: center; gap: 12px; margin: 2px 0 6px; min-height: 30px; }
.doc-bulk label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.doc-list .doc-pick { margin: 0 8px 0 0; vertical-align: middle; }
.doc-head #oListingForms { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--line); }
.doc-list li:last-child { border-bottom: 0; }
.doc-list .chip { font-size: 11.5px; }
.chip.tier { background: color-mix(in srgb, #7C3AED 12%, var(--panel)); color: #6D28D9; font-weight: 700; }
.card .tier-row { margin: 6px 0 0; }
/* Deal drawer › Tasks: sort and group (20 Oct). */
.task-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0 0 10px; font-size: var(--fs-small); color: var(--muted); }
.task-controls select { margin-left: 6px; font-size: var(--fs-small); padding: 4px 8px; }
.task-group { font: 700 12px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.task-group:first-of-type, .task-fold:first-of-type > .task-group { margin-top: 4px; }
summary.task-group { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
summary.task-group::-webkit-details-marker { display: none; }
summary.task-group::before { content: '\25B8'; font-size: 11px; color: var(--muted); transition: transform .15s; }
.task-fold[open] > summary.task-group::before { transform: rotate(90deg); }
.doc-add { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.doc-add label { font-size: var(--fs-small); color: var(--muted); }
.doc-add select { margin-left: 6px; }
.doc-add .small { flex-basis: 100%; }

/* Who gets our emails (29 Oct): one row per person on the client, ticked or not. */
.ew { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.ew .k { font-size: 12px; color: var(--muted); font-weight: 500; }
.ew-row { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; cursor: pointer; }
.ew-row input { margin-top: 3px; }
.ew-row.muted { cursor: default; }

/* A dashboard figure never breaks across two lines (31 Oct: "$1,975,00 / 0"); money is shortened to fit. */
.dash-stat { min-width: 0; }
.dash-stat .val { white-space: nowrap; }

/* Log an activity › Who was it with? (2 Nov): matching people as full-width rows, easy to tap. */
.act-who { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 300px; overflow-y: auto; }
.act-who .chip { display: block; width: 100%; text-align: left; font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); cursor: pointer; color: var(--text); }
.act-who .chip:hover, .act-who .chip:focus-visible { border-color: var(--brand); background: var(--brand-soft); }

/* Downsize Allies has no Book appointment (2 Nov): it books SREG's calendars, and inside
   GoHighLevel there is no switch to SREG, so the page was a dead end there. */
:root[data-brand="da"] #nav a[data-view="scheduling"] { display: none !important; }