/* Argent operator UI — the console agencies and platform staff both work in.
   Redesigned 28 Aug 2026 against the founder's reference: KPI cards, panels headed by
   a mono micro-label, a signal feed, and the assistant as a docked widget.

   LIGHT IS THE DEFAULT (founder). The reference was a dark mock, but the product this
   sits beside — the public site — is light, and an operator console that inverts the
   brand on sign-in is jarring. Dark is kept as a real, complete theme rather than a
   half-supported afterthought: every colour below is defined in both, and the accent
   is a single `--accent-rgb` triple so one swap moves every tint that derives from it. */
:root {
  color-scheme: light;

  --accent-rgb: 63, 98, 18;      /* the public site's green-deep */

  --bg:        #f6f9f2;
  --bg-2:      #eef3e7;          /* the rail behind the sidebar */
  --surface:   #ffffff;
  --surface-2: #f1f5ec;
  --line:      #e0e7d8;
  --line-2:    #cfdcc2;

  --ink:       #1b2314;
  --muted:     #5a6b50;
  --faint:     #7d8d72;

  --teal:      #3f6212;
  --teal-ink:  #2e4a10;
  --teal-soft: #e8f2d9;
  --good:      #0f7a4a;
  --good-soft: #e2f2e9;
  --warn:      #8a6410;
  --warn-soft: #fbf1d9;
  --bad:       #a8302b;
  --bad-soft:  #f9e4e2;
  --clay:      #b4552d;
  --clay-ink:  #94431f;
  --clay-soft: #f7e9e0;

  --topbar-bg: rgba(246, 249, 242, .88);
  --radius: 12px;
  --shadow: 0 1px 2px rgba(27, 35, 20, .05), 0 8px 24px -12px rgba(27, 35, 20, .12);
  --shadow-pop: 0 24px 60px -18px rgba(27, 35, 20, .3);
  /* Micro-labels are mono and tracked-out; it is the reference's whole voice. */
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* The dark theme, complete rather than approximate: the same design, re-grounded on
   the near-black green the reference used. Applied when the device asks for dark and
   the user has not pinned light, or when dark is pinned outright. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --accent-rgb: 61, 220, 132;

    --bg:        #070b09;
    --bg-2:      #0a100c;
    --surface:   #0e1611;
    --surface-2: #131d17;
    --line:      #1b2a21;
    --line-2:    #24382c;

    --ink:       #dfeae3;
    --muted:     #8ca196;
    --faint:     #63786c;

    --teal:      #3ddc84;
    --teal-ink:  #6ff0a8;
    --teal-soft: #102a1b;
    --good:      #3ddc84;
    --good-soft: #0f2418;
    --warn:      #e8b046;
    --warn-soft: #2a2110;
    --bad:       #f0685f;
    --bad-soft:  #2c1512;
    --clay:      #e8b046;
    --clay-ink:  #f0c469;
    --clay-soft: #2a2110;

    --topbar-bg: rgba(7, 11, 9, .86);
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px -12px rgba(0, 0, 0, .6);
    --shadow-pop: 0 24px 70px -20px rgba(0, 0, 0, .8);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --accent-rgb: 61, 220, 132;
  --bg: #070b09; --bg-2: #0a100c; --surface: #0e1611; --surface-2: #131d17;
  --line: #1b2a21; --line-2: #24382c;
  --ink: #dfeae3; --muted: #8ca196; --faint: #63786c;
  --teal: #3ddc84; --teal-ink: #6ff0a8; --teal-soft: #102a1b;
  --good: #3ddc84; --good-soft: #0f2418;
  --warn: #e8b046; --warn-soft: #2a2110;
  --bad: #f0685f; --bad-soft: #2c1512;
  --clay: #e8b046; --clay-ink: #f0c469; --clay-soft: #2a2110;
  --topbar-bg: rgba(7, 11, 9, .86);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px -12px rgba(0, 0, 0, .6);
  --shadow-pop: 0 24px 70px -20px rgba(0, 0, 0, .8);
}

:root[data-theme='dark'] {
  --bg: #101613; --surface: #19201C; --surface-2: #212A24; --ink: #E7ECE8;
  --muted: #9AA9A1; --faint: #78877F; --line: #2A342E;
  --teal: #4FB3A0; --teal-ink: #6FC7B6; --teal-soft: #15302A;
  --clay: #D98757; --clay-ink: #E39A6F; --clay-soft: #34231A;
  --good: #4FBF8B; --good-soft: #142B20; --warn: #D6B45C; --warn-soft: #2E2714;
  --bad: #E58079; --bad-soft: #2F1917;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--teal-ink); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
.mono, code { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; font-size: 0.86em; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- shell -- */
#app { min-height: 100%; }
.shell { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; background: var(--bg); }
@media (max-width: 900px) { .shell { grid-template-columns: 1fr; } }

.sidebar {
  background: var(--bg-2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px; padding: 18px 12px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* Phone: the nav becomes a compact scrolling bar so the work starts at the top
   of the screen — a field agent should not scroll past ten links to reach the
   capture form. */
@media (max-width: 900px) {
  .sidebar {
    position: sticky; top: 0; z-index: 20; height: auto;
    flex-direction: row; align-items: center; gap: 6px;
    padding: 8px 10px; overflow-x: auto; overflow-y: hidden;
    border-right: none; border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .brand { padding: 0 10px 0 2px; }
  .brand span { display: none; }
  #nav { display: flex; gap: 6px; }
  .nav-item { width: auto; white-space: nowrap; padding: 6px 10px; }
  .nav-sep { display: none; }
  .main { padding: 16px 14px 80px; }
  .page-head h1 { font-size: 1.2rem; }
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 20px; }
.brand b { font-size: 1.02rem; letter-spacing: -0.01em; display: block; line-height: 1.15; }
.brand span {
  font-family: var(--mono); font-size: 0.62rem; color: var(--faint);
  text-transform: uppercase; letter-spacing: 0.14em; display: block; margin-top: 2px;
}
/* The mark: a lime diamond in a soft ring, echoing the public site's logo. */
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, rgba(var(--accent-rgb), .35), rgba(var(--accent-rgb), .07));
  border: 1px solid rgba(var(--accent-rgb), .3);
  display: grid; place-items: center;
}
.brand-mark i {
  width: 10px; height: 10px; background: var(--teal); border-radius: 3px;
  transform: rotate(45deg); display: block;
}
/* "WORKSPACE" — the rail's one section label. */
.nav-label {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint); padding: 2px 10px 8px;
}
.nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; border-radius: 9px; color: var(--muted); font-size: 0.92rem;
  text-decoration: none; border: 1px solid transparent; background: none;
  width: 100%; cursor: pointer; text-align: left;
  transition: background .15s ease, color .15s ease;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item[aria-current='page'] {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .04));
  border-color: rgba(var(--accent-rgb), .22); color: var(--teal-ink); font-weight: 600;
}
.nav-count {
  font-size: 0.72rem; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); font-variant-numeric: tabular-nums;
}
.nav-item[aria-current='page'] .nav-count { background: var(--surface); }
.nav-count.alert { background: var(--bad-soft); color: var(--bad); }
.nav-item[aria-current='page'] .nav-count { background: rgba(var(--accent-rgb), .16); color: var(--teal-ink); }
.nav-sep { height: 1px; background: var(--line); margin: 10px 4px; }
/* Room for the assistant dock, which is fixed over this corner. Identity moved to the
   top bar, but the dock still overlays the rail's last nav item without this. */
body.has-dock .sidebar { padding-bottom: 88px; }
@media (max-width: 900px) { body.has-dock .sidebar { padding-bottom: 8px; } }

.main { padding: 0 0 64px; min-width: 0; background: var(--bg); }
.main > * { margin-left: 28px; margin-right: 28px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; margin-top: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 1.62rem; margin: 0 0 4px; letter-spacing: -0.02em; font-weight: 600; }
.page-head p { margin: 0; color: var(--muted); font-size: 0.9rem; max-width: 68ch; }

/* --------------------------------------------------------------- pieces -- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 16px 18px; }
.grid { display: grid; gap: 14px; }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .cols-4, .cols-3, .cols-2 { grid-template-columns: 1fr; } }

.stat { padding: 14px 16px; }
.stat .label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }
.stat .value { font-size: 1.9rem; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat .sub { font-size: 0.8rem; color: var(--muted); }
.stat.attention { border-color: var(--warn); }
.stat.attention .value { color: var(--warn); }
.stat.critical { border-color: var(--bad); }
.stat.critical .value { color: var(--bad); }

.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; background: var(--surface-2); color: var(--muted); white-space: nowrap;
}
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.teal { background: var(--teal-soft); color: var(--teal-ink); }
.pill.clay { background: var(--clay-soft); color: var(--clay-ink); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer; font-size: 0.88rem; font-weight: 500;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn.primary:hover { background: var(--teal-ink); }
.btn.danger { color: var(--bad); border-color: var(--bad); background: transparent; }
.btn.danger:hover { background: var(--bad-soft); }
.btn.small { padding: 4px 9px; font-size: 0.8rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

input[type='text'], input[type='email'], input[type='password'], input[type='number'], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink);
}
textarea { resize: vertical; min-height: 72px; }
label.field { display: block; margin-bottom: 12px; }
label.field span { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 4px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); font-weight: 600; white-space: nowrap; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.row-click { cursor: pointer; }

.empty { padding: 40px 20px; text-align: center; color: var(--faint); }
.empty strong { display: block; color: var(--muted); margin-bottom: 4px; }

/* --------------------------------------------------------------- inbox --- */
.split { display: grid; grid-template-columns: 340px 1fr; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }
.conv-list { max-height: calc(100vh - 190px); overflow-y: auto; }
.conv-item { padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer; display: grid; gap: 3px; }
.conv-item:hover { background: var(--surface-2); }
.conv-item[aria-selected='true'] { background: var(--teal-soft); }
.conv-item .top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.conv-item .who { font-weight: 600; font-size: 0.9rem; }
.conv-item .when { font-size: 0.72rem; color: var(--faint); white-space: nowrap; }
.conv-item .preview { font-size: 0.82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.thread { display: flex; flex-direction: column; gap: 10px; padding: 16px; max-height: 52vh; overflow-y: auto; }
.msg { max-width: 74%; padding: 9px 12px; border-radius: 12px; font-size: 0.9rem; }
.msg.inbound { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 4px; }
.msg.outbound { align-self: flex-end; background: var(--teal-soft); color: var(--teal-ink); border-bottom-right-radius: 4px; }
.msg .meta { font-size: 0.7rem; color: var(--faint); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.msg.outbound .meta { color: var(--teal-ink); opacity: 0.75; }
.composer { border-top: 1px solid var(--line); padding: 12px 16px; display: grid; gap: 8px; }
.window-note { font-size: 0.8rem; padding: 8px 12px; border-radius: 8px; }
.window-note.open { background: var(--good-soft); color: var(--good); }
.window-note.closed { background: var(--warn-soft); color: var(--warn); }

.card-preview { border: 1px dashed var(--clay); border-radius: 8px; padding: 10px 12px; background: var(--clay-soft); font-size: 0.84rem; }
.card-preview .ref { font-weight: 700; color: var(--clay-ink); }

/* ------------------------------------------------------------- details --- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 0.88rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.reasons { margin: 8px 0 0; padding-left: 18px; font-size: 0.85rem; color: var(--muted); }
.reasons li { margin-bottom: 3px; }
.bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--teal); }

.toast {
  position: fixed; bottom: 20px; right: 20px; z-index: 50; max-width: 380px;
  padding: 11px 15px; border-radius: 10px; box-shadow: var(--shadow);
  background: var(--surface); border: 1px solid var(--line); font-size: 0.88rem;
}
.toast.error { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.toast.success { border-color: var(--good); background: var(--good-soft); color: var(--good); }

/* ---------------------------------------------------------------- login -- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 380px; padding: 28px; }
.login-card h1 { margin: 0 0 4px; font-size: 1.3rem; }
.login-card p.sub { margin: 0 0 20px; color: var(--muted); font-size: 0.88rem; }
.error-text { color: var(--bad); font-size: 0.85rem; margin: 0 0 12px; }

.skeleton { color: var(--faint); padding: 24px; }

/* ------------------------------------------------------- field capture --- */
/* Mobile-first: a field agent uses this one-handed, outdoors, on a phone. */
.field-wrap { max-width: 720px; margin: 0 auto; }
.visit-card {
  display: grid; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.visit-card:hover { background: var(--surface-2); }
.visit-card .ref { font-weight: 600; }
.visit-card .where { color: var(--muted); font-size: 0.88rem; }
.visit-card .when { font-size: 0.8rem; color: var(--faint); }

.capture-head {
  position: sticky; top: 52px; z-index: 4; background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--line); padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
}
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.photo-tile {
  position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2);
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-tile .badge {
  position: absolute; left: 5px; top: 5px; font-size: 0.66rem; padding: 1px 6px; border-radius: 999px;
  background: var(--teal); color: #fff; font-weight: 600;
}
.photo-tile .remove {
  position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.6); color: #fff; cursor: pointer; line-height: 1;
  font-size: 15px; display: grid; place-items: center;
}
.photo-tile.uploading::after {
  content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.45);
}
.photo-tile .progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--teal);
  transform-origin: left; z-index: 1;
}
.add-photo {
  display: grid; place-items: center; gap: 4px; aspect-ratio: 1; border-radius: 8px;
  border: 1.5px dashed var(--line); background: var(--surface); cursor: pointer; color: var(--muted);
  font-size: 0.8rem; text-align: center; padding: 6px;
}
.add-photo:hover { border-color: var(--teal); color: var(--teal-ink); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.chip-toggle {
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 5px 12px; font-size: 0.84rem; cursor: pointer;
}
.chip-toggle[aria-pressed='true'] { background: var(--teal-soft); border-color: var(--teal); color: var(--teal-ink); font-weight: 600; }
.sticky-actions {
  position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line);
  padding: 12px 16px; display: flex; gap: 8px; flex-wrap: wrap;
}
.gps-note { font-size: 0.8rem; color: var(--muted); }

/* Price-estimate caveats — the reasons a figure is weaker than its confidence pill
   suggests. Styled as a warning block rather than body text because an agent
   skim-reading a range needs these to interrupt, not to blend in. */
.caveats {
  margin: 12px 0 0;
  padding: 10px 12px 10px 28px;
  list-style: disc;
  background: var(--warn-soft);
  border-left: 3px solid var(--warn);
  border-radius: 6px;
  font-size: .85rem;
  color: var(--warn);
}
.caveats li + li { margin-top: 6px; }

/* A quiet aside inside a card: true, worth knowing, not a warning. */
.inline-note { margin: 0; font-size: .8rem; color: var(--muted); }

/* ------------------------------------------- onboarding + application status */
.ob-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ob-pct { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--good, #2f7d32); }
.ob-bar {
  height: 6px; border-radius: 999px; background: var(--surface-2, #eef1e9);
  margin: 12px 0 16px; overflow: hidden;
}
.ob-bar span { display: block; height: 100%; background: var(--good, #2f7d32); border-radius: 999px; transition: width .4s ease; }

.ob-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ob-list li { display: flex; gap: 11px; align-items: flex-start; }
.ob-tick {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  border: 2px solid var(--line, #d9ded1); position: relative;
}
.ob-list li.done .ob-tick { background: var(--good, #2f7d32); border-color: var(--good, #2f7d32); }
.ob-list li.done .ob-tick::after {
  content: ""; position: absolute; left: 4px; top: 4px; width: 7px; height: 4px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.ob-list li.done strong { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.ob-detail { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.ob-link {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 650;
  color: var(--green-deep, #2f5d1e); text-decoration: underline; text-underline-offset: 3px;
}

.apply-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.apply-steps li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border: 1px solid var(--line, #d9ded1); border-radius: 10px;
}
.apply-steps li.now { border-color: #c9e88f; background: var(--wash-2, #f2f9e3); }
.apply-steps li span { color: var(--muted); font-size: .85rem; }

/* --------------------------------------------- demo logins (test envs only) */
.demo-logins:empty { display: none; }
.demo-logins {
  margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line, #d9ded1);
  display: grid; gap: 8px;
}
.demo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.demo-head strong { font-size: .92rem; }
.demo-env {
  padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  background: #fdf3d6; color: #8a6b12; border: 1px solid #ecd9a0;
}
.demo-note { margin: 0 0 4px; color: var(--muted); font-size: .8rem; }
.demo-account {
  display: grid; gap: 1px; text-align: left; cursor: pointer; width: 100%;
  padding: 10px 13px; border: 1px solid var(--line, #d9ded1); border-radius: 9px;
  background: var(--surface, #fff); font: inherit;
}
.demo-account:hover { border-color: #c9e88f; background: var(--wash-2, #f2f9e3); }
.demo-account strong { font-size: .88rem; }
.demo-email { font-size: .78rem; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.demo-detail { font-size: .78rem; color: var(--faint, #8a9a78); }

/* --- the matching desk ---------------------------------------------------- */
.score-line { display: flex; align-items: center; gap: 9px; min-width: 110px; }
.score-bar {
  flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2, #eef1ec);
  overflow: hidden; min-width: 54px;
}
.score-bar i { display: block; height: 100%; border-radius: inherit; background: var(--good, #0F7A4A); }

/* --- the assistant --------------------------------------------------------- */
.chat-card { display: flex; flex-direction: column; height: min(62vh, 620px); }
.chat-thread {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  padding: 18px;
}
.chat-bubble {
  max-width: 76%; padding: 10px 14px; border-radius: 13px; font-size: .9rem; line-height: 1.5;
}
.chat-bubble.me { align-self: flex-end; background: var(--good-soft, #E2F2E9); border-bottom-right-radius: 4px; }
.chat-bubble.them {
  align-self: flex-start; background: var(--surface-2, #eef1ec);
  border-bottom-left-radius: 4px;
}
.chat-matches { display: grid; gap: 6px; margin-top: 9px; }
.chat-match {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  padding: 7px 10px; border-radius: 9px; font-size: .82rem;
  background: var(--surface, #fff); border: 1px solid var(--line, #d9ded1);
}
.chat-input {
  display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line, #d9ded1);
}
.chat-input input { flex: 1; }

/* --- overview notices ------------------------------------------------------ */
.notice-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 10px 12px; border: 1px solid var(--line, #d9ded1); border-radius: 10px;
}
.notice-row strong { font-size: .9rem; }

/* --- auto-renew opt-in ------------------------------------------------------ */
.renew-opt {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 14px;
  padding: 11px 13px; border: 1px solid var(--line, #d9ded1); border-radius: 10px;
  font-size: .87rem; color: var(--muted); cursor: pointer;
}
.renew-opt input { margin-top: 2px; flex-shrink: 0; }
.renew-opt:hover { border-color: #c9e88f; }

/* --- the agency's listing workspace ---------------------------------------- */
.fact-grid {
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.fact {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px; border: 1px solid var(--line, #d9ded1); border-radius: 9px;
  background: var(--surface, #fff);
}
.fact > span { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint, #78877f); }
.fact > strong { font-size: .95rem; font-variant-numeric: tabular-nums; }

/* The gallery reuses .photo-grid / .photo-tile from field capture; these are the
   pieces the agency's own gallery adds — video tiles, a cover flag, and per-tile
   actions that only appear on hover so the grid stays readable. */
.photo-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-tile.is-cover { border-color: var(--good, #0F7A4A); box-shadow: 0 0 0 2px var(--good-soft, #E2F2E9); }
.cover-flag {
  position: absolute; left: 5px; top: 5px; z-index: 2;
  font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: var(--good, #0F7A4A); color: #fff;
}
.tile-actions {
  position: absolute; inset: auto 0 0 0; display: flex; gap: 4px; justify-content: center;
  padding: 5px; background: linear-gradient(transparent, rgba(0, 0, 0, .55));
  opacity: 0; transition: opacity .18s ease;
}
.photo-tile:hover .tile-actions,
.photo-tile:focus-within .tile-actions { opacity: 1; }
.tile-actions .btn { padding: 3px 8px; font-size: .7rem; }
.photo-tile.add {
  display: grid; place-items: center; border: 1.5px dashed var(--line, #d9ded1);
  background: var(--surface, #fff); color: var(--muted); cursor: pointer;
  font: inherit; font-size: .8rem;
}
.photo-tile.add:hover { border-color: #c9e88f; }

/* ==========================================================================
   The dashboard system (redesign, 28 Aug 2026)
   ========================================================================== */

/* --- top bar -------------------------------------------------------------
   Breadcrumb, a live pill and who you are. Sticky, because on a long table the
   thing you most want back is the way out of it. */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 13px 28px; background: var(--topbar-bg); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  margin: 0 !important;
}
.crumb { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--faint); }
.crumb b { color: var(--ink); font-weight: 500; }
.topbar .spacer { margin-left: auto; }
.live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--teal-ink);
  padding: 5px 11px; border-radius: 999px;
  background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .2);
}
.live i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
  animation: livePulse 2.2s ease-in-out infinite;
}
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
/* The avatar is the profile menu's trigger, so it is a real button: hoverable,
   focusable, and announcing the menu it owns. */
.profile { position: relative; flex-shrink: 0; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 0.7rem; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--muted);
  letter-spacing: .04em; cursor: pointer; padding: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.avatar:hover { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.avatar[aria-expanded='true'] {
  background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .3);
  color: var(--teal-ink);
}
.profile-menu {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 40;
  min-width: 258px; max-width: min(310px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 6px;
}
.profile-menu[hidden] { display: none; }
.profile-who { padding: 9px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
/* A long agency address wraps rather than widening the menu or spilling out of it. */
.profile-email {
  font-size: 0.82rem; color: var(--muted); line-height: 1.35;
  overflow-wrap: anywhere; margin-bottom: 7px;
}
.profile-action {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 10px; border-radius: 9px; font-size: 0.9rem;
  background: none; border: 1px solid transparent; color: var(--ink);
  transition: background .15s ease, color .15s ease;
}
.profile-action:hover { background: var(--bad-soft); color: var(--bad); }

/* --- the strapline under a page title ------------------------------------
   Mono, tracked-out, and factual: it carries the numbers that frame the page. */
.digest {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--faint); margin: 0;
}
.digest b { color: var(--teal-ink); font-weight: 500; }

/* --- KPI cards ----------------------------------------------------------- */
.kpi-row {
  display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 17px 16px; position: relative; overflow: hidden;
}
/* A faint wash from the top-left, so a row of cards has depth without borders
   shouting. */
.kpi::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(var(--accent-rgb), .05), transparent 60%);
  pointer-events: none;
}
.kpi.tap { cursor: pointer; }
.kpi.tap:hover { border-color: var(--line-2); }
.kpi-label {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint);
}
.kpi-value {
  display: flex; align-items: center; gap: 9px; margin: 9px 0 6px;
  font-size: 1.85rem; font-weight: 600; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.kpi-delta {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 600; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 6px;
  background: var(--good-soft); color: var(--good); border: 1px solid rgba(var(--accent-rgb), .22);
}
.kpi-delta.warn { background: var(--warn-soft); color: var(--clay-ink); border-color: rgba(232, 176, 70, .25); }
.kpi-delta.bad { background: var(--bad-soft); color: var(--bad); border-color: rgba(240, 104, 95, .25); }
.kpi-note { font-size: 0.79rem; color: var(--muted); }

/* --- panels --------------------------------------------------------------
   A panel announces itself with a short accent dash and a mono label, which is
   what makes a dense grid scannable without headings competing with the data. */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.panel-head::before {
  content: ''; width: 14px; height: 2px; border-radius: 2px;
  background: var(--teal); flex-shrink: 0;
}
.panel-head h3 {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin: 0;
}
.panel-head .spacer { margin-left: auto; }
.panel-body { padding: 15px 16px; }
.panel-grid { display: grid; gap: 14px; grid-template-columns: 1.6fr 1fr; margin-bottom: 18px; }
@media (max-width: 1040px) { .panel-grid { grid-template-columns: 1fr; } }

/* --- the signal feed -----------------------------------------------------
   Each row is one thing that happened, colour-coded by what kind of thing. */
.signal {
  display: flex; gap: 11px; padding: 11px 12px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line);
  margin-bottom: 9px; align-items: flex-start;
}
.signal:last-child { margin-bottom: 0; }
.signal i {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0;
  background: var(--teal);
}
.signal.warn i { background: var(--clay); }
.signal.bad i { background: var(--bad); }
.signal-body { min-width: 0; flex: 1; }
.signal-body strong { font-size: 0.87rem; font-weight: 500; display: block; line-height: 1.4; }
.signal-meta {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint); margin-top: 4px;
}
.signal .btn { flex-shrink: 0; align-self: center; }

/* --- inline proportion bar, for a table cell that is really a ratio ------- */
.meter { display: flex; align-items: center; gap: 9px; }
.meter-track {
  width: 62px; height: 5px; border-radius: 3px; background: var(--surface-2);
  overflow: hidden; flex-shrink: 0;
}
.meter-fill { height: 100%; border-radius: 3px; background: var(--teal); }
.meter-fill.warn { background: var(--clay); }
.meter-fill.bad { background: var(--bad); }
.meter span { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); }

/* --- the assistant, as a widget ------------------------------------------
   It used to be a nav page, which is the wrong shape: the question an agent wants
   to ask is nearly always about the screen they are already on, and making them
   leave it to ask was the reason to move. Docked bottom-left, above everything,
   reachable from every screen. */
.assist-dock {
  position: fixed; left: 12px; bottom: 12px; width: 220px; z-index: 60;
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 11px 13px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .03));
  border: 1px solid rgba(var(--accent-rgb), .28); color: var(--ink);
  font: inherit; box-shadow: var(--shadow);
  transition: border-color .15s ease, transform .15s ease;
}
.assist-dock:hover { border-color: rgba(var(--accent-rgb), .5); transform: translateY(-1px); }
.assist-dock i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex-shrink: 0;
  animation: livePulse 2.2s ease-in-out infinite;
}
.assist-dock strong { display: block; font-size: 0.86rem; font-weight: 600; }
.assist-dock span {
  display: block; font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--faint); margin-top: 3px;
}
@media (max-width: 900px) {
  .assist-dock { left: auto; right: 12px; width: auto; }
  .assist-dock div { display: none; }
}

/* The panel it opens into: anchored to the dock, sized to a conversation. */
.assist-pop {
  position: fixed; left: 12px; bottom: 12px; z-index: 70;
  width: min(440px, calc(100vw - 24px)); height: min(600px, calc(100vh - 24px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 14px; box-shadow: var(--shadow-pop);
  animation: popIn .18s ease;
}
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@media (max-width: 900px) { .assist-pop { left: 12px; right: 12px; width: auto; } }
.assist-head {
  display: flex; align-items: center; gap: 10px; padding: 13px 15px;
  border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.assist-head strong { font-size: 0.92rem; }
.assist-head .sub {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--faint); margin-top: 2px;
}
.assist-close {
  margin-left: auto; background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.assist-close:hover { background: var(--surface); color: var(--ink); }
.assist-body { flex: 1; overflow-y: auto; padding: 14px 15px; }
.assist-foot { border-top: 1px solid var(--line); padding: 11px 12px; background: var(--surface-2); }
/* Suggested openers, so an empty box is not the first thing a new agent meets. */
.assist-seeds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.assist-seeds button {
  font: inherit; font-size: 0.76rem; cursor: pointer; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 11px;
}
.assist-seeds button:hover { border-color: var(--teal); color: var(--teal-ink); }

/* --- tabs ------------------------------------------------------------------
   Two jobs on one screen, switched rather than stacked. */
.tabs {
  display: flex; gap: 4px; margin-bottom: 18px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: 0;
}
.tab {
  padding: 9px 15px; border: 1px solid transparent; border-bottom: none;
  border-radius: 10px 10px 0 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 0.92rem; margin-bottom: -1px;
  transition: background .15s ease, color .15s ease;
}
.tab:hover { color: var(--ink); background: var(--surface-2); }
.tab.is-active {
  background: var(--surface); border-color: var(--line); color: var(--teal-ink);
  font-weight: 600; border-bottom: 1px solid var(--surface);
}

/* --- a table row you can open ----------------------------------------------
   The six columns say whether anything fits; the row opens to say whether this
   is the one. The cue column keeps that discoverable without a whole button. */
tr.row-open { cursor: pointer; }
tr.row-open:hover { background: var(--surface-2); }
tr.row-open:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.row-open-cue {
  font-size: 0.78rem; color: var(--faint); text-align: right; white-space: nowrap;
}
tr.row-open:hover .row-open-cue { color: var(--teal-ink); }

/* --- the quick view ------------------------------------------------------- */
.qv-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.qv-head > div:first-child { flex: 1; min-width: 0; }
.qv-head strong { font-size: 1.05rem; display: block; line-height: 1.3; }
.qv-sub { color: var(--muted); font-size: 0.84rem; margin-top: 3px; }
.qv-desc {
  margin: 14px 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.55;
  max-height: 180px; overflow-y: auto;
}

/* --- a small modal, for a decision worth interrupting a click for ---------- */
.modal-wrap {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: rgba(0, 0, 0, .45); backdrop-filter: blur(2px); padding: 20px;
}
.modal {
  width: min(440px, 100%); background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 14px; padding: 20px; box-shadow: var(--shadow-pop);
  max-height: calc(100vh - 40px); overflow-y: auto;
}
/* A property has more to say than a one-question dialog. */
.modal.wide { width: min(640px, 100%); }
.modal > strong { font-size: 1.05rem; }

/* --- the lead history ------------------------------------------------------
   System lines are recessed so a scan reads the human notes first; the automatic
   entries are there to stop the trail having unexplained gaps, not to be read. */
.trail { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.trail-item {
  padding: 9px 12px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.trail-item.system { background: transparent; border-style: dashed; }
.trail-body { font-size: 0.88rem; line-height: 1.45; }
.trail-item.system .trail-body { color: var(--muted); font-size: 0.83rem; }
.trail-meta {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint); margin-top: 5px;
}