/* Owner Finance Desk — the design system, taken from the LHQ workspace so the
   two portals converge on one look rather than meeting in the middle. */

:root {
  color-scheme: light;
  --navy-950: #0b2134;
  --navy-900: #102b42;
  --navy-800: #173b59;
  --blue-700: #176aa6;
  --blue-100: #eaf4fb;
  --green-700: #176747;
  --green-100: #e8f5ee;
  --gold-600: #bd8524;
  --gold-100: #fff5df;
  --red-700: #b23a3a;
  --red-100: #fff0f0;
  --ink-900: #17212b;
  --ink-700: #41505e;
  --ink-500: #71808d;
  --line: #dce3e8;
  --surface: #fff;
  --surface-muted: #f5f7f9;
  --page: #eef2f4;
  --shadow: 0 12px 36px rgba(11, 33, 52, .09);
  --radius-lg: 20px;
  --radius-md: 12px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* An author rule always beats the browser's [hidden], so any class that sets
   display — .chip, .soc-row — silently un-hides an element set hidden from
   JavaScript. It looked like the filter was broken; the filter was fine and
   the rows simply would not go away. */
[hidden] { display: none !important; }
body { margin: 0; background: var(--page); color: var(--ink-900); font-size: 15px; -webkit-font-smoothing: antialiased; }
/* TEXTAREA BELONGS HERE. Left out, it falls back to the browser's monospace
   default, which six places then patched one at a time — and the note box on
   a property was not one of them, so every note was typed in Courier. */
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--blue-700); }

/* A page for one thing: signing in, or setting a password. */
.gate { display: grid; min-height: 100vh; place-items: center; padding: 32px 20px; background: var(--navy-950); }
.gate-card {
  width: min(100%, 420px); border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .32); padding: 36px 34px 30px;
}
.gate-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }
.gate-mark {
  display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px;
  background: var(--navy-900); color: #fff; font-family: Georgia, serif; font-size: 1.1rem; font-weight: 700;
}
.gate-brand strong { display: block; font-size: 1rem; }
.gate-brand small { display: block; color: var(--ink-500); font-size: .74rem; }
.gate h1 { margin: 0 0 6px; font-family: Georgia, serif; font-size: 1.55rem; font-weight: 400; }
.gate p.lede { margin: 0 0 22px; color: var(--ink-500); font-size: .9rem; }

.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { color: var(--ink-700); font-size: .78rem; font-weight: 700; }
.field input {
  min-height: 44px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-muted); padding: 0 13px; color: var(--ink-900);
}
.field input:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 1px; }

.button {
  width: 100%; min-height: 46px; border: 0; border-radius: 10px;
  background: var(--navy-900); color: #fff; font-weight: 700;
}
.button:hover { background: var(--navy-800); }
.button:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }

.message { border-radius: 10px; padding: 11px 13px; margin-bottom: 18px; font-size: .86rem; font-weight: 600; }
.message.error { background: var(--red-100); color: var(--red-700); }
.message.notice { background: var(--blue-100); color: var(--blue-700); }
.gate-note { margin: 20px 0 0; color: var(--ink-500); font-size: .76rem; line-height: 1.55; text-align: center; }

/* ---- the shell ---------------------------------------------------------- */

.app-shell { display: grid; min-height: 100vh; grid-template-columns: 252px minmax(0, 1fr); }

.sidebar {
  position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column;
  overflow-y: auto; background: var(--navy-950); padding: 24px 16px 18px; color: #fff;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0 6px; }
.brand-mark {
  display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center;
  border-radius: 11px; background: rgba(255,255,255,.12);
  font-family: Georgia, serif; font-size: 1rem; font-weight: 700;
}
.brand strong { display: block; font-size: .9rem; line-height: 1.25; }
.brand small { display: block; color: rgba(255,255,255,.5); font-size: .68rem; }

/* One block per portal, so which company you are in is never a guess. */
.portal-group { margin-top: 26px; }
.portal-head {
  display: flex; align-items: center; gap: 8px; padding: 0 8px 8px;
  color: rgba(255,255,255,.5); font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.portal-head::before {
  content: ""; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 2px;
  background: var(--portal-colour, var(--blue-700));
}
.nav-item {
  display: flex; width: 100%; min-height: 40px; align-items: center; gap: 10px;
  border: 0; border-radius: 9px; background: transparent; padding: 8px 12px;
  color: rgba(255,255,255,.68); font-size: .88rem; font-weight: 600;
  text-align: left; text-decoration: none;
}
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.is-active { background: #fff; color: var(--navy-950); font-weight: 700; }
.nav-item.is-soon { color: rgba(255,255,255,.3); cursor: default; }
.nav-item.is-soon:hover { background: transparent; color: rgba(255,255,255,.3); }

.sidebar-foot { margin-top: auto; padding-top: 18px; }
.who {
  display: block; border: 1px solid rgba(255,255,255,.1); border-radius: 11px;
  background: rgba(255,255,255,.05); padding: 12px 13px; color: #fff; text-decoration: none;
}
.who strong { display: block; font-size: .82rem; }
.who small { display: block; margin-top: 2px; color: rgba(255,255,255,.5); font-size: .7rem; word-break: break-all; }
.who:hover { border-color: rgba(255,255,255,.24); }
.sign-out { width: 100%; margin-top: 8px; border: 0; border-radius: 9px;
  background: transparent; padding: 9px; color: rgba(255,255,255,.55);
  font-size: .78rem; font-weight: 600; }
.sign-out:hover { background: rgba(255,255,255,.07); color: #fff; }

.workspace { min-width: 0; padding: 40px clamp(22px, 4vw, 56px) 64px; }
.page-view { width: min(100%, 1180px); margin: 0 auto; }
.eyebrow { margin: 0 0 6px; color: var(--blue-700); font-size: .72rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; }
.page-view h1 { margin: 0 0 6px; font-family: Georgia, serif; font-size: 2rem; font-weight: 400; }
.page-lede { margin: 0 0 26px; color: var(--ink-500); max-width: 62ch; }

.panel { border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow); padding: 24px; margin-bottom: 20px; }
.panel h2 { margin: 0 0 4px; font-size: 1.05rem; }
.panel p.hint { margin: 0 0 18px; color: var(--ink-500); font-size: .86rem; max-width: 60ch; }

/* Portal cards on the front door. */
.portal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.portal-card {
  position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); box-shadow: 0 8px 24px rgba(11,33,52,.06);
  padding: 22px 24px 20px; text-decoration: none; color: inherit; display: block;
}
.portal-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: var(--portal-colour, var(--blue-700)); }
.portal-card:hover { border-color: #b8c7d1; box-shadow: 0 12px 30px rgba(11,33,52,.1); }
.portal-card h2 { margin: 0; font-size: 1.15rem; }
.portal-card .role { display: inline-flex; margin-top: 8px; border-radius: 99px;
  background: var(--surface-muted); padding: 4px 10px; color: var(--ink-700);
  font-size: .7rem; font-weight: 780; }
.portal-card ul { margin: 16px 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px; }
.portal-card li { border-radius: 7px; background: var(--surface-muted);
  padding: 4px 9px; color: var(--ink-700); font-size: .75rem; }

/* Tables of people. */
.grid-table { width: 100%; border-collapse: collapse; }
.grid-table th { text-align: left; padding: 0 12px 10px; border-bottom: 1px solid var(--line);
  color: var(--ink-500); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.grid-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.grid-table tr:last-child td { border-bottom: 0; }
.grid-table .name { font-weight: 650; }
.grid-table .sub { color: var(--ink-500); font-size: .8rem; word-break: break-all; }
/* The lines saying what changed on a row are sentences: they break between
   words, and only an address too long for the column breaks inside itself.
   Breaking anywhere, like the address above them, read "8: / 48 AM".
   break-word, not anywhere: anywhere lets a table column shrink below a
   word, and on a phone that split "Renamed" in two. */
.grid-table .sub.row-change { word-break: normal; overflow-wrap: break-word; }
.is-archived td { opacity: .55; }

.chip { display: inline-flex; align-items: center; border-radius: 99px;
  background: var(--surface-muted); padding: 4px 10px; color: var(--ink-700);
  font-size: .7rem; font-weight: 750; }
.chip.ok { background: var(--green-100); color: var(--green-700); }
.chip.warn { background: var(--gold-100); color: var(--gold-600); }
.chip.off { background: var(--red-100); color: var(--red-700); }

.row-form { display: inline-flex; gap: 6px; align-items: center; }
.row-form select { min-height: 34px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-muted); padding: 0 8px; font-size: .82rem; }
/* Changing somebody's name on the People page: folded away under the name,
   because it is the rare thing on a row and the roles are the common one. */
.name-edit { margin-top: 4px; }
.name-edit summary { width: fit-content; color: var(--blue-700); font-size: .74rem;
  font-weight: 700; cursor: pointer; }
.name-edit .name-form { margin-top: 6px; }
.name-edit .name-form input { min-height: 34px; width: 210px; max-width: 100%;
  border: 1px solid var(--line); border-radius: 8px; padding: 0 9px; font: inherit;
  font-size: .82rem; }
/* Words, not letters: a row's .sub breaks anywhere so a long email fits, and
   that split "matched" into "matche / d" in the notes under each control. */
.name-edit .sub { max-width: 300px; margin-top: 4px; white-space: normal;
  word-break: normal; overflow-wrap: break-word; }
/* Used on buttons and on links alike. An anchor is inline, so without a
   display the height was ignored and the word sat on its own border. */
.mini { display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; padding: 0 14px; color: var(--ink-700); font-size: .8rem;
  font-weight: 650; text-decoration: none; white-space: nowrap; }
.mini:hover { border-color: #b8c7d1; }
.mini.danger { color: var(--red-700); }

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.form-row .field { margin-bottom: 0; }
.actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.button.inline { width: auto; padding: 0 22px; }
.button.ghost { border: 1px solid var(--line); background: #fff; color: var(--ink-700); }
/*
 * A BUTTON THAT CANNOT WORK HAS TO LOOK LIKE IT.
 *
 * `.button` had no disabled state at all, so Send for Approval sat there in
 * full navy with a pointer cursor on a file with eight things still to do:
 * you press it, and nothing happens. The explanation underneath does not
 * help, because nobody reads the explanation before pressing the button.
 * `.btn[disabled]` further down has always done this; this is the same
 * treatment on the class the rest of the desk actually uses.
 */
.button:disabled, .button[disabled] { opacity: .45; cursor: not-allowed; }

.banner { border-radius: 11px; padding: 13px 15px; margin-bottom: 20px; font-size: .88rem; font-weight: 600; }
.banner.ok { background: var(--green-100); color: var(--green-700); }
.banner.bad { background: var(--red-100); color: var(--red-700); }
.banner code { display: block; margin-top: 8px; padding: 9px 11px; border-radius: 8px;
  background: rgba(255,255,255,.7); font-size: .78rem; font-weight: 500; word-break: break-all; }

/* ---- the menu on a small screen ----------------------------------------
   Most of the people who use this are on a phone. The rail stacked above the
   page there, so every page opened on ten nav items, the account box and Sign
   out, and the title somebody came for was below the fold. It slides in from
   the side now and is off screen until asked for.

   NO JAVASCRIPT. A checkbox and two labels, because a nav behind a script is
   a nav that is gone when the script throws — with nothing to press and no
   way to another page. The one failure a menu must not have. */
.nav-toggle { position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-button, .nav-scrim { display: none; }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed; z-index: 60; top: 0; bottom: 0; left: 0;
    width: min(282px, 86vw); height: 100dvh;
    transform: translateX(-100%);
    transition: transform .18s ease-out;
    box-shadow: 0 0 40px rgba(0, 0, 0, .4);
    /* Clear of the phone's own furniture at the top and bottom. */
    padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  }
  .nav-toggle:checked ~ .app-shell .sidebar { transform: translateX(0); }

  .nav-scrim {
    position: fixed; z-index: 50; inset: 0; display: block;
    background: rgba(9, 18, 28, .45);
    opacity: 0; pointer-events: none; transition: opacity .18s ease-out;
  }
  .nav-toggle:checked ~ .app-shell .nav-scrim { opacity: 1; pointer-events: auto; }

  .nav-button {
    display: inline-flex; min-width: 44px; min-height: 44px; flex: 0 0 auto;
    align-items: center; justify-content: center; gap: 8px;
    margin-left: -6px; border-radius: 9px; padding: 0 10px;
    color: #fff; font-size: .82rem; font-weight: 700; cursor: pointer;
  }
  .nav-button:active { background: rgba(255, 255, 255, .12); }
  .nav-button-text { display: none; }
  .nav-bars { position: relative; width: 19px; height: 2px; border-radius: 2px; background: #fff; }
  .nav-bars::before, .nav-bars::after {
    content: ""; position: absolute; left: 0; width: 19px; height: 2px;
    border-radius: 2px; background: #fff;
  }
  .nav-bars::before { top: -6px; }
  .nav-bars::after { top: 6px; }
  /* Keyboard users get to see where they are. */
  .nav-toggle:focus-visible ~ .app-shell .nav-button { outline: 2px solid #fff; outline-offset: 2px; }

  .topbar { gap: 10px; padding: 0 14px; }
  .global-search { width: auto; flex: 1 1 auto; min-width: 0; }
  /* The name is the first thing to go: the avatar already says who it is. */
  .top-user-name { display: none; }

}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .sidebar, .nav-scrim { transition: none; }
}

/* A shared page that, for this person, only holds one company's rows. */
.only-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-left: 5px; vertical-align: 1px; }
.portal-head.is-shared::before { background: linear-gradient(135deg, #176aa6 50%, #bd8524 50%); }
.section-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.section-list li { border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface-muted); padding: 7px 12px; font-size: .84rem; font-weight: 620; }

/* ---- the map front door -------------------------------------------------- */

.map-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
  justify-content: space-between; margin-bottom: 20px; }
.map-head h1 { margin: 0; }
.map-search { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.map-search input[type="search"], .map-search select {
  min-height: 42px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); padding: 0 13px; color: var(--ink-900); }
.map-search input[type="search"] { min-width: 300px; }
.map-search .check { display: flex; align-items: center; gap: 6px;
  color: var(--ink-700); font-size: .84rem; font-weight: 620; }
.map-search .button.inline { display: inline-grid; place-items: center; text-decoration: none; }

.map-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.map-stat { position: relative; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); padding: 12px 18px 12px 16px; min-width: 132px; }
.map-stat .n { display: block; color: var(--navy-950); font-family: Georgia, serif;
  font-size: 1.6rem; line-height: 1; }
.map-stat .l { display: block; margin-top: 5px; color: var(--ink-500); font-size: .72rem; }
.map-stat[style*="--dot"]::before { content: ""; position: absolute; top: 14px; right: 14px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }

.map-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 18px; }
/* Deliberately not sticky, and a fixed height rather than a share of the
   viewport. Leaflet measures its container once and positions every tile and
   pin against that measurement; a box that changes size afterwards leaves the
   map drawn in pieces. A stable box removes the whole problem. */
.map-panel { align-self: start; overflow: hidden; border: 1px solid var(--line);
  border-radius: 16px; background: var(--surface-muted); box-shadow: var(--shadow); }
#map { width: 100%; height: 620px; }
.map-note { margin: 0; padding: 11px 15px; border-top: 1px solid var(--line);
  background: var(--surface); color: var(--ink-500); font-size: .78rem; }

.result-list { display: grid; gap: 10px; align-content: start;
  max-height: min(70vh, 720px); overflow-y: auto; padding-right: 4px; }
.result { border: 1px solid var(--line); border-radius: 13px; background: var(--surface);
  padding: 14px 16px; cursor: pointer; }
.result:hover { border-color: #b8c7d1; box-shadow: 0 6px 18px rgba(11,33,52,.07); }
.result.is-picked { border-color: var(--blue-700); box-shadow: 0 0 0 2px var(--blue-100); }
.result-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.result h3 { margin: 0; font-size: .96rem; font-weight: 700; }
.result-where { margin: 3px 0 9px; color: var(--ink-500); font-size: .82rem; }
.result-figures { display: flex; flex-wrap: wrap; gap: 10px; margin: 0;
  color: var(--ink-700); font-size: .82rem; }
.result-figures strong { color: var(--navy-900); }

.company-tag { display: inline-flex; align-items: center; border-radius: 99px;
  background: var(--surface-muted); padding: 3px 9px; color: var(--ink-700);
  font-size: .68rem; font-weight: 800; }
.company-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; background: var(--dot, var(--blue-700)); }

.pin { display: grid; gap: 3px; min-width: 170px; font-size: .84rem; }
.pin strong { font-size: .92rem; }
.pin span { color: #5b6774; }
.pin .pin-company { margin-top: 4px; font-weight: 700; color: var(--navy-900); }

@media (max-width: 1000px) {
  .map-split { grid-template-columns: 1fr; }
  .result-list { max-height: none; }
  #map { height: 460px; }
}

/* Counts read as a sentence rather than a wall of tiles. */
.result-line { margin: 0 0 16px; color: var(--ink-700); font-size: .9rem; }
.result-line strong { color: var(--navy-950); font-family: Georgia, serif; font-size: 1.25rem; }
.count-chip { display: inline-flex; align-items: center; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line); padding: 3px 10px;
  font-size: .76rem; font-weight: 700; color: var(--ink-700); }
.count-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; background: var(--dot, var(--blue-700)); }

/* Map pins are elements, not SVG shapes — see the note in map.ejs. */
.pin-dot { background: none; border: 0; }
.pin-dot span { display: block; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(8, 34, 55, .45); }
.leaflet-marker-icon.pin-dot { cursor: pointer; }

/* ---- shared list pages --------------------------------------------------- */

.page-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
  justify-content: space-between; margin-bottom: 18px; }
.page-head h1 { margin: 0; }
/* All Customers: an admin's Double Check Inventory, Build A Release and
   Download For Practice, beside the title. */
/* Its own width, so the three buttons sit in one row beside the title; a
   narrow screen wraps them under it. */
.cu-head-words { flex: 1 1 340px; }
.practice-get { display: grid; justify-items: end; gap: 4px; flex: 0 0 auto; max-width: 100%; margin-left: auto; text-align: right; }
.cu-admin-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ci-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
/* Collections → Settings → States That Get A Demand To Post: one picked state a row, Remove beside it. */
.cs-states { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.cs-states legend { display: block; margin-bottom: 7px; padding: 0; color: #46566b; font-size: 12px; font-weight: 800; }
.cs-state { display: flex; align-items: center; gap: 8px; max-width: 360px; margin-top: 8px; }
.cs-state .state-pick { flex: 1 1 auto; min-width: 0; }
/* Collections → Settings → The Letter Email: the switch, and the email as a customer sees it. */
.le-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; justify-content: space-between; }
.le-switch p { margin: 0; max-width: 70ch; }
/* Email A Copy Of: the three letters as chips in a row. */
fieldset.le-letters { display: block; border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.le-letters legend { padding: 0; margin-bottom: 7px; color: #46566b; font-size: 12px; font-weight: 800; }
.le-letters .check { margin: 0 8px 8px 0; }
.le-h { margin: 22px 0 8px; color: #12243a; font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 500; }
.le-preview { border: 1px solid var(--card-line, #d9e4ec); border-radius: 12px; overflow: hidden; background: #fff; }
.le-head { display: grid; gap: 4px; margin: 0; padding: 12px 16px; background: #f8fafc; border-bottom: 1px solid var(--card-line, #d9e4ec); font-size: 13px; }
.le-head div { display: flex; gap: 10px; }
.le-head dt { flex: 0 0 76px; color: var(--muted, #6b7280); font-weight: 700; }
.le-head dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.le-one { border-top: 1px solid var(--card-line, #d9e4ec); }
.le-one > summary { cursor: pointer; padding: 10px 18px; font-weight: 600; }
.le-subject { font-weight: 400; color: var(--muted, #5b6472); margin-left: 8px; overflow-wrap: anywhere; }
.le-frame { display: block; width: 100%; height: 760px; border: 0; background: #f1f5f9; }
/* A run's Still To Settle: why a letter has no certified slip, then No Slip. */
.ns-form { display: flex; align-items: center; gap: 8px; }
.ns-form input { flex: 1; min-width: 260px; height: 34px; border: 1px solid var(--card-line, #d9e4ec); border-radius: 8px; padding: 0 10px; font: inherit; }
.practice-get .note { margin: 0; font-size: 12px; color: var(--ink-500, #6b7280); }
.search-bar { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.search-bar input[type="search"], .search-bar select {
  min-height: 42px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); padding: 0 13px; color: var(--ink-900); }
.search-bar input[type="search"] { min-width: 290px; }
.search-bar .button.inline { display: inline-grid; place-items: center; text-decoration: none; }

.quiet { color: var(--ink-500); font-size: .82rem; font-weight: 500; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.record-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  box-shadow: 0 6px 18px rgba(11,33,52,.05); padding: 16px 18px 17px; }
.record-card:hover { border-color: #b8c7d1; box-shadow: 0 10px 26px rgba(11,33,52,.09); }

/* The photo bleeds to the card's edges, so it reads as the card's own picture
   rather than something sitting inside it. Negative margins rather than
   restructuring the card: everything below it keeps the padding it had.
   The card clips, so the picture takes the card's top corners. */
.record-card { overflow: hidden; }
.record-shot { display: block; margin: -16px -18px 12px; aspect-ratio: 16 / 10;
  background: var(--surface-muted); overflow: hidden; }
.record-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A card with no photo keeps the same height as the rest: a grid of tiles at
   different heights reads as broken, and "no photo" is worth seeing on a list
   of things somebody is trying to sell. */
.record-shot.is-bare { display: grid; place-items: center; }
.record-noshot { color: var(--ink-500); font-size: .76rem; font-weight: 650; }
.record-top { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 9px; }
.record-card h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.record-sub { margin: 4px 0 12px; color: var(--ink-500); font-size: .83rem; line-height: 1.5; }
.record-figures { display: flex; flex-wrap: wrap; gap: 10px; margin: 0;
  color: var(--ink-700); font-size: .83rem; }
.record-figures strong { color: var(--navy-900); }

/* The hold shelf. A property whose price is the open question says so on the
   tile, so a rep can work down the shelf without opening each one. */
/* Not a price, so it must not be shouted like one. */
.record-noprice { color: var(--ink-500); font-weight: 650; }
.skin-inventory .record-figures strong.record-noprice {
  font-family: inherit; font-size: .83rem; color: var(--ink-500);
}
.record-ask { display: inline-block; margin-top: 11px; border-radius: 22px;
  background: var(--gold-100); border: 1px solid #f0dca6; color: var(--gold-600);
  font-size: .76rem; font-weight: 700; padding: 6px 13px; }
.record-waiting { margin: 11px 0 0; background: var(--surface-muted); border-radius: 8px;
  padding: 8px 11px; font-size: .78rem; color: var(--ink-700); }

.record-facts { display: grid; gap: 7px; margin: 0 0 12px; }
.record-facts div { display: flex; gap: 10px; justify-content: space-between;
  border-top: 1px solid var(--line); padding-top: 7px; }
.record-facts dt { color: var(--ink-500); font-size: .76rem; margin: 0; }
.record-facts dd { margin: 0; font-size: .8rem; font-weight: 650; text-align: right; }

.record-files { display: flex; flex-wrap: wrap; gap: 8px; }
.record-files a { border: 1px solid var(--line); border-radius: 9px; padding: 6px 11px;
  font-size: .77rem; font-weight: 700; text-decoration: none; }
.record-files a:hover { border-color: var(--blue-700); background: var(--blue-100); }

/* ---- filter bar ---------------------------------------------------------- */
/* Every control says what it filters. "Min $" alone never told anybody whether
   it meant the price or the payment, so both are here and both are labelled. */

.filters { border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow); padding: 16px 18px;
  margin-bottom: 18px; display: flex; flex-direction: column; gap: 14px; }
.filter-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filter-line + .filter-line { padding-top: 14px; border-top: 1px solid var(--line); }

.filter { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.filter > span { color: var(--ink-700); font-size: .72rem; font-weight: 700;
  letter-spacing: .02em; }
.filter select, .filter input { min-height: 40px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--surface-muted); padding: 0 11px;
  color: var(--ink-900); font: inherit; font-size: .88rem; }
.filter select:focus-visible, .filter input:focus-visible {
  outline: 2px solid var(--blue-700); outline-offset: 1px; border-color: var(--blue-700); }
.filter select { min-width: 150px; }
.filter input[type="number"], .filter input[data-money] { width: 132px; font-variant-numeric: tabular-nums; }

.filter-search { flex: 1 1 320px; }
.filter-search input { width: 100%; }
.filter-sort select { min-width: 210px; }
.filter-actions { display: flex; gap: 8px; align-items: flex-end; }
.filter-actions .button { min-height: 40px; }

.filter-range .range { display: flex; align-items: center; gap: 8px; }
.filter-range em { color: var(--ink-500); font-style: normal; font-size: .8rem; }

@media (max-width: 720px) {
  .filter, .filter-search { flex: 1 1 100%; }
  .filter select, .filter input[type="number"], .filter input[data-money] { width: 100%; min-width: 0; }
}
.filters .button.inline { display: inline-grid; place-items: center; text-decoration: none; }

/* ---- paging ------------------------------------------------------------- */

.pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  justify-content: center; margin-top: 22px; }
.page-num, .page-step, .page-gap {
  min-width: 38px; min-height: 38px; display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  padding: 0 11px; color: var(--ink-700); font-size: .85rem; font-weight: 650; text-decoration: none; }
.page-gap { border-color: transparent; background: none; }
.page-num:hover, .page-step:hover { border-color: var(--blue-700); color: var(--blue-700); }
.page-num.is-current { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.page-step.is-off { opacity: .4; pointer-events: none; }

/* ---- cards that are links ------------------------------------------------ */

a.record-card { display: block; color: inherit; text-decoration: none; }
a.record-card:hover h3 { color: var(--blue-700); }
.record-property { margin: 0 0 11px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: .84rem; line-height: 1.45; }
.record-property strong { color: var(--navy-900); }

/* ---- detail pages -------------------------------------------------------- */

.detail-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;
  justify-content: space-between; margin-bottom: 22px; }
.detail-head h1 { margin: 8px 0 4px; }
.headline-price { text-align: right; }
.headline-price .n { display: block; color: var(--navy-950);
  font-family: Georgia, serif; font-size: 2rem; line-height: 1; }
.headline-price .l { display: block; margin-top: 6px; color: var(--ink-500); font-size: .8rem; }
.detail-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.detail-columns .panel { margin-bottom: 0; }
code { border-radius: 5px; background: var(--surface-muted); padding: 1px 6px; font-size: .82rem; }

/* ---- editing a property --------------------------------------------------
   Two jobs: make a calculated field visibly not-an-input, and make it obvious
   what has been changed before anything is saved. Everything else is an
   ordinary form and should look like one. */

/*
 * THE WAY BACK LOOKS THE SAME WHEREVER IT IS.
 *
 * Every one of these is a single back link doing the job `.eyebrow` does on
 * the property page and the application page — and it was small and grey on
 * half the desk and blue and lettered on the other half. Same treatment,
 * without touching a line of markup.
 */
.crumbs { margin: 0 0 18px; font-size: .72rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; }
.crumbs a { color: var(--blue-700); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.detail-edit { margin: 10px 0 0; }

.edit-head { margin-bottom: 22px; }
.edit-head h1 { margin: 8px 0 4px; font-size: 1.55rem; }
.edit-sub { margin: 0; color: var(--ink-500); font-size: .9rem; }
.edit-id { display: inline-block; margin-left: 10px; padding: 1px 7px; border-radius: 6px;
  background: var(--surface-muted); color: var(--ink-500);
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: .72rem; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--pill, var(--blue-700)); color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; }

.banner ul { margin: 8px 0 0; padding-left: 19px; font-weight: 500; }
.banner li { margin-bottom: 3px; }

.edit-form fieldset { border: 0; margin: 0 0 20px; padding: 0; }
.edit-form fieldset.panel { padding: 22px; }
.edit-form legend { padding: 0; float: left; width: 100%; }
.edit-form legend h2 { margin: 0 0 16px; }

/* auto-fill, not auto-fit (CLAUDE.md): a lot hides the home-only boxes, and
   auto-fit collapsed the empty tracks and stretched the ones left (the code
   check, 13 October 2026). */
.edit-grid { clear: both; display: grid; gap: 16px 18px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.edit-wide { grid-column: 1 / -1; }
@media (max-width: 620px) { .edit-grid { grid-template-columns: 1fr; } }

.edit-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.edit-field label { color: var(--ink-700); font-size: .78rem; font-weight: 700; }
.edit-field input[type=text], .edit-field input[type=date], .edit-field select,
.edit-field textarea {
  width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); padding: 0 12px; color: var(--ink-900);
  font: inherit; font-size: .92rem;
}
/* A single-line control centres its text with the line-height the height gives
   it; a textarea needs the padding written out, and its own line spacing. */
.edit-field textarea { padding: 10px 12px; line-height: 1.55; resize: vertical; }
.edit-field input:focus-visible, .edit-field select:focus-visible,
.edit-field textarea:focus-visible {
  outline: 2px solid var(--blue-700); outline-offset: 1px; border-color: var(--blue-700);
}
.edit-field input[inputmode=decimal] { font-variant-numeric: tabular-nums; }

/* A calculated field is not disabled — it is not an input at all, so there is
   nothing to click and wonder about. */
.calc { margin-left: 7px; padding: 1px 6px; border-radius: 5px;
  background: var(--surface-muted); color: var(--ink-500);
  font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.edit-readonly { display: flex; align-items: center; min-height: 42px;
  border: 1px dashed var(--line); border-radius: 10px; padding: 0 12px;
  background: var(--surface-muted); color: var(--ink-700);
  font-size: .92rem; font-variant-numeric: tabular-nums; }

.edit-affix { display: flex; align-items: stretch; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); overflow: hidden; }
.edit-affix:focus-within { outline: 2px solid var(--blue-700); outline-offset: 1px;
  border-color: var(--blue-700); }
.edit-affix input { border: 0 !important; border-radius: 0 !important; flex: 1; min-width: 0; }
.edit-affix input:focus-visible { outline: none !important; }
.edit-affix .affix { display: flex; align-items: center; padding: 0 11px;
  background: var(--surface-muted); color: var(--ink-500); font-size: .84rem; font-weight: 600; }
.edit-affix-end .affix { order: 2; }

.edit-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.check { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-size: .82rem; font-weight: 500; cursor: pointer; }
.check:has(input:checked) { border-color: var(--blue-700); background: var(--blue-100);
  color: var(--blue-700); font-weight: 600; }
.check input { margin: 0; }

.edit-note { margin: 0; color: var(--ink-500); font-size: .76rem; line-height: 1.45; }
.edit-note-bad { color: var(--red-700); font-weight: 600; }
.edit-bad input[type=text], .edit-bad input[type=date], .edit-bad select, .edit-bad .edit-affix {
  border-color: var(--red-700); background: var(--red-100);
}

/* Sticky, so Save is reachable without scrolling to the end of a long form,
   and so the count of what changed stays in sight while editing. */
/* Above the row of parts a narrow edit page has across the top (z-index 11):
   with the page scrolled to the top, that row sat over the bar and took the
   press meant for Save Changes and Done (found 19 October 2026). */
.edit-bar { position: sticky; bottom: 0; z-index: 12; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 8px; padding: 13px 18px; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow); }
.edit-count { margin: 0; color: var(--ink-500); font-size: .84rem; font-weight: 600; }
.edit-bar.is-saving { border-color: var(--gold-600); background: var(--gold-100); }
.edit-bar.is-saving .edit-count { color: #6b4a06; }
.edit-bar.is-saved { border-color: var(--green-700); background: var(--green-100); }
.edit-bar.is-saved .edit-count { color: var(--green-700); }
.edit-bar.is-bad { border-color: var(--red-700); background: var(--red-100); }
.edit-bar.is-bad .edit-count { color: var(--red-700); }
/* Changed and not saved yet (Edit This Property saves on its button,
   19 October 2026): gold, the colour of something waiting on you. */
.edit-bar.is-pending { border-color: var(--gold-600); background: var(--gold-100); }
.edit-bar.is-pending .edit-count { color: #6b4a06; }
.edit-bar-text { flex: 1 1 280px; min-width: 0; }
/* Pinned to the bar's foot, so the buttons stay put as its list grows. */
.edit-bar .edit-actions { align-self: flex-end; }
.edit-changes { margin: 6px 0 0; padding-left: 18px; max-height: 9.5em; overflow: auto;
  font-size: .82rem; line-height: 1.5; color: var(--ink-700); overflow-wrap: anywhere; }
.edit-changes b { font-weight: 650; }
.edit-actions .btn[disabled] { opacity: .6; cursor: progress; }
.edit-state.is-pending { color: #6b4a06; }
.edit-field:has(.edit-state.is-pending:not([hidden])) input[type=text],
.edit-field:has(.edit-state.is-pending:not([hidden])) select,
.edit-field:has(.edit-state.is-pending:not([hidden])) textarea,
.edit-field:has(.edit-state.is-pending:not([hidden])) .edit-affix { border-color: var(--gold-600); }
/* A money box refuses a third figure after the point (money-box.js). */
.money-cents { margin: 4px 0 0; color: var(--red-700); font-size: .76rem; font-weight: 600; }

/* Leaving Edit This Property with something not saved. */
.edit-leave { width: min(520px, calc(100vw - 32px)); padding: 22px 22px 18px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--surface); color: var(--ink-900); box-shadow: var(--shadow); }
.edit-leave::backdrop { background: rgba(11, 33, 52, .5); }
.edit-leave h2 { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 500; }
.edit-leave-why { margin: 0 0 6px; color: var(--ink-700); }
.edit-leave-list { margin: 0 0 12px; padding-left: 18px; max-height: 40vh; overflow: auto;
  font-size: .88rem; line-height: 1.55; overflow-wrap: anywhere; }
.edit-leave-said { margin: 0 0 12px; color: var(--red-700); font-weight: 600; font-size: .86rem; }
.edit-leave-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.edit-leave-actions [hidden] { display: none; }
@media (max-width: 560px) { .edit-leave-actions .btn { flex: 1 1 100%; } }

/* Per field, because with no Save button this is the only thing that says
   whether the work landed. A failure that looks like nothing is the outcome
   worth designing against, so every message names the field and what to do. */
.edit-state { margin: 0; font-size: .76rem; font-weight: 600; line-height: 1.45; }
.edit-state.is-busy { color: var(--ink-500); }
.edit-state.is-ok { color: var(--green-700); }
.edit-state.is-ok::before { content: "\2713\00a0"; }
.edit-state.is-bad { color: var(--red-700); font-weight: 700; }
.edit-field.edit-ok input[type=text], .edit-field.edit-ok select,
.edit-field.edit-ok .edit-affix { border-color: var(--green-700); }

/* A calculated field moving is the proof that editing taxes did something. */
.just-changed { animation: liftValue .9s ease-out; }
@keyframes liftValue {
  0% { background: var(--gold-100); border-color: var(--gold-600); }
  100% { background: var(--surface-muted); }
}

/* ---- who changed what ---------------------------------------------------- */
.history-day + .history-day { margin-top: 18px; }
.history-date { margin: 0 0 8px; color: var(--ink-900); font-size: .82rem; font-weight: 700;
  letter-spacing: .02em; }
.history-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.history-list li { display: grid; grid-template-columns: 78px 1fr; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .85rem; align-items: baseline; }
.history-when { color: var(--ink-500); font-size: .76rem; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.history-who { color: var(--ink-700); font-weight: 700; }
.history-what { color: var(--ink-700); }
.history-what b { color: var(--ink-900); }
.history-from { color: var(--ink-500); text-decoration: line-through; }
.history-to { color: var(--ink-900); font-weight: 600; }
@media (max-width: 520px) {
  .history-list li { grid-template-columns: 1fr; gap: 2px; }
}
.edit-actions { display: flex; align-items: center; gap: 10px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- comparisons --------------------------------------------------------- */
/* A table, not repeated label/value pairs. Eight facts per property read as a
   wall when each carries its own label; in columns the eye compares down. */

.market-stack { display: flex; flex-direction: column; gap: 26px; }
.comps-bare { min-width: 0; }

.comps-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  justify-content: space-between; margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line); }
.comps-title { margin: 0; font-size: .95rem; font-weight: 700; }
.panel.comps .comps-title { font-size: 1.04rem; }
.comps-basis { margin: 0; color: var(--ink-500); font-size: .78rem; }
.comps-none { margin: 0; color: var(--ink-500); font-size: .86rem; line-height: 1.6; max-width: 60ch; }

.comps-figures { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.comps-figures div { flex: 1 1 150px; padding: 9px 13px; border-radius: 10px;
  background: var(--surface-muted); }
.comps-figures span { display: block; color: var(--ink-500); font-size: .67rem;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.comps-figures b { font-size: .98rem; font-variant-numeric: tabular-nums; }

.comps-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .82rem; }
.comps-table th { padding: 0 10px 7px; border-bottom: 1px solid var(--line);
  color: var(--ink-500); font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; text-align: left; }
.comps-table td { padding: 9px 10px; border-bottom: 1px solid var(--line);
  vertical-align: top; }
.comps-table tbody tr:last-child td { border-bottom: 0; }
.comps-table tbody tr:hover { background: var(--surface-muted); }
/* A header you can sort by (public/table-sort.js): the label is the button,
   and the arrow says which column and which way. */
th[data-sort] .th-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer; white-space: nowrap; }
th[data-sort] .th-sort:hover, th[data-sort] .th-sort:focus-visible { color: var(--blue-700); }
th[data-sort] .th-arrow::after { content: "\2195"; opacity: .35; font-size: .95em; }
th[data-sort][aria-sort="ascending"] .th-arrow::after { content: "\25B2"; opacity: 1; color: var(--blue-700); font-size: .7em; }
th[data-sort][aria-sort="descending"] .th-arrow::after { content: "\25BC"; opacity: 1; color: var(--blue-700); font-size: .7em; }
.comps-table th.c-num .th-sort { justify-content: flex-end; }

/* A sale ticked out of the figures (partials/comparables.ejs). */
.comps-table .c-tick { width: 28px; padding-right: 0; }
.comps-table .c-tick input { width: 15px; height: 15px; accent-color: var(--blue-700); cursor: pointer; }
.comps-table tr.is-off td:not(.c-tick) { opacity: .45; }
.comps-counting { margin: -4px 0 10px; color: var(--ink-500); font-size: .78rem; }
.comps-table .c-num { text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.comps-table .c-addr { text-align: left; }
.comps-table .c-addr a { color: var(--blue-700); font-weight: 650; text-decoration: none; }
.comps-table .c-addr a:hover { text-decoration: underline; }
.comps-table .c-addr span { display: block; color: var(--ink-500); font-size: .73rem; }

.comps-footnote { margin: 9px 0 0; color: var(--ink-500); font-size: .74rem; line-height: 1.5; }
.comps-footnote:empty { display: none; }
.comps-more { margin-top: 10px; }

/* ---- map ----------------------------------------------------------------- */
/* A fixed pixel height, never a percentage. A map in a container with no
   resolved height builds into nothing and shows a blank grey box, which is how
   the earlier attempt at this failed. */
.map-canvas { height: 280px; border-radius: var(--radius-md); border: 1px solid var(--line);
  background: var(--surface-muted); overflow: hidden; }
.map-note { margin: 10px 0 0; color: var(--ink-500); font-size: .78rem; line-height: 1.6; }
.map-note a { color: var(--blue-700); }
.map-none { margin: 0; color: var(--ink-500); font-size: .88rem; }
.leaflet-container { font: inherit; }

/* ---- history, bounded ---------------------------------------------------- */
/* The whole point of putting this on the form is that it cannot take the page
   over, so it scrolls inside a fixed height however much piles up. */
.history-scroll { max-height: 260px; overflow-y: auto; padding-right: 6px; }
.edit-was { margin: 0; color: var(--ink-500); font-size: .72rem; font-style: italic; }

/* ---- the property page, for the people who only read it ------------------ */
/* Everything below is the read side. It is scanned, not filled in, so it gets
   larger values, quieter labels, and headings that read as titles. */

.detail-head { display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.detail-title { min-width: 0; flex: 1 1 340px; }
.detail-head h1 { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.15;
  letter-spacing: -.015em; }
.detail-where { margin: 7px 0 0; color: var(--ink-500); font-size: .95rem; }

/* How old the page is, said quietly. It is not news until it is, so it reads
   as a footnote beside the address rather than as a warning. */
.detail-fresh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin: 8px 0 0; color: var(--ink-500); font-size: .8rem; }
.fresh-recheck { border: 0; background: none; padding: 0; color: var(--blue-700);
  font-weight: 600; text-decoration: underline; cursor: pointer; }
.fresh-recheck[disabled] { color: var(--ink-500); cursor: default; text-decoration: none; }
.fresh-said:empty { display: none; }
.fresh-said.is-bad { color: var(--amber-700, #8a6314); }
.detail-owner { display: block; margin-top: 2px; font-size: .84rem; }

.detail-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.detail-edit { text-decoration: none; white-space: nowrap; }

/* Panel titles are titles: bigger, with a rule under them, so the eye can find
   the top of each box without reading it. */
.panel h2 { margin: 0 0 14px; padding-bottom: 10px; font-size: 1.04rem;
  font-weight: 700; letter-spacing: -.005em; border-bottom: 1px solid var(--line); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; padding: 0; border: 0; }
.panel-link { color: var(--blue-700); font-size: .8rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; }
.panel-link:hover { text-decoration: underline; }
/* The same link when it opens something on the page rather than going anywhere. */
button.panel-link { background: none; border: 0; padding: 0; font: inherit; font-size: .8rem;
  font-weight: 600; cursor: pointer; }
.panel p.hint { margin: -4px 0 16px; }

/* Read, not filled in: the value carries the weight and the label steps back. */
.detail-columns .record-facts { gap: 0; margin: 0; }
.detail-columns .record-facts div { align-items: baseline; padding: 9px 0;
  border-top: 0; border-bottom: 1px solid var(--line); }
.detail-columns .record-facts div:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-columns .record-facts dt { font-size: .82rem; }
.detail-columns .record-facts dd { font-size: .95rem; font-weight: 700;
  font-variant-numeric: tabular-nums; }

/* ---- the map box --------------------------------------------------------- */
.map-canvas.is-empty { display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px; }
.map-none { margin: 0; color: var(--ink-500); font-size: .88rem; max-width: 40ch; }

.map-coords { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px; align-items: end; margin-top: 16px; }
.map-save { display: flex; flex-direction: column; gap: 6px; }
.map-save .button { width: 100%; }
.map-save .button:disabled { opacity: .45; cursor: default; }
.map-save .button.is-ready { background: var(--gold-600); border-color: var(--gold-600); }

/* Leaflet's own controls, brought closer to the rest of the page. */
.leaflet-control-layers { border-radius: 9px !important; border: 1px solid var(--line) !important;
  box-shadow: 0 4px 14px rgba(11,33,52,.12) !important; }
.leaflet-control-layers-list { font-size: .82rem; font-weight: 600; padding: 4px 2px; }
.leaflet-bar a { border-radius: 7px !important; }

/* ---- the choice chips ---------------------------------------------------- */
/* These wrapped into a ragged column because each was only as wide as its own
   word. A grid gives them one width and straight edges. */
/* Fixed columns, not 1fr: every chip is the same width and the right edge of
   each row lines up. Wrapping flex chips sized to their own word is what made
   these look thrown at the page. */
.edit-checks { display: grid; grid-template-columns: repeat(auto-fill, var(--chip, 142px)); gap: 7px; }
.check { justify-content: flex-start; padding: 7px 11px; }
.check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.edit-origin { margin: 8px 0 0; color: var(--ink-500); font-size: .8rem; max-width: 62ch; }

/* .button was written for a full-width form submit, where the browser centres
   the label for free. As a link it is a block with no padding, so the text sat
   against the edges. Centre and pad it without touching the widths already in
   use elsewhere. */
.button { display: inline-flex; align-items: center; justify-content: center;
  padding: 0 18px; text-decoration: none; cursor: pointer; }
.detail-edit { width: auto; }

/* ---- Marketing Information ----------------------------------------------- */
.market-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 0 0 20px; padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--surface-muted); }
.market-top dt { color: var(--ink-500); font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; }
.market-top dd { margin: 3px 0 0; font-size: 1.05rem; font-weight: 700;
  font-variant-numeric: tabular-nums; }
/* Where a Last Sold from Defaults came from: small, under the date. */
.market-top .market-from { display: block; margin-top: 2px; color: var(--ink-500);
  font-size: .72rem; font-weight: 600; line-height: 1.35; }

.market-pair { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.comps-bare { min-width: 0; }
.comps-title { margin: 0 0 12px; padding-bottom: 8px; font-size: .92rem; font-weight: 700;
  border-bottom: 1px solid var(--line); }
.panel.comps .comps-title { font-size: 1.04rem; }

/* ---- the history, folded away -------------------------------------------- */
/* Closed by default: it is a reference, not the point of the page. */
.history-box { padding: 0; }
.history-box > summary { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 22px; cursor: pointer; font-size: 1.04rem; font-weight: 700;
  list-style: none; }
.history-box > summary::-webkit-details-marker { display: none; }
.history-box > summary::after { content: "▾"; color: var(--ink-500); font-size: .9rem;
  transition: transform .15s ease; }
.history-box[open] > summary::after { transform: rotate(180deg); }
.history-box[open] > summary { border-bottom: 1px solid var(--line); }
.history-count { color: var(--ink-500); font-size: .78rem; font-weight: 600; margin-left: auto; }
.history-box > *:not(summary) { padding-left: 22px; padding-right: 22px; }
.history-box > .history-scroll { padding-bottom: 18px; }
.history-more { margin: 0; padding-bottom: 18px; color: var(--ink-500); font-size: .8rem; }
.history-more a { color: var(--blue-700); }

/* ---- documents on a record ----------------------------------------------- */
.drop { border: 2px dashed var(--line); border-radius: var(--radius-md);
  background: var(--surface-muted); padding: 20px; text-align: center;
  transition: border-color .12s ease, background .12s ease; }
.drop.is-over, [data-drop].is-over .drop { border-color: var(--blue-700); background: var(--blue-100); }
.drop-say { margin: 0 0 12px; font-size: .92rem; }
.drop-pick { color: var(--blue-700); font-weight: 700; cursor: pointer; text-decoration: underline; }
.drop-kinds { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.drop-note { margin: 12px 0 0; color: var(--ink-500); font-size: .76rem; }
.drop .edit-state { margin-top: 10px; }

.doc-list { list-style: none; margin: 16px 0 0; padding: 0; }
.doc-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .87rem; }
.doc-list li:last-child { border-bottom: 0; }
.doc-kind { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-muted); color: var(--ink-700);
  font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.doc-name { flex: 1 1 220px; min-width: 0; color: var(--blue-700); font-weight: 600;
  text-decoration: none; overflow-wrap: anywhere; }
.doc-name:hover { text-decoration: underline; }
.doc-meta { color: var(--ink-500); font-size: .76rem; white-space: nowrap; }
.doc-remove { flex: 0 0 auto; }
.doc-empty { margin: 16px 0 0; }

/* ---- the customer ledger -------------------------------------------------- */
/* A list of money and dates reads as a table. Figures right-aligned on tabular
   numerals so the eye compares down a column rather than across a card. */
.ledger { width: 100%; min-width: 780px; border-collapse: collapse; font-size: .85rem; }
.ledger th { padding: 0 12px 8px; border-bottom: 1.5px solid var(--ink-900);
  color: var(--ink-500); font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; text-align: left; white-space: nowrap; }
.ledger td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tbody tr:hover { background: var(--surface-muted); }
.ledger .c-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger .c-account a { color: var(--blue-700); font-weight: 700; text-decoration: none;
  font-variant-numeric: tabular-nums; }
.ledger .c-account a:hover { text-decoration: underline; }
.ledger-sub { display: block; color: var(--ink-500); font-size: .74rem; }
/* Behind is the thing the page exists to surface, so it is marked on the row
   rather than left to be read off a number. */
.ledger tr.is-behind { background: var(--red-100); }
.ledger tr.is-behind:hover { background: #ffe4e4; }
.days-late { color: var(--red-700); font-weight: 700; }

/* Wide content scrolls inside its own box, never taking the page with it.
   This was referenced by the comparison tables and the two ledgers before it
   existed, so on a narrow screen the whole page slid sideways. */
/*
 * A WIDE TABLE SCROLLS INSIDE ITS BOX, NOT THE PAGE WITH IT.
 *
 * `position: relative` is not decoration here. Every one of these holds a
 * table with a visually-hidden label in it — `.vh`, `.sr-only-label` — and a
 * screen-reader label is positioned ABSOLUTE with no offsets, so it sits at
 * its static position, which inside a 900px table is x = 890. With nothing
 * positioned above it, that resolves against the page: one invisible pixel,
 * 890 across, and Contractor Payments scrolled sideways to 891 on a phone
 * while the table itself was behaving perfectly. Making the scroller the
 * containing block puts the label back inside the thing that clips it.
 */
.scroller, .pay-scroll, .mc-scroll { position: relative; }
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroller table { margin: 0; }

/* The empty state. It appears on every list page and had no rule at all, so
   "Nothing matches that" rendered as a bare line of body text under the
   filters, reading more like a glitch than an answer. */
.empty { border: 1px dashed var(--line); border-radius: var(--radius-md);
  background: var(--surface-muted); padding: 28px 24px; text-align: center;
  color: var(--ink-500); font-size: .92rem; }

/* .comps-extra and .map-box carry no style on purpose: one is a hook the
   show-more script toggles, the other identifies a panel that is otherwise
   an ordinary .panel. */

/* ---- the buying process -------------------------------------------------- */
/* Two rows, and they answer different questions. The first picks WHAT TO SHOW —
   applications, everything in progress, or every stage — and the page opens on
   the first of them. The second narrows to one stage. There are no arrows
   between the stages: an arrow looked like a control and was not one. Gone Cold
   and Dead Deals sit apart, quieter, because neither is a step anybody is
   working toward. */
.stage-views { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.view-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--ink-700); text-decoration: none; font-size: .85rem; font-weight: 700; }
.view-chip:hover { border-color: var(--blue-700); }
.view-chip.is-on { border-color: var(--navy-900); background: var(--navy-900); color: #fff; }
.view-n { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ink-500); }
.view-chip.is-on .view-n { color: #cfe0ee; }
.stage-strip { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0 0 14px; }
.stage-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 auto; }
.stage-aside { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding-left: 12px; border-left: 1px solid var(--line); }
.stage-chip { display: flex; flex-direction: column; gap: 1px; min-width: 104px;
  padding: 9px 13px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink-700); text-decoration: none; }
.stage-chip:hover { border-color: var(--blue-700); }
.stage-chip.is-quiet { background: var(--surface-muted); }
.stage-chip.is-on { border-color: var(--navy-900); background: var(--navy-900); color: #fff; }
.stage-n { font-size: 1.25rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stage-name { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.stage-chip.is-on .stage-name { color: #cfe0ee; }
.stage-note { margin: 0 0 12px; color: var(--ink-500); font-size: .8rem; line-height: 1.55; }
.stage-note a { color: var(--blue-700); }

/* WHO IN REVIEW IS WAITING ON. A second row under the stages, quieter than
   them: these narrow one stage rather than choosing between stages, and they
   should not read as another rank of the same thing. */
.waiting-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 12px; }
.waiting-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface-muted);
  color: var(--ink-700); text-decoration: none; font-size: .8rem; font-weight: 700; }
.waiting-chip:hover { border-color: var(--blue-700); }
.waiting-chip.is-on { border-color: var(--blue-700); background: var(--blue-100);
  color: var(--blue-700); }
.waiting-chip.is-quiet { color: var(--ink-500); cursor: default; }
.waiting-n { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ink-500); }
.waiting-chip.is-on .waiting-n { color: var(--blue-700); }

/* NOBODY HAS MOVED THESE. One chip, and it carries a warning rather than a
   choice, so it is gold rather than blue and sits on its own line. */
.stale-strip { margin: -4px 0 12px; }
.stale-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border: 1px solid var(--gold-100); border-radius: 999px; background: var(--gold-100);
  color: #7a5410; text-decoration: none; font-size: .8rem; font-weight: 700; }
.stale-chip:hover { border-color: #b8860b; }
.stale-chip.is-on { background: #7a5410; border-color: #7a5410; color: #fff; }
.stale-n { font-variant-numeric: tabular-nums; font-weight: 800; }
/* Waiting for the customer to sign the CIS: the chip over the list, and the tag on a row. */
.sign-chip { border-color: #9fc3e6; background: #eef5fc; color: #0b5cad; }
.sign-chip:hover { border-color: var(--blue); }
.sign-chip.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.sign-tag { display: block; width: fit-content; margin-top: 5px; padding: 2px 9px; border-radius: 8px;
  background: #eef5fc; color: #0b5cad; font-size: 11.5px; font-weight: 700; }

/* Each stage keeps one colour everywhere it appears, so it can be read from
   the corner of the eye on the list and on the record page alike. */
.stage-tag { display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-muted); color: var(--ink-700);
  font-size: .7rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.stage-tag.s-waiver { background: var(--blue-100); color: var(--blue-700); }
.stage-tag.s-applied { background: var(--gold-100); color: #7a5410; }
.stage-tag.s-review { background: #efe9fb; color: #5a3d9a; }
.stage-tag.s-cis { background: #fdf0d5; color: #7a4b00; }
.stage-tag.s-closing { background: var(--green-100); color: var(--green-700); }
.stage-tag.s-sold { background: var(--navy-900); color: #fff; }
.stage-tag.s-cold { background: var(--surface-muted); color: var(--ink-500); }
.stage-tag.s-dead { background: var(--red-100); color: var(--red-700); }
.stage-step { display: block; margin-top: 3px; color: var(--ink-500); font-size: .74rem; }

.deal-name { color: var(--blue-700); font-weight: 700; text-decoration: none; }
.deal-name:hover { text-decoration: underline; }
.ledger .company-tag { margin-top: 4px; }

/* ---- the application page ---------------------------------------------- */
.app-notes { margin: 0 0 14px; color: var(--muted, #5b6472); font-size: 13.5px; }
.app-notes p { margin: 2px 0; }
.app-notes p:first-child { color: inherit; font-weight: 600; }
.app-wide { grid-column: 1 / -1; }
.app-ssn { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.app-ssn-hidden { letter-spacing: 0.08em; color: var(--muted, #5b6472); }
.app-ssn-show { padding: 4px 12px; }
.app-files { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.app-file { background: var(--surface-2, #f3f5f8); border-radius: 8px; padding: 6px 10px; font-size: 13.5px; }
.app-file-none { color: var(--muted, #5b6472); }
.app-attach { cursor: pointer; }
.app-property { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px;
  border: 1px solid var(--line, #e3e7ee); border-radius: 10px; text-decoration: none; color: inherit; }
.app-property:hover { border-color: var(--accent, #176aa6); }
/* minmax(0, 1fr), not the 1fr a grid takes by default: a plain 1fr column is
   never narrower than its widest content, so the income calculator's table
   (which has its own sideways scroller) stretched the whole step past a
   phone's edge and the panel scrolled sideways (section 3 item 16). */
.app-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.app-section h2 { margin-top: 0; }

/* ---- application: files, notes and the final step -------------------------- */
.step-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 600;
  background: var(--surface-2, #eef2f7); color: var(--ink, #1d2533); }
.app-pinned { border-left: 4px solid #c27a00; background: #fff6e5; color: #4a3200;
  padding: 12px 16px; border-radius: 8px; margin: 0 0 18px; }
.app-pinned p { margin: 6px 0 0; white-space: pre-wrap; }
.file-box { border: 1px solid var(--line, #e3e7ee); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; }
/* A step's papers side by side: three across, one under another on a phone. */
.file-boxes.is-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
  margin: 0 0 12px; }
.file-boxes.is-row > .file-box { margin: 0; min-width: 0; }
.file-box-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.file-count { font-size: 12px; color: var(--muted, #5b6472); }
.file-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.file-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.file-meta { color: var(--muted, #5b6472); font-size: 12.5px; }
.file-legacy a { color: var(--muted, #5b6472); }
.file-drop { display: block; text-align: center; padding: 14px; border: 2px dashed #b9c3d3; border-radius: 10px;
  cursor: pointer; color: var(--ink, #1d2533); background: var(--surface-2, #f7f9fc); }
.file-drop:hover, .file-box.is-over .file-drop { border-color: var(--accent, #176aa6); background: #eef6fc; }
/* The whole box takes a drop, so the strip at its foot grows to fill it rather
   than being the only target in it. */
.file-box[data-drop] { display: flex; flex-direction: column; }
.file-box[data-drop] > .file-drop { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; }
.app-notes-panel h2, .workflow-panel h2 { margin-top: 0; }
.note-new { display: grid; gap: 8px; margin-bottom: 14px; }
.note-new textarea, .workflow-note textarea { width: 100%; }
.notes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.note-item { border-top: 1px solid var(--line, #e3e7ee); padding-top: 10px; }
.note-item.is-event .note-body { color: var(--muted, #5b6472); }
.note-meta { font-size: 12.5px; color: var(--muted, #5b6472); }
.note-kind { font-weight: 600; color: var(--ink, #1d2533); margin-right: 6px; }
.note-body { margin: 4px 0 0; white-space: pre-wrap; }
.workflow-panel { border: 2px solid var(--accent, #176aa6); }
.workflow-where { margin-top: 0; }
.workflow-ask { font-weight: 600; margin-bottom: 6px; }
.app-checklist { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.app-checklist .is-done { color: #1f7a3a; }
.app-checklist .is-missing { color: #a3261b; }
.workflow-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.workflow-note { display: grid; gap: 8px; margin: 10px 0; }
.workflow-override { margin-top: 14px; }
.workflow-override summary { cursor: pointer; color: var(--muted, #5b6472); }
.workflow-override label { display: grid; gap: 4px; margin: 8px 0; }
/* Deal Is Dead, under the agent box on every step of the file (12 October 2026). */
.deal-dead-panel { padding-top: 12px; padding-bottom: 12px; }
.deal-dead-wrap > summary { list-style: none; width: max-content; color: #a4291f; border-color: #f0c7c2; }
.deal-dead-wrap > summary::-webkit-details-marker { display: none; }
.deal-dead-wrap[open] > summary { margin-bottom: 8px; }
.deal-dead-wrap label { display: grid; gap: 4px; margin: 8px 0; max-width: 560px; }
.deal-dead-wrap textarea { width: 100%; }
.workflow-go-dead { border-color: #a3261b; color: #a3261b; }
.is-done, .is-missing, .is-event { }

/* The master switch for email to customers, on the Data page. */
.email-switch { display: grid; gap: 12px; margin-top: 10px; max-width: 520px; }
.email-switch-modes { border: 0; padding: 0; margin: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.email-switch-modes legend { font-weight: 600; margin-bottom: 6px; }
.email-switch-modes label { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.email-switch-list { display: grid; gap: 6px; font-weight: 600; }
.email-switch-list textarea { width: 100%; font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid #d6dce2; }
.banner.email-switch-error { background: #fdecea; border-color: #f3c1bb; color: #8a1c12; }

/* "Copy waiver link": on a property, and on the Buying Process page. */
.copy-link { white-space: nowrap; }
.backfill-actions { display: grid; gap: 10px; margin-top: 12px; }
.backfill-prospects { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; }
.backfill-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.portal-window { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.portal-window input { width: 7rem; }
/* People To Check's card (people-check.ejs, "card sec check") — by its card.
   As a bare .check this reached every tick box on the desk drawn as a chip
   (label.check) and stood its box above its word: Home Type on Add a
   Property, Certified Slips' Leave Out, a waiver's kinds of file (found
   13 October 2026). */
.card.check { display: grid; gap: 10px; }
.check-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.check-head h2 { margin: 0 0 4px; }
.check-why { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff8e6; border: 1px solid #f0d58a; color: #5c4210; font-size: 14px; }
.check-others { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.check-others li { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line, #e3e8ed); border-radius: 10px; }
.check-others .hint { display: block; }
/* On a phone (the whole-desk check, 17 October 2026): a long email, a long
   name or the backfill's note wraps instead of pushing the page sideways. */
.card.check > *, .check-others > li, .check-head > div, .check-others li > div { min-width: 0; }
.check-head .hint, .check-why, .check-others .hint { overflow-wrap: anywhere; }
.check-head .btn, .check-others .btn { white-space: normal; text-align: left; max-width: 100%; }
/* The chips' .check span (one line, cut with "…") reached this card too and
   hid the other row's email — the thing being compared. */
.card.check span { overflow: visible; text-overflow: clip; white-space: normal; }
.check-pager { display: flex; gap: 8px; margin: 14px 0 30px; }

/* ---- the application, as five steps ---------------------------------------- */
/* The file is work, not a form: one step at a time, in order, each saying what
   it is for and what it is still waiting for. The rail is the whole job at a
   glance — where you are, what is done, and what is left in each step. */
.step-rail { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.step-tab { display: flex; align-items: center; gap: 10px; flex: 1 1 190px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink-700); text-align: left; cursor: pointer; font: inherit; }
.step-tab:hover { border-color: var(--blue-700); }
.step-tab.is-on { border-color: var(--navy-900); background: var(--navy-900); color: #fff; }
.step-num { flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--surface-muted); color: var(--ink-700);
  font-size: .82rem; font-weight: 800; }
.step-tab.is-done .step-num { background: var(--green-100); color: var(--green-700); }
.step-tab.is-missing .step-num { background: var(--gold-100); color: #7a5410; }
/* Already after is-missing, which is why the circle was readable and the
   count beside it was not. Keep them in this order. */
.step-tab.is-on .step-num { background: rgba(255, 255, 255, .18); color: #fff; }
.step-label { flex: 1 1 auto; font-size: .86rem; font-weight: 700; line-height: 1.25; }
.step-state { flex: none; font-size: .72rem; font-weight: 700; color: var(--ink-500); }
.step-tab.is-missing .step-state { color: #7a5410; }
/* IS-ON LAST, AND THAT IS THE WHOLE RULE. A step is both at once — the one
   you are on AND the one with three things to do — and these two have the
   same weight, so whichever is written second wins. With is-missing second,
   the step you are looking at printed its own count in dark amber on dark
   navy: about 2.1 to 1, which is unreadable, on the only chip anybody is
   reading. */
.step-tab.is-on .step-state { color: #f3d79a; }

.step-head { margin-bottom: 14px; }
.step-of { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-500); }
.step-head h2 { margin: 2px 0 4px; }
.step-why { margin: 0; color: var(--ink-500); font-size: .88rem; line-height: 1.55; max-width: 68ch; }
.step-checklist { margin: 0 0 14px; }
.step-where { border: 0; background: none; padding: 0; font: inherit; font-weight: 400;
  color: var(--blue-700); text-decoration: underline; cursor: pointer; }
.detail-with { margin: 2px 0 0; color: var(--ink-500); font-size: .92rem; }
.step-add { margin: 16px 0 0; }
.step-move { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
/* .button is full width by default, which is right in a sign-in card and wrong
   in a row of two. */
.step-move .button { width: auto; padding: 0 20px; }
.step-move .button:only-child { margin-left: auto; }

/* ---- the POI calculator ---------------------------------------------------- */
/* The office's own spreadsheet, built in: a line per income source, the two
   methods side by side, and the figure between them that the file uses. The
   working stays with the file so an approver can see how the number was got. */
.poi-calc { margin: 18px 0 0; padding: 16px; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--surface-muted); }
.poi-calc h3 { margin: 0 0 4px; font-size: 1rem; }
.poi-person { margin: 16px 0 0; }
.poi-person-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.poi-sub { color: var(--ink-500); font-size: .8rem; font-variant-numeric: tabular-nums; }
.poi-table { width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md); font-size: .82rem; }
.poi-table th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line);
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500); }
.poi-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.poi-table tr:last-child td { border-bottom: 0; }
.poi-table .c-num { text-align: right; font-variant-numeric: tabular-nums; }
.poi-table input { width: 100%; min-width: 92px; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; background: var(--surface); color: var(--ink-700); }
.poi-table input[type="date"] { min-width: 132px; }
.poi-empty td { color: var(--ink-500); text-align: center; padding: 14px; }
.poi-total { margin: 16px 0 0; font-size: .95rem; font-variant-numeric: tabular-nums; }
.poi-calc .link { border: 0; background: none; padding: 0; font: inherit;
  color: var(--red-700); text-decoration: underline; cursor: pointer; }
.poi-adds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* A line of checks (pay periods): the checks sit in a row of their own under
   the line, one per pay period, and say what is wrong between them. */
.poi-checks-line td { border-bottom: 0; }
.poi-checks > td { background: var(--surface-muted); padding: 10px 12px 12px; }
.poi-checks-head { margin: 0 0 8px; font-size: .74rem; font-weight: 700; color: var(--ink-500); }
.poi-checks-head span { font-weight: 400; }
/* Kept in view while the figures to the right are scrolled to on a phone, and
   as wide as the table's own box (cqw), never the table, which is wider. */
.poi-scroll { container-type: inline-size; }
.poi-checks > td > * { position: sticky; left: 12px; max-width: min(640px, calc(100cqw - 24px)); }
.poi-check-list { display: grid; gap: 6px; margin-bottom: 8px; }
.poi-check { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.poi-check label { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ink-500); }
.poi-check input[type="date"] { min-width: 140px; }
.poi-check input[data-check-field="net"] { width: 116px; min-width: 0; }
.poi-check-n { min-width: 1.4em; color: var(--ink-500); font-size: .74rem; font-variant-numeric: tabular-nums; }
.poi-gaps { margin: 0 0 8px; padding: 0; list-style: none; }
.poi-check-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.poi-gaps:empty { display: none; }
.poi-gaps li { margin-top: 4px; padding: 6px 10px; border-radius: 8px; font-size: .8rem;
  background: var(--amber-50, #fff7e6); color: var(--amber-800, #7a4b00); border: 1px solid var(--amber-200, #f5d58a); }
/* This check, under a year-to-date line (13 October 2026): its net and how
   often they are paid, and which way the month was worked out. */
tr[data-id]:has(+ .poi-this-check) td { border-bottom: 0; }
.poi-this-check > td { padding: 2px 12px 10px; }
.poi-this-check > td > * { position: sticky; left: 12px; }
.poi-this-check label { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px;
  font-size: .78rem; color: var(--ink-500); }
.poi-this-check input[data-field="periodNet"] { width: 116px; min-width: 0; }
.poi-this-check select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit;
  background: var(--surface); color: var(--ink-700); }
.poi-check-said { display: block; margin-top: 6px; max-width: min(640px, calc(100cqw - 24px));
  font-size: .78rem; color: var(--ink-500); }

/* An income under the minimum is not a red X to argue with: it says by how
   much, and offers the one thing that can happen next. */
.poi-exception { margin: 18px 0 0; padding: 14px 16px; border-left: 4px solid #c27a00;
  border-radius: 10px; background: #fff6e5; color: #4a3200; display: grid; gap: 8px; }
.poi-exception.is-on { border-left-color: var(--green-700); background: var(--green-100); color: var(--green-700); }
/* The other answer, said as plainly: the verified income covers the minimum. */
.poi-meets { margin: 18px 0 0; padding: 12px 16px; border-left: 4px solid var(--green-700);
  border-radius: 10px; background: var(--green-100); color: var(--green-700); font-weight: 600; }
.poi-exception p { margin: 0; }
.poi-exception label { font-size: .78rem; font-weight: 700; }
.poi-exception textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; }

/* One thread per file, the way a comment section works: everything anybody
   said, and every decision, with who and when. What the customer can see is
   marked, because the default is that they cannot. */
.note-share { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--ink-500); }
/* The income is short: tell them, and call them (section 3, round B). */
.poi-follow { margin: 10px 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.poi-follow p { margin: 0 0 6px; }
.poi-follow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.poi-follow-list li.is-done .follow-said { color: var(--green-700, #1f7a43); font-weight: 600; }
.follow-form { display: grid; gap: 6px; margin-top: 6px; }
.follow-form textarea { width: 100%; }
.follow-form label { font-size: .8rem; font-weight: 600; color: var(--ink-500); }
/* A score read off a credit report, until somebody checks it (section 3, round D). */
.score-read:empty { display: none; }
.score-read p { margin: 4px 0 0; font-size: .78rem; color: var(--ink-500); }
.score-read.is-filled p { color: var(--amber-800, #7a4b00); }
.score-read.is-differs p { color: var(--red-700); }
.score-read.is-checked p { color: var(--green-700, #1f7a43); }
.score-read .link { border: 0; background: none; padding: 0; font: inherit; font-weight: 600;
  color: var(--blue-700); text-decoration: underline; cursor: pointer; }
/* Who a note is for: one choice of three (section 3, round B). */
.note-for { margin: 0; padding: 0; border: 0; display: grid; gap: 6px; }
.note-for legend { padding: 0; margin-bottom: 4px; font-size: .74rem; font-weight: 700; color: var(--ink-500);
  text-transform: uppercase; letter-spacing: .04em; }
.note-for label { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); cursor: pointer; font-size: .86rem; }
.note-for label:has(input:checked) { border-color: var(--blue-700); background: var(--blue-50, #eef5fd); }
.note-for label.is-off { cursor: not-allowed; opacity: .6; }
.note-for input { margin-top: 3px; }
.note-for span { display: grid; gap: 1px; }
.note-for small { color: var(--ink-500); font-size: .78rem; }
/* The notes beside the steps on a computer; under them on a phone or a panel
   too narrow for two columns. Measured from the page's own width (cqw), so
   the panel over the list decides for itself. */
.app-work-wrap { container-type: inline-size; }
.app-work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.app-main { min-width: 0; display: grid; gap: 18px; }
.app-side .app-notes-panel { margin: 0; }
@container (min-width: 880px) {
  .app-work { grid-template-columns: minmax(0, 1fr) 300px; }
  .app-side { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
}
.note-seen { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  background: var(--blue-100); color: var(--blue-700); font-size: .68rem; font-weight: 700; }
.note-from { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  background: var(--gold-100); color: #7a5410; font-size: .68rem; font-weight: 700; }
.note-item.is-shared { border-left: 3px solid var(--blue-700); padding-left: 10px; }

/* ---- a property, over the page you are on ---------------------------------- */
.peek { width: min(560px, 92vw); padding: 0; border: 0; border-radius: 16px;
  background: var(--surface); color: var(--ink-700); box-shadow: 0 24px 60px rgba(12, 22, 34, .3); }
.peek::backdrop { background: rgba(12, 22, 34, .5); }
.peek-close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: var(--surface-muted); color: var(--ink-500);
  font-size: 1.3rem; line-height: 1; cursor: pointer; }
.peek-close:hover { background: var(--line); }

/* ---- documents you can see without leaving the file ------------------------ */
.file-list li.file-row { align-items: flex-start; gap: 12px; flex-wrap: nowrap; padding: 6px 0; }
.file-row-text { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.file-row-text a { overflow-wrap: anywhere; }
.file-shot { flex: none; width: 58px; height: 74px; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  cursor: pointer; display: grid; place-items: center; }
.file-shot:hover { border-color: var(--blue-700); }
.file-shot img, .file-shot embed, .file-shot .file-shot-pdf { width: 100%; height: 100%; }
.file-shot img { object-fit: cover; }
.file-shot embed { pointer-events: none; border: 0; }
.file-shot.is-plain { cursor: default; background: var(--surface-muted); color: var(--ink-500);
  font-size: .6rem; font-weight: 800; letter-spacing: .06em; }
.peek-frame { display: block; width: 100%; height: min(76vh, 900px); border: 0;
  border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; background: var(--surface-muted); }

/* Two papers at once: a credit report against the pay stubs, which live in
   different steps of the page and used to mean two browser tabs. Wider than
   the one-up peek, because half of 980px is not a page anybody can read. */
.peek-docs { width: min(1500px, 96vw); }
.peek-bar { display: flex; align-items: center; gap: 12px; padding: 14px 54px 12px 20px; }
.peek-title { margin: 0; flex: 1 1 auto; min-width: 0; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek-two { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line);
  border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; overflow: hidden; }
.peek-two[data-panes="2"] { grid-template-columns: 1fr 1fr; }
.peek-pane { display: grid; grid-template-rows: auto 1fr; background: var(--surface); min-width: 0; }
.peek-pane-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.peek-pick { flex: 1 1 auto; min-width: 0; }
.peek-two .peek-frame { height: min(74vh, 880px); border-radius: 0; }

/* On a phone there is no side by side; they stack and each gets half. */
@media (max-width: 820px) {
  .peek-two[data-panes="2"] { grid-template-columns: 1fr; }
  .peek-two[data-panes="2"] .peek-frame { height: min(37vh, 420px); }
}
.step-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 0; }

/* Reading the scores off the report: it says what it found and where, and a
   person is the one who puts them in. */
.credit-read { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--surface-muted); display: grid; gap: 8px; }
.credit-read .hint { margin: 0; }
.credit-list { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 6px;
  font-size: .88rem; font-variant-numeric: tabular-nums; }
.agent-rule { display: grid; gap: 10px; justify-items: start; }
.agent-rule .agree { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* A file whose agent has left, or who never had one. Quiet, but not hidden. */
.needs-agent { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--gold-100); color: #7a5410; font-size: .66rem; font-weight: 700; white-space: nowrap; }

/* ---- the property page ------------------------------------------------------ */
.photos-main { display: block; width: 100%; max-height: 320px; object-fit: cover;
  border-radius: var(--radius-md); margin-bottom: 10px; }
.map-copy { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 6px; }

/* The filters people use every time stay out; the rest fold away until they
   are wanted, and open by themselves when one of them is on — a filter that is
   set and invisible is how a list lies to you. */
.filter-more { margin-top: 4px; }
.filter-more > summary { cursor: pointer; color: var(--blue-700); font-size: .82rem;
  font-weight: 700; padding: 4px 0; }
.filter-more[open] > summary { margin-bottom: 10px; }
.result-sort { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; }
.result-sort label { font-size: .78rem; font-weight: 700; color: var(--ink-500); }
.result-sort select { min-height: 34px; padding: 0 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); color: var(--ink-700); font: inherit; font-size: .82rem; }

/* Adding photos from the property itself, so nobody keeps a second system open
   to put a picture on a house. */
.photo-add { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line); }
.photo-add .field { display: grid; gap: 4px; margin: 0; }
.photo-add .field > span { font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-500); }
.photo-add input[type="text"], .photo-add select { min-height: 38px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--ink-700); font: inherit; }
.photo-add .hint { margin: 0; }
.mini.off { color: var(--ink-500); background: var(--surface-muted); }

/* ---- the photos page -------------------------------------------------------- */
/* Adding photos is work, so it has room: the property page keeps the picture and
   the link, and everything you do to photos happens here. */
.photo-go { margin: 14px 0 0; }
.photo-batch .panel-head h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.photo-batch-sub { font-size: .76rem; font-weight: 600; color: var(--ink-500);
  letter-spacing: 0; text-transform: none; }
.photo-grid { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.photo-tile { margin: 0; display: grid; gap: 6px; justify-items: stretch; }
.photo-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); background: var(--surface-muted); }
.photo-tile a:hover img { border-color: var(--blue-700); }
#photo-add-panel .photo-add { border-top: 0; padding-top: 0; margin-top: 0; max-width: 520px; }

/* Photos on their way to the gallery: one row a file, from the moment it lands
   to Added or why not — public/photo-upload.js, on the Photos page and on the
   price wizard's Photos & Repairs step. A failure is red and says which file. */
[data-photo-upload].is-over { outline: 2px dashed var(--blue-700); outline-offset: 3px;
  background: var(--blue-100); }
.photo-up-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px;
  text-align: left; }
.photo-up-list:empty { display: none; }
.photo-up-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1.4fr);
  align-items: center; gap: 10px; font-size: .76rem; }
.photo-up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 650; color: var(--ink-900); }
.photo-up-bar { height: 5px; border-radius: 99px; background: #dfe7ed; overflow: hidden; }
.photo-up-bar i { display: block; width: 0; height: 100%; background: var(--blue-700);
  transition: width .2s ease; }
.photo-up-say { color: var(--ink-500); }
.photo-up-row.is-ok .photo-up-say { color: var(--green-700); }
.photo-up-row.is-ok .photo-up-bar i { background: var(--green-700); }
.photo-up-row.is-bad .photo-up-say { color: var(--red-700); font-weight: 650; }
.photo-up-row.is-bad .photo-up-bar i { width: 100%; background: var(--red-700); }
@media (max-width: 680px) {
  .photo-up-row { grid-template-columns: minmax(0, 1fr) 60px; }
  .photo-up-say { grid-column: 1 / -1; }
}

/* ---- what they have bought from us before ----------------------------------- */
.previous-box { margin: 18px 0 0; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--surface-muted); }
.previous-box h3 { margin: 0 0 4px; font-size: 1rem; }
.previous-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.previous-item { padding: 10px 12px; border-radius: 10px; background: var(--surface);
  border-left: 4px solid var(--line); }
.previous-item.is-behind { border-left-color: var(--red-700); }
.previous-item.is-ended { border-left-color: #c27a00; }
.previous-item.is-current { border-left-color: var(--blue-700); }
.previous-item.is-paid { border-left-color: var(--green-700); }
.previous-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.previous-kind { font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-500); }
.previous-said { margin: 4px 0 0; font-size: .86rem; color: var(--ink-700); }
.previous-why { margin: 6px 0 0; font-size: .86rem; white-space: pre-wrap; color: var(--ink-700); }

/* ---- marketing -------------------------------------------------------------- */
.health-facts dd.is-warn { color: #8a5a12; }
.hint.is-warn { color: #8a5a12; }
.switch-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }

/* ---- Marketing Center ------------------------------------------------------
   Lifted from the Marketing Center the office already uses, so somebody who
   knows that page knows this one: the green brand, the two-line tabs with an
   icon, the summary card, the banners. Scoped under .mc so the rest of the
   desk keeps its own palette. */
.mc {
  --mc-ink: #1c2530; --mc-muted: #5c6b7a; --mc-line: #e2e8f0;
  --mc-brand: #1f6f43; --mc-brand-ink: #11532f; --mc-accent: #2563eb;
  --mc-warn-bg: #fff7ed; --mc-warn-ln: #fdba74; --mc-warn-ink: #9a3412;
  --mc-on-bg: #e7f6ec; --mc-on-ln: #9bd6ae;
  --mc-off-bg: #f1f3f5; --mc-off-ln: #cbd2d9; --mc-off-ink: #5c6b7a;
  --mc-chip: #eef2f6;
  --mc-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
  color: var(--mc-ink);
  /* A column, not the whole screen. Text that runs the full width of a
     monitor is the thing that makes a page tiring to read, and it is what
     the Marketing Center the office already uses gets right. */
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 60px;
}

/* An uppercase rule across a panel, to group what is inside it. */
.mc .grouphdr { display: flex; align-items: center; gap: 10px; margin: 20px 0 8px;
  font-size: 12.5px; font-weight: 700; color: var(--mc-brand-ink);
  text-transform: uppercase; letter-spacing: .4px; }
.mc .grouphdr .ln { flex: 1; height: 1px; background: var(--mc-line); }
.mc .grouphdr .cnt { font-weight: 600; color: var(--mc-muted);
  text-transform: none; letter-spacing: 0; }
.mc .grouphdr:first-child { margin-top: 0; }
.mc-top { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 8px; }
.mc-brand { display: flex; align-items: center; gap: 11px; }
.mc-logo { width: 38px; height: 38px; border-radius: 10px; background: var(--mc-brand); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 17px; }
.mc-brand h1 { font-size: 19px; margin: 0; font-family: inherit; }
.mc-brand p { margin: 1px 0 0; font-size: 12.5px; color: var(--mc-muted); }

.mc-pill { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid; }
.mc-pill .dot { width: 9px; height: 9px; border-radius: 50%; }
.mc-pill.off { background: var(--mc-off-bg); border-color: var(--mc-off-ln); color: var(--mc-off-ink); }
.mc-pill.off .dot { background: #9aa6b2; }
.mc-pill.test { background: var(--mc-warn-bg); border-color: var(--mc-warn-ln); color: var(--mc-warn-ink); }
.mc-pill.test .dot { background: var(--mc-warn-ink); }
.mc-pill.on { background: var(--mc-on-bg); border-color: var(--mc-on-ln); color: var(--mc-brand-ink); }
.mc-pill.on .dot { background: var(--mc-brand); }

.mc-tabs { display: flex; gap: 4px; margin-top: 16px; border-bottom: 2px solid var(--mc-line);
  flex-wrap: wrap; }
.mc-tab { font-size: 14.5px; font-weight: 600; color: var(--mc-muted); padding: 11px 15px;
  border-bottom: 3px solid transparent; margin-bottom: -2px; border-radius: 8px 8px 0 0;
  display: flex; align-items: center; gap: 8px; text-decoration: none; }
.mc-tab:hover { color: var(--mc-ink); background: #eef2f6; }
.mc-tab.active { color: var(--mc-brand-ink); border-bottom-color: var(--mc-brand); }
.mc-tab .ic { font-size: 16px; line-height: 1; }
.mc-tab .sub { font-weight: 500; font-size: 11px; color: var(--mc-muted); display: block; margin-top: 1px; }
.mc-tab .tab-lab { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.mc-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  background: var(--mc-warn-ink); color: #fff; font-size: 11.5px; font-weight: 700;
  border-radius: 999px; padding: 0 6px; }

.mc-panel { padding-top: 22px; }
.mc-card { background: #fff; border: 1px solid var(--mc-line); border-radius: 12px;
  box-shadow: var(--mc-shadow); padding: 18px 20px; margin-bottom: 16px; }
.mc-card h2 { font-size: 16px; margin: 0 0 4px; font-family: inherit; }
.mc-card .lead { color: var(--mc-muted); font-size: 13.5px; margin: 0 0 2px; }
.mc-card .muted, .mc .muted { color: var(--mc-muted); font-size: 13px; }
.mc-gap { margin-top: 10px; }
.mc-warn { color: var(--mc-warn-ink); }
.mc-define { margin-top: 10px; font-size: 12.5px; }
.mc .bigsummary { background: linear-gradient(180deg, #f0f7f2, #fff); border-color: var(--mc-on-ln); }
.mc .headline { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.mc .headline b { color: var(--mc-brand-ink); }

.mc .statrow { display: flex; gap: 10px; flex-wrap: wrap; }
.mc .stat { flex: 1; min-width: 130px; background: #fff; border: 1px solid var(--mc-line);
  border-radius: 10px; padding: 12px 14px; }
.mc .stat .n { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mc .stat .l { font-size: 12px; color: var(--mc-muted); margin-top: 2px; }

.mc-banner { display: flex; align-items: flex-start; gap: 12px; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px; border: 1px solid; }
.mc-banner .b-ic { font-size: 20px; line-height: 1; }
.mc-banner h3 { margin: 0 0 2px; font-size: 14px; font-family: inherit; }
.mc-banner p { margin: 0; font-size: 13px; }
.mc-banner.offb { background: var(--mc-off-bg); border-color: var(--mc-off-ln); }
.mc-banner.onb { background: var(--mc-on-bg); border-color: var(--mc-on-ln); }
.mc-banner.warnb { background: var(--mc-warn-bg); border-color: var(--mc-warn-ln); color: var(--mc-warn-ink); }
.mc-banner code { background: rgba(255, 255, 255, .6); border-radius: 5px; padding: 1px 5px; }

.mc .holdcard { border: 1px solid var(--mc-line); border-radius: 10px; padding: 12px 14px; margin-top: 10px; }
.mc .holdhead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.mc .holdcard .addr { font-weight: 700; }
.mc .holdcard .plain { font-size: 12.5px; color: var(--mc-muted); }
.mc .holdcard .missing { color: var(--mc-warn-ink); font-weight: 700; font-size: 12.5px; margin-top: 3px; }
.mc .hcard { font-size: 12px; color: var(--mc-accent); white-space: nowrap; text-decoration: none; font-weight: 600; }
.mc .hcard:hover { text-decoration: underline; }

.mc .kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--mc-line); font-size: 13.5px; }
.mc .kv:last-child { border-bottom: 0; }
.mc .kv .k { color: var(--mc-muted); }
.mc .kv .v { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.mc .kv .v.bad { color: var(--mc-warn-ink); }

.mc .setrow { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start;
  padding: 13px 0; border-bottom: 1px solid var(--mc-line); }
.mc .setrow:last-of-type { border-bottom: 0; }
.mc .setlab { flex: 1 1 260px; min-width: 230px; }
/* The label itself, not a <b> used for emphasis inside the description. */
.mc .setlab > b { display: block; font-size: 14px; }
.mc .setlab span { display: block; font-size: 12.5px; color: var(--mc-muted); margin-top: 2px; line-height: 1.45; }
.mc .setctl { flex: 1 1 300px; min-width: 260px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mc-value { font-size: 13px; background: var(--mc-chip); border-radius: 7px; padding: 6px 10px; }

.mc-pick { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.mc-pick select { flex: 1; min-width: 240px; font: inherit; font-size: 13.5px; padding: 8px 10px;
  border: 1px solid var(--mc-line); border-radius: 8px; background: #fff; color: var(--mc-ink); }
.mc-btn { appearance: none; border: 0; cursor: pointer; font-family: inherit; font-weight: 600;
  font-size: 14px; padding: 10px 18px; border-radius: 9px; }
.mc-btn.ghost { background: var(--mc-chip); color: var(--mc-ink); }
.mc-btn.ghost:hover { background: #e2e8f0; }
.mc-link { color: var(--mc-accent); text-decoration: none; font-weight: 600; }
.mc-link:hover { text-decoration: underline; }

.mc-scroll { overflow-x: auto; margin-top: 12px; }
.mc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mc-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--mc-muted); padding: 6px 10px; border-bottom: 1px solid var(--mc-line); }
.mc-table td { padding: 8px 10px; border-bottom: 1px solid var(--mc-line); }
.mc-table tr:last-child td { border-bottom: 0; }

@media (max-width: 700px) {
  .mc-tab .sub { display: none; }
  .mc-tab { padding: 10px 12px; }
}

/* The master-list walk, followed live rather than by reloading. */
.bf-bar { height: 8px; border-radius: 999px; background: var(--surface-muted);
  border: 1px solid var(--line); overflow: hidden; margin: 4px 0 8px; }
.bf-bar span { display: block; height: 100%; background: var(--blue-700);
  transition: width .4s ease; }
.bf-nightly { display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.bf-nightly label { display: flex; align-items: center; gap: 7px; font-size: .84rem;
  color: var(--ink-700); }

/* Customers: the market at a glance, then one person at a time. */
.mc-states { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mc .statechip { background: var(--mc-chip); border: 1px solid var(--mc-line); border-radius: 8px;
  padding: 7px 11px; font-size: 13px; text-decoration: none; color: var(--mc-ink); }
.mc .statechip b { color: var(--mc-brand-ink); font-variant-numeric: tabular-nums; }
.mc .statechip:hover { border-color: var(--mc-brand); }
.mc .statechip.on { background: var(--mc-on-bg); border-color: var(--mc-on-ln); }
.mc .statechip.small { font-size: 12.5px; padding: 6px 10px; }
.mc-counties { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mc-line); }
.mc-counties h3 { margin: 0 0 4px; font-size: 14px; font-family: inherit; }

.mc-find { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.mc-find input[type="search"] { flex: 1; min-width: 220px; font: inherit; font-size: 13.5px;
  padding: 8px 11px; border: 1px solid var(--mc-line); border-radius: 8px; background: #fff; }
.mc-find select { font: inherit; font-size: 13.5px; padding: 8px 10px;
  border: 1px solid var(--mc-line); border-radius: 8px; background: #fff; }

.mc-table tr.is-blocked td { opacity: .62; }
.mc-tag { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: var(--mc-warn-ink); background: var(--mc-warn-bg); border: 1px solid var(--mc-warn-ln);
  border-radius: 999px; padding: 1px 7px; }

.mc-person-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mc-person-head h2 { margin: 0; }
.mc-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mc-line); }
.mc-act { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.mc-act label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px;
  color: var(--mc-muted); font-weight: 600; }
.mc-act input[type="email"] { font: inherit; font-size: 13.5px; padding: 8px 10px; min-width: 240px;
  border: 1px solid var(--mc-line); border-radius: 8px; background: #fff; color: var(--mc-ink); }
.mc-btn.warn { background: var(--mc-warn-bg); color: var(--mc-warn-ink); border: 1px solid var(--mc-warn-ln); }
.mc-btn.warn:hover { background: #ffedd5; }

/* The three buckets every available property falls into. They add up. */
.mc-split { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 12px; font-size: 13px;
  color: var(--mc-muted); }
.mc-split b { color: var(--mc-ink); font-variant-numeric: tabular-nums; }
.mc-split .is-warn, .mc-split .is-warn b { color: var(--mc-warn-ink); }

/* Needs Info: fix it here, not on another page. */
.mc .holdfix { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mc-line); }
.mc .holdfix label { display: flex; flex-direction: column; gap: 4px; }
.mc .holdfix span { font-size: 11.5px; font-weight: 700; color: var(--mc-muted);
  text-transform: uppercase; letter-spacing: .03em; }
.mc .holdfix input, .mc .holdfix select { font: inherit; font-size: 13px; padding: 7px 9px;
  min-width: 150px; border: 1px solid var(--mc-line); border-radius: 7px; background: #fff;
  color: var(--mc-ink); }
.mc-btn.primary { background: var(--mc-brand); color: #fff; padding: 8px 16px; font-size: 13px; }
.mc-btn.primary:hover { background: var(--mc-brand-ink); }
.mc .holdelse { margin: 10px 0 0; font-size: 12.5px; color: var(--mc-muted); }

/* Settings: the addresses, changed here rather than in Railway. */
.mc-modes { flex-direction: column; align-items: flex-start; gap: 7px; }
.mc-modes label { display: flex; gap: 8px; align-items: flex-start; font-size: 13px;
  color: var(--mc-ink); line-height: 1.4; }
.mc-modes input { margin-top: 2px; accent-color: var(--mc-brand); }
.mc-save { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; }
.mc .kv .v .mc-tag { margin-left: 6px; }
.mc .setctl input[type="text"], .mc .setctl input[type="email"] { flex: 1; min-width: 240px;
  font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--mc-line);
  border-radius: 8px; background: #fff; color: var(--mc-ink); }

/* The queue, the schedule, and what has gone out. */
.mc .stat.statq { border-color: var(--mc-on-ln); background: var(--mc-on-bg); }
.mc .stat.statq .n { color: var(--mc-brand-ink); }
.mc-queue { display: flex; flex-direction: column; margin-top: 10px; }
.mc .qrow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--mc-line); }
.mc .qrow:last-child { border-bottom: 0; }
.mc .qrow.waiting { opacity: .62; }
/* Individual Campaigns: a home to tick into the letter, one per row. */
.mc .qrow.mc-home { justify-content: flex-start; cursor: pointer; }
.mc-home input { flex: none; accent-color: var(--mc-brand); width: 18px; height: 18px; }
.mc-linkbtn { appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 600; color: var(--mc-muted); padding: 0; }
.mc-linkbtn:hover { color: var(--mc-warn-ink); text-decoration: underline; }
.mc-doit { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--mc-line); }
.mc-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mc-inline input[type="email"] { font: inherit; font-size: 13px; padding: 7px 9px; min-width: 220px;
  border: 1px solid var(--mc-line); border-radius: 7px; background: #fff; color: var(--mc-ink); }
a.mc-btn { text-decoration: none; display: inline-block; }
.mc .sendtimebox { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mc-line); }
.mc-when { flex-wrap: wrap; gap: 14px; }
.mc-when label { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--mc-ink); }
.mc-when input[type="time"], .mc-when input[type="number"] { font: inherit; font-size: 13px;
  padding: 6px 8px; border: 1px solid var(--mc-line); border-radius: 7px; background: #fff; }
.mc-check input { accent-color: var(--mc-brand); width: 16px; height: 16px; }
.mc .setctl textarea { flex: 1; min-width: 260px; font: inherit; font-size: 13.5px; padding: 8px 10px;
  border: 1px solid var(--mc-line); border-radius: 8px; background: #fff; color: var(--mc-ink);
  resize: vertical; }
.mc-listings { margin-top: 10px; }
.mc .listing { display: flex; align-items: center; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--mc-line); }
.mc .listing:last-child { border-bottom: 0; }
.mc .listing .body { flex: 1; min-width: 0; }
.mc .listing .plain { font-size: 12.5px; color: var(--mc-muted); margin-top: 1px; }
.mc-status { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  border-radius: 999px; padding: 1px 8px; background: var(--mc-chip); color: var(--mc-muted); }
.mc-status.is-sent { background: var(--mc-on-bg); color: var(--mc-brand-ink); }
.mc-status.is-sending { background: var(--mc-warn-bg); color: var(--mc-warn-ink); }
.mc-status.is-cancelled { text-decoration: line-through; }
.mc-table td.is-bad { color: var(--mc-warn-ink); font-weight: 700; }

/* Social: pick properties, get words you can paste. */
.mc .optsearch { width: 100%; font: inherit; font-size: 13px; padding: 8px 10px; margin: 12px 0 8px;
  border: 1px solid var(--mc-line); border-radius: 8px; background: #fff; color: var(--mc-ink); }
.soc-list { max-height: 260px; overflow: auto; border: 1px solid var(--mc-line);
  border-radius: 9px; padding: 5px; }
.mc .soc-row { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px;
  border-radius: 7px; cursor: pointer; font-size: 13.5px; }
.mc .soc-row:hover { background: var(--mc-chip); }
.mc .soc-row input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--mc-brand); }
.soc-where { display: block; font-size: 12px; color: var(--mc-muted); }
.soc-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; margin-top: 14px; }
.soc-controls label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px;
  color: var(--mc-muted); font-weight: 600; }
.soc-controls select, .soc-controls input { font: inherit; font-size: 13.5px; padding: 8px 10px;
  border: 1px solid var(--mc-line); border-radius: 8px; background: #fff; color: var(--mc-ink);
  font-weight: 400; }
.soc-note { flex: 1; min-width: 260px; }
.soc-post { border: 1px solid var(--mc-line); border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
.soc-head { font-size: 11.5px; font-weight: 800; color: var(--mc-muted); margin-bottom: 7px;
  text-transform: uppercase; letter-spacing: .03em; }
.soc-text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; }
.mc .soc-copy { margin-top: 10px; padding: 7px 16px; font-size: 12.5px; }

/* Featured Weekly: this week's picks and the slot rules. */
.mc-picks { margin-top: 10px; }
.mc .pickrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 9px 0; border-bottom: 1px solid var(--mc-line); }
.mc .pickrow:last-child { border-bottom: 0; }
.mc .pickrow.empty { opacity: .6; }
.mc .pickrow .idx { font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--mc-muted); min-width: 52px; }
.mc .pickrow .kind { font-size: 11.5px; font-weight: 700; color: var(--mc-brand-ink);
  background: var(--mc-on-bg); border-radius: 999px; padding: 1px 9px; }
.rotgrid { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 12px; }
.rotgrid label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--mc-ink); }
.rotgrid select, .rotgrid input[type="number"] { font: inherit; font-size: 13.5px; padding: 6px 9px;
  border: 1px solid var(--mc-line); border-radius: 8px; background: #fff; color: var(--mc-ink); }
.slotbox { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mc-line); }
.slotlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin-top: 10px; }
.mc .slotrow { display: flex; flex-direction: column; gap: 7px; border: 1px solid var(--mc-line);
  border-radius: 10px; padding: 10px; background: #fff; }
.mc .slotrow .idx { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--mc-muted); }
.mc .slotrow select { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--mc-line);
  border-radius: 7px; background: #fff; color: var(--mc-ink); }
.mc .slotrow select[multiple] { padding: 3px; }
.mc .slotrow .muted { font-size: 11.5px; }

/* The four views, and page numbers that do not need scrolling past. */
.mc-views { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.mc-view { font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--mc-line); background: #fff; color: var(--mc-muted); text-decoration: none; }
.mc-view:hover { color: var(--mc-ink); }
.mc-view.on { background: var(--mc-ink); border-color: var(--mc-ink); color: #fff; }
.mc-pages { display: flex; gap: 14px; align-items: center; }
.mc .result-line { margin: 12px 0 10px; color: var(--mc-muted); font-size: 13.5px; }
.mc .result-line strong { color: var(--mc-brand-ink); font-family: Georgia, serif; font-size: 1.2rem; }
.mc .empty { border: 1px dashed var(--mc-line); border-radius: 10px; padding: 18px;
  color: var(--mc-muted); font-size: 13.5px; text-align: center; }
.mc-table td[title] { cursor: help; }

/* The two rule boxes on Settings. */
.mc-ticks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 9px; margin-top: 14px; }
.mc-ticks .mc-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px;
  color: var(--mc-ink); }
.mc-company { flex-direction: column; align-items: stretch; gap: 8px; }
.mc-company input { width: 100%; }
.mc-never { display: flex; flex-direction: column; gap: 5px; font-size: 12px;
  font-weight: 700; color: var(--mc-muted); text-transform: uppercase; letter-spacing: .03em; }
.mc-never select { font: inherit; font-size: 13px; font-weight: 400; text-transform: none;
  letter-spacing: 0; padding: 4px; border: 1px solid var(--mc-line); border-radius: 8px;
  background: #fff; color: var(--mc-ink); }
.mc-never small { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Settings: the same tabs as the Marketing Center, so one look, not two. */
.set-head { margin-bottom: 4px; }
.set-head h1 { font-size: 19px; margin: 0; }
.reps-table th.tick, .reps-table td.tick { text-align: center; width: 110px; }
.reps-table td.tick input { width: 17px; height: 17px; accent-color: var(--mc-brand); }
.sr-only-label span { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
.slothead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 12px; }
.slothdr { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.slotpick { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; padding: 1px 7px; background: var(--mc-on-bg); color: var(--mc-brand-ink); }
.slotpick.empty { background: var(--mc-chip); color: var(--mc-muted); }
.slotuniq { display: flex; flex-wrap: wrap; gap: 4px 9px; align-items: center; font-size: 11.5px;
  color: var(--mc-muted); }
.slotuniq > span { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; width: 100%; }
.slotuniq label { display: flex; align-items: center; gap: 4px; }
.slotuniq input { width: 14px; height: 14px; accent-color: var(--mc-brand); }
.slotfits { margin: 0; font-size: 11.5px; color: var(--mc-muted); }
.slotfits.is-thin { color: var(--mc-warn-ink); font-weight: 600; }

/* The four figures the income is judged against, with the working. */
.poi-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.poi-figures > div { background: var(--surface-muted); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; }
.poi-figures > div.is-total { background: var(--green-100); border-color: #bfe3d0; }
.poi-figures dt { font-size: .72rem; color: var(--ink-500); text-transform: uppercase;
  letter-spacing: .03em; font-weight: 700; }
.poi-figures dd { margin: 3px 0 0; font-family: Georgia, serif; font-size: 1.25rem;
  color: var(--navy-950); font-variant-numeric: tabular-nums; }
.poi-figures > div.is-total dd { color: var(--green-700); }
.detail-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.detail-links .hint { width: 100%; margin: 2px 0 0; }
.certain-eg { margin: 8px 0 12px; padding-left: 18px; font-size: .85rem; color: var(--ink-700); }
.certain-eg li { margin-bottom: 3px; }
.mc-missing { margin-top: 12px; }
.mc-missing summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--mc-warn-ink); }
.mc-missing-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px 14px; margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--mc-ink); }

/* ---- Marketing Center: the house look ---------------------------------------
   The owner, 13 October 2026 (Before Launch): the desk's Georgia page title,
   its card and section titles, one main button per tab — the desk's navy
   .btn-primary, everything else the plain .btn-secondary — and headings that
   are names, not sentences. All of it under .mc-marketing: Settings,
   Collections and Data share the .mc wrapper, the tab strip and some of these
   names, and keep their look until they are next touched. */
.mc-marketing .mc-title { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; }
.mc-marketing .mc-title p { margin-bottom: 6px; }
.mc-marketing .mc-card { border-color: #d9e4ec; border-radius: var(--radius);
  box-shadow: var(--card-shadow); padding: 18px 20px 20px; margin-bottom: 18px; }
.mc-marketing .mc-card h2 { margin: 0 0 6px; color: var(--text);
  font-family: Georgia, "Times New Roman", serif; font-size: 25px; font-weight: 500; letter-spacing: -.2px; }
.mc-marketing .mc-card .lead, .mc-marketing .muted { color: var(--muted); }
.mc-marketing .bigsummary { background: var(--card); border-color: #d9e4ec; }
.mc-marketing .headline b { color: var(--text); }
.mc-marketing .stat { border-color: var(--card-line); border-radius: 12px; }
.mc-marketing .stat.statq { border-color: var(--blue); background: var(--blue-2); }
.mc-marketing .stat.statq .n { color: var(--blue); }
.mc-marketing .mc-banner { border-radius: var(--radius); }
.mc-marketing .mc-banner h3 { font-size: 14.5px; }
.mc-marketing .mc-link { color: var(--blue); }
.mc-marketing .mc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 0 16px; border: 1px solid transparent; border-radius: 9px;
  font-size: 13.5px; font-weight: 800; white-space: nowrap; transition: .16s ease; }
.mc-marketing .mc-btn.primary { background: var(--navy-900); color: #fff; }
.mc-marketing .mc-btn.primary:hover { background: var(--navy-800); }
.mc-marketing .mc-btn.ghost { border-color: var(--line); background: #fff; color: var(--ink-700); }
.mc-marketing .mc-btn.ghost:hover { background: var(--surface-muted); }
.mc-marketing .mc-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mc-marketing .mc-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- Questions: the running log ------------------------------------------
   One answer settles a question for everybody, so an answered one stays on
   the page rather than vanishing — you can see what was said and put it back
   if it was wrong. */
.qfilters { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0 4px; }
.qgroup { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.qtab { padding: 6px 12px; font-size: .86rem; font-weight: 600; color: var(--muted);
  text-decoration: none; border-right: 1px solid var(--line); }
.qgroup .qtab:last-child { border-right: 0; }
.qtab.on { background: var(--blue-100); color: var(--blue-700); }
.qtab:hover { color: var(--ink); }
.qempty { margin-top: 16px; }
.qlist { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.qitem { border: 1px solid var(--line); border-left: 3px solid var(--amber-500, #b7791f);
  border-radius: 0 10px 10px 0; padding: 12px 14px; background: var(--card); }
.qitem.done { border-left-color: var(--line); background: transparent; }
.qmeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; font-size: .84rem;
  color: var(--muted); }
.qkind { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.qwhen { font-variant-numeric: tabular-nums; }
.qgo { margin-left: auto; font-weight: 600; text-decoration: none; }
.qgo:hover { text-decoration: underline; }
.qbody { margin: 7px 0 0; white-space: pre-wrap; }
.qreply { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; }
.qreply textarea { flex: 1; min-height: 44px; }
.qanswer { margin-top: 10px; padding: 9px 12px; border-left: 3px solid var(--green-500, #2f855a);
  background: var(--page); border-radius: 0 8px 8px 0; }
.qanswer p { margin: 0 0 6px; white-space: pre-wrap; }
.qinline { display: inline; margin-left: auto; }
@media (max-width: 640px) {
  .qreply { flex-direction: column; }
  .qgo, .qinline { margin-left: 0; }
}

/* ---- Has this person bought from us before? ------------------------------
   The first thing anybody does with an application. A certain match reads as a
   fact; a name-only one is deliberately quieter, because it is a prompt to
   look rather than a claim to have found somebody. */
.before-panel { border-left: 3px solid var(--blue-500, #2b6cb0); }
.before-list { list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
.before-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.before-item.is-maybe { border-style: dashed; opacity: .82; }
.before-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px;
  font-size: .85rem; color: var(--muted); }
.before-how { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.before-when { margin-left: auto; font-variant-numeric: tabular-nums; }
.before-what { margin-top: 4px; }
@media (max-width: 640px) { .before-when { margin-left: 0; } }
.before-also { margin: 18px 0 0; font-size: 1rem; }
.before-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px;
  padding-top: 8px; border-top: 1px dashed var(--line); }
.ask-q { font-weight: 600; }
.ask-said { color: var(--muted); font-size: .86rem; }
.ask-said.is-bad { color: var(--red-700, #c53030); }
.before-item.is-not-them { opacity: .55; }
.before-item.is-not-them .before-what { text-decoration: line-through; }
.before-owed { margin-top: 6px; font-size: .9rem; }
.button.small { min-height: 30px; padding: 0 10px; font-size: .84rem; }

/* ---- Merging duplicates, one rule at a time -------------------------------
   Three rules, counted apart. The weakest will merge a household, so it is
   marked rather than sitting flush with the safe ones. */
.merge-rule { border-top: 1px solid var(--line); padding: 14px 0 4px; }
.merge-rule.is-warn { border-left: 3px solid var(--amber-500, #b7791f); padding-left: 12px; }
.merge-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.merge-head h3 { margin: 0; font-size: 1rem; }
.merge-crowded { border-left: 2px solid var(--line); padding-left: 10px; }
.assign-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.assign-who { font-size: .88rem; }

/* ---- Whose customer this is ----------------------------------------------
   The agent on a file is who gets paid for it, so a change carries a reason
   and the trail stays on the page rather than in a log somebody has to ask
   for. */
.rep-panel { border-left: 3px solid var(--green-500, #2f855a); }
/* The file's ownership: the agent first, how they came to have the customer,
   and the move as a small link behind it (section 3, round A). */
.rep-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; }
.rep-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted, #667085); }
.rep-agent { font-size: 1.05rem; }
.rep-agent.is-none { color: var(--muted, #667085); font-weight: 600; }
.rep-how { color: var(--muted, #667085); }
/* Their customer file, from the header (13 October 2026): amber once they have applied before. */
.detail-where .past-file { margin-left: 8px; vertical-align: middle; }
.detail-where .past-file.has-past { border-color: #e7b75f; background: #fff7e6; color: #8a5d08; }
/* Their portal link beside it: copy it, or text or email it from the company. */
.portal-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
.portal-line .rep-label { margin-right: 4px; }
.portal-line .edit-state { flex-basis: 100%; margin: 0; }
.rep-move-wrap { margin-top: 8px; }
/* The file's History: who did what, and when, at the bottom of the file. */
.history-list { list-style: none; margin: 0; padding: 0; }
.history-list li { display: grid; grid-template-columns: 11.5em 9em 1fr; gap: 4px 12px; padding: 7px 0;
  border-top: 1px solid var(--line, #e3e7ee); font-size: .9rem; }
.history-list li:first-child { border-top: 0; }
.history-list time { color: var(--muted, #667085); font-variant-numeric: tabular-nums; }
.history-more > summary { cursor: pointer; margin-top: 8px; font-size: .88rem; color: var(--blue, #0b78ea); }
@media (max-width: 640px) { .history-list li { grid-template-columns: 1fr; gap: 0; } }
/* A long file name breaks rather than pushing the page sideways on a phone
   (the whole-desk check, 17 October 2026: 57–89px past a 375-wide screen). */
.history-list li > * { min-width: 0; overflow-wrap: anywhere; }
.rep-move-wrap > summary { cursor: pointer; font-size: .88rem; color: var(--blue, #0b78ea); width: max-content; }
.rep-move-wrap > .hint { margin: 8px 0 0; }
.rep-move { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.rep-move input[type="text"] { flex: 1; min-width: 220px; }
.rep-trail { list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px; font-size: .9rem; }
.rep-trail li { border-top: 1px solid var(--line); padding-top: 7px;
  display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline; }
.rep-why { color: var(--muted); font-style: italic; }
@media (max-width: 640px) { .rep-move { flex-direction: column; align-items: stretch; } }
.rep-asks { border-left: 3px solid var(--amber-500, #b7791f); }
.rep-decide { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; margin-top: 4px; }
.rep-decide input { flex: 1; min-width: 180px; }

/* ---- the daily dashboard -------------------------------------------------
   The front door. Colour here is doing a job rather than decorating: each
   count keeps its own hue everywhere it appears, so the eye learns where
   "credit reports" sits and stops reading the labels. A box that is not wired
   yet is drawn grey and says so — it must never look like a number. */

.em { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
      font-style: normal; line-height: 1; }

.dash-head {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  margin-bottom: 16px; padding: 20px 24px; border-radius: var(--radius-lg); color: #fff;
  background: linear-gradient(115deg, #10334f 0%, #176aa6 52%, #4b4bc0 100%);
  box-shadow: 0 10px 28px rgba(23, 106, 166, .22);
}
.dash-head h1 {
  display: flex; align-items: center; gap: 11px; margin: 0;
  font-family: Georgia, serif; font-size: 1.6rem; font-weight: 400;
}
.dash-head p { margin: 4px 0 0; color: #d3e7f5; font-size: .9rem; }
.dash-head-right { margin-left: auto; }
.dash-date {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); padding: 7px 15px; font-size: .82rem; font-weight: 700;
}

/* Every hue the dashboard uses, set once on the element that carries it. */
.is-indigo { --c: #4340cf; --cbg: #eaeaff; }
.is-sky    { --c: #0c6ba8; --cbg: #e2f1fc; }
.is-amber  { --c: #9c5c0b; --cbg: #fff1d7; }
.is-red    { --c: #b23a3a; --cbg: #fff0f0; }
.is-violet { --c: #6b34cd; --cbg: #f1e9ff; }
.is-teal   { --c: #0b7f7b; --cbg: #d9f4f2; }
.is-green  { --c: #176747; --cbg: #e0f5ea; }
.is-pink   { --c: #b81f6b; --cbg: #ffe5f0; }

.dash-counts {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 11px; margin-bottom: 14px;
}
/* A column with the number pushed to the bottom, so eight cards whose labels
   wrap to one, two and three lines still read their figures off one line. */
.dash-count {
  position: relative; display: flex; flex-direction: column; overflow: hidden; min-width: 0;
  padding: 14px 13px 13px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); color: inherit; text-decoration: none;
}
.dash-count .dash-n { margin-top: auto; padding-top: 7px; }
.dash-count .dash-note { align-self: flex-start; }
.dash-count::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c, var(--line));
}
a.dash-count:hover { border-color: var(--c); box-shadow: 0 6px 18px rgba(11, 33, 52, .10); }
a.dash-count:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.dash-ico {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  margin: 4px 0 9px; border-radius: 10px; background: var(--cbg); font-size: 1.05rem;
}
.dash-lab { display: block; color: var(--ink-700); font-size: .78rem; font-weight: 700; line-height: 1.3; }
.dash-n {
  display: block; margin-top: 7px; color: var(--c, var(--ink-900));
  font-family: Georgia, serif; font-size: 1.85rem; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.dash-note {
  display: inline-block; margin-top: 5px; border-radius: 999px; padding: 2px 9px;
  background: var(--cbg); color: var(--c); font-size: .68rem; font-weight: 700;
}
.dash-count.is-urgent::before { background: var(--red-700); }
/* Not wired yet: grey, dashed, and a dash where a number would be. */
.dash-count.is-soon { --c: var(--ink-500); --cbg: var(--surface-muted); border-style: dashed; }
.dash-count.is-soon .dash-lab, .dash-count.is-soon .dash-n { color: var(--ink-500); }

.dash-panel {
  overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface);
}
.dash-ph {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  border-bottom: 1px solid var(--line); background: var(--surface-muted);
}
/* The title takes the slack, so whatever follows it sits at the right edge
   whether that is a chip, a link, or both. */
.dash-ph h2 { margin: 0 auto 0 0; font-family: Georgia, serif; font-size: 1rem; font-weight: 400; }
.dash-badge {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 9px; background: var(--cbg); font-size: .95rem;
}
.dash-chip {
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  padding: 3px 10px; color: var(--ink-500); font-size: .7rem; font-weight: 700;
}
.dash-tail {
  border-radius: 999px; background: var(--blue-100); padding: 4px 11px;
  color: var(--blue-700); font-size: .72rem; font-weight: 700; text-decoration: none;
}

.dash-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
/* One panel wide now. It was two columns — New Since Yesterday in the narrow
   one, the contracts table in the wide one — and New Since Yesterday has moved
   up beside today's list. Left as a two-column grid, the table would have sat
   squashed in the .9fr column with nothing beside it. */
.dash-mid  { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.dash-stack { display: grid; gap: 14px; align-content: start; min-width: 0; }

.dash-empty { margin: 0; padding: 16px; color: var(--ink-500); font-size: .84rem; }
.dash-empty.is-soon { background: repeating-linear-gradient(135deg, var(--surface-muted) 0 10px, var(--surface) 10px 20px); }

.dash-pri { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dash-pri:last-child { border-bottom: 0; }
.dash-pri.is-high { --c: #b23a3a; --cbg: #fff0f0; }
.dash-pri.is-medium { --c: #9c5c0b; --cbg: #fff1d7; }
.dash-pri.is-low { --c: #0c6ba8; --cbg: #e2f1fc; }
.dash-no {
  flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--cbg); color: var(--c);
  font-size: .74rem; font-weight: 700; line-height: 24px; text-align: center;
}
.dash-tag {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 10px;
  background: var(--cbg); color: var(--c); font-size: .62rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.dash-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dash-what { flex: 1; min-width: 0; }
.dash-what b { display: flex; align-items: center; gap: 7px; font-size: .88rem; }
.dash-what span { display: block; color: var(--ink-500); font-size: .78rem; }
.dash-btn {
  flex: none; border: 0; border-radius: 8px; background: var(--blue-700); padding: 8px 17px;
  color: #fff; font-size: .78rem; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.dash-btn:hover { background: var(--navy-800); }
.dash-btn.ghost {
  border: 1px solid var(--line); background: var(--surface); padding: 5px 11px;
  color: var(--blue-700); font-size: .72rem;
}
.dash-btn.ghost:hover { background: var(--blue-100); }

/* Quick Actions and its tiles are gone — every rule they had went with them.
   Leaving dead CSS behind is how a stylesheet grows into something nobody
   dares delete from. */

.dash-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px; }
.dash-tile {
  display: block; border: 1px solid var(--line); border-radius: 11px; padding: 12px;
  background: var(--cbg); color: inherit; text-decoration: none;
}
.dash-tile:hover { border-color: var(--c); }
.dash-tile .em { font-size: 1.1rem; }
.dash-tile .dash-lab { margin-top: 7px; }
.dash-tile .dash-n { font-size: 1.5rem; }

.dash-scroll { overflow-x: auto; }
.dash-table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: .8rem; }
.dash-table th {
  padding: 9px 16px; border-bottom: 1px solid var(--line); background: var(--surface-muted);
  color: var(--ink-500); font-size: .64rem; font-weight: 700; letter-spacing: .07em;
  text-align: left; text-transform: uppercase;
}
.dash-table td { padding: 10px 16px; border-bottom: 1px solid var(--line); }
.dash-table tr:last-child td { border-bottom: 0; }
.dash-table td.is-prop a { font-weight: 700; text-decoration: none; }
.dash-pill {
  display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: .64rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}
.dash-pill.is-due { background: var(--red-100); color: var(--red-700); }
.dash-pill.is-up { background: var(--blue-100); color: var(--blue-700); }

.dash-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-three > div { min-width: 0; border-right: 1px solid var(--line); }
.dash-three > div:last-child { border-right: 0; }
.dash-sub {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); background: var(--cbg); color: var(--c); font-size: .76rem;
}
.dash-ap {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); color: inherit; text-decoration: none;
}
.dash-ap:last-child { border-bottom: 0; }
.dash-ap:hover { background: var(--cbg); }
.dash-ap-what { flex: 1; min-width: 0; }
.dash-ap-what b { display: block; color: var(--blue-700); font-size: .78rem; }
.dash-ap-what span { display: block; color: var(--ink-500); font-size: .7rem; }
.dash-ap-tag {
  flex: none; border-radius: 999px; background: var(--cbg); padding: 3px 10px;
  color: var(--c); font-size: .68rem; font-weight: 700;
}

.dash-q { display: flex; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.dash-q:last-child { border-bottom: 0; }
.dash-av {
  flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--navy-800);
  color: #fff; font-size: .7rem; font-weight: 700; line-height: 32px; text-align: center;
}
.dash-q-body { flex: 1; min-width: 0; }
.dash-q-top { display: flex; align-items: baseline; gap: 8px; }
.dash-q-top b { color: var(--blue-700); font-size: .78rem; }
.dash-ago { margin-left: auto; color: var(--ink-500); font-size: .68rem; white-space: nowrap; }
.dash-who { display: block; color: var(--ink-500); font-size: .74rem; }
.dash-q p {
  margin: 5px 0 9px; border-left: 3px solid var(--blue-700); border-radius: 0 8px 8px 0;
  background: var(--surface-muted); padding: 8px 11px; font-size: .8rem;
}
.dash-q-acts { display: flex; gap: 7px; }

@media (max-width: 1380px) { .dash-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .dash-cols, .dash-mid { grid-template-columns: minmax(0, 1fr); }
  .dash-three { grid-template-columns: minmax(0, 1fr); }
  .dash-three > div { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .dash-counts, .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-head-right { margin-left: 0; }
}

/* ---- the dashboard's panel ----------------------------------------------
   A number, the records behind it, then the file itself — over the board
   rather than instead of it. The file in here is the file's own page with the
   shell left off, so everything below styles the frame and leaves the contents
   to the rules they already had. */

.dash-count { font: inherit; text-align: left; }
button.dash-count { border: 1px solid var(--line); cursor: pointer; }
button.dash-count:hover { border-color: var(--c); box-shadow: 0 6px 18px rgba(11, 33, 52, .10); }
button.dash-count:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
button.dash-tile { font: inherit; text-align: left; cursor: pointer; }
button.dash-tile { width: 100%; }

.dash-warn {
  display: flex; gap: 11px; align-items: flex-start; margin: 0 0 14px;
  border: 1px solid #f0d9a8; border-radius: var(--radius-md); background: var(--gold-100);
  padding: 13px 16px; color: #6f5310; font-size: .86rem; line-height: 1.5;
}
.dash-warn .em { font-size: 1.1rem; }

.dash-overlay { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
.dash-scrim { position: absolute; inset: 0; background: rgba(11, 33, 52, .42); }
.dash-sheet {
  position: relative; display: flex; flex-direction: column;
  width: min(1080px, 100%); max-width: 100%; background: var(--page);
  box-shadow: -24px 0 60px rgba(11, 33, 52, .28); animation: sheet-in .16s ease-out;
}
@keyframes sheet-in { from { transform: translateX(22px); opacity: .6 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .dash-sheet { animation: none } }
body.has-panel { overflow: hidden; }

.dash-sheet-bar {
  display: flex; align-items: center; gap: 12px; flex: none;
  border-bottom: 1px solid var(--line); background: var(--surface); padding: 11px 16px;
}
.dash-sheet-names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dash-sheet-title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: Georgia, serif; font-size: 1rem;
}
/* Where and whose, under the address (the record's [data-panel-sub]). */
.dash-sheet-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-500); font-size: .78rem; }
.dash-sheet-back, .dash-sheet-full {
  flex: none; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  padding: 6px 12px; color: var(--blue-700); font-size: .76rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.dash-sheet-back:hover, .dash-sheet-full:hover { background: var(--blue-100); }
.dash-sheet-x {
  flex: none; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink-500); font-size: 1.25rem; line-height: 1;
}
.dash-sheet-x:hover { background: var(--surface-muted); color: var(--ink-900); }
.dash-sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; }
/* The file's own page assumes it is the column, and in here it is. Its own
   "back to the Buying Process" link is the one thing that does not belong:
   the panel has a Back of its own, and following that one would leave the
   dashboard the panel is standing on. */
.dash-sheet-body > .page-head:first-child { margin-top: 0; }
.dash-sheet-body > .eyebrow:first-of-type { display: none; }

.panel-head { margin-bottom: 14px; }
.panel-head h2 { margin: 0; font-family: Georgia, serif; font-size: 1.25rem; font-weight: 400; }
.panel-head p { margin: 5px 0 0; color: var(--ink-500); font-size: .86rem; max-width: 62ch; }
.panel-count {
  display: inline-block; margin-top: 9px; border-radius: 999px; background: var(--blue-100);
  padding: 3px 11px; color: var(--blue-700); font-size: .72rem; font-weight: 700;
}
.panel-empty { margin: 0; padding: 18px; color: var(--ink-500); font-size: .88rem; }
.panel-empty.is-bad { color: var(--red-700); }

.panel-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.panel-rows li + li { border-top: 1px solid var(--line); }
.panel-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 15px;
  color: inherit; text-decoration: none;
}
.panel-row:hover { background: var(--blue-100); }
.panel-row-main { flex: 1; min-width: 0; }
.panel-row-main b { display: block; font-size: .9rem; }
.panel-row-main span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-500); font-size: .78rem;
}
.panel-row-side { display: flex; align-items: center; gap: 10px; flex: none; }
.panel-tag {
  border-radius: 999px; background: var(--surface-muted); border: 1px solid var(--line);
  padding: 2px 9px; color: var(--ink-500); font-size: .68rem; font-weight: 700;
}
.panel-when { color: var(--ink-500); font-size: .74rem; font-variant-numeric: tabular-nums; }
.panel-go {
  border-radius: 8px; background: var(--blue-700); padding: 5px 12px; color: #fff;
  font-size: .72rem; font-weight: 700;
}
.panel-row.is-away .panel-go { background: var(--surface); border: 1px solid var(--line); color: var(--blue-700); }

@media (max-width: 820px) {
  .dash-sheet { width: 100%; }
  .dash-sheet-body { padding: 12px; }
  .panel-row-side .panel-tag, .panel-row-side .panel-when { display: none; }
}

/* ---- reminders -----------------------------------------------------------
   The notes somebody types, as against everything the board works out for
   itself. Overdue goes red and stays; the one whose day has passed is the one
   that mattered. */

.dash-chip.is-due { background: var(--red-100); border-color: #f0cfcf; color: var(--red-700); }
button.dash-tail { border: 0; font: inherit; font-size: .72rem; font-weight: 700; }

.rem-new { display: grid; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--line);
  background: var(--surface-muted); }
.rem-new input[type="text"] {
  width: 100%; min-height: 38px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); padding: 0 12px;
}
.rem-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rem-when label { color: var(--ink-500); font-size: .78rem; font-weight: 700; }
.rem-when input {
  min-height: 34px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); padding: 0 9px; font-size: .82rem;
}
.rem-when .dash-btn { margin-left: auto; }

.rem-list { list-style: none; margin: 0; padding: 0; }
.rem { display: flex; align-items: center; gap: 11px; padding: 11px 16px;
  border-bottom: 1px solid var(--line); }
.rem:last-child { border-bottom: 0; }
.rem.is-going { opacity: .45; }
.rem-tick {
  flex: none; width: 19px; height: 19px; border: 2px solid var(--line); border-radius: 6px;
  background: var(--surface);
}
.rem-tick:hover { border-color: var(--green-700); background: var(--green-100); }
.rem-tick:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.rem-what { flex: 1; min-width: 0; }
.rem-what b { display: block; font-size: .86rem; font-weight: 600; }
.rem-what > span { display: block; color: var(--ink-500); font-size: .74rem; }
.rem-what a { font-weight: 600; text-decoration: none; }
.rem-push {
  flex: none; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  padding: 3px 10px; color: var(--ink-500); font-size: .68rem; font-weight: 700;
}
.rem-push:hover { border-color: var(--blue-700); color: var(--blue-700); background: var(--blue-100); }
.rem-push[disabled] { opacity: .5; }

.rem.is-today .rem-what > span { color: var(--blue-700); font-weight: 700; }
.rem.is-overdue { background: var(--red-100); }
.rem.is-overdue .rem-what > span { color: var(--red-700); font-weight: 700; }
.rem.is-overdue .rem-tick { border-color: #e2b3b3; }
button.dash-ap { width: 100%; font: inherit; text-align: left; border: 0; cursor: pointer;
  border-bottom: 1px solid var(--line); background: var(--surface); }
button.dash-ap:last-child { border-bottom: 0; }
.panel-money { font-weight: 700; font-size: .84rem; font-variant-numeric: tabular-nums; }
.panel-row.is-flat { cursor: default; }
.panel-row.is-flat:hover { background: none; }

/* ---- contractor payments -------------------------------------------------
   The list is grouped by which tick a payment is waiting on, because that is
   the whole workflow. Money is the thing being decided, so it is the thing the
   eye lands on. */

.stage-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
/* ---- the four views, as tiles -------------------------------------------- */
/* auto-fill rather than a count: four across a wide window, two on a narrow
   one, without a breakpoint guessing at the window from the page. */
.view-strip { display: grid; gap: 14px; margin: 0 0 18px;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); }
.view-tile { display: flex; align-items: center; gap: 14px; min-height: 95px;
  padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); box-shadow: var(--shadow); color: inherit;
  text-decoration: none; transition: transform .16s ease, border-color .16s ease; }
.view-tile:hover { transform: translateY(-1px); border-color: #c3d2dc; }
.view-tile:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.view-ico { display: grid; place-items: center; width: 43px; height: 43px; flex: none;
  border-radius: 13px; background: var(--blue-100); color: var(--blue-700);
  font-size: 1.15rem; font-weight: 900; }
.view-tile.orange .view-ico { background: var(--gold-100); color: var(--gold-600); }
.view-tile.purple .view-ico { background: #f2eaff; color: #7847dd; }
.view-tile.gray .view-ico { background: var(--surface-muted); color: var(--ink-500); }
.view-what small { display: block; color: var(--ink-700); font-size: .69rem; font-weight: 900;
  letter-spacing: .05em; text-transform: uppercase; }
.view-what strong { display: block; font-size: 1.45rem; line-height: 1.1; margin: 2px 0 3px;
  font-variant-numeric: tabular-nums; }
.view-money { display: block; color: var(--ink-500); font-size: .8rem;
  font-variant-numeric: tabular-nums; }
/* The one being looked at, said the way the rail says which tab you are on. */
.view-tile.is-on { background: linear-gradient(180deg, #133653, #0e2b44); color: #fff;
  border: 2px solid var(--blue-700); }
.view-tile.is-on .view-what small, .view-tile.is-on .view-money { color: #d7e8f6; }
.view-tile.is-on .view-ico { background: rgba(23, 106, 166, .45); color: #fff;
  border: 1px solid rgba(255, 255, 255, .2); }

/* ---- the table ---------------------------------------------------------- */
.pay-board { padding: 0 18px 16px; overflow: hidden; }
.pay-board-head { display: flex; align-items: center; gap: 12px; padding: 15px 0 13px; }
.pay-board-head h2 { margin: 0; font-family: Georgia, serif; font-size: 1.5rem; font-weight: 400; }
.pay-board-head .chip { margin-left: auto; }
/* Approving several at once (public/payments-list.js). */
.pay-approve-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px;
  border: 1px solid var(--blue-700); border-radius: 10px; background: var(--blue-100); position: sticky; top: 0; z-index: 5; }
.pay-approve-bar[hidden] { display: none; }
.pay-approve-bar span { flex: 1; font-weight: 600; }
.pay-approve-result { margin: 0 0 12px; }
.pay-approve-result ul { margin: 6px 0 0; padding-left: 18px; }
.pay-pick-cell { width: 34px; text-align: center; }
/* Open and All are split by stage, a heading row for each (views/payments.ejs). */
.pay-table tr.pay-group td { padding: 16px 8px 8px; background: var(--surface); border-bottom: 2px solid var(--line); }
.pay-table tr.pay-group b { font-family: Georgia, serif; font-size: 1.08rem; font-weight: 400; margin-right: 8px; }
.pay-table tr[hidden] { display: none; }
.pay-group-toggle { display: flex; align-items: center; gap: 4px; width: 100%; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pay-group-toggle:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 3px; border-radius: 4px; }
.pay-group-arrow { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px;
  margin-right: 4px; border-radius: 6px; background: var(--surface-muted); color: var(--ink-700); }
.pay-group-arrow::before { content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.pay-group-toggle[aria-expanded="false"] .pay-group-arrow::before { margin: 0 0 0 -3px; transform: rotate(-45deg); }
.pay-group-toggle:hover .pay-group-arrow { background: var(--blue-100); }
.pay-table tr.pay-group .hint { margin-left: 8px; }
.pay-table tr.pay-group-waiting b { color: var(--amber-700); }
.pay-table tr.pay-group-checked b { color: #5b2bb5; }
.pay-pick-cell input { width: 16px; height: 16px; accent-color: var(--blue-700); cursor: pointer; }
.pay-pick-cell input:disabled { cursor: not-allowed; }
.pay-board-empty { padding: 4px 0 14px; }
.pay-scroll { overflow-x: auto; }

.pay-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 900px; }
.pay-table th { padding: 10px 8px; background: var(--surface-muted); color: var(--ink-500);
  font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 900;
  text-align: left; white-space: nowrap;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pay-table th.right, .pay-table td.right { text-align: right; }
.pay-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle;
  font-size: .82rem; }
/* A stage is two or three words and belongs on one line; wrapped, it doubles
   the height of every row in the view that mixes them. */
.pay-table .chip { white-space: nowrap; }
.pay-table tbody tr { cursor: pointer; }
.pay-table tbody tr:hover td { background: var(--blue-100); }
.pay-table tbody tr:last-child td { border-bottom: 0; }

.pay-cell-main { display: block; font-weight: 800; font-size: .88rem; color: var(--ink-900);
  text-decoration: none; }
a.pay-cell-main:hover { color: var(--blue-700); text-decoration: underline; }
.pay-cell-sub { display: block; color: var(--ink-500); font-size: .76rem; line-height: 1.3; }
/* A repair's own title is its address, so this column can hold a whole line of
   one. Two lines and then an ellipsis: the Properties column says it in full. */
.pay-cell-clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 230px; }
.pay-cell-where { display: block; max-width: 340px; color: var(--ink-700); font-size: .76rem;
  line-height: 1.4; }
.pay-cell-where .more { color: var(--blue-700); font-weight: 700; white-space: nowrap; }
.pay-cell-money { font-size: .95rem; font-weight: 800; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.pay-cell-when { color: var(--ink-500); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.pay-cell-go { display: inline-grid; place-items: center; width: 36px; height: 32px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--ink-700); font-weight: 900; text-decoration: none; letter-spacing: .06em; }
.pay-cell-go:hover { background: var(--blue-100); border-color: var(--blue-700);
  color: var(--blue-700); }
/* A job's kind is a label, not a verdict, so it stays the quiet grey one. */
.tag { display: inline-flex; align-items: center; justify-content: center; min-width: 62px;
  height: 26px; padding: 0 11px; border-radius: 999px; background: var(--surface-muted);
  color: var(--ink-700); font-size: .68rem; font-weight: 900; white-space: nowrap; }
/* Screen readers need a name for the last column; nobody else needs to see it. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }

/* ---- possible duplicates ------------------------------------------------- */
/* Amber, never red. Red is a verdict and this is a question — two grass cuts a
   fortnight apart on one lot are a normal summer, and only a person can tell. */
.pay-callout.dupe { background: var(--gold-100); border-color: #ecd49b; }
.dupe-list { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 9px; }
.dupe-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 9px; border-top: 1px solid rgba(189, 133, 36, .28); }
.dupe-list a { font-weight: 700; }
.dupe-when { color: var(--ink-700); font-size: .76rem; font-variant-numeric: tabular-nums; }
.dupe-where { flex: 1 0 100%; color: var(--ink-700); font-size: .75rem; }

.dupe-flag { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
  border-radius: 99px; background: var(--gold-100); color: var(--gold-600);
  padding: 2px 9px; font-size: .68rem; font-weight: 900; white-space: nowrap; }
.dupe-flag .em { font-size: .74rem; }

.filter-tick .tick { display: flex; align-items: center; gap: 8px; min-height: 40px;
  color: var(--ink-700); font-size: .82rem; white-space: nowrap; }
.filter-tick input { width: 16px; height: 16px; accent-color: var(--blue-700); margin: 0; }

.pay-board-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; padding: 14px 0 0; color: var(--ink-500); font-size: .78rem; }
.pay-board-foot .pager { margin: 0; }


.pay-group { margin-bottom: 14px; }
.pay-list { list-style: none; margin: 0; padding: 0; }
.pay-list li + li { border-top: 1px solid var(--line); }
.pay-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px;
  color: inherit; text-decoration: none; }
.pay-row:hover { background: var(--blue-100); }
.pay-main { flex: 1; min-width: 0; }
.pay-main b { display: block; font-size: .92rem; }
.pay-what { display: block; color: var(--ink-700); font-size: .8rem; }
.pay-where { display: block; color: var(--ink-500); font-size: .76rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pay-side { display: flex; align-items: center; gap: 12px; flex: none; }
.pay-money { font-family: Georgia, serif; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.pay-when { color: var(--ink-500); font-size: .76rem; font-variant-numeric: tabular-nums; }

.pay-notes { white-space: pre-wrap; font-size: .88rem; margin: 0; }
.pay-files { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.pay-files-head { margin: 14px 0 0; font-size: .82rem; font-weight: 700; color: var(--ink-700); }
.pay-files-head:first-child { margin-top: 0; }
.pay-file {
  display: block; width: 150px; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: var(--surface-muted); text-decoration: none; color: inherit;
}
.pay-file img { display: block; width: 100%; height: 110px; object-fit: cover; }
.pay-file span { display: block; padding: 7px 9px; font-size: .74rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pay-file:hover { border-color: var(--blue-700); }

/* One property is what the payment is about, so it gets the treatment a
   subject gets: the address large and linked, where it is underneath, and a
   pill for each of the two facts about where it stands. */
.place-hero h3 { margin: 0; font-size: 1.3rem; letter-spacing: -.02em; }
.place-hero h3 a { color: inherit; text-decoration: none; }
.place-hero h3 a:hover { color: var(--blue-700); text-decoration: underline; }
.place-where { margin: 3px 0 0; color: var(--ink-500); font-size: .86rem; }
.place-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }

/* The two decisions and the photos, small enough to sit beside a property in a
   list of a dozen. A pill rather than a button because that is the weight they
   carry here: one property out of many, not the subject of the page. */
.place-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pay-places .place-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pay-places li { padding-right: 8px; }
.pay-place-what { row-gap: 4px; }
.tag-btn { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-700);
  padding: 3px 10px; font-size: .72rem; font-weight: 700; text-decoration: none;
  white-space: nowrap; }
.tag-btn:hover:not(:disabled) { background: var(--blue-100); border-color: #cfe3f1;
  color: var(--navy-900); }
.tag-btn:disabled { opacity: .45; cursor: default; }
.tag-btn:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 1px; }
.tag-btn .em { font-size: .8rem; }

/* The pills and the closing line had nothing between them, so a box with no
   repair under it read as one paragraph. */
.pay-repair, .place-hero + .hint { margin-top: 16px; }
.place-hero + .hint { padding-top: 14px; border-top: 1px solid var(--line); }


.ach-box { border: 1px dashed var(--line); border-radius: var(--radius-md);
  background: var(--surface-muted); padding: 12px 14px; margin-top: 12px; }
.ach-box .hint { margin-top: 0; }

.pay-comments { list-style: none; margin: 0; padding: 0; }
/* What arrived since you last looked, said quietly — a thread you have read is
   the ordinary case and should not be lit up. */
.pay-comments li.is-unread { border-left: 3px solid var(--gold-600); padding-left: 10px;
  margin-left: -13px; }
.pay-comments .note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.pay-comments .chip { font-size: .64rem; padding: 2px 8px; }

/* A comment nobody here has answered yet. Amber like everything else that is
   waiting on a person, and quiet — it is a message, not an alarm. */
.dash-q.is-new { border-left: 3px solid var(--gold-600); padding-left: 11px; }
.dash-chip.is-new { background: var(--gold-100); color: var(--gold-600); }

.pay-reply { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.pay-reply textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-muted); padding: 9px 11px; font: inherit; font-size: .85rem;
  color: var(--ink-900); resize: vertical; }
.pay-reply textarea:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 1px;
  border-color: var(--blue-700); background: var(--surface); }
.pay-reply-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 9px; }
.pay-reply-acts .hint { margin: 0; }
.pay-comments li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.pay-comments li:last-child { border-bottom: 0; }

/* ---- a property's comments from Airtable ---------------------------------
   The same thread the payment page draws (partials/comment-thread), on the
   property page and in the Comments overlay on the price approval. Fetched
   after the page opens, so the slot holds a line while it waits. */
.pc-slot { min-height: 1.6em; }
.pc-slot .pc-loading { margin: 0; }
.pc-history .pc-sub { margin: 18px 0 6px; color: var(--ink-900); font-size: .86rem;
  font-weight: 750; }
.pc-history .pc-sub:first-child { margin-top: 0; }
/* What the desk kept earlier, shown because Airtable did not answer — said,
   because a thread that is missing its newest comments looks finished. */
.pc-warn { margin: 0 0 10px; padding: 9px 12px; border-radius: 10px;
  background: var(--gold-100); color: #8a5a12; font-size: .8rem; }
/* A read that did not happen. Red, and never the empty state's wording:
   "nothing said yet" is an answer, and this is not one. */
.pc-failed { margin: 0; padding: 12px 14px; border-radius: 10px;
  background: var(--red-100); color: var(--red-700); font-size: .8rem; }
.pc-failed b { display: block; margin-bottom: 3px; }
.pc-open-wrap { display: inline-flex; }
.pc-open { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); padding: 5px 11px; color: var(--navy-900);
  font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
.pc-open:hover { border-color: var(--blue-700); background: var(--blue-100); color: var(--blue-700); }
.pc-open .cardicon { display: block; width: 15px; height: 15px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pc-peek { width: min(720px, 94vw); }
.pc-peek-body { max-height: min(72vh, 760px); overflow: auto; padding: 0 20px 18px; }
.pc-peek-body > .hint { margin: 0 0 12px; }

@media (max-width: 700px) {
  .pay-row { flex-wrap: wrap; }
  .pay-side { width: 100%; }
}

/* ---- one contractor payment ---------------------------------------------
   The record somebody approves from. Money is the thing being decided, so it
   is the thing the eye lands on; everything else is arranged so the page has
   no tall empty column beside a short one. */

.pay-head{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;margin-bottom:12px}
.pay-head-main{flex:1;min-width:280px}
.pay-head h1{margin:0;font-family:Georgia,serif;font-size:1.65rem;font-weight:400;
  letter-spacing:-.01em}
.pay-sub{margin:5px 0 0;color:var(--ink-500);font-size:.86rem}
.pay-head-side{text-align:right}
.pay-big{font-family:Georgia,serif;font-size:1.95rem;font-variant-numeric:tabular-nums;
  line-height:1.1}
.tags{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:8px}

.pay-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pay-acts .button.inline{width:auto;display:inline-flex;align-items:center;gap:7px}
/* What approving really does, said where the button is rather than in a panel
   of its own further down the page. */
.pay-note{margin:9px 0 16px;color:var(--ink-500);font-size:.8rem;max-width:78ch;line-height:1.55}
.pay-note b{color:var(--ink-700)}
.button.inline.is-soon{border-style:dashed;color:var(--ink-500);cursor:default}
.button.inline.is-soon:hover{background:var(--surface);color:var(--ink-500)}

.pay-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}
.pay-cell{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:12px 13px;box-shadow:0 1px 2px rgba(11,33,52,.05);min-width:0}
.pay-cell .row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pay-ico{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;
  border-radius:8px;font-size:.82rem;background:var(--c-bg,var(--blue-100));color:var(--c,var(--blue-700))}
.pay-cell .lab{color:var(--ink-500);font-size:.72rem;font-weight:600}
.pay-cell .val{font-size:.86rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.pay-cell .val.money{font-family:Georgia,serif;font-size:1.05rem;font-variant-numeric:tabular-nums}

/* Two columns the browser balances by height, so the boxes stagger instead of
   stacking into two towers that end level only by luck. */
.pay-flow{columns:2;column-gap:16px;margin-bottom:16px}
.pay-flow > .panel{break-inside:avoid;margin:0 0 16px}
.pay-wide{margin-bottom:16px}
/* Its own head rather than the shared .panel-head, which is space-between and
   pushed these titles into the middle of the box. */
.pay-ph{display:flex;align-items:center;gap:9px;padding:13px 16px;
  border-bottom:1px solid var(--line);margin:0}
.pay-ph h2{margin:0 auto 0 0;padding:0;border:0;font-family:Georgia,serif;font-size:1rem;
  font-weight:400}
.pay-ph .pay-tail{display:flex;align-items:center;gap:8px;flex:none}
.pay-ph .pay-tail .button{width:auto;white-space:nowrap;display:inline-flex;align-items:center;
  gap:6px}
.pay-body{padding:14px 16px}

.pay-facts{margin:0;font-size:.86rem}
.pay-facts div{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.pay-facts div:last-child{border-bottom:0}
.pay-facts dt{color:var(--ink-500)}
.pay-facts dd{margin:0;font-weight:600;text-align:right}
.pay-facts dd.total{font-family:Georgia,serif;font-size:1rem}
.money-in{width:130px;min-height:34px;text-align:right;border:1px solid var(--line);
  border-radius:8px;padding:0 10px;background:var(--surface-muted);font:inherit;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink-900)}
.money-in:focus{outline:2px solid var(--blue-700);outline-offset:1px;background:var(--surface)}

.pay-callout{display:flex;gap:10px;align-items:flex-start;margin-top:12px;
  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-muted);
  padding:12px 13px;font-size:.8rem;color:var(--ink-700);line-height:1.5}
.pay-callout .em{font-size:1rem}
.pay-callout b{color:var(--ink-900)}
/* Grey is the page's ordinary surface, so a grey block reads as more text. The
   two callouts that say what is TRUE right now — where the repair stands, what
   Save will do — are tinted instead, and stop being skipped. */
/* ---- the CIS ------------------------------------------------------------- */
/* No Save button, so every box has to look like it is ready to be typed in and
   to say for itself whether it saved. */
.cis-section { padding: 18px; margin-bottom: 16px; }
.cis-section .hint { margin: 2px 0 14px; }
.cis-grid { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.cis-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cis-field label { color: var(--ink-700); font-size: .74rem; font-weight: 700; }
.cis-field input, .cis-field select, .cis-field textarea {
  width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); padding: 8px 11px; font: inherit; font-size: .86rem;
  color: var(--ink-900); }
.cis-field textarea { resize: vertical; }
.cis-field input:focus-visible, .cis-field select:focus-visible,
.cis-field textarea:focus-visible {
  outline: 2px solid var(--blue-700); outline-offset: 1px; border-color: var(--blue-700); }
.cis-field .calc { min-height: 40px; display: flex; align-items: center; padding: 8px 11px;
  border: 1px dashed var(--line); border-radius: 9px; background: var(--surface-muted);
  color: var(--ink-700); font-size: .86rem; }
.cis-help { color: var(--ink-500); font-size: .72rem; line-height: 1.35; }
/* A buyer nobody has named yet. The boxes stay, because a second buyer added
   later needs somewhere to go — they simply stop asking to be filled in. */
.cis-field.is-spare { opacity: .55; }
.cis-field.is-spare:focus-within { opacity: 1; }
.cis-form .edit-state { margin: 0; font-size: .74rem; }

/* Who has to sign, and how to reach them. The link is shown as well as
   emailed: a rep with the customer on the phone reads it out, and an email
   that silently did not arrive is how a thing like this stalls. */
.cis-signers { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 10px; }
.cis-signers li { display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cis-signers li:last-child { border-bottom: 0; padding-bottom: 0; }
.cis-signer-who { flex: 1 1 200px; min-width: 0; }
.cis-signer-who b { display: block; font-size: .88rem; }
.cis-signer-who span { display: block; color: var(--ink-500); font-size: .76rem; }
.cis-link { flex: 1 1 100%; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-muted); padding: 7px 10px; font: inherit; font-size: .74rem;
  color: var(--ink-700); }

/* ---- what a file looks like ---------------------------------------------- */
/* Deliberately not a checklist. The checklist beside it is ticks and crosses
   and answers "is this finished"; this answers "what does it say", so it reads
   as sentences with a label rather than a list of conditions. */
.app-findings { margin: 4px 0 18px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--surface-muted); }
.app-findings h3 { margin: 0 0 11px; font-size: .84rem; letter-spacing: .01em; }
.app-findings ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.app-findings li { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.app-findings li:last-of-type { border-bottom: 0; padding-bottom: 0; }
.app-findings .chip { flex: none; margin-top: 1px; }
.app-finding-what { flex: 1 1 260px; min-width: 0; }
.app-finding-what b { display: block; font-size: .87rem; }
.app-finding-what span { display: block; margin-top: 2px; color: var(--ink-700);
  font-size: .79rem; line-height: 1.45; }
.app-findings .step-where { flex: none; }
.app-findings .hint { margin: 11px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); }
/* The one that might stop somebody, marked down the edge so it is found
   without reading. */
.app-findings li.is-stop { border-left: 3px solid var(--red-700); padding-left: 11px;
  margin-left: -14px; }

/* How long a file has sat where somebody else has to move it. */
.workflow-where + .workflow-ask + .hint .em { margin-right: 4px; }
.hint.is-late { color: var(--gold-600); font-weight: 600; }

/* A row whose offer has run out, in a queue of rows that have not. The tag in
   the cell says it in words; this is so it is findable without reading them,
   which is the whole job of a list you scan rather than read. */
tr.is-late { background: var(--red-100); }
tr.is-late .result-name { color: var(--red-700); }

.pay-callout.tell{background:var(--blue-100);border-color:#cfe3f1}
.pay-callout-sub{display:block;margin-top:2px}
.pay-callout-go{display:block;margin-top:9px}
.pay-callout .hint{display:block}

.pay-files{display:flex;flex-wrap:wrap;gap:11px}
.pay-file{width:138px;border:1px solid var(--line);border-radius:11px;overflow:hidden;
  background:var(--surface-muted);text-decoration:none;color:inherit}
.pay-file .shot{display:flex;align-items:center;justify-content:center;height:84px;
  background:#e7edf2;font-size:1.5rem;overflow:hidden}
.pay-file .shot img{width:100%;height:100%;object-fit:cover}
.pay-file .meta{padding:7px 9px}
/* Two lines before it stops, not one: "Payment Sheet invoice-1" cut to
   "Payment Sheet Inv…" hid which paper it was. The whole name is the title. */
.pay-file .meta b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  font-size:.72rem;line-height:1.3;overflow:hidden;overflow-wrap:anywhere;white-space:normal}
/* The box the name sits in was one line too (.pay-file span, above). */
.pay-file .meta{white-space:normal}
.pay-file .meta span{color:var(--ink-500);font-size:.66rem}
.pay-file:hover{border-color:var(--blue-700)}

/* Twelve addresses read in columns, not twelve rows — but each row now carries
   the two decisions and the photos, so a track has to be wide enough to hold a
   property AND what can be done about it. auto-fill rather than a count, for
   the same reason as the repair boxes: the panel is a third the width of the
   window, so a viewport breakpoint measures the wrong thing. */
/* Each cell holds an address, two pills and three actions. At 272px they were
   stacking into a column of fragments; 340 lets the address breathe and the
   actions sit on a line of their own. */
.pay-places{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:0 24px;list-style:none;margin:0;padding:0}
.pay-places li{display:grid;gap:5px;min-width:0;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:.8rem}
.pay-place-what{display:flex;align-items:center;gap:9px;min-width:0;flex-wrap:wrap}
.pay-places a{font-weight:600;text-decoration:none;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.pay-places a:hover{text-decoration:underline}
.pay-places .place-where{color:var(--ink-500)}
/* The panel's hints sit 4px up into whatever is above them, which is right
   under a panel's heading and wrong here: under a group's heading it ran the
   two lines together, and under the properties it crossed their rule. */
.panel .pay-files-head + p.hint{margin:6px 0 4px}
.panel .pay-places + p.hint{margin:18px 0 0}

.pay-empty{text-align:center;padding:24px 18px;color:var(--ink-500);font-size:.8rem}
.pay-empty .ring{display:flex;align-items:center;justify-content:center;width:42px;height:42px;
  margin:0 auto 10px;border-radius:50%;background:var(--surface-muted);font-size:1.1rem}
.pay-empty b{display:block;color:var(--ink-900);font-size:.86rem;margin-bottom:3px}

@media (max-width:1080px){
  .pay-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pay-flow{columns:1}
}
@media (max-width:640px){
  .pay-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pay-head-side{text-align:left}
}

/* What the contractor wrote on the request, under the files they sent with it.
   Set apart from the attachments rather than run on as another hint: it is the
   only thing in that box somebody actually reads. */
.pay-note-box{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.pay-note-box > b{display:flex;align-items:center;gap:7px;font-size:.78rem;
  color:var(--ink-700);letter-spacing:.02em}
.pay-note-box .note-body{margin-top:6px;font-size:.86rem;line-height:1.45}
/* p.hint, not .hint: `.panel p.hint` pulls every hint up 4px to sit under a
   panel heading, and here that put this line INTO the heading above it — two
   lines of text overlapping, on the common case where nobody wrote a note. */
.pay-note-box p.hint{margin-top:6px}

/* ---- finishing a repair from the payment --------------------------------- */
.pay-repair{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pay-repair .hint-lead{margin-top:0}
.pay-repair-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
/* The note under Ready To Sell / Needs More Work clears the buttons (Tyler,
   15 October 2026). `.panel p.hint` lifts every note 4px to sit under a
   heading, which put this one's first line behind Ready To Sell. */
.pay-repair .pay-repair-acts + p.hint{margin-top:16px}
.pay-repair-acts .button.inline{width:auto;display:inline-flex;align-items:center;gap:7px}
.repair-form{margin-top:14px;padding:14px;border:1px solid var(--line);
  border-radius:var(--radius-md);background:var(--surface-muted)}

/* auto-FILL, not auto-fit, and cards that do not stretch to each other's
   height. Both matter, and the fill is the subtle one: auto-fit collapses the
   tracks nothing is in, so the two boxes showing at rest swell to fill the row
   and then SHRINK when the contractor box appears — revealing a box would
   resize the boxes already there. auto-fill keeps the empty track open, so a
   new card drops into it and leaves its neighbours alone.

   A media query cannot do this job: the breakpoint would be on the VIEWPORT
   while these cards sit inside a panel a third its width, so a wide window
   still gave three cards too narrow to put a title and its count side by
   side. The track width is the constraint, so the track width states it. */
.repair-boxes{display:grid;gap:13px;align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}

.repair-box{border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--surface);overflow:hidden;display:flex;flex-direction:column}
.repair-box > header{display:flex;align-items:center;gap:9px;padding:10px 12px;
  flex-wrap:wrap}
.repair-box > header b{font-size:.84rem;min-width:0}
/* Never clipped by the card, and never squashed to fit beside a long title:
   it drops to its own line instead. */
.repair-count{margin-left:auto;white-space:nowrap;flex:none}

/* Work Outstanding has forty-odd choices in the base. Left to itself that is a
   box taller than the page, so it scrolls inside its own card. */
.repair-ticks{display:grid;gap:2px;max-height:190px;overflow-y:auto;
  border-top:1px solid var(--line);padding:6px 5px 6px 8px;overscroll-behavior:contain}
.repair-ticks label{display:flex;align-items:flex-start;gap:9px;padding:5px 6px;
  border-radius:7px;font-size:.83rem;line-height:1.35;cursor:pointer}
.repair-ticks label:hover{background:var(--blue-100)}
.repair-ticks label[hidden]{display:none}
.repair-ticks input{margin:1px 0 0;flex:none;width:15px;height:15px;accent-color:var(--blue-700)}
.repair-ticks input:focus-visible{outline:2px solid var(--blue-700);outline-offset:1px}
.repair-ticks::-webkit-scrollbar{width:9px}
.repair-ticks::-webkit-scrollbar-thumb{background:#c3ccd4;border-radius:99px;
  border:2px solid var(--surface)}

.repair-pick{padding:11px 12px;border-top:1px solid var(--line)}
.repair-pick select{width:100%;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);padding:8px;font:inherit;font-size:.84rem}
.repair-pick select:focus-visible{outline:2px solid var(--blue-700);outline-offset:1px}

/* What Airtable holds right now, kept plainly under the ticks. */
.repair-now{margin:0;padding:9px 12px;border-top:1px dashed var(--line);
  background:var(--surface-muted);color:var(--ink-700);font-size:.76rem;line-height:1.4}
.repair-now b{color:var(--ink-900)}

/* ---- Asking for a price, and answering it --------------------------------
   Lives in the property's aside, where the headline price already is. It is
   the same box on the page and in the dashboard's panel, so it is sized to
   the narrower of the two: the aside is right-aligned on a wide screen, and
   this box overrides that because a form reads left to right either way. */
.price-box {
  width: 100%; max-width: 320px; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--surface); padding: 14px;
  text-align: left;
}
.price-box.is-waiting { border-color: var(--gold-600); background: var(--gold-100); }
.price-box.is-off { background: var(--surface-muted); }
.price-box h3 { margin: 0 0 10px; font-size: .82rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500); }
.price-box .hint { margin: 10px 0 0; color: var(--ink-500); font-size: .76rem; line-height: 1.5; }
.price-box .button.inline { width: 100%; padding: 0 14px; }

.price-asked .n { display: block; color: var(--navy-950); font-size: 1.5rem;
  font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price-asked .l { display: block; margin-top: 2px; color: var(--ink-700); font-size: .8rem; }
.price-who { margin: 8px 0 0; color: var(--ink-500); font-size: .78rem; }
.price-why { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px;
  background: var(--surface); color: var(--ink-700); font-size: .8rem; line-height: 1.5; }

.price-answer { display: block; margin-top: 12px; }
.price-answer > span { display: block; margin-bottom: 4px; color: var(--ink-700);
  font-size: .74rem; font-weight: 700; }
.price-answer > span i { font-weight: 400; font-style: normal; color: var(--ink-500); }
.price-box textarea, .price-box input {
  /* The reset gives button/input/select `font: inherit` and leaves textarea
     out, so a bare one renders in the browser's monospace default. */
  width: 100%; border: 1px solid var(--line); border-radius: 8px; font: inherit;
  background: var(--surface); padding: 8px 10px; font-size: .84rem; resize: vertical;
}
.price-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

.price-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.price-form label { display: block; }
.price-form label > span { display: block; margin-bottom: 4px; color: var(--ink-700);
  font-size: .74rem; font-weight: 700; }

.price-last { margin: 0 0 10px; font-size: .8rem; color: var(--ink-700); }
.price-last.is-approved b { color: var(--green-700); }
.price-last.is-declined b { color: var(--red-700); }

.price-history { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.price-history summary { color: var(--ink-500); font-size: .76rem; cursor: pointer; }
.price-history ul { margin: 10px 0 0; padding-left: 16px; }
.price-history li { margin-bottom: 8px; color: var(--ink-700); font-size: .76rem; line-height: 1.5; }
.price-history li span { display: block; color: var(--ink-500); }

/* ---- Adding a property ---------------------------------------------------
   Which company it belongs to, asked before the form because it decides which
   fields the form has. */
.choose-company { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.choose-card {
  display: block; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); padding: 18px; color: var(--ink-900); text-decoration: none;
}
.choose-card:hover { border-color: var(--blue-700); box-shadow: var(--shadow); }
.choose-dot { display: block; width: 26px; height: 6px; border-radius: 3px;
  background: var(--dot, var(--blue-700)); margin-bottom: 12px; }
.choose-card b { display: block; font-size: 1rem; }
.choose-card span { display: block; margin-top: 3px; color: var(--ink-500); font-size: .82rem; }

/* Something already at this address. Drawn like a warning rather than like a
   list, because it is one. */
.dupe-box { border-color: var(--gold-600); background: var(--gold-100); }
.dupe-list { margin: 0; padding-left: 18px; }
.dupe-list li { margin-bottom: 10px; }
.dupe-list li span { display: block; color: var(--ink-500); font-size: .8rem; }

/* ===========================================================================
   HOUSE STYLE
   ===========================================================================
   The look every new page is built to, taken from the Contractor Payments
   design: Georgia serif page titles, the #0b78ea action blue, a 14px card, the
   top bar. See the House style section of CLAUDE.md.

   These tokens sit ALONGSIDE the older --navy-950 / --blue-700 set rather than
   replacing it. Sixteen pages are drawn with the old names, and a rename would
   move all of them at once for no new capability — so the old pages keep their
   look until each is next touched, and anything new uses what is below.
   ======================================================================== */
:root {
  --navy: #0f2d46;
  --navy-2: #123a5a;
  --blue: #0b78ea;
  --blue-2: #eaf4ff;
  --bg: #edf3f7;
  --card: #fff;
  --text: #152033;
  --muted: #718198;
  --card-line: #dbe5ec;
  --soft: #f7f9fb;
  --card-shadow: 0 10px 30px rgba(28, 58, 83, .08);
  --radius: 14px;
  /* How tall the top bar is. Anything else that sticks to the top of the
     window sticks BELOW it, at this — the bar is z-index 30 and covers
     whatever pins at 0, which is how the price wizard's address went down
     the page hidden under the search box. */
  --topbar-h: 60px;
}

/* ---- the top bar, on every page ---------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; height: var(--topbar-h);
  align-items: center; justify-content: space-between; gap: 18px;
  background: var(--navy); padding: 0 28px 0 24px; color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05);
}
/* A link to a place on a page lands BELOW the bar. A jump to #something puts
   that element at the very top of the window, which is exactly where the bar
   sits and covers it: Send One To Me on Settings → Data answered in a banner
   at the top of #price-preview, and the admin saw the buttons and no answer.
   :target only, so nothing else that scrolls an element into view moves. */
:target { scroll-margin-top: calc(var(--topbar-h) + 16px); }
.global-search { position: relative; width: min(510px, 50vw); }
.global-search input {
  width: 100%; height: 36px; border: 0; border-radius: 7px; outline: none;
  padding: 0 14px 0 38px; background: #fff; color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.global-search::before {
  content: "\2315"; position: absolute; left: 13px; top: 6px;
  color: #6f8297; font-size: 20px; font-weight: 700; pointer-events: none;
}
.global-search input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.top-user { display: flex; align-items: center; gap: 10px; color: #fff;
  font-size: 14px; font-weight: 700; text-decoration: none; }
.top-user:hover { opacity: .85; }
.top-user-name { white-space: nowrap; }
.avatar {
  display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center;
  border-radius: 50%; background: #fff; color: var(--navy);
  font-size: 12px; font-weight: 900;
}

/* The bar spans the workspace, so the page's padding moved off .workspace and
   onto a wrapper inside it. .page-view keeps its 1180px exactly as before —
   putting the padding on .page-view itself would have narrowed every page by
   about ninety pixels, which is not a change the top bar should smuggle in. */
.workspace { padding: 0; }
.workspace-body { padding: 28px clamp(22px, 4vw, 56px) 64px; }

/* ---- page titles -------------------------------------------------------- */
.page-title h1 {
  margin: 0; color: #12243a; font-family: Georgia, "Times New Roman", serif;
  font-size: 34px; font-weight: 500; letter-spacing: -.4px;
}
.page-title p { margin: 2px 0 18px; color: var(--muted); font-size: 15px;
  line-height: 1.35; max-width: 78ch; }

/* The older pages keep their layout but take the house title — the serif and
   its one size — so a page's title is the same size on every tab (Tyler,
   Before Launch; there were six). */
.page-head h1, .page-view > h1 {
  font-family: Georgia, "Times New Roman", serif; font-size: 34px; font-weight: 500;
  letter-spacing: -.4px; color: #12243a;
}

/* ---- the card, and a section inside one -------------------------------- */
.card {
  border: 1px solid #d9e4ec; border-radius: var(--radius);
  background: var(--card); box-shadow: var(--card-shadow);
}
.card.sec { padding: 0 20px 20px; margin-bottom: 18px; }
.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 0 13px; flex-wrap: wrap;
}
.sec-head h2 { margin: 0; font-family: Georgia, "Times New Roman", serif;
  font-size: 25px; font-weight: 500; }
.sec-head .sub { margin: 3px 0 0; color: var(--muted); font-size: 13px;
  line-height: 1.45; max-width: 72ch; }
.count-pill {
  display: inline-grid; min-width: 34px; height: 27px; place-items: center;
  border-radius: 999px; background: #f0f4f7; padding: 0 11px;
  color: #516177; font-size: 12px; font-weight: 900;
}

/* ---- buttons ------------------------------------------------------------ */
.btn {
  height: 42px; border: 1px solid transparent; border-radius: 9px; padding: 0 18px;
  font-size: 14px; font-weight: 800; transition: .16s ease; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  text-decoration: none;
}
/*
 * THE SAME COLOURS AS THE REST OF THE DESK.
 *
 * There are two button systems here: `.button` on three dozen pages, and
 * `.btn` on six — and they looked like two different applications. The
 * buying journey crossed between them in one click: the application page in
 * navy, then the CIS wizard a press later in bright blue with a shadow and a
 * hover lift that nothing else in the desk does.
 *
 * The BOX is left exactly as it was — height, padding, radius, the inline
 * flex — because that is what the six pages are laid out around, and
 * rewriting their markup to the other class would change widths on every one
 * of them (`.button` is full-width by default and `.btn` never is). Only the
 * paint changes, so this cannot move anything.
 *
 * The customer's waiver and portal keep the blue: they load their own
 * stylesheets, not this one, and they are a different audience looking at a
 * different thing.
 */
.btn-primary { background: var(--navy-900); color: #fff; }
.btn-primary:hover { background: var(--navy-800); }
.btn-secondary { border-color: var(--line); background: #fff; color: var(--ink-700); }
.btn-secondary:hover { background: var(--surface-muted); }
/* A filter bar's Apply is plain, so it never looks like the list's one main
   button (Tyler, Before Launch): white, with the navy outline that still marks
   it the button to press after choosing. Clear stays the grey ghost. */
.filter-actions button[type="submit"] {
  border: 1px solid var(--navy-900, #12243a); background: #fff; color: var(--navy-900, #12243a);
}
.filter-actions button[type="submit"]:hover { background: var(--surface-muted); }
.btn.sm { height: 34px; border-radius: 8px; padding: 0 13px; font-size: 12.5px; }
.btn:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; filter: none; }

/* ---- fields ------------------------------------------------------------- */
.field label { display: block; margin-bottom: 7px; color: #46566b;
  font-size: 12px; font-weight: 800; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 42px; border: 1px solid #ccd8e1; border-radius: 9px;
  outline: none; background: #f8fafc; padding: 10px 13px; color: var(--text);
  font: inherit; font-size: 14px;
}
.field textarea { line-height: 1.6; resize: vertical; font-size: 13.5px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue); background: #fff;
}
.field .note { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.field.searchbox { position: relative; }
.field.searchbox input { padding-left: 40px; }
.field.searchbox .mag { position: absolute; bottom: 10px; left: 13px;
  color: #6f8297; font-size: 17px; }

/* ---- the row of counts along the top of a page -------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
/* The Closings page has five stages; four across would leave one alone on a row. */
.stats.five { grid-template-columns: repeat(5, 1fr); }
.stat {
  display: flex; min-height: 95px; align-items: center; gap: 14px; padding: 15px 16px;
}
.stat-icon {
  display: grid; width: 43px; height: 43px; flex: 0 0 43px; place-items: center;
  border-radius: 50%; background: #e9f3ff; color: var(--blue);
  font-size: 19px; font-weight: 900;
}
.stat.orange .stat-icon { background: #fff4dc; color: #e89d16; }
.stat.green  .stat-icon { background: #e4f4eb; color: #15784f; }
.stat.gray   .stat-icon { background: #eef2f5; color: #758497; }
.stat small { display: block; margin-bottom: 2px; color: #3f4e61;
  font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.stat strong { display: block; margin-bottom: 4px; font-size: 23px; line-height: 1.05; }
.stat .money { color: #7b8ca1; font-size: 13px; }

/* ---- the house table ---------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-wrap thead th {
  border-top: 1px solid #e1e8ee; border-bottom: 1px solid #e1e8ee;
  background: #f4f7fa; padding: 10px 8px; color: #687991; font-size: 11px;
  font-weight: 900; letter-spacing: .04em; text-align: left; text-transform: uppercase;
}
.table-wrap tbody td { border-bottom: 1px solid var(--card-line); padding: 11px 8px;
  font-size: 13px; vertical-align: middle; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap tbody tr:hover { background: #fafcff; }
.table-wrap .primary { margin-bottom: 2px; color: #1a2535; font-size: 14px; font-weight: 900; }
.table-wrap .secondary { color: #78899e; font-size: 12px; line-height: 1.3; }
.table-wrap .tag {
  display: inline-flex; min-height: 26px; align-items: center; justify-content: center;
  border-radius: 999px; background: #f1f4f6; padding: 0 11px;
  color: #45566a; font-size: 11px; font-weight: 900;
}
.table-wrap .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- All Customers and a customer's account (Collections) --------------
   Moved to the house style 9 October 2026. Only what the shared classes do
   not already say: money and dates line up on the right, and the pager sits
   inside the card rather than under it. */
.cu-list .table-wrap .right { text-align: right; }
.cu-list .pager { margin-top: 14px; }
.cu-title .record-top { margin-bottom: 6px; }

/* ---- the search page ---------------------------------------------------- */
.search-form { display: grid; grid-template-columns: minmax(280px, 1fr) auto;
  gap: 12px; align-items: end; padding: 16px 18px; margin-bottom: 18px; }
.result-name { color: #1a2535; font-size: 14px; font-weight: 900; text-decoration: none; }
.result-name:hover { color: var(--blue); text-decoration: underline; }
.nothing { margin: 16px 0 0; color: var(--text); font-size: 14px; font-weight: 700; }
.nothing-note { margin: 6px 0 16px; color: var(--muted); font-size: 12.5px; max-width: 68ch; }

@media (max-width: 1100px) { .stats, .stats.five { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr; }
  .topbar { padding: 0 14px; }
  .global-search { width: 58vw; }
  .top-user-name { display: none; }
  .page-title h1, .page-head h1, .page-view > h1 { font-size: 29px; }
  .search-form { grid-template-columns: 1fr; }
}

/* ---- Closings, and the Documents pages inside it ------------------------ */
.screens { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.screen-tab {
  display: inline-flex; height: 40px; align-items: center; border: 1px solid #cbd7e0;
  border-radius: 9px; background: #fff; padding: 0 18px; color: #425167;
  font-size: 14px; font-weight: 800; text-decoration: none;
}
.screen-tab:hover { background: #f5f8fb; }
.screen-tab.active { border-color: var(--navy); background: var(--navy); color: #fff;
  box-shadow: 0 5px 14px rgba(15, 45, 70, .2); }

/* A stat that is a link behaves like one; a stat with nothing behind it does
   not invite a press. */
a.stat { text-decoration: none; color: inherit; transition: .16s ease; }
a.stat:hover { transform: translateY(-1px); }
.stat.active { border: 2px solid var(--blue); color: #fff;
  background: linear-gradient(180deg, #133653, #0e2b44);
  box-shadow: 0 9px 22px rgba(17, 60, 92, .22); }
.stat.active small, .stat.active .money { color: #d7e8f6; }
.stat.active .stat-icon { border: 1px solid rgba(255,255,255,.2);
  background: rgba(11,120,234,.35); color: #fff; }
.stat.is-soon { background: repeating-linear-gradient(135deg,
  #f7f9fb 0 10px, #fff 10px 20px); }

.tag.good { background: #e7f5ee; color: #15784f; }
.tag.warn { background: #fdf3dd; color: #a8720f; }
.tag.bad  { background: #fdecec; color: #b2373c; }

code.ph { display: inline-block; border: 1px solid #e1e8ee; border-radius: 5px;
  background: #f1f5f8; padding: 2px 6px; color: #1a2535;
  font: 800 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }

.crumbs { margin: 0 0 10px; font-size: .84rem; }

/* ---- the Documents forms ------------------------------------------------ */
.cos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.co {
  display: flex; flex: 1; min-width: 210px; align-items: center; gap: 12px;
  border: 1px solid #d9e4ec; border-radius: var(--radius); background: #fff;
  padding: 14px 16px; box-shadow: var(--card-shadow); color: inherit;
  text-align: left; text-decoration: none;
}
.co:hover { background: #fafcff; }
.co-dot { width: 10px; height: 36px; flex: 0 0 auto; border-radius: 5px; background: var(--dot); }
.co b { display: block; font-size: 14.5px; }
.co span span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.co.active { border: 2px solid var(--blue); color: #fff;
  background: linear-gradient(180deg, #133653, #0e2b44);
  box-shadow: 0 9px 22px rgba(17, 60, 92, .22); }
.co.active span span { color: #d7e8f6; }

.rule { border-left: 3px solid var(--blue-2); padding-left: 15px; margin-bottom: 20px; }
.rule-when { display: block; margin-bottom: 10px; color: var(--blue); font-size: 11px;
  font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.field.wide { grid-column: 1 / -1; }

/* Values → Sellers: a box per cell, wide enough to read a company's name. */
.sellers input { width: 100%; min-width: 170px; }
.sellers td { vertical-align: middle; }
.sellers .prints { min-width: 220px; color: var(--muted); font-size: 12.5px; }

.linky { border: 0; background: none; padding: 0 0 0 8px; color: var(--muted);
  font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0;
  text-decoration: underline; }
.linky:hover { color: var(--bad, #b2373c); }

.banner { border-radius: 10px; padding: 13px 16px; margin-bottom: 18px;
  font-size: 13.5px; line-height: 1.55; }
.banner.info { background: var(--blue-2); color: #0a5ab0; }
.banner.warn { border: 1px solid #e6c77a; background: #fdf3dd; color: #7a530a; }
.banner ul { margin: 8px 0 0; padding-left: 20px; }

.card.sec.is-retired { background: repeating-linear-gradient(135deg,
  #f7f9fb 0 10px, #fff 10px 20px); }
.card.sec.is-retired input, .card.sec.is-retired textarea { pointer-events: none; opacity: .7; }

/* ---- the closing form ---------------------------------------------------- */
/* A row of buttons. Used by Documents and by the closing form; it had no rule
   until the second page wanted one, and two buttons touching is a bug. */
.acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* A field nothing can default — the carrier cannot know this house's premium.
   Dashed rather than red: it is unanswered, not wrong. */
.field input.needs { border-style: dashed; border-color: #e0b95f; background: #fffdf6; }

/* The escrow table: figures the page works out, beside the boxes that feed
   them. Right-aligned and tabular so the columns read down. */
.escrow td.num { text-align: right; font-variant-numeric: tabular-nums;
  color: var(--ink-700); font-weight: 700; white-space: nowrap; }
.escrow td { vertical-align: top; }
.escrow input { width: 100%; min-width: 90px; }
.escrow th:last-child, .escrow td:last-child { width: 1%; text-align: right; }

/* "Preview with 1 2 3 buyers" — three small doors, not three buttons. */
.preview-buyers { display: flex; align-items: center; gap: 5px; white-space: nowrap;
  color: var(--muted); font-size: 11.5px; }
.preview-buyers a { display: inline-grid; place-items: center; min-width: 24px; height: 24px;
  border: 1px solid #cbd7e0; border-radius: 7px; background: #fff; color: var(--blue);
  font-size: 12.5px; font-weight: 800; text-decoration: none; }
.preview-buyers a:hover { background: var(--blue-2); border-color: #cfe3f1; }

/* Document Change: the words of a contract, in a box.
   MONOSPACE AND BIG. This is a legal document's prose with placeholders
   threaded through it, and a proportional face makes {{BuyersFullName}} hard
   to pick out of a sentence. Tall enough that a clause is read whole rather
   than through a slot. */
.wording-box { width: 100%; padding: 12px 14px; border: 1px solid var(--line, #d7e0e8);
  border-radius: 10px; background: #fbfdff; color: var(--ink-800, #1c2b3a);
  font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical; tab-size: 2; }
.wording-box:focus { outline: 2px solid var(--blue, #2a6fb0); outline-offset: 1px; }

.wording-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 12px; }
/* The reason is half the value of a version, so the box for it is the widest
   thing on the row rather than an afterthought beside the button. */
.wording-actions input { flex: 1 1 320px; min-width: 240px; }

/* The draft doors are buttons here rather than links — they POST what is in
   the box — so they are given the same face as the ones on the Templates
   page, which do the same job. */
.preview-buyers button { display: inline-grid; place-items: center; min-width: 24px;
  height: 24px; padding: 0; border: 1px solid #cbd7e0; border-radius: 7px; background: #fff;
  color: var(--blue); font-size: 12.5px; font-weight: 800; cursor: pointer; }
.preview-buyers button:hover { background: var(--blue-2); border-color: #cfe3f1; }

/* A tick inside a form grid. `.field label` makes every label a block and
   `.field input` makes every input full width, which is right for a text box
   and turns a checkbox into a banner with a giant tick in the middle. */
.field label.check { display: inline-flex; width: auto; margin-bottom: 0;
  align-self: flex-start; justify-self: start; }
.field .check input[type="checkbox"] { width: auto; height: auto; min-height: 0;
  margin: 0; padding: 0; box-shadow: none; }

/* A security deed is a Book and a Page: one field, two boxes side by side. */
.deed-pair { display: flex; gap: 10px; }
.deed-pair input { flex: 1 1 0; min-width: 0; }

/* A field beside a taller one kept its label and box at the top rather than
   stretching the box to fill the row — a text input grew to twice the height
   of the one beside it on the closing form. */
.grid > .field { align-content: start; }

/* ---- the plat and legal picker, on the closing form ------------------------ */
.picks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.pick { padding: 12px; border: 1px dashed var(--line); border-radius: 10px; }
.pick.is-set { border-style: solid; border-color: var(--blue-700, #2a6fb0); }
.pick-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.pick-head .linky { margin-left: auto; }
.pick img { display: block; max-width: 100%; max-height: 260px; margin: 0 auto 6px;
  border: 1px solid var(--line); background: #fff; }
.papers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.paper { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface, #fff); font-size: .78rem; text-align: left; cursor: pointer; }
.paper:hover { border-color: var(--blue-700, #2a6fb0); }
.paper img { width: 100%; height: 110px; object-fit: cover; object-position: top; }
.paper .pdf { display: grid; place-items: center; height: 110px; border-radius: 6px;
  background: #f1e6e6; color: #9a2f2f; font-weight: 800; letter-spacing: .08em; }
.cropper { margin-top: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.crop-bar, .crop-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.crop-pages { display: inline-flex; align-items: center; gap: 8px; }
.crop-stage { position: relative; margin: 10px 0; max-height: 72vh; overflow: auto; }
.crop-stage canvas { display: block; width: 100%; height: auto; cursor: crosshair;
  touch-action: none; border: 1px solid var(--line); }
.crop-box { position: absolute; border: 2px solid #2a6fb0; background: rgba(42, 111, 176, .12);
  pointer-events: none; }

/* A yes/no on the closing form: the box, then what it does and why. */
.optin { display: flex; align-items: flex-start; gap: 10px; max-width: 70ch; cursor: pointer; }
.optin input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; }

/* The data pack's preview, under the Generate button. */
.preview-box { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.preview-box h3 { margin: 0 0 4px; font-size: 1rem; }
.preview-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 6px; }
.preview-checks { margin: 10px 0 0; padding-left: 1.2em; max-width: 78ch; font-size: .9rem; line-height: 1.5; }
.preview-checks li + li { margin-top: 4px; }
.preview-checks .is-missing { color: #9a2f2f; font-weight: 600; }

.figures-note { margin: -8px 0 16px; color: var(--muted); font-size: 12.5px; }

.word-copy { display: inline-block; margin-top: 6px; font-size: 12.5px; }
.if-present { max-width: 38ch; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }

/* The contract change log: what changed, before and after. */
.change-log td { vertical-align: top; }
.change-log .change { margin: 0 0 4px; font-size: 13px; line-height: 1.4; }
.change-log .from { color: #9a2f2f; text-decoration: line-through; text-decoration-color: rgba(154, 47, 47, .4); }
.change-log .to { color: #1d6b3a; }

/* ---- Testing mode (src/buying/testing.js) ------------------------------ */
.test-strip { border: 1px dashed #c98a12; background: #fff8e6; border-radius: 12px;
  padding: 12px 14px; margin: 12px 0 16px; color: #5c4208; }
.test-strip-head { display: flex; gap: 10px; align-items: flex-start; }
/* min-width: 0 and overflow-wrap so a long test address wraps inside the note
   rather than pushing a phone's page sideways (the code review, 17 October
   2026: Closings → Settings' Off note was 19px wider than a 375 screen). */
.test-strip-head p { margin: 0; font-size: 13.5px; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.test-badge { flex: none; background: #c98a12; color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; }
.test-diffs { overflow-x: auto; margin-top: 10px; }
.test-diffs table { border-collapse: collapse; width: 100%; font-size: 13px; background: #fff;
  border-radius: 8px; }
.test-diffs th, .test-diffs td { text-align: left; padding: 6px 10px; border-bottom: 1px solid #f0e2bf; }
.test-diffs th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #8a6314; }
.test-diffs .test-desk { font-weight: 700; color: #3d2c05; }
.test-diffs .test-by { color: #8a6314; font-size: 12px; }
.test-strip-foot { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.test-said { font-size: 13px; }
.test-chip { display: inline-block; background: #fff1cc; color: #6b4d06; border: 1px solid #e9cf8a;
  border-radius: 999px; font-size: 11.5px; font-weight: 700; padding: 1px 8px; margin-left: 6px; }
.mc .set-confirm { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; font-size: 13.5px;
  color: #8a1f1f; font-weight: 600; }
.mc .set-foot { display: flex; gap: 12px; align-items: center; margin-top: 14px; }

/* ---- The CIS wizard (views/cis-wizard.ejs) ----------------------------- */
.cw-title .cw-state { display: inline-block; margin-left: 8px; border-radius: 999px; padding: 2px 10px;
  background: #eef2f5; color: #4d5d70; font-size: 12px; font-weight: 800; vertical-align: 2px; }
.cw-title .cw-state.is-done { background: #e4f4eb; color: #15784f; }
.cw-steps { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.cw-tab { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #d9e4ec; background: #fff;
  border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 700; color: #3f4e61;
  cursor: pointer; }
.cw-tab.is-on { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 3px rgba(11, 120, 234, .12); }
.cw-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cw-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #eef2f5; font-size: 12px; font-weight: 900; }
.cw-tab.is-on .cw-n { background: var(--blue); color: #fff; }
.cw-gap { color: #b0660a; font-size: 12px; font-weight: 800; }
.cw-ok { color: #15784f; font-weight: 900; }
.cw-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.cw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; }
.cw-grid .cw-wide { grid-column: 1 / -1; }
.cw-suffix { color: var(--muted); font-weight: 600; }
.cw-buyer { border: 1px solid #e3eaf0; border-radius: 12px; padding: 12px 14px 0; margin-bottom: 12px; background: #fbfdfe; }
.cw-buyer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cw-buyer-head h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 19px; }
.cw-mailing { margin-top: 16px; }
.cw-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.cw-said { font-size: 13px; color: var(--muted); }
.cw-said.is-bad { color: #a32020; font-weight: 700; }
.cw-figures { margin-top: 8px; }
.cw-fignote { margin: 0; color: var(--muted); font-size: 12.5px; }
.cw-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 18px; margin: 0 0 16px; }
.cw-facts dt { color: #687991; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.cw-facts dd { margin: 3px 0 0; font-size: 14.5px; font-weight: 700; color: #1a2535; }
.cw-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 600;
  background: #f5f8fb; border: 1px solid #e3eaf0; border-radius: 10px; padding: 12px 14px; }
.cw-check input { margin-top: 3px; }
.cw-review { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-bottom: 14px; }
.cw-review h3 { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 19px; }
.cw-line { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; }
.cw-line span { color: #4d5d70; }
.cw-terms { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cw-terms th { text-align: left; color: #687991; font-weight: 700; padding: 4px 10px 4px 0; vertical-align: top; }
.cw-terms td { padding: 4px 0; font-variant-numeric: tabular-nums; font-weight: 700; }
.cw-goto { border: 0; background: none; color: var(--blue); font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; padding: 0 0 0 6px; }
.cw-confirm-note { margin-top: 8px; }
/* One height for every box in the wizard: the older .field rule above sizes
   some inputs by padding alone, so a row of mixed types came out ragged. */
.cw-grid .field input, .cw-grid .field select, .cw-mailing textarea { box-sizing: border-box;
  width: 100%; min-height: 42px; border: 1px solid #ccd8e1; border-radius: 9px; background: #f8fafc;
  padding: 10px 13px; font: inherit; font-size: 14px; color: var(--text); }
.cw-grid .field input, .cw-grid .field select { height: 42px; }
.cw-grid .field input:focus, .cw-grid .field select:focus { border-color: var(--blue); background: #fff; outline: none; }
.cw-grid .field { align-content: start; }
.test-strip-foot .button { width: auto; flex: none; }
.cw-send .cw-runs { margin: 0 0 12px; font-size: 14px; }
.cw-state-sent { color: #15784f; font-weight: 800; text-transform: capitalize; }
.cw-state-skipped { color: #8a6314; font-weight: 800; text-transform: capitalize; }
.cw-state-failed { color: #a32020; font-weight: 800; text-transform: capitalize; }
.cw-acts { white-space: nowrap; }
.cw-link { margin-top: 5px; color: #78899e; font-size: 11.5px; word-break: break-all;
  white-space: normal; max-width: 210px; user-select: all; }
.cw-signed { margin-bottom: 14px; }
.cw-send > .cw-link { max-width: none; margin-top: 10px; }
.cw-send > .note { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.cw-closing { margin: 12px 0 0; font-size: 14px; }
.cw-said .cw-gap { display: block; margin-top: 4px; }
/* Changes after confirming: each ask, its boxes, and the admin's decision on each. */
.cw-batch { margin-top: 14px; }
.cw-batch-head { margin: 0 0 8px; font-size: 13.5px; }
.cw-batch-head .secondary { display: block; margin-top: 2px; }
.cw-decide { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cw-decide input { min-width: 0; flex: 1 1 160px; height: 34px; border: 1px solid #ccd8e1; border-radius: 8px;
  padding: 0 10px; font: inherit; font-size: 13px; }
/* The bar that holds the request while the boxes are changed. */
/* Beside the rail, never over it (the shell's 252px; the rail folds away under 900px). */
.cw-changebar { position: fixed; left: 252px; right: 0; bottom: 0; z-index: 30; background: #fff;
  border-top: 2px solid var(--blue); box-shadow: 0 -8px 24px rgba(15, 45, 70, .12); }
.cw-changebar-in { max-width: 1100px; margin: 0 auto; padding: 12px 20px; display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.cw-changebar-count { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.cw-changebar-count .secondary { font-size: 12px; }
.cw-changebar textarea { width: 100%; box-sizing: border-box; border: 1px solid #ccd8e1; border-radius: 9px;
  padding: 8px 11px; font: inherit; font-size: 13.5px; resize: vertical; }
.cw-changebar-do { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cw-changebar .cw-said { grid-column: 1 / -1; }
body.cis-changing { padding-bottom: 130px; }
@media (max-width: 900px) { .cw-changebar { left: 0; } }
@media (max-width: 760px) {
  .cw-changebar-in { grid-template-columns: 1fr; gap: 8px; padding: 10px 14px; }
  .cw-changebar-do .btn { flex: 1; }
}
.cw-send .tag { white-space: nowrap; }
.cw-ask { margin-bottom: 12px; }
.cw-ask .cw-foot { margin-top: 8px; }

/* ---- The CIS change queue on Closings ---------------------------------- */
.cis-queue { margin-bottom: 18px; }
.cis-ask { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start;
  border-top: 1px solid var(--card-line); padding: 14px 0; }
.cis-ask:first-of-type { border-top: 0; }
.cis-ask-what { flex: 1 1 340px; min-width: 280px; }
.cis-ask-move { display: block; margin-top: 3px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.cis-ask-why { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; }
.cis-ask-warn { margin: 6px 0 0; color: #8a6314; font-size: 12.5px; font-weight: 700; }
.cis-ask-do { flex: 1 1 260px; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.cis-ask-do input { width: 100%; min-height: 38px; border: 1px solid #ccd8e1; border-radius: 9px;
  background: #f8fafc; padding: 8px 12px; font: inherit; font-size: 13.5px; }
.cis-ask-buttons { display: flex; gap: 8px; }
.cw-change .cw-asked { margin-top: 14px; }
.cw-stale { margin-top: 4px; color: #8a6314; font-size: 12px; font-weight: 700; }

/* ---- A customer's file (5l) -------------------------------------------- */
.cf-search { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cf-search input { flex: 1; min-width: 260px; height: 42px; border: 1px solid #ccd8e1;
  border-radius: 9px; background: #f8fafc; padding: 10px 13px; font: inherit; font-size: 14px; }
.cf-search input:focus { border-color: var(--blue); background: #fff; outline: none; }
.cf-look .table-wrap { margin-top: 14px; }
.cf-deal .sec-head { align-items: flex-start; }
/* Their Household on the customer's file (12 October 2026). */
.cf-household .table-wrap { margin-top: 10px; }
.cf-move { margin-top: 14px; }
.cf-move > summary { list-style: none; width: max-content; cursor: pointer; }
.cf-move > summary::-webkit-details-marker { display: none; }
.cf-move-form { display: grid; gap: 8px; margin-top: 12px; max-width: 620px; }
.cf-move-form textarea { width: 100%; }
.cf-move-form .btn { justify-self: start; }
.cf-moves { margin: 14px 0 0; padding-left: 18px; color: var(--muted, #5b6472); font-size: .9rem; }
/* The same file seen from the customer's side. Said quietly, because it is a
   fact about the row rather than something to act on. */
.cf-theirs { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: #2f6b4f; background: #eaf5ee;
  border-radius: 999px; padding: 2px 8px; }
/* With a file open the lookup box is the way back out, not the point of the
   page: the same control, less of it. */
.cf-look-after { padding-top: 14px; padding-bottom: 14px; }
.cf-look-after .sec-head { margin-bottom: 10px; }
.cf-look-after .sec-head h2 { font-size: 1.05rem; }
.cf-look-after .sec-head .sub { display: none; }

/* ===== The Inventory skin ================================================
   Approved from a mockup on 23 September 2026: Georgia headings, softer
   cards, pill badges with a dot, line icons on card titles. Scoped to the
   Inventory section by a class on <body>, so nothing else in the app moves
   until somebody decides it should. Everything below overrides only what the
   look changes — the layout, the grid and the behaviour are the page's own. */

.skin-inventory {
  --line: #dce6ef;
  --ink-900: #122138;
  --ink-700: #3e5671;
  --ink-500: #6d85a3;
  --page: #f3f8fb;
  --surface-muted: #f2f6f9;
}
.skin-inventory .detail-title h1 { font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -1px; font-weight: 700; }
.skin-inventory .record-card h3 { font-family: Georgia, "Times New Roman", serif;
  font-size: 1.16rem; letter-spacing: -.2px; }
.skin-inventory .panel h2,
.skin-inventory .sec-head h2 { font-size: 1rem; letter-spacing: -.3px; }

/* A drawn icon beside each card's title, one stroke width and one box, so a
   column of them reads as one family. Only inside the Inventory skin: the
   markup carries it everywhere the partial is used, and elsewhere it stays
   out of the way rather than arriving unannounced. */
.panel h2 .cardicon, .sec-head h2 .cardicon { display: none; }
.skin-inventory .panel h2, .skin-inventory .sec-head h2 {
  display: flex; align-items: center; gap: 12px;
}
/* Specific enough to beat the hide rule above it: both name the same three
   parts, so the one that also names the skin has to carry the extra class. */
.skin-inventory .panel h2 .cardicon,
.skin-inventory .sec-head h2 .cardicon {
  display: block; width: 22px; height: 22px; flex-shrink: 0;
  fill: none; stroke: var(--blue-700); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Cards: rounder, and lifted by a shadow rather than a hard border. */
.skin-inventory .record-card,
.skin-inventory .panel,
.skin-inventory .card {
  border-radius: 14px; border-color: #edf2f7;
  box-shadow: 0 4px 20px rgba(27, 81, 121, .05);
}

/* A status is a pill with a dot, so availability reads at a glance rather
   than being read word by word. */
.skin-inventory .chip {
  border-radius: 22px; padding: 6px 12px; font-size: .74rem; font-weight: 650;
  border: 0; display: inline-flex; align-items: center; gap: 7px;
  background: #eef2f6; color: var(--ink-700);
}
.skin-inventory .chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #93a7bb;
}
.skin-inventory .chip.ok { background: var(--green-100); color: var(--green-700); }
.skin-inventory .chip.ok::before { background: #0bbc43; }
.skin-inventory .record-top .chip:not(.ok)::before { background: #f1ae00; }
/* Why it is on the shelf — Under Repair, Needs Price — beside the hold. */
.skin-inventory .record-top .chip.why { background: #f3f5f8; color: var(--ink-700); }
.skin-inventory .record-top .chip.why::before { display: none; }

/* The money is the thing the eye should land on first. */
.skin-inventory .record-figures strong,
.skin-inventory .headline-price .n { font-family: Georgia, "Times New Roman", serif; }
.skin-inventory .record-figures strong { font-size: 1.25rem; }

/* The prices and figures sit apart from the facts under them. */
.skin-inventory .record-card .record-sub { color: var(--ink-500); }

/* The property page, in two columns. What the property IS reads down the
   left; where it is, and the things you act on, sit in the rail. One column
   again below 1000px, because a rail that narrow is worse than no rail. */
.detail-two { display: grid; grid-template-columns: minmax(0, 1.88fr) minmax(290px, 1fr);
  gap: 22px; align-items: start; }
.detail-main, .detail-side { min-width: 0; }
/* The rail sticks BELOW the top bar, not under it, and is never taller than
   the window: at 18px from the top its Deal Snapshot heading sat behind the
   bar, and at 1,252px on a 768px laptop its foot — the map and Marketing
   Stats — could not be reached until the page ran out (13 October 2026).
   Taller than the window, it scrolls on its own, as the price wizard's does —
   and at its end the wheel carries on down the page, rather than stopping
   dead until the mouse is moved across to the left. */
.detail-side {
  position: sticky; top: calc(var(--topbar-h) + 18px);
  max-height: calc(100vh - var(--topbar-h) - 36px); overflow-y: auto;
  margin: 0 -4px; padding: 0 4px 4px;
}
/* Over a list, in the panel, there is no top bar above it. */
#dash-panel .detail-side { top: 0; max-height: calc(100vh - 110px); }
@media (max-width: 1000px) {
  .detail-two { display: block; }
  .detail-side, #dash-panel .detail-side {
    position: static; max-height: none; overflow: visible; margin: 18px 0 0; padding: 0;
  }
}

/* ---- The property's photos, Quick Actions and the stats strip -----------
   From the Inventory mockup approved on 23 September 2026. Scoped to the
   Inventory skin, like the rest of it, so nothing else in the app moves. */

.skin-inventory .photo-hero { padding: 16px; }
.skin-inventory .hero-shot { position: relative; border-radius: 9px; overflow: hidden;
  background: var(--surface-muted); }
.skin-inventory .hero-shot img { display: block; width: 100%; aspect-ratio: 529 / 248;
  object-fit: cover; }
/* How many there are, on the picture, so the count is where the eye already is. */
.skin-inventory .hero-count { position: absolute; left: 12px; bottom: 12px; color: #fff;
  background: rgba(19, 36, 25, .85); border-radius: 5px; padding: 8px 11px;
  font-size: .74rem; font-weight: 650; }
.skin-inventory .hero-strip { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-top: 14px; }
.skin-inventory .hero-thumb { position: relative; display: block; border-radius: 8px;
  overflow: hidden; border: 2px solid transparent; }
.skin-inventory .hero-thumb.is-on { border-color: var(--blue-700); }
.skin-inventory .hero-thumb img { display: block; width: 100%; aspect-ratio: 123 / 79;
  object-fit: cover; }
/* Everything past the fourth, counted rather than shown: a strip that runs on
   is a scroll, and the gallery is one press away. */
.skin-inventory .hero-more { position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(16, 34, 48, .45); color: #fff; font-weight: 700; }
.skin-inventory .hero-go { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.skin-inventory .quick-actions .panel-head { border: 0; padding-bottom: 8px; }
.skin-inventory .quick-row { display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 13px; margin-bottom: 8px; color: var(--blue-700);
  font-size: .82rem; font-weight: 650; text-align: left; cursor: pointer; }
.skin-inventory .quick-row:last-child { margin-bottom: 0; }
.skin-inventory .quick-row:hover { background: var(--blue-100); }
.skin-inventory .quick-ico svg { display: block; width: 19px; height: 19px; fill: none;
  stroke: var(--blue-700); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skin-inventory .quick-go { margin-left: auto; color: var(--ink-500); font-size: 1.1rem;
  line-height: 1; }

.skin-inventory .stats-box .panel-head { border: 0; padding-bottom: 8px; }
.skin-inventory .stats-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  background: var(--surface-muted); border-radius: 8px; padding: 13px 15px; margin: 0; }
.skin-inventory .stats-strip div { display: block; border: 0; padding: 0; }
.skin-inventory .stats-strip dt { font-size: .64rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-500); font-weight: 700; margin-bottom: 3px; }
.skin-inventory .stats-strip dd { margin: 0; text-align: left; font-size: 1rem; font-weight: 700; }

/* ---- Pressing a photo opens it ----------------------------------------
   A viewer over the page rather than a trip to the gallery: the photos are
   already in the page, so stepping through them costs nothing. */

.skin-inventory .hero-shot,
.skin-inventory .hero-thumb { padding: 0; border: 0; background: none; cursor: pointer;
  display: block; width: 100%; }
.skin-inventory .hero-shot { position: relative; border-radius: 9px; overflow: hidden;
  background: var(--surface-muted); }
.skin-inventory .hero-thumb { position: relative; border-radius: 8px; overflow: hidden;
  border: 2px solid transparent; }
.skin-inventory .hero-thumb.is-on { border-color: var(--blue-700); }
.skin-inventory .hero-shot:hover img,
.skin-inventory .hero-thumb:hover img { filter: brightness(1.05); }

/* The strip wraps once every photo is shown, rather than shrinking to fit. */
.skin-inventory .hero-strip { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-top: 14px; }

body.has-shot-viewer { overflow: hidden; }
.shot-viewer { position: fixed; inset: 0; z-index: 60; display: grid;
  grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 24px; background: rgba(8, 20, 31, .88); }
.shot-viewer[hidden] { display: none; }
.shot-big { grid-column: 2; justify-self: center; max-width: 100%;
  max-height: calc(100vh - 110px); border-radius: 10px; display: block; }
.shot-arrow { background: rgba(255, 255, 255, .12); color: #fff; border: 0;
  border-radius: 50%; width: 46px; height: 46px; font-size: 1.9rem; line-height: 1;
  cursor: pointer; }
.shot-arrow:hover { background: rgba(255, 255, 255, .22); }
.shot-arrow.is-prev { grid-column: 1; }
.shot-arrow.is-next { grid-column: 3; }
.shot-close { position: absolute; top: 16px; right: 20px; background: none; border: 0;
  color: #fff; font-size: 2.1rem; line-height: 1; cursor: pointer; }
.shot-where { grid-column: 2; grid-row: 2; margin: 0; text-align: center; color: #cfe3f5;
  font-size: .82rem; }
@media (max-width: 700px) {
  .shot-viewer { padding: 12px; gap: 6px; }
  .shot-arrow { width: 38px; height: 38px; font-size: 1.5rem; }
}

/* ---- Price Approval ----------------------------------------------------
   The queue, and the wizard's own spine. Not in the rail: it is a job
   somebody sits down to do, opened from the dashboard.

   Three counts, three tabs, one list. The tabs filter rows the server has
   already drawn, so the page still holds the whole queue with JavaScript off. */
.pq-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.pq-metric { display: flex; min-height: 88px; align-items: center; gap: 14px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  box-shadow: 0 4px 18px rgba(14, 40, 61, .04); }
.pq-ico { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center;
  border-radius: 50%; background: var(--blue-100); color: var(--blue-700); }
.pq-ico svg { width: 22px; height: 22px; }
.pq-metric:nth-child(2) .pq-ico { color: var(--gold-600); background: var(--gold-100); }
.pq-metric:nth-child(3) .pq-ico { color: var(--navy-800); background: var(--surface-muted); }
.pq-lab { display: block; margin-bottom: 2px; color: var(--ink-700); font-size: .81rem; font-weight: 650; }
.pq-n { display: block; color: var(--navy-950); font-size: 1.7rem; line-height: 1; font-weight: 800;
  font-variant-numeric: tabular-nums; }
.pq-sub { display: block; margin-top: 3px; color: var(--ink-500); font-size: .72rem; font-weight: 600; }

.pq-panel { padding: 14px 16px 18px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow); }

.pq-tabs { display: inline-grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 14px;
  padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-muted); }
.pq-tab { min-width: 196px; padding: 10px 16px; border: 0; border-radius: 7px; cursor: pointer;
  color: var(--ink-700); background: none; font: inherit; font-size: .88rem; font-weight: 750; }
.pq-tab.is-on { color: #fff; background: var(--navy-800); box-shadow: 0 4px 10px rgba(16, 50, 77, .18); }
.pq-count { display: inline-grid; min-width: 26px; height: 22px; margin-left: 8px; place-items: center;
  border-radius: 999px; background: var(--surface-muted); color: var(--navy-800); font-size: .75rem;
  font-variant-numeric: tabular-nums; }
.pq-tab.is-on .pq-count { background: var(--blue-100); }

/*
 * THE TOOLBAR WRAPS INSTEAD OF BEING TOLD WHEN TO.
 *
 * It asked for 260 + 170 + 190 + a button and only collapsed below a 980px
 * WINDOW — but the window is not the room: the rail takes 252 of it, so at a
 * 1000px window this had about 690 to fit 820 into, and the page scrolled
 * sideways. Every breakpoint tuned by eye at full width is out by the width
 * of the rail, which is why this is written to need no breakpoint at all:
 * equal cells that wrap when they run out of room, at any width.
 */
.pq-toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px; padding-top: 13px; border-top: 1px solid var(--line); }
.pq-control { position: relative; }
.pq-control svg { position: absolute; top: 50%; left: 13px; width: 16px; transform: translateY(-50%);
  color: var(--ink-500); pointer-events: none; }
.pq-control input, .pq-control select, .pq-filter { width: 100%; height: 42px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); color: var(--ink-900); font: inherit; font-size: .88rem; }
.pq-control input { padding: 0 13px 0 39px; }
.pq-control select { padding: 0 34px 0 13px; appearance: none; }
.pq-control input:focus, .pq-control select:focus { outline: 0; border-color: var(--blue-700);
  box-shadow: 0 0 0 3px rgba(23, 106, 166, .14); }
.pq-select::after { content: "⌄"; position: absolute; top: 8px; right: 13px; color: var(--ink-500);
  pointer-events: none; }
.pq-filter { display: flex; width: auto; align-items: center; gap: 7px; padding: 0 14px;
  cursor: pointer; font-weight: 700; }
.pq-filter svg { width: 17px; }
.pq-filter.is-on { color: #fff; border-color: var(--navy-800); background: var(--navy-800); }

.pq-list { display: grid; gap: 9px; margin-top: 12px; }
/* THE ADDRESS KEEPS 220px, WHATEVER THE BUTTONS WANT. The second column sizes
   itself to its contents and the first had a minimum of nought, so the three
   buttons — "Approve $129,900", "Change Price", "Open For More Details", some
   550px of them — took the whole row and left the address about fifty: it
   broke to one word a line at every width between the phone breakpoint and
   roughly 1200px. A minimum on the first column makes the buttons wrap
   instead, which is what .pq-acts was already set up to do. */
.pq-item { position: relative; display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; gap: 16px;
  min-height: 84px; align-items: center; overflow: hidden; padding: 12px 14px 12px 23px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
/* The bar down the left, from what is missing and nothing else: green is
   ready to price, red is missing photos AND contract fields, amber is one
   of the two. It carries no claim about time — the desk has no record of
   when a property went on the shelf, only of when it last changed. */
.pq-item::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; background: var(--gold-600); }
.pq-item.urgent::before { background: var(--red-700); }
.pq-item.ready::before { background: var(--green-700); }
.pq-item:hover { border-color: #b6c7d5; box-shadow: 0 7px 18px rgba(14, 40, 61, .07); transform: translateY(-1px); }
.pq-item h3 { margin: 0 0 2px; font-size: 1rem; line-height: 1.15; }
.pq-where { margin: 0 0 7px; color: var(--ink-500); font-size: .78rem; }
.pq-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pq-badge { padding: 4px 10px; border-radius: 999px; color: var(--ink-700);
  background: var(--surface-muted); font-size: .69rem; line-height: 1.1; font-weight: 750; }
.pq-badge.is-good { color: var(--green-700); background: var(--green-100); }
.pq-badge.is-waiting { color: var(--gold-600); background: var(--gold-100); }
/* Somebody is already waiting on an answer, so this one is not yours to
   price again — said on the row rather than discovered after opening it. */
.pq-asked { margin: 7px 0 0; color: var(--ink-700); font-size: .78rem; }
.pq-asked b { color: var(--ink-900); }
.pq-work { display: inline-flex; align-items: center; justify-content: center; min-width: 130px;
  height: 44px; padding: 0 16px; border: 0; border-radius: 9px; color: #fff; background: var(--navy-800);
  font-weight: 800; font-size: .85rem; text-decoration: none; box-shadow: 0 5px 12px rgba(16, 50, 77, .14); }
.pq-work:hover { background: var(--navy-900); }
.pq-work.ghost { color: var(--navy-800); background: var(--surface); border: 1px solid var(--line);
  box-shadow: none; }
.pq-empty { padding: 42px 20px; color: var(--ink-500); font-size: .88rem; text-align: center; }
.pq-empty b { display: block; margin-bottom: 4px; color: var(--ink-900); font-size: .98rem; }

@media (max-width: 980px) {
  .pq-metrics { grid-template-columns: 1fr; }
  .pq-tabs { display: grid; grid-template-columns: 1fr; }
  .pq-toolbar { grid-template-columns: 1fr 1fr; }
  .pq-search { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .pq-toolbar { grid-template-columns: 1fr; }
  .pq-item { grid-template-columns: auto 1fr; }
  .pq-item > div { grid-column: 2; }
  .pq-item .pq-acts, .pq-item .pq-work { grid-column: 1 / -1; }
  .pq-work { width: 100%; }
}

.wizard-steps { display: flex; gap: 6px; flex-wrap: wrap; list-style: none;
  margin: 0 0 18px; padding: 0; }
.wizard-step { display: flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 22px; padding: 6px 13px;
  font-size: .78rem; font-weight: 650; color: var(--ink-500); }
.wizard-n { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  background: var(--surface-muted); color: var(--ink-500); font-size: .7rem; }
.wizard-step.is-on { border-color: var(--navy-900); color: var(--ink-900); }
.wizard-step.is-on .wizard-n { background: var(--navy-900); color: #fff; }
.wizard-step.is-done .wizard-n { background: var(--green-100); color: var(--green-700); }
.wizard-go { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 4px; }

/* Step two: the photos, and the repair that takes a property off the queue. */
.pa-shots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 12px; }
.pa-shot { position: relative; display: block; border-radius: 8px; overflow: hidden;
  border: 2px solid transparent; background: var(--surface-muted); }
.pa-shot.is-main { border-color: var(--green-700); }
.pa-shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* The first one leads an email, so it is labelled rather than merely first. */
.pa-main { position: absolute; left: 6px; bottom: 6px; background: var(--green-700); color: #fff;
  border-radius: 5px; padding: 2px 7px; font-size: .64rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; }
.pa-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.pa-repair select[multiple] { min-height: 150px; }
@media (max-width: 900px) {
  .pa-shots { grid-template-columns: repeat(3, 1fr); }
  .pa-two { grid-template-columns: 1fr; }
}

/* Price Approval, step three: the figures, the set that made them, the rows.
   Numbers are right-aligned and tabular so a column of prices reads as a
   column — `.rows .n` names the table as well as the cell, so it cannot
   collide with the `.n` on the map and headline blocks above. */
.rows th.n, .rows td.n { text-align: right; font-variant-numeric: tabular-nums; }
.rows td small.hint { display: block; font-size: 11px; }

.pa-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pa-figure { border: 1px solid var(--card-line); border-radius: 10px; padding: 12px 14px; }
.pa-figure.is-lead { border-color: var(--navy-950); }
.pa-figure-n { display: block; color: var(--navy-950); font-size: 1.6rem;
  font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pa-figure-l { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }

.pa-rings { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pa-ring { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--card-line); border-radius: 999px; padding: 6px 12px;
  font-size: 13px; }
.pa-ring.is-on { border-color: var(--navy-950); background: var(--tint, #f3f5f9); }

.pa-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 14px; }

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

/* The approver list on step four: names, not bullets. */
.panel ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.panel ul.plain .hint { margin-left: 6px; }

/* A panel whose list also has a page of its own. Sits with the count, so the
   way out is where the reader already is rather than under the last row. */
.panel-more { align-self: center; margin-left: auto; font-size: 12.5px; font-weight: 700;
  color: var(--navy-950); text-decoration: none; white-space: nowrap; }
.panel-more:hover { text-decoration: underline; }

/* Who a price approval is emailed to. Two ways in — somebody who can sign in,
   or an address that cannot — and one numbered list out. */
.apr-add { display:flex; align-items:flex-end; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.apr-field { flex:1; min-width:240px; display:flex; flex-direction:column; gap:5px; }
.apr-field > span { font-size:.78rem; font-weight:700; color:var(--ink-700); }
.apr-field select, .apr-field input { min-height:44px; border:1px solid var(--line);
  border-radius:10px; padding:0 12px; font:inherit; font-size:.9rem; background:var(--surface-muted); }
.apr-field select:focus, .apr-field input:focus { outline:2px solid var(--blue-700);
  outline-offset:1px; border-color:var(--blue-700); background:var(--surface); }
.apr-add .button { min-height:44px; }

.apr-sub { margin:18px 0 9px; font-size:.78rem; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-500); }
.apr-rows { display:grid; gap:9px; }
.apr-row { display:flex; align-items:center; gap:11px; border:1px solid var(--line);
  border-radius:12px; padding:9px 11px 9px 13px; background:var(--surface); }
.apr-n { flex:none; width:58px; color:var(--ink-500); font-size:.72rem; font-weight:800;
  letter-spacing:.02em; }
.apr-who { display:flex; flex-direction:column; gap:1px; min-width:0; }
.apr-who b { font-size:.89rem; }
.apr-who > span { color:var(--ink-500); font-size:.79rem; overflow:hidden; text-overflow:ellipsis; }
.apr-role { margin-left:auto; flex:none; }
.apr-off { flex:none; width:34px; height:34px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--ink-500); font-size:1.05rem; line-height:1; cursor:pointer; }
.apr-off:hover { border-color:var(--red-700); color:var(--red-700); background:var(--red-100); }

.apr-empty { border:1px dashed var(--line); border-radius:12px; background:var(--surface-muted);
  padding:15px 17px; color:var(--ink-700); font-size:.86rem; line-height:1.5; }

/* The raw list stays in the page for a browser with no JavaScript, and is the
   field that is actually submitted either way. */
.apr-raw textarea { width:100%; min-height:44px; border:1px solid var(--line); border-radius:10px;
  padding:9px 12px; font:inherit; font-size:.88rem; background:var(--surface-muted); }
.apr-foot { display:flex; align-items:center; gap:14px; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line); flex-wrap:wrap; }
.apr-foot .hint { margin:0; }
/* The name the email is sent as: its own form, under the list it goes to. */
.apr-sent { margin-top:20px; padding-top:2px; border-top:1px solid var(--line); }
.apr-sent .apr-add { margin-bottom:0; }
.apr-foot .hint b { color:var(--ink-900); }

/* With JavaScript the textarea is the list's storage rather than its
   interface, and the script hides it itself — there is no js class on the
   document in this app to hang it off. */
.apr-raw[hidden] { display:none; }

@media (max-width:560px) {
  .apr-row { flex-wrap:wrap; }
  .apr-n { width:100%; }
  .apr-role { margin-left:0; }
}

/* ---- The Price Approval wizard ------------------------------------------
   One page, four steps, shown one at a time. It opens over the queue in the
   sheet, so nothing here may assume the window is the scroller. */
.pw-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.pw-head-who { min-width: 0; margin-right: auto; }
/* Send For Approval, top right on every step (8 Oct): the header's right-hand
   side is one group, so on a narrow window it wraps together and stays right. */
.pw-head-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: flex-end; margin-left: auto; }
.pw-head .pw-head-ask { white-space: nowrap; }
.pw-head h1 { margin: 0; font-family: Georgia, serif; font-size: 1.7rem; font-weight: 400; }
.pw-head p { margin: 4px 0 0; color: var(--ink-700); font-size: .86rem; }
/* THE ADDRESS GOES DOWN THE PAGE. Four steps, each long enough to scroll, and
   the only thing saying which property this is sat at the very top — so by the
   comparisons somebody is working from memory. Not in the sheet: the panel's
   own bar is already pinned above it, and two pinned bars is a page with no
   room left. The background is solid because the step panels scroll under it.
   BELOW THE TOP BAR, not at 0: the bar sticks at 0 too, above everything, and
   a header pinned under it showed nothing but its city line. */
.pw-head.is-pinned {
  position: sticky; top: var(--topbar-h); z-index: 5;
  margin: 0 -4px 4px; padding: 10px 4px;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--line);
}
.pw-head.is-pinned h1 { font-size: 1.25rem; }
/* What the property is, under the city line — the same partial as the line
   above the comparison (partials/price-facts.ejs). A part is never broken
   across two lines; the line wraps between them. */
.pw-facts { margin: 3px 0 0; color: var(--ink-700); font-size: .8rem;
  font-variant-numeric: tabular-nums; }
.pw-facts span { white-space: nowrap; }
.pw-facts .pw-this-lab { margin-right: 6px; }
.pw-this-dot { margin: 0 5px; color: var(--ink-500); }
/* The box above the comparison spaces its parts with a gap instead. */
.pw-this .pw-this-dot { display: none; }
/* ON A PHONE THE PINNED HEADER IS ONE THING: which property. The way back and
   the saved pill each took a line of their own, and with the address, the
   city and the facts that was a third of the screen gone before the form —
   the pill is said again at the foot of every step, and the queue is a tap
   away in the menu. Every line is one line, cut short rather than wrapped. */
@media (max-width: 680px) {
  .pw-head.is-pinned { gap: 6px; padding: 7px 4px; }
  .pw-head.is-pinned .pw-back, .pw-head.is-pinned .pw-pill { display: none; }
  .pw-head.is-pinned .pw-head-who { flex: 1 1 auto; }
  .pw-head.is-pinned h1 { font-size: 1.05rem; }
  .pw-head.is-pinned h1, .pw-head.is-pinned p, .pw-head.is-pinned .pw-facts {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pw-head.is-pinned p { margin-top: 2px; font-size: .78rem; }
  .pw-head.is-pinned .pw-facts { margin-top: 2px; font-size: .74rem; }
  /* THE FACTS THAT FIT. At 390px the whole line is about 435px of text in
     358, and it was cut at "4 bd 2 ba · J…" — the year never showed. The
     label goes, and so do the county and state, which line two already says
     ("Valley, AL 36854 · Chambers County"). */
  .pw-head.is-pinned .pw-facts .pw-this-lab,
  .pw-head.is-pinned .pw-facts [data-part="place"],
  .pw-head.is-pinned .pw-facts .pw-this-lab + [data-part="place"] + .pw-this-dot { display: none; }
}
/* On its own: a browser that does not know :has() drops the whole rule it is
   in, and the three above must not go with it. */
@media (max-width: 680px) {
  .pw-head.is-pinned .pw-facts .pw-this-dot:has(+ [data-part="place"]) { display: none; }
}
.pw-back {
  display: inline-block; margin-bottom: 2px;
  color: var(--blue-700); font-size: .76rem; font-weight: 750; text-decoration: none;
}
.pw-back:hover { text-decoration: underline; }
/* Looking again at the listing, rather than reloading four steps to find out
   whether the right photo is first. */
.pw-fresh { display: flex; align-items: center; justify-content: center; gap: 9px;
  flex-wrap: wrap; margin: 10px 0 0; }
.pw-refresh {
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  padding: 4px 12px; color: var(--ink-900); font: inherit; font-size: .74rem;
  font-weight: 750; cursor: pointer;
}
.pw-refresh:hover { background: var(--surface-muted); }
.pw-fresh-said { color: var(--ink-500); font-size: .74rem; }
.pw-pill { border: 1px solid #cfe0da; background: var(--green-100); color: var(--green-700);
  border-radius: 99px; padding: 5px 10px; font-size: .72rem; font-weight: 700; }
.pw-bar-row { display: flex; align-items: center; gap: 12px; margin: 14px 0 7px; }
.pw-gallery { border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  padding: 7px 13px; color: var(--navy-900); font-size: .78rem; font-weight: 700; text-decoration: none; }
.pw-gallery:hover { border-color: var(--blue-700); background: var(--blue-100); color: var(--blue-700); }
.pw-prog-say { margin-left: auto; font-size: .76rem; font-weight: 700; color: var(--ink-700); }
.pw-prog { height: 7px; border-radius: 99px; background: #dfe7ed; overflow: hidden; margin-bottom: 16px; }
.pw-prog i { display: block; height: 100%; background: var(--blue-700); transition: width .25s ease; }

/*
 * SEVEN STEPS THAT CANNOT PUSH THE PAGE.
 *
 * `1fr` columns do not shrink below their own content — a grid item's
 * min-width is `auto` — so between about 1000 and 1035 pixels the seven steps
 * wanted more room than there was and took it from the document: the office
 * closing form scrolled sideways on a 1024 laptop, which is one of the
 * commonest widths there is. Above that it fit; below it a media query had
 * already changed the layout. A band that narrow is exactly the kind nobody
 * finds by looking.
 *
 * `min-width: 0` lets a step give way, and the bar scrolls inside itself if
 * it still cannot fit — the same rule as a wide table: the box scrolls, never
 * the page with it.
 */
.pw-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
  list-style: none; margin: 0 0 20px; padding: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pw-step { display: flex; align-items: center; gap: 10px; min-width: 0;
  color: var(--ink-500); font-weight: 700; font-size: .82rem; cursor: pointer; }
.pw-step:not(:last-child)::after { content: ""; height: 1px; background: var(--line);
  flex: 1; margin-right: 14px; }
.pw-step b { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #dfe7ed;
  display: grid; place-items: center; color: #34485b; font-size: .8rem; }
.pw-step.is-on { color: var(--ink-900); }
.pw-step.is-on b { background: var(--blue-700); color: #fff; }
.pw-step.is-done { color: var(--green-700); }
.pw-step.is-done b { background: var(--green-100); color: var(--green-700); }
/* THE OFFICE FORM HAS NINE STEPS, the price wizard four. Nine across a
   window under about 1,300 pixels left each name sixty-odd pixels, and a
   word like "Commissions" was cut off (13 October 2026). There the office
   form's steps wrap onto rows instead; the price wizard is untouched. */
@media (max-width: 1320px) {
  #cw-steps { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px 16px; overflow-x: visible; }
  #cw-steps .pw-step:not(:last-child)::after { display: none; }
}

.pw-panel { display: none; }
.pw-panel.is-on { display: block; }
.pw-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.pw-form { padding: 22px; }
.pw-form h2 { margin: 0 0 4px; font-family: Georgia, serif; font-size: 1.25rem; font-weight: 400; }
.pw-intro { margin: 0 0 18px; color: var(--ink-500); font-size: .84rem; max-width: 70ch; line-height: 1.55; }
.pw-sec { border: 0; padding: 0; margin: 0 0 22px; }
.pw-sec legend { padding: 0; margin-bottom: 11px; font-size: .95rem; font-weight: 800; }
.pw-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 13px 14px; }
.pw-f { grid-column: span 4; } .pw-s6 { grid-column: span 6; } .pw-s12 { grid-column: span 12; }
.pw-lab { display: block; margin-bottom: 6px; font-size: .76rem; font-weight: 750; color: #3e4e5f; }

.pw-aside { position: sticky; top: 0; display: grid; gap: 14px; }
.pw-side { padding: 18px; }
/* The property page's Deal Snapshot sits above Quick Actions in the side column. */
.detail-side > .deal-snapshot { margin-bottom: 18px; }
.pw-side h3 { margin: 0 0 10px; font-family: Georgia, serif; font-size: 1rem; font-weight: 400; }
.pw-sum { margin: 0; }
/* The Inventory edit page's Property Snapshot (partials/snapshot.ejs). */
.snapshot-panel .pw-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); column-gap: 26px; }
/* A lot's snapshot hides a home's facts; the flex below must not undo that. */
.pw-sum div[hidden] { display: none; }
.pw-sum div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0;
  border-top: 1px solid var(--line); font-size: .79rem; }
.pw-sum dt { color: var(--ink-700); }
.pw-sum dd { margin: 0; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.pw-sum dd small { color: var(--ink-500); font-weight: 400; }
.pw-note { margin: 12px 0 0; border: 1px solid #c9e0f8; border-radius: 9px; background: var(--blue-100);
  padding: 10px 11px; color: #165c9e; font-size: .73rem; line-height: 1.5; }
.pw-note.is-bad { border-color: #e2b6b6; background: var(--red-100); color: var(--red-700); }
.pw-warn { margin: 12px 0 0; border: 1px solid #f2d89f; border-radius: 9px; background: var(--gold-100);
  padding: 10px 11px; color: #8a5a12; font-size: .73rem; line-height: 1.5; }
.pw-mini { height: 8px; border-radius: 99px; background: #e1e8ee; overflow: hidden; }
.pw-mini i { display: block; height: 100%; background: var(--blue-700); }
.pw-cline { margin: 7px 0 0; font-size: .75rem; color: var(--ink-500); }

.pw-walk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--line); }
.pw-walk .button { width: auto; }
.pw-walk .button:last-child { margin-left: auto; }
.pw-saved { color: var(--ink-500); font-size: .75rem; }

/* Legal & Plat */
.pw-papers { display: grid; gap: 8px; }
.pw-paper { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.pw-paper.is-none { border-style: dashed; background: var(--surface-muted); }
.pw-paper-ico { width: 34px; height: 34px; flex: none; border-radius: 8px; display: grid;
  place-items: center; background: var(--blue-100); color: var(--blue-700); }
.pw-paper.is-none .pw-paper-ico { background: #e8ecef; color: var(--ink-500); }
.pw-paper-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pw-paper-who b { font-size: .83rem; }
.pw-paper-who > span { color: var(--ink-500); font-size: .72rem; }
.pw-paper-see, .pw-paper-add { margin-left: auto; flex: none; border: 1px solid var(--navy-900);
  border-radius: 8px; background: var(--navy-900); color: #fff; padding: 7px 13px;
  font-size: .75rem; font-weight: 700; cursor: pointer; text-decoration: none; }
.pw-paper-add { background: var(--surface); color: var(--blue-700); border-color: var(--blue-700); }

/* Step two */
.pw-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.pw-choice { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line);
  border-radius: 11px; background: var(--surface); padding: 15px; text-align: left;
  color: var(--ink-900); font: inherit; cursor: pointer; }
.pw-choice.is-on { border: 2px solid var(--blue-700); padding: 14px; background: var(--blue-100); }
.pw-choice-ico { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid;
  place-items: center; background: #e5f1fc; color: var(--blue-700); font-size: 1.1rem; }
.pw-choice strong, .pw-choice small { display: block; }
.pw-choice small { margin-top: 3px; color: var(--ink-500); }
.pw-radio { margin-left: auto; flex: none; width: 19px; height: 19px; border: 2px solid #c9d7e1;
  border-radius: 50%; }
.pw-choice.is-on .pw-radio { border: 6px solid var(--blue-700); }
.pw-pane { display: none; border-top: 1px solid var(--line); padding-top: 16px; }
.pw-pane.is-on { display: block; }
.pw-pane-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.pw-pane-head h3 { margin: 0; font-family: Georgia, serif; font-size: 1rem; font-weight: 400; }
.pw-count { border-radius: 99px; background: var(--surface-muted); color: var(--ink-700);
  padding: 4px 9px; font-size: .68rem; font-weight: 750; }
.pw-gallery-box { border: 1.5px dashed #bad0e2; border-radius: 12px; background: #fbfdff;
  text-align: center; padding: 20px; }
.pw-cam { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; background: #e5f2fe;
  color: var(--blue-700); display: grid; place-items: center; font-size: 1.3rem; }
.pw-gallery-box h4 { margin: 10px 0 4px; font-size: .95rem; }
.pw-gallery-box p { margin: 5px; color: var(--ink-500); font-size: .78rem; }
/* THREE ACROSS, THE SHAPE A PHOTO IS. Six at 74px tall cropped a house to a
   letterbox strip, and the question here is whether the right picture is
   first — which nobody can answer from a strip. Each one opens full size. */
.pw-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.pw-thumb { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
  background: #dbe6ee; display: grid; place-items: center; color: #8fa4b3; }
.pw-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pw-thumb.is-cover::after { content: "Cover"; position: absolute; left: 5px; bottom: 5px;
  border-radius: 5px; background: var(--navy-900); color: #fff; padding: 3px 6px;
  font-size: .62rem; font-weight: 700; }
.pw-caption { margin-top: 10px; color: var(--ink-500); font-size: .72rem; }
/* A thumbnail opens the photo over the page, so it is a button now. */
button.pw-thumb { border: 0; padding: 0; font: inherit; cursor: zoom-in; }
button.pw-thumb:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
/* Adding photos from the Photos & Repairs step. The box it sits in is the drop
   zone; this is the picker, the name the gallery gives the group, and the rows. */
.pw-photo-add { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #bad0e2;
  text-align: left; }
.pw-photo-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.pw-photo-pick { width: auto; cursor: pointer; }
.pw-photo-name { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 180px;
  font-size: .72rem; font-weight: 700; color: var(--ink-700); }
.pw-photo-name input { min-height: 38px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); padding: 0 10px; font: inherit; font-size: .84rem; font-weight: 400;
  color: var(--ink-900); }
/* Scoped to the boxes they sit in, so they outrank `.pw-gallery-box p` —
   which otherwise turned a success summary on Ready to Advertise grey. */
.pw-gallery-box .pw-photo-hint, .pw-repair-photos .pw-photo-hint {
  margin: 8px 0 0; color: var(--ink-500); font-size: .74rem; }
.pw-photo-add .pw-add-said { margin: 8px 0 0; font-size: .78rem; font-weight: 650;
  color: var(--green-700); }
.pw-photo-add .pw-add-said.is-bad { color: var(--red-700); }
.pw-photo-add .pw-add-said.is-busy { color: var(--ink-500); }
.pw-repair-photos { margin-bottom: 16px; border: 1.5px dashed #bad0e2; border-radius: 12px;
  background: #fbfdff; padding: 14px 16px; }
.pw-repair-photos h4 { margin: 0; font-size: .95rem; }
.pw-repair-photos .pw-photo-add { margin-top: 8px; padding-top: 0; border-top: 0; }
.pw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-chip { border: 1px solid var(--line); border-radius: 99px; background: var(--surface);
  padding: 8px 11px; font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; }
.pw-chip.is-on { border-color: var(--blue-700); background: var(--blue-100); color: #075fae; }
.pw-check { display: flex; align-items: center; gap: 9px; padding: 10px 0;
  border-top: 1px solid var(--line); font-size: .79rem; }
.pw-dot { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid #aab8c4;
  display: grid; place-items: center; color: #fff; font-size: .68rem; }
.pw-dot.is-good { background: var(--green-700); border-color: var(--green-700); }
.pw-dot.is-wait { border-color: var(--gold-600); }
.pw-status { margin-left: auto; border-radius: 99px; background: var(--surface-muted);
  color: var(--ink-700); padding: 4px 8px; font-size: .68rem; font-weight: 750; }
.pw-status.is-good { background: var(--green-100); color: var(--green-700); }
.pw-status.is-wait { background: var(--gold-100); color: #966000; }

/* The grass map */
/* z-index 0 is load-bearing: with position:relative alone this box makes NO
   stacking context, so Leaflet's own layers (200-700) and controls (1000)
   compete with the page and win against the sticky header's 30 — the map
   painted straight over the header and the search bar on the way down. A
   stacking context traps all of it inside the map. */
.pw-map { position: relative; z-index: 0; height: 340px;
  border: 1px solid var(--line); border-radius: 11px;
  overflow: hidden; background: linear-gradient(#eef4f8, #e4edf3); }
.pw-map-note { position: absolute; left: 10px; top: 9px; z-index: 500; border-radius: 6px;
  background: rgba(255, 255, 255, .9); padding: 4px 8px; color: var(--ink-500);
  font-size: .68rem; font-weight: 700; }
/* Once Leaflet has drawn the map its zoom buttons sit in the top-left corner
   and the layer picker in the top-right, and the note sat under the zoom
   buttons with its first letters cut off. It goes between the two, and
   wraps rather than running under the picker on a phone. The plain plot has
   no buttons, so it keeps the corner. */
.pw-map.leaflet-container .pw-map-note { left: 54px; max-width: calc(100% - 122px); }
.pw-pin { position: absolute; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(11, 33, 52, .35); }
.pw-pin.is-here { width: 20px; height: 20px; border-width: 3px; z-index: 3; }
.pw-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: .74rem; }
.pw-legend span { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.pw-legend i { width: 17px; height: 17px; border-radius: 50%; color: #fff;
  font-size: .62rem; font-weight: 800; font-style: normal; text-align: center;
  line-height: 17px; flex: none; }

/* The pin is a letter in a disc, not a bare dot: two contractors can land on
   colours that read alike in sun or to somebody colour-blind, and the round is
   decided off this map. */
.pw-pin { background: none; border: 0; }
.pw-pin-dot { display: block; border-radius: 50%; border: 2px solid #fff;
  color: #fff; font-weight: 800; font-size: .66rem; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.45); }

/* Step four */
.pw-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pw-m { border: 1px solid var(--line); border-radius: 9px; padding: 12px; }
.pw-m.is-lead { border-color: #78b9f5; background: #f3f9ff; }
.pw-m strong { display: block; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.pw-m span { color: var(--ink-500); font-size: .68rem; }
.pw-filters { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-muted); padding: 13px; }
.pw-fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pw-fgrid label { display: block; margin-bottom: 5px; font-size: .68rem; font-weight: 750; }
.pw-fgrid input, .pw-fgrid select { width: 100%; min-height: 38px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--surface); padding: 0 10px; font: inherit; font-size: .8rem; }
.pw-seg { display: flex; }
.pw-seg button { flex: 1; border: 1px solid var(--line); background: var(--surface);
  padding: 9px 4px; font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; }
.pw-seg button:first-child { border-radius: 99px 0 0 99px; }
.pw-seg button:last-child { border-radius: 0 99px 99px 0; }
.pw-seg button.is-on { border-color: var(--blue-700); background: var(--blue-100); color: #075fae; }
.pw-fbtns { display: flex; gap: 8px; margin-top: 11px; }
.pw-fbtns .button { width: auto; }
.pw-tablehead { display: flex; justify-content: space-between; align-items: flex-end; margin: 16px 2px 8px; }
.pw-tablehead h3 { margin: 0; font-family: Georgia, serif; font-size: 1rem; font-weight: 400; }
.pw-tablehead span { color: var(--ink-500); font-size: .68rem; }
.pw-comps tbody tr { opacity: .45; }
.pw-comps tbody tr.is-on { opacity: 1; background: var(--blue-100); }
.pw-comps td small { display: block; color: var(--ink-500); font-size: .68rem; }

/* How the estimate was worked out, in words, under the figures and in the
   rail. Quiet: it explains a number rather than being one. */
.pw-why { margin: 8px 2px 0; color: var(--ink-500); font-size: .72rem; line-height: 1.45; }
.pw-val .pw-why { margin: 6px 0 0; }
#pw-filters-said { margin-top: 8px; }

/* The row's number, which is its pin's number on the map. Inside the tick's
   label, so pressing the number ticks the row too. */
.pw-tick label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pw-n { min-width: 20px; height: 20px; border-radius: 50%; background: #0b78ea; color: #fff;
  font-size: .64rem; font-weight: 800; line-height: 20px; text-align: center;
  font-variant-numeric: tabular-nums; }
.pw-comps tbody tr:not(.is-on) .pw-n { background: #9aa7b4; }

/* The comparison's map. The pins are a number in a disc like the grass
   map's; approximate ones are hollow and dashed, so "this is the county's
   middle" is said by the pin itself and survives being printed in grey. */
.pw-cmap-wrap { margin-top: 14px; }
.pw-cmap { height: 380px; }
.pw-cpin .pw-pin-dot { background: #0b78ea; cursor: pointer; }
.pw-cpin.is-approx .pw-pin-dot { border: 2px dashed #0b78ea; background: #fff; color: #0b78ea; }
.pw-cpin.is-off .pw-pin-dot { background: #9aa7b4; opacity: .6; }
.pw-cpin.is-off.is-approx .pw-pin-dot { border-color: #9aa7b4; background: #fff; color: #7c8a98; }
.pw-cpin.is-here .pw-pin-dot { background: #102b42; color: #fff; cursor: default; }
.pw-cpin.is-here.is-approx .pw-pin-dot { border: 2px dashed #fff; }
/* The plain plot, when Leaflet cannot be had: a square, so the ring is round. */
.pw-cplot { position: relative; height: 100%; max-width: 100%; aspect-ratio: 1; margin: 0 auto; }
.pw-cplot .pw-cring { position: absolute; inset: 0; border: 1.5px dashed #0b78ea; border-radius: 50%;
  background: rgba(11, 120, 234, .04); }
.pw-cplot .pw-cpin { position: absolute; width: auto; height: auto; box-shadow: none; }
.pw-cmap-key .pw-key-sale { background: #0b78ea; }
.pw-cmap-key .pw-key-sale.is-approx { border: 2px dashed #0b78ea; background: #fff; color: #0b78ea;
  line-height: 13px; }
.pw-cmap-key .pw-key-sale.is-off { background: #9aa7b4; }
.pw-cmap-key .pw-key-here { background: #102b42; }
.pw-cmap-key .pw-key-ring { border: 1.5px dashed #0b78ea; background: rgba(11, 120, 234, .06); }

/* A WIDE TABLE SCROLLS IN ITS OWN BOX, NOT THE PAGE. The last step's cards sit
   in one grid column, and a grid item's minimum is its widest content — so the
   comparison table set the width of the column, the Sales Price card beside
   it grew to match, and on a phone the whole step slid sideways to 591. A
   minimum of nothing lets the table's own box do the scrolling. */
.pw-main > * { min-width: 0; }

/* A phone: the table scrolls inside its own box, as every wide table here
   does. At 375 points the first screen holds the tick, the address and the
   distance, and the sold date, the price and the sizes are a swipe away
   inside the box. The padding is tightened so no more than that is lost, and
   the address keeps enough width to be read rather than wrapping a word to a
   line. */
@media (max-width: 680px) {
  .pw-comps th, .pw-comps td { padding: 8px 6px; font-size: .74rem; }
  .pw-comps td:nth-child(2) { min-width: 150px; }
  .pw-cmap { height: 280px; }
}

/* The attachment viewer */
.pw-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center;
  justify-content: center; padding: 24px; }
.pw-modal[hidden] { display: none; }
.pw-modal-scrim { position: absolute; inset: 0; background: rgba(11, 33, 52, .5); }
.pw-modal-box { position: relative; display: flex; flex-direction: column; width: min(900px, 100%);
  max-height: 90vh; border-radius: 14px; overflow: hidden; background: var(--surface);
  box-shadow: 0 30px 80px rgba(11, 33, 52, .4); }
.pw-modal-bar { display: flex; align-items: center; gap: 11px; padding: 11px 14px;
  border-bottom: 1px solid var(--line); }
.pw-modal-bar b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-family: Georgia, serif; font-size: 1rem; font-weight: 400; }
.pw-modal-bar .button { width: auto; }
.pw-modal-x { flex: none; width: 32px; height: 32px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); color: var(--ink-500); font-size: 1.25rem;
  line-height: 1; cursor: pointer; }
.pw-modal-body { flex: 1; min-height: 0; overflow: auto; background: var(--surface-muted); padding: 0; }
.pw-paper-shown { display: block; width: 100%; height: 76vh; border: 0; background: #fff; }
img.pw-paper-shown { height: auto; max-height: 76vh; object-fit: contain; }
/* The gallery, framed over the wizard: most of the window, because choosing
   and ordering photos is the whole job while it is open. */
.pw-modal-box.is-gallery { width: min(90vw, 100%); height: min(90vh, 100%); max-height: none; }
/* public/gallery-over.js: a gallery framed, or one photo fitted, over the page. */
/* "Did you mean …?" under an email box (public/email-hint.js). */
.email-hint { display: block; margin: 5px 0 0; font-size: .82rem; color: var(--amber-700); }
.email-hint.is-sure { color: #b42318; }
.email-hint b { font-weight: 700; }
.email-hint-use { margin-left: 6px; padding: 2px 9px; border: 1px solid currentColor; border-radius: 999px;
  background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }

/* The full comparison: its own box under Marketing Information
   (partials/marketing.ejs), with an accent along the top so the tool reads
   as a different thing from the list of sales above it. */
.panel.market-compare { border-top: 4px solid var(--blue-700); }
.market-compare-lede { margin: -4px 0 16px; color: var(--ink-500); font-size: .9rem; max-width: 70ch; }
.gallery-over-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.gallery-over-img { display: block; width: 100%; height: 100%; object-fit: contain; background: #111; }
.pw-modal-box.is-gallery .pw-modal-body { display: flex; overflow: hidden; background: #fff; }
.pw-gallery-frame { flex: 1; min-width: 0; width: 100%; border: 0; background: #fff; }

@media (max-width: 1050px) {
  .pw-layout { grid-template-columns: 1fr; }
  /* A one-column page has no rail to follow: a card that stuck here would sit
     over the form somebody is typing into. */
  .pw-aside, .pw-aside.is-follow { position: static; max-height: none;
    overflow: visible; }
  .pw-fgrid { grid-template-columns: repeat(2, 1fr); }
  .pw-metrics { grid-template-columns: 1fr; }
  .pw-sale-grid, .pw-send { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  /* SIX COLUMNS IN 343 POINTS is a name four lines deep beside a box too narrow
     to hold a figure. Two columns, with the name and the note across both. */
  .pw-fee { grid-template-columns: minmax(0, 1fr) 104px; }
  .pw-fee-name, .pw-fee-note { grid-column: 1 / -1; }
  .pw-fee-each { text-align: left; }
  .pw-fee-x { justify-self: end; }
  .pw-steps { grid-auto-flow: row; gap: 8px; }
  .pw-step:not(:last-child)::after { display: none; }
  .pw-choices, .pw-fgrid { grid-template-columns: 1fr; }
  .pw-f, .pw-s6 { grid-column: span 12; }
  .pw-thumbs { grid-template-columns: repeat(2, 1fr); }
}

/* The wizard's own fields — the ones not drawn by the edit form's partial. */
.pw-f input, .pw-f select, .pw-f textarea { width: 100%; min-height: 42px;
  border: 1px solid #ccd8e2; border-radius: 8px; background: var(--surface);
  padding: 9px 12px; font: inherit; font-size: .86rem; color: var(--ink-900); }
.pw-f textarea { min-height: 70px; resize: vertical; }
.pw-f select[multiple] { min-height: 96px; padding: 6px; }
.pw-f input:focus, .pw-f select:focus, .pw-f textarea:focus { outline: 0;
  border-color: var(--blue-700); box-shadow: 0 0 0 3px rgba(23, 106, 166, .12); }
/* The note under a field is a line of its own, never a sentence running on
   from the control beside it. */
.pw-f .hint, .pw-f small.hint { display: block; margin-top: 5px; font-size: .7rem; }
.pw-panel ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .8rem; }
.pw-panel ul.plain .hint { margin-left: 6px; }

/* A required field nobody has filled in, said in the form and not only beside
   it. The label turns too: a red edge alone reads as an error with the value
   rather than as an absence of one. */
.edit-field.edit-needed input, .edit-field.edit-needed select,
.edit-field.edit-needed textarea { border-color: #e2b6b6; background: #fffafa; }
.edit-field.edit-needed > label { color: var(--red-700); }
.edit-field.edit-needed > label::after { content: " — empty"; font-weight: 700; font-size: .72em; }

/* Legal & Plat as tiles: a plat is a picture of a shape, and a filename is a
   poor substitute for seeing which shape. */
.pw-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.pw-tile { display: flex; flex-direction: column; gap: 6px; align-items: center;
  justify-content: center; min-height: 108px; padding: 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit;
  color: var(--ink-900); text-align: center; overflow: hidden; }
.pw-tile:hover { border-color: var(--blue-700); box-shadow: 0 6px 16px rgba(11, 33, 52, .1); }
/* A paper a browser cannot draw is a download link rather than a button. */
a.pw-tile { text-decoration: none; }
.pw-tile img { width: 100%; height: 64px; object-fit: cover; border-radius: 6px; }
.pw-tile-kind { display: grid; place-items: center; width: 100%; height: 64px; border-radius: 6px;
  background: var(--surface-muted); color: var(--ink-500); font-size: .72rem; font-weight: 800; }
.pw-tile-name { font-size: .68rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pw-tile.is-add { border-style: dashed; background: var(--surface-muted); color: var(--blue-700); }
.pw-tile.is-add:hover { background: var(--blue-100); }
.pw-tile-plus { display: grid; place-items: center; width: 100%; height: 64px; font-size: 1.5rem; }
/* A paper on its way up: its kind, a bar that fills as the bytes go, and what
   is happening in words. It becomes the finished tile in place. */
.pw-tile.is-sending, .pw-tile.is-failed { cursor: default; }
.pw-tile.is-sending:hover, .pw-tile.is-failed:hover { border-color: var(--line); box-shadow: none; }
.pw-tile-bar { display: block; width: 100%; height: 6px; border-radius: 999px; background: var(--surface-muted);
  overflow: hidden; }
.pw-tile-bar > i { display: block; width: 0; height: 100%; background: var(--blue-700);
  transition: width .15s ease; }
.pw-tile-state { font-size: .68rem; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.pw-tile.is-failed { border-color: #e2b6b6; background: #fffafa; }
.pw-tile.is-failed .pw-tile-state { color: var(--red-700); font-weight: 700; }
.pw-tile.is-new { border-color: var(--blue-700); }
/* No legal and no plat on the record: said where it is fixed, the way an empty
   box is, as well as in What Is Still Missing. A real element in the legend
   rather than generated content, so a screen reader says it too; it shows
   while the step is marked and goes when an upload lands. */
.pw-legal.is-needed > legend { color: var(--red-700); }
.pw-legal-none { font-weight: 700; font-size: .72em; }
.pw-legal:not(.is-needed) .pw-legal-none { display: none; }
.hint.is-bad { color: var(--red-700); font-weight: 600; }

/* What this property is, beside the boxes that narrow the comparison. */
.pw-this { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted);
  padding: 9px 13px; font-size: .74rem; color: var(--ink-700); }
.pw-this-lab { font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  font-size: .66rem; color: var(--ink-500); }
.pw-this b { color: var(--ink-900); font-variant-numeric: tabular-nums; }

/* A comparable's address is a way in, so it looks like one. */
.pw-comp-open { border: 0; background: none; padding: 0; font: inherit; font-weight: 650;
  color: var(--blue-700); text-align: left; cursor: pointer; text-decoration: underline;
  text-decoration-color: rgba(23, 106, 166, .35); }
.pw-comp-open:hover { text-decoration-color: currentColor; }
.pw-modal-box.is-narrow { width: min(520px, 100%); }
.pw-modal-body.is-plain { background: var(--surface); padding: 16px; }
.pw-comp-shot { display: block; width: 100%; height: 190px; object-fit: cover;
  border-radius: 10px; margin-bottom: 12px; }

/* The assessor link, beside the box that holds it. */
.pw-assessor { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: -6px 0 20px; }
.pw-assessor .button { width: auto; }
.pw-assessor .hint { margin: 0; max-width: 46ch; }

/* A link field's Open button, against the box that holds the link. */
.edit-affix .affix-go { display: inline-flex; align-items: center; white-space: nowrap;
  border-left: 1px solid var(--line); background: var(--surface-muted); color: var(--blue-700);
  font-size: .76rem; font-weight: 700; text-decoration: none; padding: 0 11px; }
.edit-affix .affix-go:hover { background: var(--blue-100); }

/* ---- Contractor payments: the pieces added beside each property ---------- */
.pay-next { margin: 0 0 12px; }
.pay-next .button { width: auto; }

/* Lockbox, beds and baths, fixed where they are noticed. */
.place-edit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px;
  padding-top: 8px; border-top: 1px dashed var(--line); }
.place-edit label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.place-edit label > span { font-size: .66rem; font-weight: 750; color: var(--ink-500); }
.place-edit input { width: 108px; min-height: 32px; border: 1px solid var(--line);
  border-radius: 7px; padding: 0 8px; font: inherit; font-size: .8rem; background: var(--surface); }
.place-edit input:focus { outline: 0; border-color: var(--blue-700);
  box-shadow: 0 0 0 3px rgba(23, 106, 166, .12); }
.place-said { font-size: .7rem; color: var(--ink-500); align-self: center; }
.place-said.is-bad { color: var(--red-700); }

/* Filing a job as a different kind — which moves files, so it says so. */
.pay-refile { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); padding: 10px 14px; }
.pay-refile summary { cursor: pointer; font-size: .85rem; font-weight: 650; }
.pay-refile .hint { margin: 8px 0 0; max-width: 70ch; }
.pay-refile-go { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.pay-refile-go select { min-height: 38px; border: 1px solid var(--line); border-radius: 8px;
  padding: 0 10px; font: inherit; font-size: .85rem; background: var(--surface); }
.pay-refile-go .button { width: auto; }
.pay-refile-said { font-size: .76rem; color: var(--ink-500); }
.pay-refile-said.is-bad { color: var(--red-700); }

/* The work picker, over the page. */
#place-work .repair-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; }
.place-work-note { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.place-work-note > span { font-size: .72rem; font-weight: 750; color: var(--ink-700); }
.place-work-note input { min-height: 40px; border: 1px solid var(--line); border-radius: 8px;
  padding: 0 11px; font: inherit; font-size: .86rem; }
.place-work-go { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.place-work-go .button { width: auto; margin-left: auto; }
.place-work-said { font-size: .78rem; color: var(--ink-500); }
.place-work-said.is-bad { color: var(--red-700); }

.pay-refile-log { margin: 10px 0 0; padding: 0 0 0 18px; list-style: disc;
  font-size: .76rem; color: var(--ink-500); }
.pay-refile-log li { margin: 2px 0; }

.pw-tile-drop { font-size: .68rem; color: var(--ink-500); margin-top: 2px; }

/* A multi-select drawn as a dropdown. The checkboxes are still the real
   inputs; this only folds them behind a head that says what is chosen. */
.edit-pick { position: relative; }
/* The width of its column, as the dropdowns beside it are — not one chip's
   width out of .edit-checks' grid, which left the head short and its ▾ out
   past the box's edge (13 October 2026). */
.edit-checks.edit-pick { display: block; }
.edit-pick-head { width: 100%; text-align: left; min-height: 38px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  color: var(--ink); font: inherit; padding: 8px 30px 8px 11px; }
.edit-pick-head.is-empty { color: var(--ink-500); }
.edit-pick-head::after { content: "▾"; position: absolute; right: 11px; opacity: .55; }
.edit-pick-panel { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--card); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 8px 24px rgba(16,43,66,.16); padding: 8px; max-height: 260px;
  overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.edit-pick-panel .check { width: 100%; }

/* The same affix box with the mark on the right, for a percentage. */
.edit-affix.is-suffix { flex-direction: row-reverse; }

.pw-link { background: none; border: 0; padding: 0; font: inherit; font-size: .76rem;
  color: var(--blue-700); text-decoration: underline; cursor: pointer; }

/* The valuation's own suggestions, kept visibly apart from the record. */
.pw-val { border-left: 3px solid var(--gold-600); }
.pw-val-big dd { font-size: 1.35rem; font-weight: 700; }
.pw-val .pw-warn { margin-top: 8px; }

/* What we have in it. Its own card at the top of the rail now, rather than a
   sub-panel inside Your Number — it is the first thing a price is checked
   against, and it was the fourth thing down. */
/* Where Last Sold came from, under it: a linked closing, or an account matched
   on its address — never presented as the same kind of fact. */
.pw-sum dd small.pw-sold-from { display: block; margin-top: 2px; font-size: .72rem; }
.pw-target dt { font-weight: 700; }
.pw-target dd { font-weight: 700; }
/* One line saying why something is not here, said quietly: on bare land the
   margin rows are left out, and a blue box would make the absence the loudest
   thing in the card. */
.pw-quiet { margin: 10px 0 0; color: var(--ink-500); font-size: .73rem; line-height: 1.5; }
/* Land or Home changed on step one: what this step draws waits on a reload. */
.pw-kind-changed { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; background: var(--gold-100); color: #8a5a12; }

/* The money boxes on the last step. */
.pw-record { margin-bottom: 0; }
.pw-record .edit-grid { gap: 10px; }

/* ── The last step: the money, then the comparison ──────────────────────────
   Two cards stacked in the left column, so the rail beside them is as tall as
   both and has something to follow down. */
.pw-main { display: grid; gap: 16px; min-width: 0; }

/* THE RAIL FOLLOWS YOU DOWN. `position: sticky` on its own was not enough:
   with top:0 and no height limit, a rail taller than the window has its bottom
   hanging off the screen with no way to reach it — so the cards at the bottom
   were unreachable exactly when the page was long enough to need them. It
   scrolls within itself instead, and clears the pinned address bar above it. */
.pw-aside.is-follow { position: sticky; top: 76px; align-self: start;
  max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain;
  padding-right: 2px; }
/* ON THE FULL PAGE the rails stick below the top bar AND the pinned address,
   not at 76px — that was under the header, with the address stuck over the
   rail's first card. `--pw-head-h` is the header's real height, measured by
   price-wizard.js because the address and the facts line wrap; the fallback
   is a two-line header. The sheet has neither bar, and keeps the rule above.
   Only where the rail is a rail: on one column it is static. */
@media (min-width: 1051px) {
  .pw-head.is-pinned ~ .pw-panel .pw-aside {
    top: calc(var(--topbar-h) + var(--pw-head-h, 132px) + 12px); }
  .pw-head.is-pinned ~ .pw-panel .pw-aside.is-follow {
    max-height: calc(100vh - var(--topbar-h) - var(--pw-head-h, 132px) - 28px); }
}

/* ── The answer, across the top ────────────────────────────────────────────
   A price already out and waiting on a press. `.price-box` is capped at 320px
   because it was written for the rail; here it is a BAR, which is what the
   press deserves — the number and who sent it on the left, the buttons on the
   right, and what approving does spelled out underneath. */
.pw-answer { margin-bottom: 16px; }
.pw-answer .price-box { max-width: none; margin: 0; display: flex; flex-wrap: wrap;
  align-items: center; gap: 4px 24px; padding: 16px 18px; }
.pw-answer .price-box h3 { width: 100%; margin: 0 0 4px; }
.pw-answer .price-who, .pw-answer .price-why { flex: 1 1 280px; margin: 0; }
.pw-answer .price-answer { width: 100%; }
.pw-answer .price-buttons { flex-direction: row; flex-wrap: wrap; margin: 0 0 0 auto; }
.pw-answer .price-box .button.inline { width: auto; }
.pw-answer .price-box .hint { width: 100%; margin: 6px 0 0; }
.pw-answer .price-history { width: 100%; }

/* And the ASK, when there is nothing to answer: full width under the boxes
   holding the number it would send, rather than a 320px column in the middle
   of a card. */
.pw-sale .price-box { max-width: none; margin: 0; }

/* Send, with who it goes to beside it. */
.pw-send { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px;
  align-items: start; margin-top: 18px; }
.pw-agree { background: var(--surface-muted); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px; }
.pw-agree h3 { margin: 0 0 8px; font-family: Georgia, serif; font-size: .98rem; font-weight: 400; }
.pw-agree .pw-note { margin: 8px 0 0; border: 0; padding: 0; background: none;
  color: var(--ink-500); font-size: .72rem; }
.pw-sale .price-form { display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: 10px 14px; align-items: start; }
.pw-sale .price-form > label:nth-of-type(2) { grid-column: 2; }
.pw-sale .price-buttons { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
.pw-sale .price-box .button.inline { width: auto; }

/* ── Your Sales Price ──────────────────────────────────────────────────────
   The boxes on the left, what it comes to a month on the right. The price is
   often worked backwards from the payment, so the two have to be readable
   together without scrolling. */
.pw-sale-grid { display: grid; grid-template-columns: minmax(0, 1fr) 232px;
  gap: 18px; align-items: start; }
/* ONE COLUMN WHEN THE PAGE IS ONE COLUMN. The 1050px block further up says
   so, but these two base rules come after it in the file and win at equal
   specificity — so on a phone the price, the rate, the taxes and the cover
   were squeezed into 62px beside a 232px card, one word to a line. */
@media (max-width: 1050px) {
  .pw-sale-grid, .pw-send { grid-template-columns: 1fr; }
}
.pw-cost { background: var(--surface-muted); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px; }
.pw-cost h3 { margin: 0 0 8px; font-family: Georgia, serif; font-size: .98rem;
  font-weight: 400; }
.pw-cost .pw-sum div { padding: 7px 0; }
.pw-cost-big dt { font-weight: 700; }
.pw-cost-big dd { font-size: 1.2rem; font-weight: 700; }
/* SMALL PRINT, NOT AN INFO PANEL. `.pw-note` is a blue box, which is right in
   a rail card and wrong stacked twice under a figure — two of them took more
   room than the three numbers they were explaining. */
.pw-cost .pw-note, .pw-fees .pw-note { margin: 8px 0 0; border: 0; padding: 0;
  background: none; color: var(--ink-500); font-size: .72rem; }
.pw-cost .pw-note.is-watch { color: var(--gold-600); }
.pw-note.is-watch { color: var(--gold-600); font-weight: 600; }

/* ── Extra escrow ──────────────────────────────────────────────────────────
   A row per fee: what it is, how much, which way it was quoted, what it covers,
   and both periods worked out. The name is the widest because that is the
   column somebody reads down. */
.pw-fees { margin-top: 18px; }
.pw-fee { display: grid; gap: 8px; align-items: center; padding: 8px 0;
  border-top: 1px solid var(--line);
  grid-template-columns: minmax(0, 1.4fr) 112px 104px minmax(0, 1.3fr) auto 28px; }
.pw-fee-list .pw-fee:first-child { border-top: 0; }
.pw-fee.is-new { border-top: 1px solid var(--line); margin-top: 2px; }
.pw-fee input, .pw-fee select { width: 100%; min-width: 0; }
.pw-fee-money { margin: 0; }
.pw-fee-each { color: var(--ink-500); font-size: .82rem; white-space: nowrap;
  font-variant-numeric: tabular-nums; text-align: right; }
.pw-fee-x { width: 28px; height: 28px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--surface); color: var(--ink-500);
  font-size: 1.1rem; line-height: 1; cursor: pointer; }
.pw-fee-x:hover { border-color: var(--red-700); color: var(--red-700); }
.pw-fee-sum { margin: 10px 0 0; font-variant-numeric: tabular-nums; }
.pw-fee-sum b { font-weight: 700; }

/* A number and what it means, side by side. */
/* A number and what it means, side by side.
   The input keeps a floor and the SELECT is the one that gives way: "% of the
   price" is wide, and a select that refused to shrink squeezed the box you
   type in down to about forty pixels — present, focusable, and too narrow to
   see a number in. On a cell too narrow for both, the select drops below. */
.rule-down { display: flex; flex-wrap: wrap; gap: 8px; align-items: start; }
.rule-down input { flex: 1 1 9ch; min-width: 9ch; }
.rule-down select { flex: 1 1 14ch; min-width: 0; }

/* Answering a price from its row in the queue. */
.pq-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pq-acts .button { width: auto; }
/* ACROSS THE ROW, UNDER BOTH COLUMNS. The row is `minmax(0,1fr) auto`, so the
   buttons' column sizes itself to whatever is in it — and while this message
   lived in there, a sentence like "Approved. The property now shows $39,900
   and is Ready to Advertise and Available." took the width off the address,
   which broke to one word a line exactly while somebody was reading it.
   Empty it draws nothing, so a row at rest is the height it always was. */
.pq-said { grid-column: 1 / -1; margin: 0; font-size: .78rem; color: var(--green-700); }
.pq-said:empty { display: none; }
.pq-said.is-bad { color: var(--red-700); }

/* ---- what you have already answered ---------------------------------------
   Approving takes the row out of the queue, which is right — it is not
   waiting on anybody any more. This is what it leaves behind, so "did that go
   through?" is answered by looking up rather than by going to find the
   property. Built as you work, kept until the page is reloaded. */
.pq-done {
  margin-top: 12px; padding: 12px 14px; border: 1px solid #cfe6d5;
  border-radius: 10px; background: var(--green-100);
}
.pq-done h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 7px;
  color: var(--green-700); font-size: .86rem;
}
.pq-done-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--green-700); color: #fff; font-size: .7rem;
}
.pq-done-n {
  border-radius: 999px; background: var(--surface); padding: 2px 9px;
  color: var(--green-700); font-size: .7rem; font-weight: 800;
}
.pq-done ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.pq-done li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  color: var(--ink-700); font-size: .78rem;
}
.pq-done li a, .pq-done li b { color: var(--ink-900); font-weight: 750; }

.pq-modal { position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 20px; }
.pq-modal[hidden] { display: none; }
.pq-modal-scrim { position: absolute; inset: 0; background: rgba(12,26,38,.44); }
.pq-modal-box { position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px; width: min(420px, 100%);
  box-shadow: 0 18px 44px rgba(16,43,66,.28); max-height: 90vh; overflow-y: auto; }
.pq-modal-box h3 { margin: 0 0 2px; }
.pq-modal-box label { display: block; margin: 12px 0 0; }
.pq-modal-box label span { display: block; font-size: .78rem; font-weight: 650;
  margin-bottom: 4px; }
.pq-modal-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.pq-modal-acts .button { width: auto; }
.pq-none { font-size: .78rem; color: var(--ink-500); font-weight: 650; }

/* "Not now" on a priority row. Never a tick: a derived row's done state lives
   in the record, so the only thing offered here is when to be told again. */
.dash-later { position: relative; }
.dash-later-menu { position: absolute; z-index: 30; right: 0; top: calc(100% + 4px);
  background: var(--card); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 8px 24px rgba(16,43,66,.18); padding: 5px; display: flex;
  flex-direction: column; gap: 2px; min-width: 130px; }
.dash-later-menu button { background: none; border: 0; text-align: left; cursor: pointer;
  font: inherit; font-size: .82rem; padding: 7px 10px; border-radius: 6px; color: var(--ink); }
.dash-later-menu button:hover { background: var(--surface-muted); }
.dash-snoozed { margin: 10px 0 0; font-size: .78rem; color: var(--ink-500); }
.dash-snoozed.is-bad { color: var(--red-700); }

.staff-switch { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface-muted); }
.staff-switch .note { margin-top: 6px; }

.digest-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.digest-try form { margin: 0; }
.digest-try .button { width: auto; }

/* Reports: what the book is doing. */
.rep-filter .grid { align-items: end; }
.rep-band { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.rep-band .tally { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; box-shadow: var(--shadow, 0 1px 2px rgba(18,38,30,.07)); }
.rep-band .tally b { display: block; font-size: 1.4rem; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.rep-band .tally span { color: var(--ink-500); font-size: .78rem; }
.rep-big { font-size: 1.05rem; margin: 10px 0 0; }
.rep-big b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }

/* The three kinds of paper a calculator built for pay stubs has to take. */
.poi-how { margin: 10px 0 0; border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 12px; background: var(--surface-muted); }
.poi-how summary { cursor: pointer; font-weight: 700; font-size: .82rem; }
.poi-how p { margin: 8px 0 0; font-size: .82rem; color: var(--ink-700); max-width: 70ch; }

/* Who sold an earlier deal, on a match. */
.before-agent { font-size: .78rem; color: var(--ink-500); margin-top: 3px; }

/* Cancelling, on the closing page. */
.rescind-field { margin: 12px 0 12px; }
.cis-why { margin: 8px 0 0; padding: 10px 12px; border-left: 3px solid var(--line);
  color: var(--ink-700); font-size: .88rem; }
.cis-signers { list-style: none; padding: 0; margin: 10px 0 0; }
.cis-signers li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.cis-signers li:last-child { border-bottom: 0; }
.cis-done-prompt { margin: 14px 0 0; padding: 13px 15px; border: 1px solid var(--line);
  border-left: 4px solid var(--amber-600, #bd8524); border-radius: 10px;
  background: var(--surface-muted); }
.cis-done-prompt p { margin: 6px 0 0; font-size: .86rem; color: var(--ink-700); }

/* ---- what the desk worked out about a document ----------------------------- */
/* Said beside the document rather than in a panel of its own: it is a fact
   about this paper, and it has to be in front of whoever is about to say the
   paper is right. Never a substitute for reading it, and the box says so. */
.cw-check { margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; font-size: .85rem;
  border: 1px solid var(--line); background: var(--surface-muted); }
.cw-check.is-ok { border-color: var(--green-600, #2f7d4f); }
.cw-check.is-off { border-color: var(--amber-600, #a4700d); background: var(--amber-50, #fdf6e7); }
.cw-check ul { margin: 6px 0 0; padding-left: 18px; }
.cw-check li { margin: 3px 0; }
.cw-check .secondary { margin-top: 4px; }
/* The model's half, kept visibly apart from the figures' tick: a different
   kind of claim, shown as a different kind of note. */
.cw-wording { margin: 6px 0 0; padding-top: 6px; border-top: 1px dashed var(--line); }
.cw-wording.is-idle { color: var(--ink-500); }
.cw-wording ul { margin: 4px 0 0; padding-left: 18px; }
.cw-wording li { margin: 3px 0; }

/* ---- who has signed a paper out in DocuSign -------------------------------- */
/* Each signer on their own line, as DocuSign last said, with Send Again beside
   anybody still to sign (signing-status.js; Tyler, 19 October 2026). */
.cw-signers { margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; font-size: .85rem;
  border: 1px solid var(--line); background: var(--surface-muted); }
.cw-signers ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.cw-signers li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.cw-signers .cw-who { font-weight: 700; color: var(--ink-900, inherit); }
.cw-signers .cw-said.is-signed { color: var(--green-600, #2f7d4f); font-weight: 600; }
.cw-signers .cw-said.is-trouble { color: var(--amber-600, #a4700d); font-weight: 700; }
.cw-signers .btn { margin-left: auto; }

/* ---- the closing form, walked a step at a time ----------------------------- */
/* The rail itself is the price wizard's (.pw-*), shared rather than copied.
   These are the few things only this page needs. */
.signed-grid output.calc { display: block; font-weight: 600; }
.sec-sub { margin: 18px 0 6px; font-size: .95rem; }
.sec-sub:first-child { margin-top: 0; }
.pw-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--line); }
/* "Not saved yet" on the office form's steps 4–6 sits to the left of Save. */
.pw-foot .edit-state { margin: 0 auto 0 0; align-self: center; }
/* A tick that changes what a contract promises reads as one. */
.check-hard { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px;
  padding: 12px 14px; border: 1px solid var(--amber-600, #a4700d); border-radius: 10px;
  background: var(--amber-50, #fdf6e7); }
.check-hard input { margin-top: 3px; }

/* ---- who has been asked to read the papers -------------------------------- */
.cw-review { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface-muted); font-size: .9rem; }
.cw-review ul { margin: 6px 0 10px; padding-left: 18px; }
.cw-review li { margin: 4px 0; }

/* EXTRA ESCROW ITEMS on a property. Its own panel because it is not an
   Airtable field, and nothing here autosaves — a half-typed escrow line is a
   line that would print on a contract. */
.escrow-panel .escrow-rows { width: 100%; border-collapse: collapse; margin: 12px 0 6px; }
.escrow-panel .escrow-rows th { text-align: left; font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500);
  padding: 0 10px 6px 0; }
.escrow-panel .escrow-rows td { padding: 0 10px 8px 0; vertical-align: middle; }
.escrow-panel .escrow-rows input { width: 100%; max-width: 280px; }
.escrow-panel .escrow-rows td:last-child { width: 1%; white-space: nowrap; }
.escrow-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.escrow-said { color: var(--ink-500); font-size: .8rem; }
.escrow-said.is-bad { color: #b23a3a; font-weight: 700; }

/* An escrow item on the property that is not on a closing somebody has already
   saved. Said rather than slipped into a table they have checked. */
.sec-warn { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px;
  border-left: 3px solid var(--amber-500, #b7791f); background: var(--gold-100, #fff1d7);
  color: #7a5410; font-size: .85rem; line-height: 1.55; }

/* OFF THE MARKET, AND WHY. Nothing here autosaves: taking a property off the
   market is a decision, not something to do by tabbing through a form. */
.standing-now { margin: 0 0 8px; padding: 10px 12px; border-radius: 8px;
  border-left: 3px solid var(--amber-500, #b7791f); background: var(--gold-100, #fff1d7);
  color: #7a5410; font-size: .9rem; line-height: 1.55; }
.standing-choices { display: grid; gap: 14px; margin: 12px 0; }
.standing-choice { padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--surface-muted); }
.standing-head { margin: 0 0 4px; font-size: .9rem; }
.standing-choice p.muted { margin: 0 0 8px; }
.standing-choice textarea { width: 100%; max-width: 520px; margin-bottom: 10px; }
/* Under Repair's list of work: the company's own names, ticked. The choice
   is a grid item, so it may shrink below the list's widest row — without
   min-width: 0 the list pushed the box past a phone's edge. */
.standing-choices > .standing-choice { min-width: 0; }
.standing-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: 4px 14px; max-width: 720px; margin: 0 0 10px; }
.standing-pick { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.standing-choice p:last-child { margin: 0; }
.standing-said { color: var(--ink-500); font-size: .8rem; }
.standing-said.is-bad { color: #b23a3a; font-weight: 700; }

/* ======================================================================
   EDIT THIS PROPERTY, IN PARTS (Tyler, 19 October 2026). A menu of parts
   down the left, one open at a time (public/edit-parts.js), the facts along
   the top, and Find A Box. Each part has its own colour, mixed from the
   house tokens — colour divides the page. Scoped to .edit-page.
   ====================================================================== */
.edit-page {
  --part-blue: var(--blue-700);
  --part-green: var(--green-700);
  --part-gold: var(--gold-600);
  --part-red: var(--red-700);
  --part-violet: color-mix(in srgb, var(--blue-700) 55%, var(--red-700));
  --part-slate: var(--ink-700);
  --part-brown: color-mix(in srgb, var(--gold-600) 60%, var(--ink-900));
  --part-teal: color-mix(in srgb, var(--blue-700) 50%, var(--green-700));
  --part-navy: var(--navy-800);
  --part-grey: var(--ink-500);
}
.edit-page .edit-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.edit-page .edit-head-text { min-width: 0; }
.edit-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0;
  color: var(--ink-500); font-size: .8rem; font-weight: 700; }
.edit-kicker .edit-id { margin-left: 0; }
.edit-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.edit-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px;
  margin: 0 0 16px; }
.edit-fact { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--part-slate);
  border-radius: var(--radius-md); padding: 12px 14px; min-width: 0; }
.edit-fact small { display: block; color: var(--ink-500); font-size: .76rem; margin-bottom: 5px; }
.edit-fact b { font-size: 1.05rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.edit-fact.is-good { border-top-color: var(--part-green); }
.edit-fact.is-good b { color: var(--green-700); }
.edit-fact.is-warn { border-top-color: var(--part-gold); }
.edit-fact.is-warn b { color: #7a5410; }
.edit-fact.is-blue { border-top-color: var(--part-blue); }
.edit-fact.is-violet { border-top-color: var(--part-violet); }

.edit-finder { position: sticky; top: var(--topbar-h, 60px); z-index: 12; padding: 8px 0 10px;
  margin-bottom: 8px; background: color-mix(in srgb, var(--page) 92%, transparent);
  backdrop-filter: blur(6px); }
.edit-finder-box { position: relative; max-width: 460px; }
.edit-finder input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px;
  background: var(--surface); font: inherit; }
.edit-finder input:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 1px; }
.edit-find-hits { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 13;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
  max-height: 320px; overflow: auto; padding: 4px; }
.edit-find-hits button { display: flex; justify-content: space-between; gap: 12px; width: 100%; border: 0;
  background: none; text-align: left; padding: 9px 10px; border-radius: 8px; font: inherit; font-size: .88rem;
  cursor: pointer; }
.edit-find-hits button:hover, .edit-find-hits button:focus-visible { background: var(--blue-100); outline: none; }
.edit-find-hits small { color: var(--ink-500); white-space: nowrap; }
.edit-find-none { margin: 0; padding: 9px 10px; color: var(--ink-500); font-size: .86rem; }
.is-found { animation: edit-found 1.8s ease; border-radius: 10px; }
@keyframes edit-found { 0%, 45% { box-shadow: 0 0 0 4px var(--gold-100), 0 0 0 6px var(--gold-600); }
  100% { box-shadow: 0 0 0 0 transparent; } }

.edit-parts { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.edit-menu { position: sticky; top: calc(var(--topbar-h, 60px) + 66px); display: grid; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px; }
.edit-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 9px;
  color: var(--ink-700); font-size: .86rem; font-weight: 700; text-decoration: none; }
.edit-menu-item[hidden] { display: none; }
.edit-menu-item:hover { background: var(--surface-muted); }
.edit-menu-item:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 1px; }
.edit-menu-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c); }
.edit-parts.is-one .edit-menu-item.is-on { background: color-mix(in srgb, var(--c) 11%, var(--surface));
  color: var(--ink-900); }
.edit-content { min-width: 0; }
/* Anything brought into view — a part opened from the address, a box found or
   clicked — stops below the top bar and the Find a box bar that stick over
   it, not under them. */
.edit-page .edit-part, .edit-page .edit-field, .edit-page .panel, .edit-page .standing-choice {
  scroll-margin-top: calc(var(--topbar-h, 60px) + 76px); scroll-margin-bottom: 90px; }

.edit-part { margin-bottom: 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow); overflow: hidden; }
.edit-part[hidden] { display: none; }
.edit-parts.is-one .edit-part:not(.is-open) { display: none; }
.edit-part-head { padding: 15px 20px; border-bottom: 1px solid var(--line); border-left: 5px solid var(--c);
  background: color-mix(in srgb, var(--c) 9%, var(--surface)); }
.edit-part-head h2 { margin: 0 0 2px; font-size: 1.1rem; }
.edit-part-head p { margin: 0; color: var(--ink-700); font-size: .86rem; }
/* One column that never grows past its part: a grid item is as wide as its
   widest line unless told otherwise, and Marketing Information's figures
   pushed it 260px past the edge, cut off by the part. */
.edit-part-body { padding: 18px 20px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.edit-part-body > * { min-width: 0; }
.edit-part-body > .panel { margin: 0; box-shadow: none; }
.edit-form .edit-box { margin: 0; padding: 0; border: 0; min-width: 0; }
.edit-form .edit-box legend { float: left; width: 100%; padding: 0; }
.edit-form .edit-box legend h3 { margin: 0 0 12px; font-size: .74rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }

/* Off The Market's reasons, as cards; the one pressed opens its box. */
.standing-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 10px; margin: 12px 0; }
.standing-card { text-align: left; background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--tone, var(--part-slate)); border-radius: var(--radius-md); padding: 12px 14px;
  font: inherit; cursor: pointer; color: var(--ink-900); }
.standing-card:hover { box-shadow: var(--shadow); }
.standing-card:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 1px; }
.standing-card[aria-expanded="true"] { outline: 2px solid var(--tone, var(--part-slate));
  background: color-mix(in srgb, var(--tone, var(--part-slate)) 7%, var(--surface)); }
.standing-card b { display: block; margin-bottom: 3px; }
.standing-card small { color: var(--ink-500); line-height: 1.45; font-size: .8rem; }
.standing-panel .standing-choice[hidden] { display: none; }
.standing-panel .standing-choice { margin: 0 0 12px; min-width: 0; }
.standing-now.is-off { border-left-color: var(--red-700); background: var(--red-100); color: var(--ink-900); }
.standing-panel .repair-boxes { margin: 10px 0 12px; }
.standing-panel .repair-ticks input[disabled] { opacity: 1; }
.standing-note-wrap { display: grid; gap: 6px; margin: 0 0 10px; max-width: 620px; }
.standing-note-wrap > span { color: var(--ink-700); font-size: .78rem; font-weight: 700; }
.standing-note-wrap input, .standing-note-wrap textarea { width: 100%; border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 11px; font: inherit; background: var(--surface); }
.standing-save-note { margin: 0 0 10px; color: var(--ink-500); font-size: .8rem; max-width: 70ch; }
.standing-panel .standing-said:empty { display: none; }
.standing-panel .standing-said { margin: 8px 0 0; }
.edit-repair-photos { margin: 10px 0 12px; }

@media (max-width: 860px) {
  .edit-parts { grid-template-columns: minmax(0, 1fr); }
  .edit-menu { top: calc(var(--topbar-h, 60px) + 58px); z-index: 11; display: flex; overflow-x: auto;
    gap: 4px; padding: 6px; scrollbar-width: none; }
  .edit-menu-item { white-space: nowrap; flex: none; }
  .edit-page .edit-part, .edit-page .edit-field, .edit-page .panel, .edit-page .standing-choice {
    scroll-margin-top: calc(var(--topbar-h, 60px) + 130px); }
  .edit-parts:not(.is-one) .edit-menu { position: static; }
  .edit-part-body { padding: 14px; }
  .edit-part-head { padding: 13px 14px; }
}
@media (max-width: 560px) {
  .edit-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .edit-fact { padding: 10px 11px; }
  .edit-fact b { font-size: .95rem; }
  .edit-head-actions { width: 100%; }
}

/* WHAT THE PROPERTY SAYS IT IS, on the closing form. A notice, never a gate —
   so it reads as something to know rather than something refusing. */
.standing-notice { margin: 0 0 12px; padding: 10px 13px; border-radius: 8px;
  border-left: 3px solid var(--amber-500, #b7791f); background: var(--gold-100, #fff1d7);
  color: #7a5410; font-size: .88rem; line-height: 1.6; }
.standing-notice a { color: #5c3f0c; font-weight: 700; }

/* A figure that does not match the one in Airtable has to explain itself. */
.fact-note { display: block; margin-top: 2px; color: var(--ink-500);
  font-size: .72rem; font-weight: 600; }

/* A HUNDRED AND FIFTY-FOUR FIELDS, in twelve groups that start shut. The
   question somebody arrives with is always about one field, never all of them. */
.field-find { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.field-find label { font-size: .8rem; font-weight: 700; color: var(--ink-700); }
.field-find input { min-width: 240px; }
.field-group { border: 1px solid var(--line); border-radius: var(--radius-md);
  margin-bottom: 10px; background: var(--surface); }
.field-group > summary { cursor: pointer; padding: 10px 14px; font-weight: 700;
  font-size: .9rem; display: flex; align-items: center; gap: 10px; }
.field-group > summary:hover { background: var(--surface-muted); }
.field-group[open] > summary { border-bottom: 1px solid var(--line); }
.field-group .table-wrap { margin: 0 !important; }
.count-pill.sm { font-size: .7rem; padding: 1px 7px; }

/* Whether a company's documents are read before they go out. Beside the
   readers, because it is the same question asked of the same company. */
.review-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 14px; padding: 10px 12px; border-radius: 8px;
  background: var(--surface-muted); font-size: .88rem; }
.review-rule label { display: inline-flex; align-items: center; gap: 8px; }
.review-rule .review-why { min-width: 280px; flex: 1 1 280px; }
.review-rule .is-bad { color: #b23a3a; font-weight: 700; }

/* What an account is actually connected to. Nothing links a person to their
   deals, so an invite can silently reach nothing and look like having none. */
.who-match { margin-top: 4px; font-size: .74rem; line-height: 1.5; color: var(--ink-500); }
.who-match.is-none { color: #7a5410; font-weight: 600; }

/* WHICH PAGES EACH ROLE OPENS. The matrix is the one in the code with whatever
   the office changed laid over it, and a changed cell says so. */
.tab-matrix th[scope="col"] { font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; white-space: nowrap; }
.tab-matrix th[scope="row"] { text-align: left; font-weight: 700; white-space: nowrap; }
.tab-matrix td { text-align: center; vertical-align: middle; }
.tab-matrix td.is-changed { background: var(--gold-100, #fff1d7); }
/* A tab's own pages, opened under it by its name (page boxes, 14 October 2026). */
.tab-matrix .tab-open { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0;
  background: none; color: var(--navy-900, #102b42); font: inherit; font-weight: 700; cursor: pointer;
  text-decoration: underline; text-decoration-color: #b7d6f6; text-underline-offset: 3px; }
.tab-matrix .tab-open .tab-count { color: var(--muted); font-size: .72rem; font-weight: 650; text-decoration: none; }
.tab-matrix .tab-open[aria-expanded="true"] .tab-arrow { transform: rotate(90deg); }
.tab-matrix .tab-arrow { display: inline-block; transition: transform .15s; }
.tab-matrix tr.page-row th[scope="row"] { padding-left: 26px; font-weight: 650; white-space: normal; max-width: 340px; }
.tab-matrix tr.page-row { background: #f8fafc; }
.tab-matrix .page-gives { display: block; margin-top: 2px; color: var(--muted); font-size: .74rem; font-weight: 400; line-height: 1.35; }
.tab-matrix .cell-none { color: #b8c4cf; }
.tab-matrix .cell-said { display: block; font-size: .62rem; color: #7a5410;
  text-transform: uppercase; letter-spacing: .03em; }

.person-access { padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-md); margin-bottom: 10px; }
.person-access-who { margin: 0 0 6px; }
.person-rules { margin: 0 0 8px; padding-left: 18px; font-size: .88rem; }
.person-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.person-add input[type="text"] { flex: 1 1 220px; min-width: 180px; }
.is-bad { color: #b23a3a; font-weight: 700; }

/* What it used to cost. Beside the new number, because the new one on its own
   is just a price. */
.was { color: var(--ink-500); text-decoration: line-through; font-size: .82rem; }

/* The page's own padding on a phone. Last in the file on purpose: .workspace
   and .workspace-body are both set again further up, so an override written
   beside the rest of the small-screen rules would lose to them. Room on a
   phone is width, and 22px of gutter on each side is a column of text the
   page does not get. */
@media (max-width: 900px) {
  .workspace { padding: 0; }
  .workspace-body { padding: 20px 16px 48px; }

  /* The price and Edit sit in their own column beside the address on a desk
     and are right-aligned there, which is right. Stacked under the address on
     a phone they were still right-aligned, so one block on the page read as
     centred while everything above it was flush left. */
  .detail-aside { align-items: flex-start; width: 100%; }
  .headline-price { text-align: left; }
}

/*
 * CONTRACTOR PAYMENTS ON A PHONE: cards, not a table of eight columns.
 *
 * A 900px table inside a 343px card scrolls inside its own box, which is
 * correct and was still the wrong answer here. What survived on screen was the
 * contractor, a truncated job and a truncated address — and the AMOUNT, the
 * status, the date and the way in were all off to the right, behind a sideways
 * drag, on the one page whose whole question is what we owe and to whom.
 *
 * So each row becomes a card. The header row is hidden rather than removed,
 * because it is what a screen reader reads the cells against; `clip` keeps it
 * reachable without taking space. The money is given its own size, because in
 * a stack nothing else says which line matters.
 */
@media (max-width: 760px) {
  .pay-scroll { overflow-x: visible; }
  .pay-table { min-width: 0; }
  .pay-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .pay-table, .pay-table tbody, .pay-table tr, .pay-table td { display: block; width: auto; }
  .pay-table tbody tr {
    margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--radius-md);
    background: var(--surface); padding: 12px 14px;
  }
  .pay-table tbody tr:hover td { background: transparent; }
  .pay-table td,
  .pay-table tbody tr:last-child td { padding: 2px 0; border-bottom: 0; }
  /* Right-aligned columns are only right-aligned beside other columns. */
  .pay-table th.right, .pay-table td.right { text-align: left; }
  .pay-table .pay-cell-main { font-size: .98rem; }
  /* The number somebody came for. */
  .pay-table .pay-cell-money {
    margin-top: 4px; color: var(--ink-900);
    font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; font-weight: 700;
  }
  .pay-table .pay-cell-when { color: var(--ink-500); font-size: .82rem; }
  /* The three dots were a corner of a wide row; in a card they are the way in. */
  .pay-table .pay-cell-go {
    display: block; width: auto; height: auto;
    margin-top: 10px; border: 1px solid var(--line);
    border-radius: 9px; padding: 9px; color: var(--ink-700);
    font-weight: 700; text-align: center; text-decoration: none; letter-spacing: 0;
    /* Its own three dots away, and the words in their place: "•••" is a hint
       at the end of a wide row and nothing at all at the foot of a card. The
       aria-label on it already said this; now the screen does too. */
    font-size: 0;
  }
  .pay-table .pay-cell-go::before { content: "Open this payment"; font-size: .84rem; }
  .pay-table .pay-cell-clip { white-space: normal; }
}

/* ---- contractors -------------------------------------------------------- */
/* The year a contractor was paid in, with the total for that year on the far
   side of a rule. The Marketing Center has a heading that looks like this, but
   its rule is scoped to `.mc` and borrowing it got nothing but an unstyled
   line of text — the year and the money ran together with no rule between. */
.year-hdr {
  display: flex; align-items: center; gap: 10px; margin: 20px 0 8px;
  font-size: .78rem; font-weight: 700; color: var(--ink-700);
  text-transform: uppercase; letter-spacing: .4px;
}
.year-hdr .y { font-variant-numeric: tabular-nums; }
.year-hdr .ln { flex: 1; height: 1px; background: var(--line); }
.year-hdr .cnt { color: var(--ink-900); font-size: .95rem; letter-spacing: 0; }
.pay-year:first-of-type .year-hdr { margin-top: 0; }

/* A 1099 is a row somebody reads across — who, how much, does it need a form.
   Letting seven columns squeeze into a phone turned a contractor's name into
   four lines and taught nobody anything, so the table keeps its width and the
   page swipes, which is what every other wide table here does. */
.ct-table { min-width: 760px; }
.ct-year-table { min-width: 460px; }
.ct-work-table { min-width: 680px; }

/* A phone number is one thing. The house rule breaks a long `.sub` anywhere so
   an email cannot push a table wide, and on this one it split "(706) 5" from
   "55-0142" — a number nobody can read and nobody can dial. The table has its
   own width here, so the cell does not need to give. */
.grid-table .ct-contact { word-break: normal; overflow-wrap: break-word; }

/* ---- price approval, on a phone ----------------------------------------- */
/* THREE NUMBERS SHOULD NOT COST A SCREEN. Below 980 the metric cards and the
   tabs BOTH went to one column, so the same three counts were drawn as six
   full-width blocks and the tabs began 547px down an 812px screen — the list
   somebody came for was two scrolls away. The tabs are the better rendering
   there, because they are what you press, so the cards shrink to a compact
   row beside them rather than competing with them.

   What the cards lose on a phone is the small print, and the one line of it
   that genuinely says something — that Agent Requests sits INSIDE Awaiting
   Approval — is now a sentence under the tabs at every width. */
@media (max-width: 980px) {
  .pq-metrics { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .pq-metric { min-height: 0; flex-direction: column; align-items: flex-start;
    gap: 6px; padding: 11px 12px; }
  /* The icon is decoration beside a number; at this width the number is the
     whole point and the icon is what is pushing it down the page. */
  .pq-metric .pq-ico { display: none; }
  .pq-metric .pq-sub { display: none; }
  .pq-lab { font-size: .72rem; line-height: 1.25; }
  .pq-n { font-size: 1.35rem; }
}
.pq-note { margin: 0 0 14px; color: var(--ink-500); font-size: .8rem; }
.pq-note b { color: var(--ink-700); }

/* ---- the Marketing Center's twelve tabs, on a phone ---------------------- */
/* TWELVE WRAPPING FLEX ITEMS LAND WHEREVER THEY FIT. At 375 points that was a
   ragged seven-line block — rows of two, then one, then two, then two, then
   one — about 560px of navigation before a word of the page, on a screen 812
   tall. It reads as broken rather than as a menu, because nothing lines up
   with anything.

   A grid of two columns is the same twelve names in half the room and in
   rows somebody can scan down. Not a sideways scroller: with twelve tabs, the
   ones off the edge are the ones nobody would ever find. */
@media (max-width: 760px) {
  .mc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
  .mc-tab { padding: 9px 10px; border-radius: 8px; border-bottom-width: 2px;
    margin-bottom: 0; font-size: 13.5px; }
  /* The underline is a tab-strip idea and there is no strip here, so the one
     you are on is filled instead — otherwise it marks the edge of a cell. */
  .mc-tab.active { background: var(--mc-brand-soft, #eaf3ee); border-bottom-color: transparent; }
  .mc-tab .ic { font-size: 14px; }
}

/* ---- collections: who is behind ----------------------------------------- */
/* Money read across a row, so the columns keep their width and the box
   swipes, like every other wide table here. */
.bh-table { min-width: 640px; }
/* A band with nobody in it is still a band — it says the line exists and is
   empty, which is a different fact from the line not being drawn. */
.bh-table tr.is-quiet td { color: var(--ink-500); }
/* The letter history reads across: a day, an office, a type and two counts. */
.lt-table { min-width: 720px; }
.lt-table tr.is-quiet td { border-top: 0; padding-top: 0; }
/* Letters: a merged day's three files, one a line, never broken mid-word. */
.lt-files a { display: block; white-space: nowrap; }
.lt-files .lt-stack { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-500, #6b7280); }
/* A customer's Collections page: notes, and a letter made by hand. */
.cu-notes { list-style: none; margin: 10px 0 0; padding: 0; }
.cu-notes li { border-top: 1px solid var(--line); padding: 10px 0; }
.cu-notes li p { margin: 0 0 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cu-from { font-size: 15px; margin: 18px 0 4px; }
.cu-files a { display: inline-block; margin-right: 12px; white-space: nowrap; }
.cu-release .check { display: block; margin: 4px 0; }
/* Run Collections: the Land Rush file goes in by a drop or a pick, and is read
   at once. The whole card takes the drop; this is where it says so. */
.import-drop { padding: 34px 20px; margin-top: 4px; }
/* Whose report it is, picked before the drop (13 October 2026). */
.office-pick { display: inline-flex; margin: 2px 0 12px; border: 1px solid var(--card-line); border-radius: 10px; overflow: hidden; background: #fff; }
.office-pick label { cursor: pointer; }
.office-pick input { position: absolute; opacity: 0; pointer-events: none; }
.office-pick span { display: block; padding: 9px 20px; font-weight: 800; font-size: 14px; color: #52667d; }
.office-pick input:checked + span { background: var(--navy); color: #fff; }
.office-pick input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: -2px; }
/* A property in a list, opening over the page. */
.prop-link { color: var(--blue); font-weight: 650; text-decoration: underline; text-decoration-color: #b7d6f6; text-underline-offset: 3px; }
/* Recent Reports and Runs: an office, a month, and further back. */
.list-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.list-filter select { height: 34px; border: 1px solid var(--card-line); border-radius: 8px; padding: 0 8px; background: #fff; font-weight: 700; }
.list-more { margin: 10px 0 0; }
.list-more a { color: var(--blue); font-weight: 700; text-decoration: none; }
.import-drop .drop-say { font-size: 1.05rem; }
.import-drop.is-reading { opacity: .6; pointer-events: none; }
/* Collections → an account → The Account: the fourth buyer, typed in the desk. */
.cu-buyer4 { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 12px; }
.cu-buyer4 .field { flex: 1 1 220px; margin: 0; }

/* Collections → Merge Duplicates: each account's records together; the one
   Land Rush updated last (what each report writes) in green. */
.md-pair + .md-pair { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.md-pair h3 { margin: 0 0 8px; }
.md-pair tr.md-suggested td { background: var(--green-100); }

/* Run Collections: the Next Due report's preview. */
/* Two across on a phone (walking it, 13 October 2026: at 150px they stacked one a row). */
.ni-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; margin: 12px 0; }
.ni-tiles > div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.ni-tiles .ni-n { font-size: 22px; font-weight: 700; }
.ni-tiles span:last-child { font-size: 12px; color: var(--ink-500, #6b7280); }
.ni-more { margin: 10px 0; }
.ni-more summary { cursor: pointer; font-weight: 600; }
.ni-list { margin: 6px 0 0; padding-left: 18px; }
.ni-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.inline-form { display: inline; }

/* ---- Run Collections: Choose The Letters as cards ----
   (the office, 13 October 2026). The cards are drawn by collections-letters.js. */
/* The ladder wraps by the room it has, not the screen's: beside the run's
   checklist it is under 500 wide on a 1180 screen (16 October 2026). */
.cl-ladder { container-type: inline-size; }
.cl-ladder p { margin: 6px 0 0; color: #3d4f65; max-width: 120ch; }
.cl-settings-link { color: var(--blue); font-weight: 700; text-decoration: none; }
.cl-rungs { display: flex; align-items: stretch; margin-top: 12px; }
.cl-rung { flex: 1 1 0; min-width: 0; border: 1px solid var(--card-line); border-radius: 11px; padding: 9px 11px; background: #f7f9fb; }
.cl-rung strong { display: block; font-size: 13px; }
.cl-rung small { display: block; color: var(--muted); font-size: 11.5px; }
.cl-rung.is-hand { border-style: dashed; background: #fbfaff; }
.cl-arrow { flex: 0 0 92px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 6px; color: #55677c; font-size: 11px; text-align: center; }
.cl-arrow::after { content: ""; display: block; width: 100%; height: 2px; margin-top: 5px; background: linear-gradient(90deg, #c8d6e3, #7ea7cf); }
.cl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; margin: 0 0 14px; }
.cl-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--card-line); border-top: 3px solid #dbe5ec; border-radius: 12px; background: #fff; padding: 10px 9px 9px; text-align: left; font: inherit; cursor: pointer; }
.cl-card.is-on { border-color: var(--blue); box-shadow: 0 0 0 3px #cfe5ff; }
.cl-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cl-lbl { min-height: 37px; color: #6d7f94; font-size: 9.5px; font-weight: 800; line-height: 1.3; letter-spacing: .3px; text-transform: uppercase; hyphens: auto; -webkit-hyphens: auto; }
.cl-n { font-size: 24px; font-weight: 800; line-height: 1.3; }
.cl-prog { color: var(--muted); font-size: 11.5px; }
.cl-prog.is-done { color: #1f7a4d; font-weight: 800; }
.cl-tick { position: absolute; top: 56px; right: 9px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #eef2f6; color: #9aa9b9; font-size: 12px; font-weight: 900; }
.cl-tick.is-yes { background: #1f7a4d; color: #fff; }
.cl-c-att { border-top-color: #b3261e; } .cl-c-att .cl-n { color: #b3261e; }
.cl-c-def { border-top-color: #d39a1c; } .cl-c-term { border-top-color: #c2410c; } .cl-c-dtp { border-top-color: #5b3fa6; }
.cl-c-dis { border-top-color: #334155; } .cl-c-evi { border-top-color: #7f1d1d; } .cl-c-pa { border-top-color: #1f7a4d; }
.cl-c-can { border-top-color: #9aa9b9; } .cl-c-oct { border-top-color: #64748b; } .cl-c-all { border-top-color: var(--blue); }
.cl-box { margin-bottom: 14px; overflow: hidden; }
.cl-boxhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px 4px; }
.cl-boxhead h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 25px; font-weight: 500; }
.cl-boxhead h2 small { margin-left: 8px; color: var(--muted); font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 700; }
.cl-boxhead .sub { margin: 3px 0 0; max-width: 95ch; color: var(--muted); font-size: 13px; }
.cl-checkcard { cursor: pointer; }
.cl-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 10px 14px 0; border-bottom: 1px solid var(--card-line); }
.cl-tab { margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none; padding: 10px 9px 11px; color: #52667d; font: inherit; font-weight: 700; cursor: pointer; }
.cl-tab .cl-c { display: inline-grid; place-items: center; min-width: 22px; height: 20px; margin-left: 5px; border-radius: 999px; background: #eef2f6; padding: 0 6px; font-size: 11px; font-weight: 900; }
.cl-tab.is-on { border-bottom-color: var(--blue); color: var(--blue); }
.cl-tab.is-on .cl-c { background: #eaf4ff; color: var(--blue); }
.cl-tab.is-att .cl-c { background: #fdecec; color: #b3261e; }
.cl-gsec { padding: 14px 18px 4px; }
.cl-gsec h3, .cl-group h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.cl-gnote { margin: 5px 0 4px; max-width: 110ch; color: #55677c; font-size: 13px; line-height: 1.5; }
.cl-gsec.is-att .cl-gnote { color: #8a4b00; }
.cl-group { padding: 16px 18px 6px; border-top: 1px solid var(--card-line); }
.cl-toolbar { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding: 12px 18px; }
.cl-toolbar input, .cl-toolbar select, .cl-bulk select { height: 38px; border: 1px solid var(--card-line); border-radius: 9px; background: #fff; padding: 0 11px; font: inherit; }
.cl-toolbar input { flex: 1; min-width: 220px; }
.cl-checkall { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px 18px; border-top: 1px solid var(--card-line); border-bottom: 1px solid var(--card-line); background: #f8fafc; font-size: 13px; font-weight: 750; }
.cl-checkall input[type=checkbox] { width: 17px; height: 17px; vertical-align: -3px; margin-right: 6px; }
.cl-checkall .sub { margin: 0; color: var(--muted); font-weight: 600; }
.cl-bulk { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; font-weight: 600; color: #52667d; }
.cl-bulk select { height: 34px; }
/* Fits a 1366-wide laptop with the letter box in view (walking it, 13 October
   2026: at 1000px it ran 37px off the card); narrower, the card scrolls. */
/* EVERY COLUMN FITS (Tyler's fourth walk, 14 October 2026: "some columns not
   fitting"): the table takes the card's width and no more — long names and
   Land Rush's comma-joined addresses wrap, the letter box shrinks to its
   column, and only under 900px does the card scroll. */
.cl-table { width: 100%; min-width: 600px; }
.cl-table .cl-to { display: none; }
.cl-owed .cl-since { display: block; margin-top: 4px; text-align: right; font-size: 12px; }
.cl-dates .cl-lab, .cl-stage .tag { display: block; }
.cl-dates .cl-lab { margin-top: 4px; color: #8a97a6; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cl-dates .cl-lab:first-child { margin-top: 0; }
.cl-stage .tag { margin-top: 5px; width: max-content; max-width: 100%; }
.cl-table th, .cl-table td { padding-left: 7px; padding-right: 7px; }
.cl-table .cl-prop, .cl-table .cl-prop a { overflow-wrap: anywhere; }
.cl-table .secondary.num { white-space: normal; }
.cl-table thead th { white-space: normal; line-height: 1.35; vertical-align: bottom; }
.cl-sortable button { border: 0; background: none; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.cl-sortable[aria-sort="ascending"], .cl-sortable[aria-sort="descending"] { color: var(--blue); }
.cl-sortmark { margin-left: 5px; color: #a7b5c4; font-size: 9px; }
.cl-sortable[aria-sort="ascending"] .cl-sortmark, .cl-sortable[aria-sort="descending"] .cl-sortmark { color: var(--blue); }
.cl-table .secondary { display: block; }
/* Figures that line up, but may wrap — a nowrap date line pushed the letter
   box off the card at a laptop's width (found walking it, 13 October 2026). */
.cl-tnum { font-variant-numeric: tabular-nums; }
.cl-table td.cl-chk, .cl-table th.cl-chk { width: 34px; }
.cl-chk input { width: 17px; height: 17px; }
.cl-table tr.cl-main td { border-bottom: 0; padding-bottom: 6px; }
.cl-table tr.cl-main.is-checked td.cl-chk { box-shadow: inset 3px 0 0 #1f7a4d; }
.cl-table tr.cl-whyrow td { padding-top: 0; padding-bottom: 12px; }
.cl-prop { min-width: 92px; }
.cl-who { min-width: 104px; }
.cl-stage { min-width: 80px; }
.cl-stage .tag { font-size: 11px; }
.cl-who .primary { overflow-wrap: anywhere; }
.cl-who .secondary { white-space: nowrap; }
.cl-paid { display: block; color: #1f7a4d; font-weight: 750; white-space: nowrap; }
.cl-unpaid { display: block; color: #b3261e; font-weight: 750; white-space: nowrap; }
.cl-later { color: #55677c; font-size: 12.5px; font-weight: 650; }
/* A partial payment held in reserve, under Paid (Tyler, 14 October 2026). */
.cl-partial { display: block; margin-top: 3px; color: #8a5a12; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cl-becomes { display: flex; align-items: center; gap: 6px; }
.cl-to { color: #9aa9b9; font-weight: 800; }
.cl-becomes { min-width: 0; }
.cl-becomes select { width: 100%; max-width: 172px; min-width: 96px; height: 34px; border: 1px solid var(--card-line); border-radius: 8px; background: #fff; padding: 0 8px; font: inherit; font-weight: 700; }
.cl-becomes select.is-need { border-color: #f1b3ae; background: #fff8f7; color: #b3261e; }
.cl-becomes select.is-changed { border-color: #e7b54a; background: #fffaf0; }
.cl-changed { display: block; margin-top: 3px; color: #8a5a00; font-size: 11px; }
.cl-whyline { display: flex; justify-content: space-between; align-items: center; gap: 14px; border: 1px solid #edf1f5; border-radius: 10px; background: #f8fafc; padding: 8px 12px; }
.cl-why { min-width: 0; color: #3d4f65; font-size: 12.5px; }
.cl-why b { margin-right: 6px; color: #6d7f94; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; }
.cl-notes { flex: 0 0 auto; height: 30px; border: 1px solid var(--card-line); border-radius: 999px; background: #fff; padding: 0 12px; color: #52667d; font: inherit; font-size: 12.5px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.cl-notes.has { border-color: #b9cde3; background: #f3f8fe; color: var(--navy); }
.cl-notes:hover { border-color: var(--blue); color: var(--blue); }
.cl-nobody { padding: 24px; color: var(--muted); text-align: center; }
.cl-t-def { background: #fff4dc; color: #8a5a00; } .cl-t-term { background: #ffede3; color: #9a3412; }
.cl-t-dtp { background: #efeafc; color: #5b3fa6; } .cl-t-dis { background: #e8ecf2; color: #1f2937; }
.cl-t-pa { background: #e6f5ec; color: #1f7a4d; } .cl-t-can { background: #f1f1f1; color: #555; }
.cl-table .tag { white-space: normal; line-height: 1.3; }
.cl-notepop { position: absolute; z-index: 60; width: min(380px, calc(100vw - 24px)); border: 1px solid var(--card-line); border-radius: 14px; background: #fff; padding: 14px 16px; box-shadow: 0 18px 44px rgba(8, 20, 36, .28); }
.cl-notepop h3 { margin: 0 34px 2px 0; color: #12243a; font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 500; }
.cl-notepop .sub { margin: 0; color: var(--muted); font-size: 13px; }
.cl-notelist { display: grid; gap: 8px; max-height: 230px; overflow: auto; margin: 10px 0; padding: 0; list-style: none; }
.cl-notelist li { border-left: 3px solid #c8d6e3; border-radius: 0 8px 8px 0; background: #fafbfd; padding: 8px 10px; }
.cl-notelist li.cl-later { border-left-color: transparent; background: none; padding: 0; }
.cl-notelist p { margin: 0; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.cl-notelist span { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; }
.cl-notelist em { font-style: normal; }
.cl-notepop textarea { width: 100%; border: 1px solid var(--card-line); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13.5px; resize: vertical; }
.cl-notepop .tour-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.cl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Sticks to the foot of the window while the accounts scroll under it. */
.cl-foot { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; border: 1px solid var(--card-line); border-radius: 14px 14px 0 0; background: #fff; padding: 12px 18px; box-shadow: 0 -8px 24px rgba(28, 58, 83, .08); }
.cl-sum { flex: 1 1 420px; font-size: 13.5px; }
.cl-left { color: #b3261e; font-weight: 700; }
.cl-foot-acts { display: flex; gap: 8px; }
.cl-foot .edit-state { flex: 1 0 100%; }
@container (max-width: 1000px) {
  .cl-rungs { flex-wrap: wrap; gap: 8px; }
  .cl-rung { flex: 1 1 30%; }
  .cl-arrow { flex: 0 0 auto; }
  .cl-arrow::after { display: none; }
}

/* ---- Deals Waiting On You -------------------------------------------------
   The first thing an admin sees. A panel, not a count: the rows are the work,
   and a number three panels down was what made somebody go to the Buying
   Process and pick agents one at a time to find them.

   Four parts to a row and they wrap rather than squeeze — on a phone the
   agent, the age and the word Review drop under the name instead of crushing
   it to one word a line. */
.dash-queue {
  overflow: hidden; margin-bottom: 14px; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--surface);
}
/* The header carries a title, a count and a way out. On a phone those three
   do not fit on one line, and the squeeze fell on the title — "Deals Waiting
   On You" broke to three lines beside a link that had room to spare. So the
   title keeps its line with the count, and the link drops under them. */
.dash-queue .dash-ph { --c: #6b34cd; --cbg: #f1e9ff; flex-wrap: wrap; }
.dash-queue .dash-ph h2 { flex: 1 0 auto; }
.dash-queue-all {
  flex: none; border-radius: 999px; background: var(--blue-100); padding: 4px 11px;
  color: var(--blue-700); font-size: .72rem; font-weight: 700; text-decoration: none;
}
.dash-queue-lede {
  margin: 0; padding: 11px 16px 0; color: var(--ink-500); font-size: .78rem;
}
.dash-queue-list { padding: 6px 0 0; }
.dash-queue-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none;
}
.dash-queue-row:last-child { border-bottom: 0; }
.dash-queue-row:hover { background: #f1e9ff; }
.dash-queue-who { flex: 1 1 200px; min-width: 0; }
.dash-queue-who b { display: block; color: var(--blue-700); font-size: .84rem; }
.dash-queue-who span { display: block; color: var(--ink-500); font-size: .72rem; }
.dash-queue-agent { flex: 0 1 auto; color: var(--ink-500); font-size: .74rem; }
/* The age is the thing being judged, so it is the one that is allowed to
   shout — and only once it has been waiting long enough to be worth it. */
.dash-queue-aged {
  flex: none; border-radius: 999px; background: var(--surface-muted);
  border: 1px solid var(--line); padding: 3px 10px;
  color: var(--ink-500); font-size: .7rem; font-weight: 700;
}
.dash-queue-aged.is-old {
  background: var(--gold-100); border-color: #ead6a8; color: var(--gold-600);
}
.dash-queue-go {
  flex: none; border-radius: 999px; background: #f1e9ff; padding: 3px 10px;
  color: #6b34cd; font-size: .68rem; font-weight: 700;
}
@media (max-width: 560px) {
  .dash-queue-all { flex: 1 0 100%; text-align: center; }
}
.dash-queue-more {
  margin: 0; padding: 11px 16px; border-top: 1px solid var(--line);
  background: var(--surface-muted); color: var(--ink-500); font-size: .76rem;
}

/* ---- commissions settings ------------------------------------------------ */
/* SEVEN COLUMNS OF RATES SHOULD NOT WIDEN THE PAGE. The rep terms table and
   the retired list are wide by nature — a name, four figures, two ticks — so
   they are given a floor and scroll inside their own box. Without the floor the
   cells squash instead: the width ladder measured this page at 595px on a
   375px screen, because `.scroll` was borrowed from a different stylesheet and
   has never existed here. The class is `.scroller`, and a wide table needs a
   min-width to have anything to scroll. */
.cm-table { min-width: 720px; }
.cm-table input[type="text"], .cm-table input:not([type]) { width: 5.5rem; }
.cm-table td { white-space: nowrap; }

/* ---- a long dropdown you type into ----------------------------------------
   public/find-in-select.js. The <select> stays where it is and looks as it
   always did; pressing it lays a text box over its own box and opens this
   list on whichever side of it has room. Fixed, so a card or a table that
   clips its overflow cannot cut the list short. The text box is styled from
   the script, from the select it covers, so it lines up with whatever the
   page made of that select. */
.combo-pop { position: fixed; z-index: 1000; display: block; margin: 0; padding: 0; }
/* The box over the select. It lands inside every kind of field on the desk,
   and their own input rules — .field input, .edit-field.edit-needed input,
   .cw-grid .field input:focus — would restyle it into whatever field it
   happened to be in; it is always the same focused box, so these win. The
   script sets only what it measures off the select: font, left padding and
   corner radius. */
.combo-pop > .combo-input {
  position: absolute !important; left: 0 !important; top: 0 !important;
  width: 100% !important; height: 100% !important; margin: 0 !important;
  min-width: 0 !important; max-width: none !important;
  min-height: 0 !important; max-height: none !important; box-sizing: border-box !important;
  padding-top: 0 !important; padding-right: 32px !important; padding-bottom: 0 !important;
  border: 1px solid var(--blue) !important; background: #fff !important;
  box-shadow: 0 0 0 3px rgba(11, 120, 234, .16) !important; outline: none !important;
  color: var(--text) !important; line-height: normal !important; letter-spacing: normal !important;
  text-transform: none !important; text-align: left !important;
  -webkit-appearance: none !important; appearance: none !important;
  opacity: 1 !important; visibility: visible !important;
}
.combo-drop {
  position: absolute; left: 0; top: calc(100% + 4px);
  min-width: 100%; width: max-content; max-width: min(30rem, calc(100vw - 16px));
  border: 1px solid var(--card-line); border-radius: 10px; background: var(--card);
  box-shadow: 0 16px 36px rgba(28, 58, 83, .18); overflow: hidden;
  text-align: left; text-transform: none; letter-spacing: normal; font-weight: 400;
  white-space: normal;
}
.combo-drop.is-up { top: auto; bottom: calc(100% + 4px); }
.combo-list {
  position: relative; max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px;
}
.combo-option {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 7px;
  color: var(--text); font-size: 14px; line-height: 1.35; cursor: pointer;
  white-space: normal; overflow-wrap: anywhere;
}
.combo-option.is-active { background: var(--blue-2); color: var(--navy); }
.combo-option.is-chosen { font-weight: 700; }
.combo-option.is-chosen::after {
  content: "\2713"; margin-left: auto; padding-left: 8px; color: var(--blue); font-weight: 800;
}
.combo-option.is-way-out { color: var(--muted); }
.combo-option.is-kept { color: var(--muted); }
.combo-option[aria-disabled="true"] { color: var(--muted); opacity: .55; cursor: not-allowed; }
.combo-option mark { background: none; color: inherit; font-weight: 800;
  text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 2px; }
.combo-group-label {
  padding: 9px 10px 4px; color: var(--muted); font-size: 11px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.combo-none { padding: 10px 14px; border-top: 1px solid var(--card-line);
  color: var(--muted); font-size: 13px; }
.combo-said { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
/* A phone: rows a finger can hit, at the size iOS reads without zooming. */
@media (max-width: 760px), (pointer: coarse) {
  .combo-option { padding: 11px 12px; font-size: 16px; }
  .combo-group-label { font-size: 12px; }
}

/* ---- choosing several to approve ------------------------------------------
   The tick column is on every row, drawn empty where there is nothing to
   tick, so addresses line up whichever tab is showing — a column that comes
   and goes moves every row sideways when somebody changes tab. */
.pq-tick { display: flex; align-items: center; justify-content: center; width: 20px; }
.pq-tick input { width: 17px; height: 17px; accent-color: var(--navy-800); cursor: pointer; }
.pq-bulk {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted);
}
.pq-bulk-all { display: flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 700; }
.pq-bulk-all input { width: 17px; height: 17px; accent-color: var(--navy-800); }
.pq-bulk-n { margin-right: auto; color: var(--ink-500); font-size: .78rem; }
.pq-bulk .button[disabled] { opacity: .45; cursor: not-allowed; }

/* ── The home office package, on the office closing form ────────────────────
   A checklist somebody works down: each line on file or missing, with why and
   where to go. Green for on file, red for missing, and the count beside the
   heading so "three of five" is read before the list is. */
.hp-count { align-self: start; white-space: nowrap; border-radius: 999px; padding: 4px 12px;
  font-size: .78rem; font-weight: 700; background: var(--red-100); color: var(--red-700); }
.hp-count.is-ready { background: var(--green-100); color: var(--green-700); }
.hp-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.hp-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.hp-item.is-ready { background: var(--surface-muted); }
.hp-mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: .85rem; }
.hp-item.is-ready .hp-mark { background: var(--green-100); color: var(--green-700); }
.hp-item.is-missing .hp-mark { background: var(--red-100); color: var(--red-700); }
.hp-item b { font-weight: 700; }
.hp-state { margin-left: 8px; font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-500); }
.hp-item.is-missing .hp-state { color: var(--red-700); }
.hp-item p { margin: 3px 0 0; color: var(--ink-700); font-size: .86rem; }
.hp-item a { display: inline-block; margin-top: 4px; font-size: .84rem; font-weight: 600; }
.hp-item .hp-note { color: var(--ink-500); font-size: .78rem; }
.hp-sub { margin: 18px 0 0; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-500); }
.hp-send { margin-top: 16px; border-radius: 10px; padding: 12px 14px; border: 1px solid var(--line);
  background: var(--red-100); color: var(--red-700); }
.hp-send.is-ready { background: var(--green-100); color: var(--green-700); }
.hp-send span { display: block; margin-top: 4px; color: var(--ink-700); font-size: .84rem; }
/* The optional Down Payment Receipt: dashed, and neither green nor red — it is
   not on the checklist, so it is never the colour of a missing document. */
.hp-item.is-optional { border-style: dashed; }
.hp-item.is-optional .hp-mark { background: var(--surface-muted); color: var(--ink-500); }
.hp-receipts { list-style: none; margin: 6px 0 0; padding: 0; font-size: .84rem; }
.hp-receipts li { margin-top: 2px; }
.hp-receipts .secondary { color: var(--ink-500); }
.hp-receipts a { margin: 0 0 0 6px; }
.hp-item .hp-upload { margin-top: 8px; }

/* ── Settings → Home Office ────────────────────────────────────────────────
   Five cards, each its own form. An office is a block inside the first, and
   the fieldset around each card's fields is what goes read-only for an admin
   of another company — it draws nothing of its own. */
.ho-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.ho-office { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; }
.ho-office h3 { margin: 0 0 12px; font-size: 1rem; font-weight: 700; }
.ho-add > summary { cursor: pointer; font-weight: 700; }
.ho-add[open] > summary { margin-bottom: 12px; }
.ho-choice { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 14px; }
.ho-choice label { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.ho-foot { margin-top: 16px; display: flex; gap: 12px; align-items: center; }
/* Link Passwords (14 October 2026): a new password is shown once, so it is
   set apart and large enough to read down a phone. */
.ho-made { background: #f3f6f9; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 16px; margin: 0 0 14px; }
.ho-made p { margin: 0 0 6px; }
.ho-password { font: 600 1.5rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em;
  color: var(--ink-900); user-select: all; }
#ho-passwords form { margin: 0; }
/* The approval email: one column per company, each its own form. */
.ho-approval-twice { margin: 0 0 14px; }
.ho-approval-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ho-approval-co { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px;
  align-content: start; min-width: 0; }
.ho-approval-co.is-off { background: var(--surface-muted); }
.ho-approval-co h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.ho-approval-co .ho-choice { margin: 0; }
.ho-approval-co .ho-set { display: grid; gap: 12px; }
.ho-approval-co .ho-set .field { margin: 0; }
.ho-approval-co .ho-foot { margin-top: 4px; flex-wrap: wrap; }
.ho-approval-co textarea { width: 100%; }

/* Closings → Settings: the two tabs over Home Office and Documents
   (partials/closings-settings-tabs.ejs), the three email switches, and the
   preview each one opens — the email in a sandboxed frame inside a .peek. */
.hs-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid var(--line); }
.hs-tab { display: grid; gap: 1px; padding: 10px 16px 11px; margin-bottom: -1px;
  border-bottom: 3px solid transparent; color: var(--ink-700); font-weight: 700; text-decoration: none; }
.hs-tab span { font-size: .76rem; font-weight: 500; color: var(--muted); }
.hs-tab:hover { color: var(--ink-900); background: var(--surface-muted); }
.hs-tab.is-active { color: var(--blue); border-bottom-color: var(--blue); }
.hs-lede { margin: 0 0 18px; color: var(--ink-700); max-width: 78ch; }
.hs-mails { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.hs-mail { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px;
  align-content: start; }
.hs-mail.is-off { background: var(--surface-muted); }
.hs-mail-head { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.hs-mail h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.hs-mail p { margin: 0; font-size: .86rem; color: var(--ink-700); }
.hs-mail .hs-when-off { font-size: .8rem; color: var(--ink-500); }
.hs-mail .ho-choice { margin: 0; }
.hs-previews { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-peek { width: min(760px, 94vw); }
.hs-peek-head { padding: 18px 22px 12px; border-bottom: 1px solid var(--line); }
.hs-peek-head h2 { margin: 0 40px 10px 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500;
  font-size: 22px; color: #12243a; }
.hs-peek-head .tag { vertical-align: middle; font-family: Inter, Arial, sans-serif; }
.hs-peek-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0;
  font-size: .86rem; }
.hs-peek-facts dt { color: var(--ink-500); font-weight: 600; }
.hs-peek-facts dd { margin: 0; overflow-wrap: anywhere; }
.hs-peek-note { margin: 10px 0 0; font-size: .8rem; color: var(--ink-500); }
.hs-frame { display: block; width: 100%; height: min(62vh, 640px); border: 0; background: #f4f6f8; }
@media (max-width: 640px) {
  .hs-peek-facts { grid-template-columns: minmax(0, 1fr); }
}

/* ── Send To Home Office, at the foot of the package ───────────────────────
   Before: the ready line, the button and the confirm panel it opens (drawn
   by home-office-send.js). After: the Sent To The Home Office card. A test
   send is edged in the testing amber so it is never mistaken for a real one. */
.hp-send-area { margin-top: 16px; }
.hp-send-area > .hp-send { margin-top: 0; }
.ho-send { margin-top: 12px; display: grid; gap: 10px; justify-items: start; }
/* The button, and Turn On beside it when the home office email is switched off. */
.ho-press { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ho-testing { margin: 0; display: flex; gap: 10px; align-items: baseline; font-size: .86rem;
  color: var(--ink-700); }
.ho-why { margin: 0; font-size: .84rem; color: var(--ink-500); }
.ho-confirm { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  background: var(--surface); }
.ho-part { margin-top: 12px; }
.ho-part:first-child { margin-top: 0; }
.ho-part .hp-sub { margin-top: 0; }
.ho-part.is-bad { border-left: 3px solid var(--red-700); padding-left: 10px; }
.ho-part.is-warn { border-left: 3px solid var(--gold-600); padding-left: 10px; }
.ho-lines { margin: 6px 0 0; padding-left: 18px; font-size: .88rem; display: grid; gap: 4px; }
.ho-lines .change, .ho-changes .change { color: var(--ink-700); font-size: .84rem; }
.ho-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ho-sent { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.ho-sent.is-test { border-left: 4px solid var(--gold-600); }
.ho-sent-head { display: flex; gap: 10px; align-items: center; }
.ho-sent-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.ho-when { margin: 6px 0 0; font-size: .9rem; }
.ho-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 12px 0 0;
  font-size: .88rem; }
.ho-facts dt { color: var(--ink-500); font-weight: 600; }
.ho-facts dd { margin: 0; overflow-wrap: anywhere; }
.ho-facts .secondary { display: block; color: var(--ink-500); font-size: .82rem; }
.ho-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ho-files .secondary { display: inline; }
.ho-changes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ho-changes li { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: .88rem; }
.ho-changes li p { margin: 2px 0 0; color: var(--ink-700); font-size: .84rem; }
.ho-changes li.is-bad { border-color: var(--red-700); background: var(--red-100); }
.ho-changes li.is-bad .hp-state { color: var(--red-700); }
.ho-changes li.is-ok .hp-state { color: var(--green-700); }
@media (max-width: 640px) {
  .ho-facts { grid-template-columns: minmax(0, 1fr); }
}

/* ── Tell The Grass And Repair Companies, under the Sent card ──────────────
   The companies Send kept, a tick each, and the message as the first ticked
   one will read it (views/partials/home-office-contractors.ejs). */
.hc { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.hc > .hp-sub { margin-top: 0; }
.hc-lede { margin: 6px 0 10px; font-size: .88rem; color: var(--ink-700); }
.hc .ho-testing { margin-bottom: 10px; }
.hc-table td:first-child { width: 28px; }
.hc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-told { margin-top: 4px; font-size: .8rem; color: var(--green-700); }
.hc-told.is-bad { color: var(--red-700); }
.hc .ho-part { margin-top: 12px; }
.hc-message { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  background: var(--surface-muted); }
.hc-for { margin: 0; font-size: .84rem; font-weight: 700; }
.hc-body { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .88rem; }
.hc-how { margin: 8px 0 0; font-size: .8rem; color: var(--ink-500); }

/* ---- Dropping files ------------------------------------------------------
   While files are dragged over the window, drop-guard.js puts
   `is-dragging-files` on <body> and every place that takes one is outlined —
   so somebody can see where to aim before they let go, rather than finding
   out by the file opening in a tab. A file let go of anywhere else does
   nothing. `is-over` is the zone the pointer is in. */
body.is-dragging-files [data-drop] { outline: 2px dashed var(--blue-700); outline-offset: 3px; }
body.is-dragging-files [data-drop].is-over { outline-style: solid; background-color: var(--blue-100); }
/* A drop zone is a whole card or fieldset, and never a strip: big enough to
   hit with a file dragged from another window. */
.drop-zone { min-height: 140px; }

/* ---- Down Payment In Parts, on the file's Review and approval ----------
   views/partials/down-payment-plan.ejs. Its own card on the step, so the
   admin reads it as part of the deal they are approving. */
.dp-plan .sec-head .tag { flex-shrink: 0; }
.dp-plan-note { color: var(--muted); margin: 4px 0 0; }
.dp-plan-said { margin: 6px 0 10px; }
.dp-plan-table { width: 100%; }
.dp-plan-table input { width: 100%; min-width: 120px; }
.dp-plan-sum { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; font-weight: 600;
  background: #e7f5ee; color: #15784f; font-variant-numeric: tabular-nums; }
.dp-plan-sum:empty { display: none; }
.dp-plan-sum.is-bad { background: #fdf3dd; color: #8a5a06; }
.dp-plan-foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.dp-plan-state { margin: 10px 0 0; font-size: .88rem; color: #15784f; }
.dp-plan-state.is-bad { color: #b2373c; }
.dp-plan [data-dp-add] { margin-top: 10px; }

/* ---- The agent's CIS: Review the Deal Together -------------------------
   views/cis-wizard.ejs and views/partials/cis/. Four sections gone over with
   the customer, a fifth that sends it, and the payment summary beside them. */
.cis-title .cis-eyebrow { margin: 0 0 2px; color: var(--muted); font-size: 11px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase; }
.cis-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 18px; }
.cis-pills .tag { min-width: 0; }
.cis-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.cis-main { min-width: 0; }
.cis-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.cis-aside { position: sticky; top: calc(var(--topbar-h, 60px) + 14px); display: grid; gap: 16px; }
.cis-sec { scroll-margin-top: calc(var(--topbar-h, 60px) + 14px); }
.cis-sec-title { display: flex; gap: 12px; align-items: flex-start; }
.cis-n { flex-shrink: 0; width: 32px; height: 32px; margin-top: 2px; border-radius: 9px; display: grid;
  place-items: center; background: var(--soft); border: 1px solid var(--card-line); color: var(--navy);
  font-weight: 900; font-size: 13px; }
.cis-n.is-done { background: #e4f4eb; border-color: #c9e6d6; color: #15784f; }
.cis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.cis-grid.cis-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cis-grid .field { margin-bottom: 14px; min-width: 0; }
.cis-wide { grid-column: 1 / -1; }
.cis-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.cis-buyer { border-top: 1px solid var(--card-line); padding-top: 14px; margin-top: 4px; }
.cis-buyer:first-of-type { border-top: 0; padding-top: 0; }
.cis-buyer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cis-buyer-head h3, .cis-mailing h3, .cis-h3 { margin: 0; font-size: 15px; color: #12243a; }
.cis-h3 { margin: 18px 0 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cis-mailing { border-top: 1px solid var(--card-line); margin-top: 6px; padding-top: 16px; }
.cis-unit { color: var(--muted); font-weight: 600; }
.cis-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 5px; background: #e4f4eb;
  color: #15784f; font-size: 10.5px; font-weight: 800; vertical-align: 1px; }
.cis-tag.is-changed { background: #fdf3dd; color: #7a530a; }
.cis-tag[hidden] { display: none; }
.cis-ssn { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px;
  border: 1px solid #ccd8e1; border-radius: 9px; background: #f2f5f8; padding: 4px 6px 4px 13px; }
.cis-ssn-mask { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .5px; }
.cis-filled { display: flex; align-items: center; min-height: 42px; border: 1px solid #dfe7ee; border-radius: 9px;
  background: #f2f5f8; padding: 10px 13px; font-weight: 700; }
.cis-property { margin: 0 0 4px; font-size: 16px; }
.cis-repairs { margin-top: 14px; }
.cis-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cis-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cis-option { display: grid; gap: 4px; align-content: start; border: 1px solid #ccd8e1; border-radius: 10px;
  padding: 12px 14px; cursor: pointer; background: #fff; }
.cis-option input { margin: 0 0 2px; width: 18px; height: 18px; accent-color: var(--blue); }
.cis-option.is-on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); background: #f3f8fe; }
.cis-option .note { color: var(--muted); font-size: 12px; line-height: 1.45; }
.cis-price { font-size: 18px; font-weight: 900; }
.cis-money-grid { margin-top: 14px; }
.cis-block { border-top: 1px solid var(--card-line); margin-top: 16px; padding-top: 2px; }
.cis-calcs { margin-top: 8px; border: 1px solid var(--card-line); border-radius: 10px; background: var(--soft);
  padding: 2px 14px; }
.cis-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 13.5px;
  border-bottom: 1px solid #e6edf2; }
.cis-row:last-child { border-bottom: 0; }
.cis-row span { color: var(--muted); }
.cis-row b { text-align: right; font-weight: 700; }
.cis-row.is-total, .cis-row.is-total span { font-weight: 900; color: #12243a; }
.cis-tick { display: flex; gap: 10px; align-items: flex-start; margin: 16px -20px -20px; padding: 14px 20px;
  border-top: 1px solid var(--card-line); background: var(--soft); border-radius: 0 0 var(--radius) var(--radius);
  font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cis-tick input { width: 19px; height: 19px; margin: 1px 0 0; flex-shrink: 0; accent-color: #15784f; }
.cis-tick.is-on { background: #eef8f2; color: #15784f; }
/* Send pressed with this section not gone over (must-tick.js): the strip stops
   at its own edge so the words beneath it are not pulled up under it. */
.cis-tick.must-tick-missing { margin-bottom: 0; border-radius: 0; }
.cis-tick + .must-tick-said { margin: 10px 0 0; }
.cis-plan-table input { min-width: 120px; }
.cis-plan-sum { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #e7f5ee; color: #15784f;
  font-weight: 700; }
.cis-plan-sum.is-bad { background: #fdf3dd; color: #7a530a; }
.cis-plan-foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.cis-plan-approved { margin: 8px 0 12px; }
.cis-ask .cis-ask-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.cis-glance { border: 1px solid var(--card-line); border-radius: 10px; background: var(--soft); padding: 2px 14px; }
.cis-changes { list-style: none; margin: 10px 0 0; padding: 0; }
.cis-changes li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px; padding: 8px 0;
  border-bottom: 1px solid #e6edf2; font-size: 13.5px; }
.cis-changes li:last-child { border-bottom: 0; }
.cis-was { color: var(--muted); text-decoration: line-through; margin-right: 8px; }
.cis-note { margin-top: 12px; }
.cis-todo ul { margin: 6px 0 0; padding-left: 18px; }
.cis-todo li { margin: 3px 0; }
.cis-todo a { color: inherit; }
.cis-summary { background: var(--navy); color: #fff; border-color: var(--navy); padding: 16px 18px; }
.cis-summary-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid #385267; }
.cis-summary-head h3 { margin: 0; font-size: 15px; }
.cis-summary-head span, .cis-summary .cis-kicker, .cis-summary-note { color: #c3d4e0; }
.cis-kicker { margin: 14px 0 0; font-size: 10.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.cis-big { margin: 4px 0 6px; font-size: 32px; font-weight: 900; letter-spacing: -.8px; }
.cis-big-sm { font-size: 26px; }
.cis-summary .cis-row { border-color: #385267; }
.cis-summary .cis-row span { color: #c3d4e0; }
.cis-summary .cis-row.is-total, .cis-summary .cis-row.is-total span { color: #fff; }
.cis-summary-split { border-top: 1px solid #385267; margin-top: 12px; }
.cis-summary-note { margin: 12px 0 0; font-size: 12px; line-height: 1.45; }
.cis-gone { padding: 16px 18px; }
.cis-gone-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cis-gone-head h3 { margin: 0; font-size: 15px; }
.cis-gone-head .tag { min-width: 0; }
.cis-progress { height: 6px; border-radius: 9px; background: #e9eef3; overflow: hidden; margin: 12px 0 6px; }
.cis-progress i { display: block; height: 100%; background: #15784f; }
.cis-gone-item { display: flex; gap: 9px; align-items: center; padding: 7px 0; color: var(--text);
  text-decoration: none; font-size: 13.5px; }
.cis-dot { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--card-line); color: var(--muted); font-size: 11px; font-weight: 800; }
.cis-dot.is-done { background: #e4f4eb; border-color: #e4f4eb; color: #15784f; }
.cis-gone-note { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; }
.cis-send-open { width: 100%; margin-top: 12px; }
.cis-saved { position: sticky; bottom: 10px; width: max-content; max-width: 100%; margin: 14px 0 0;
  padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--card-line);
  color: var(--muted); font-size: 12.5px; box-shadow: var(--card-shadow); }
.cis-saved.is-busy { color: #7a530a; }
.cis-saved.is-ok { color: #15784f; }
.cis-saved.is-bad { color: #a32020; font-weight: 700; }
.cis-fields input.is-bad, .cis-fields select.is-bad, .cis-fields textarea.is-bad { border-color: #c0392b; }
.cis-dialog { max-width: 560px; width: calc(100% - 28px); border: 0; border-radius: var(--radius);
  padding: 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.cis-dialog::backdrop { background: rgba(15, 45, 70, .45); }
.cis-dialog h2 { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.cis-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
@media (max-width: 1080px) {
  .cis-layout { grid-template-columns: minmax(0, 1fr); }
  .cis-aside { position: static; }
}
@media (max-width: 640px) {
  .cis-grid, .cis-grid.cis-three, .cis-types { grid-template-columns: minmax(0, 1fr); }
  .cis-changes li { grid-template-columns: minmax(0, 1fr); }
  .cis-tick { margin: 16px -20px -20px; }
  .cis-dialog-foot .btn { flex: 1; }
}
.cis-grid { align-items: start; }
.cis-sec > .hint, .cis-sec > p.note, .cis-block .hint, .cis-block > .note, .cis-mailing .hint,
.cis-sec [data-fragment] > .hint, .cis-block [data-fragment] .hint {
  color: var(--muted); font-size: 12.5px; line-height: 1.45; margin: 6px 0 10px; }
.cis-summary-head span { font-size: 11.5px; white-space: nowrap; }
/* On a phone each later payment is a small card of its own boxes, never a
   table wider than the screen. */
@media (max-width: 640px) {
  .cis-plan-table, .cis-plan-table tbody, .dp-plan-table, .dp-plan-table tbody { display: block; width: 100%; }
  .cis-plan-table thead, .dp-plan-table thead { display: none; }
  .cis-plan-table tr, .dp-plan-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--card-line); }
  .cis-plan-table td, .dp-plan-table td { display: block; padding: 0 !important; border: 0 !important; }
  .cis-plan-table td:first-child, .dp-plan-table td:first-child { grid-column: 1 / -1; }
  .cis-plan-table input, .dp-plan-table input { min-width: 0; width: 100%; }
}

/* ---- Times On The Market (property page) and History To Check ----------- */
/* The box on the property page: each time on the market, newest first, and
   anything the history could not settle, with the answer beside it. */
.tom .tom-flag { background: var(--gold-100); color: var(--gold-600); font-size: 11px; font-weight: 900;
  border-radius: 999px; padding: 4px 11px; }
.tom h3 { margin: 16px 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 500;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tom .tom-approx, .tom .tom-flag { display: inline-flex; align-items: center; }
.tom .tom-approx { background: var(--soft); color: var(--muted); border: 1px solid var(--card-line);
  border-radius: 999px; padding: 2px 10px; font-family: inherit; font-size: 11px; font-weight: 800; }
.tom-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--blue-2);
  color: var(--text); font-size: 13.5px; }
.tom-note.warn { background: var(--gold-100); }
.tom-checks { margin: 4px 0 6px; padding: 4px 16px 10px; border-radius: 12px; background: var(--gold-100);
  border: 1px solid var(--line); }
.tom-check { padding: 10px 0; border-bottom: 1px solid var(--line); }
.tom-check:last-of-type { border-bottom: 0; }
.tom-check-title { margin: 0 0 3px; font-weight: 800; color: var(--text); }
.tom-check-why { margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.45; max-width: 80ch; }
.tom-answer { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.tom-answer details summary { cursor: pointer; color: var(--blue); font-weight: 800; font-size: 13px;
  line-height: 34px; }
.tom-fix { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px;
  align-items: end; margin-top: 8px; }
.tom-time { border-top: 1px solid var(--card-line); padding-top: 2px; }
.tom-facts { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.tom-facts li { display: grid; grid-template-columns: 140px auto 1fr; gap: 10px; align-items: baseline;
  font-size: 14px; }
.tom-facts span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; }
.tom-facts b { font-weight: 800; }
.tom-facts em { font-style: normal; color: var(--muted); font-size: 13px; }
.tom-facts .tom-total b { color: var(--blue); font-size: 16px; }
.tom-facts .num, .tom .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tom-spans summary { cursor: pointer; color: var(--blue); font-weight: 800; font-size: 13px; margin: 2px 0 8px; }
.tom-spans tr.tom-market td:nth-child(3) { color: var(--green-700); font-weight: 800; }
.tom-spans tr.tom-repair td:nth-child(3), .tom-spans tr.tom-pause td:nth-child(3),
.tom-spans tr.tom-rescinded td:nth-child(3) { color: var(--gold-600); font-weight: 800; }
.tom-settled { margin-top: 12px; }
@media (max-width: 760px) {
  .tom-facts li { grid-template-columns: 1fr; gap: 1px; }
}
/* The list of them, under Reports. */
.rep-check { display: grid; gap: 3px; margin-bottom: 14px; text-decoration: none; color: var(--text); }
.rep-check b { color: var(--blue); }
.rep-check span { color: var(--muted); font-size: 13px; }
.rep-check:hover b { text-decoration: underline; }
.htc-stats { grid-template-columns: repeat(3, 1fr); }
.htc-table td { vertical-align: top; }
.htc-link { display: block; color: var(--text); text-decoration: none; }
.htc-link:hover { color: var(--blue); text-decoration: underline; }
.htc-flag { display: grid; gap: 2px; margin-bottom: 8px; max-width: 70ch; }
.htc-flag:last-child { margin-bottom: 0; }
@media (max-width: 1100px) { .htc-stats { grid-template-columns: 1fr; } }

/* ---- Settings → Data → Bring Allegiance Into The Desk -------------------- */
.am-state p { margin: 4px 0 12px; max-width: 78ch; }
.am-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.am-actions form { margin: 0; }
.am-list { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.am-list .secondary { color: var(--muted); font-size: 12px; }
.am-cols { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 24px; }
/* Step 9's Mark As Sold (partials/mark-sold.ejs): each record and what changes on it. */
.ms-list { margin: 10px 0; padding-left: 18px; display: grid; gap: 8px; }
.ms-list li > b { display: block; }
.ms-list .ms-change { display: block; font-size: 13px; }
.ms-list .secondary { color: var(--muted); font-size: 12.5px; }
.ms-list li.is-bad > b { color: var(--bad, #b2373c); }
.ms-contract { display: grid; gap: 6px; margin: 4px 0 14px; padding: 12px 14px; border-radius: 10px;
  border: 1px dashed #e0b95f; background: #fffdf6; }
.ms-contract.is-ready { border: 1px solid var(--card-line); background: transparent; }
.ms-contract .secondary { color: var(--muted); font-size: 12.5px; }
.ms-upload { justify-self: start; cursor: pointer; }
/* The Three Emails, a row per company (settings-home-office.ejs). */
.hs-co { display: inline-block; min-width: 92px; font-weight: 700; }
.ho-choice.is-off { color: var(--muted); }
.hs-co-note { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
/* Allegiance's archive: a search row, and one record's fields as label and value. */
.am-search { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.am-search input[type="search"] { flex: 1 1 260px; min-width: 0; }
.am-fields { display: grid; gap: 0; margin: 0; }
.am-field { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 14px;
  padding: 9px 0; border-top: 1px solid var(--card-line); }
.am-field:first-child { border-top: 0; }
.am-field dt { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.am-field dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.am-text { white-space: pre-wrap; }
.am-files { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.am-files .secondary { color: var(--muted); font-size: 12px; margin-left: 6px; }
@media (max-width: 640px) { .am-field { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
/* A desk-kept home's Plat & Legal Description box (partials/legal-papers.ejs). */
.lp-list { margin: 6px 0 10px; padding-left: 18px; display: grid; gap: 6px; }
.lp-list a { overflow-wrap: anywhere; }
.lp-list .secondary { display: block; color: var(--muted); font-size: 12px; }
/* Allegiance's closing and title papers on the home's page (partials/home-papers.ejs):
   the list above, under a small grey label per Airtable field. */
.hp-group { margin: 12px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.hp-box .lp-list li .btn { margin-top: 4px; justify-self: start; }
.hp-add { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line, #e5e7eb); }
.hp-add .lp-add { justify-self: start; }
.lp-add { cursor: pointer; }
/* Link A Home on a desk-kept application's Property box (partials/link-home.ejs). */
.lh-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.lh-pick select { flex: 1 1 260px; min-width: 0; }
.lh-pick .edit-state { flex-basis: 100%; margin: 0; }

/* ===========================================================================
   THE HELP CENTER — /help and /help/:tab (12 October 2026), and Need Help? at
   the top of every page, which opens the help for that page over it. Scoped to
   .help-page, .page-help and .nav-help; nothing here touches another page.
   ======================================================================== */
.page-help-row { display: flex; justify-content: flex-end; margin: -14px 0 6px; }
.page-help {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; flex: 0 0 auto;
  border: 1px solid var(--card-line); border-radius: 999px; background: #fff; padding: 0 13px 0 5px;
  color: var(--navy); font-size: 13px; font-weight: 800; text-decoration: none;
  box-shadow: 0 2px 8px rgba(28, 58, 83, .06);
}
.page-help:hover { border-color: var(--blue); color: var(--blue); }
.page-help:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.page-help-mark {
  display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%;
  background: var(--navy); color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 14px;
}
.nav-help { margin-bottom: 8px; }

.help-page { max-width: 1040px; }
.help-search label {
  display: block; margin: 18px 0 10px; font-family: Georgia, "Times New Roman", serif;
  font-size: 22px; color: #12243a;
}
.help-search-row { display: flex; flex-wrap: wrap; gap: 10px; }
.help-search-row input {
  flex: 1 1 260px; min-width: 0; height: 44px; border: 1px solid var(--card-line); border-radius: 10px;
  padding: 0 14px; color: var(--text); font-size: 15px; background: #fff;
}
.help-search-row input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.help-results { margin-top: 16px; }
.help-soon, .help-none {
  margin: 0 0 10px; border-radius: 10px; background: var(--soft); padding: 10px 14px;
  color: #46566b; font-size: 14px; line-height: 1.5;
}
.help-hits { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.help-hits + .help-soon { margin: 10px 0 0; }
.help-hit {
  display: grid; gap: 3px; border: 1px solid var(--card-line); border-radius: 12px;
  background: #fff; padding: 12px 14px; color: var(--text); text-decoration: none;
}
.help-hit:hover { border-color: var(--blue); background: var(--blue-2); }
.help-hit-title { font-weight: 800; }
.help-hit-where { color: var(--muted); font-size: 12.5px; }
.help-hit-text { color: #46566b; font-size: 13.5px; line-height: 1.45; }

.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.help-card {
  display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--card-line); border-radius: 12px;
  background: #fff; padding: 16px; color: var(--text); text-decoration: none;
}
a.help-card:hover { border-color: var(--blue); }
.help-card-title { font-family: Georgia, "Times New Roman", serif; font-size: 19px; color: #12243a; }
.help-card-what { flex: 1; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.help-card-go { color: var(--blue); font-size: 13.5px; font-weight: 800; }
.help-card.is-soon { background: var(--soft); }
.help-card.is-soon .help-card-title { color: #5b6b80; }
.help-tag {
  display: inline-block; align-self: flex-start; border-radius: 999px; background: #eef2f5;
  padding: 3px 9px; color: #5b6b80; font-family: inherit; font-size: 11.5px; font-weight: 800;
  vertical-align: middle; white-space: nowrap;
}
.help-tag.is-admin { background: #efe9fc; color: #5e37c4; }

.help-back { display: inline-block; margin-bottom: 8px; color: var(--blue); font-size: 14px;
  font-weight: 700; text-decoration: none; }
.help-lede { max-width: 70ch; margin: 0 0 14px; color: #3f4e61; font-size: 16px; line-height: 1.55; }
.help-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.help-toc a {
  border: 1px solid var(--card-line); border-radius: 999px; background: #fff; padding: 6px 12px;
  color: var(--text); font-size: 13px; font-weight: 700; text-decoration: none;
}
.help-toc a:hover { border-color: var(--blue); color: var(--blue); }
.help-defs { display: grid; margin: 0; }
.help-defs > div {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px;
  border-top: 1px solid var(--card-line); padding: 12px 8px;
}
.help-defs > div:first-child { border-top: 0; }
.help-defs dt { font-weight: 800; }
.help-defs dd { margin: 0; color: #3f4e61; line-height: 1.55; }
.help-howtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.help-howto {
  display: flex; min-width: 0; flex-direction: column; gap: 10px;
  border: 1px solid var(--card-line); border-radius: 12px; padding: 16px;
}
.help-howto-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.help-howto h3 { margin: 0; font-size: 15.5px; }
.help-howto ol { display: grid; gap: 6px; margin: 0; padding-left: 20px; line-height: 1.5; }
.help-after { margin: 0; border-top: 1px dashed var(--card-line); padding-top: 10px;
  color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.help-howto:target, .help-defs > div:target,
.help-howto.is-found, .help-defs > div.is-found { background: var(--blue-2); border-radius: 10px; }
.help-sec.is-found { box-shadow: 0 0 0 2px var(--blue), var(--card-shadow); }
.help-ask-tab .help-search label { margin-top: 14px; font-size: 19px; }
/* Over a page, the search stays at the top while the help scrolls under it:
   Need Help? opens at the part about the page, and the box must not be
   scrolled away to get there (13 October 2026). public/help.js lands a part
   just under it. */
#dash-panel .help-ask-tab {
  position: sticky; top: -18px; z-index: 3; margin: 0 -18px 18px; border-radius: 0;
  border-bottom: 1px solid var(--card-line); padding: 0 18px 14px;
  box-shadow: 0 6px 14px rgba(28, 58, 83, .08);
}
#dash-panel .help-ask-tab .help-search label { margin: 12px 0 8px; font-size: 17px; }
#dash-panel .help-ask-tab .help-search-row input { flex-basis: 160px; }
#dash-panel .help-ask-tab .help-results { max-height: 40vh; overflow-y: auto; }
#dash-panel .help-ask-tab .help-results:empty { margin-top: 0; }
@media (max-width: 820px) {
  #dash-panel .help-ask-tab { top: -12px; margin: 0 -12px 12px; padding: 0 12px 12px; }
}
/* TOUR THIS PAGE (13 October 2026): beside Need Help?, each part of the page
   lit up in turn with its help beside it. public/tour.js. */
.page-help-row { gap: 8px; }
button.page-tour { font-family: inherit; cursor: pointer; }
.page-tour-mark { background: var(--blue); font-family: inherit; font-size: 9px; padding-left: 2px; }
/* "?" BESIDE A BOX (13 October 2026): opens that part's help over the page.
   Put there by tour.js, from the same stops as the tour. The ring is small;
   the place a finger can press is not. */
.help-q {
  position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px;
  margin-left: 6px; border: 1px solid var(--card-line); border-radius: 50%; background: #fff;
  color: var(--muted); font: 800 11px/1 Inter, system-ui, sans-serif; letter-spacing: 0;
  text-decoration: none; text-transform: none; vertical-align: middle;
}
.help-q::before { content: "?"; }
.help-q::after { content: ""; position: absolute; inset: -9px; }
.help-q:hover, .help-q:focus-visible { border-color: var(--blue); color: var(--blue); }
.help-q:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tour-block { position: fixed; inset: 0; z-index: 1100; }
.tour-room { height: 55vh; }
.tour-dim { position: fixed; inset: 0; z-index: 1101; background: rgba(8, 20, 36, .55); pointer-events: none; }
.tour-spot {
  position: fixed; z-index: 1101; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--blue);
}
.tour-note {
  position: fixed; z-index: 1102; width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 24px);
  overflow-y: auto; border-radius: 14px; background: #fff; padding: 16px 18px 14px;
  box-shadow: 0 18px 44px rgba(8, 20, 36, .30);
}
.tour-count {
  margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.tour-note h3 {
  margin: 0 30px 8px 0; font-family: Georgia, "Times New Roman", serif; font-size: 20px;
  font-weight: 500; color: #12243a;
}
.tour-text { color: #3f4e61; font-size: 14px; line-height: 1.55; }
.tour-text p { margin: 0; }
.tour-text ol { display: grid; gap: 4px; margin: 0; padding-left: 20px; }
.tour-text ol + p { margin-top: 8px; color: var(--muted); font-size: 13.5px; }
.tour-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 14px; }
.tour-more { margin: 0 auto 0 0; font-size: 13.5px; }
.tour-more a { color: var(--blue); font-weight: 700; text-decoration: none; }
.tour-more a:hover { text-decoration: underline; }
.tour-x {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 1px solid var(--card-line);
  border-radius: 8px; background: #fff; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.tour-x:hover { color: var(--text); }
@media (max-width: 600px) {
  .tour-note { top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; max-height: 45vh; }
}
.help-press {
  display: inline-block; border-radius: 6px; background: var(--blue-2); padding: 0 7px;
  color: #0a5bb5; font-size: .92em; font-weight: 700; white-space: nowrap;
}
.help-yes { color: #15784f; font-weight: 800; }
.help-no { color: var(--muted); }
.help-foot { margin-top: 8px; color: var(--muted); font-size: 13px; }

@media (max-width: 760px) {
  .page-help-row { margin-top: -8px; }
  .help-defs > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* =========================================================================
   COLLECTIONS, TYLER'S LOOK (approved 14 October 2026 — his
   collections_full_step_process.html, mock-up v7). A run is a side checklist
   of seven steps, each opening on its own panel; tiles that count; tabs,
   search, sort and 15 a page on every list of customers. Everything here is
   prefixed cr- and its colours are its own, so no other page moves.
   ========================================================================= */
.cr { --cr-navy: #14263d; --cr-blue: #244c7b; --cr-ink: #1d2a39; --cr-muted: #64778c; --cr-line: #dce4ec;
  --cr-green: #147d59; --cr-red: #b34545; color: var(--cr-ink); }
.cr .cr-sub, .cr .sub { color: var(--cr-muted); font-size: 12px; }
.cr-pagehead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 6px 0 16px; }
.cr-eyebrow { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cr-blue); font-size: 11px; }
.cr-pagehead h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 34px; letter-spacing: -.01em; line-height: 1.15; margin: 4px 0 0; color: #12243a; }
.cr-pagehead p { margin: 7px 0 0; color: var(--cr-muted); max-width: 760px; }
.cr-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cr-metric { border-radius: 12px; background: #fff; border: 1px solid var(--cr-line); padding: 13px 15px; }
.cr-metric strong { font-size: 26px; display: block; line-height: 1.2; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.cr-metric span { font-size: 12px; color: var(--cr-muted); }
.cr-metric.is-bad strong { color: var(--cr-red); }
.cr-metric.is-good strong { color: var(--cr-green); }
.cr-warning { border: 1px solid #e9d1a8; border-left: 4px solid #c28b31; background: #fffbf5; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; margin-bottom: 16px; }
.cr-warning p { font-size: 12px; color: #786244; margin: 3px 0 0; }
.cr-lockbar { border: 1px solid #cfdcea; border-left: 4px solid var(--cr-navy); background: #f6f9fc; border-radius: 10px; padding: 13px 16px; margin-bottom: 16px; }
.cr-lockbar p { font-size: 12px; color: var(--cr-muted); margin: 3px 0 0; }
.cr-said { border-radius: 10px; padding: 12px 15px; margin-bottom: 16px; font-size: 13px; font-weight: 650; background: #e4f4ec; color: var(--cr-green); border: 1px solid #c4e6d4; }
.cr-said.is-bad { background: #fbe7e7; color: #a33d3d; border-color: #f0c8c8; }
.cr-layout { display: grid; grid-template-columns: 254px minmax(0, 1fr); gap: 19px; align-items: start; }
.cr-layout > *, .cr-stack > *, .cr-panel-body > * { min-width: 0; }
.cr-side { background: #fff; border: 1px solid var(--cr-line); border-radius: 14px; padding: 15px; position: sticky; top: 12px; }
.cr-side-title { font-size: 11px; color: var(--cr-muted); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 10px 8px; }
.cr-stepnav { display: flex; align-items: center; width: 100%; text-align: left; border-radius: 9px; padding: 11px 9px; color: #3e5268; gap: 10px; margin-bottom: 3px; text-decoration: none; }
.cr-stepnav:hover { background: #f3f7fb; }
.cr-stepnav.is-now { background: #eaf1f8; color: var(--cr-navy); }
.cr-stepnav .cr-num { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; background: #ecf1f6; color: #60758d; font-size: 12px; font-weight: 800; }
.cr-stepnav.is-now .cr-num { background: var(--cr-navy); color: #fff; }
.cr-stepnav.is-done .cr-num { background: #e6f5ed; color: var(--cr-green); }
.cr-stepnav b { font-weight: 700; display: block; font-size: 12px; }
.cr-stepnav small { display: block; font-size: 11px; color: var(--cr-muted); margin-top: 2px; }
.cr-side-help { border-top: 1px solid var(--cr-line); padding: 14px 8px 3px; margin-top: 12px; color: var(--cr-muted); font-size: 12px; }
.cr-side-help p { margin: 4px 0 0; }
.cr-panel { background: #fff; border: 1px solid var(--cr-line); border-radius: 14px; box-shadow: 0 5px 15px #182d4607; }
.cr-panel + .cr-panel { margin-top: 16px; }
.cr-panel-head { padding: 21px 24px; border-bottom: 1px solid var(--cr-line); display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.cr-panel-head h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 25px; margin: 0; color: #12243a; }
.cr-panel-head p { color: var(--cr-muted); font-size: 12.5px; margin: 5px 0 0; max-width: 720px; }
.cr-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--cr-blue); margin-bottom: 5px; }
.cr-panel-body { padding: 22px 24px; }
.cr-panel-foot { padding: 17px 24px; border-top: 1px solid var(--cr-line); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cr-stack { display: grid; gap: 14px; }
.cr-chip { font-size: 11px; font-weight: 750; border-radius: 7px; background: #e8f0f7; color: #2a4f79; padding: 4px 8px; display: inline-block; white-space: nowrap; }
.cr-chip.is-ok { color: var(--cr-green); background: #e4f4ec; }
.cr-chip.is-warn { color: #946115; background: #fff1d8; }
.cr-chip.is-bad { color: #a33d3d; background: #fbe7e7; }
/* Opened and Clicked on a letter email (16 October 2026): purple, apart from Waiting's blue. */
.cr-chip.is-seen { color: #5b3f99; background: #efe9fb; }
.cr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cr-mini { border: 1px solid var(--cr-line); border-radius: 12px; padding: 15px 16px; background: #fff; }
.cr-mini .cr-big { font-size: 23px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.cr-muted-box { border-radius: 10px; background: #f6f9fc; padding: 15px 17px; border: 1px solid #e8eef4; }
.cr-muted-box h3 { font-size: 14px; margin: 0; }
.cr-progress { height: 8px; background: #e6edf4; border-radius: 10px; overflow: hidden; margin-top: 9px; }
.cr-progress span { display: block; height: 100%; background: #5b83ad; transition: width .25s; }
.cr-count-now { font-weight: 800; font-variant-numeric: tabular-nums; }
.cr-seg { display: flex; background: #ebf1f7; border-radius: 10px; padding: 4px; gap: 4px; width: fit-content; max-width: 100%; flex-wrap: wrap; }
.cr-seg button { border: 0; border-radius: 7px; background: transparent; padding: 8px 13px; font-weight: 750; color: #52677e; cursor: pointer; }
.cr-seg button.is-on { background: #fff; color: var(--cr-navy); box-shadow: 0 1px 5px #152a4020; }
/* The two halves of Collections → Emails, as links (Tyler, 16 October 2026). */
.cr-seg a { border-radius: 7px; padding: 8px 13px; font-weight: 750; color: #52677e; text-decoration: none; }
.cr-seg a.is-on { background: #fff; color: var(--cr-navy); box-shadow: 0 1px 5px #152a4020; }
.em-views { margin: 0 0 14px; }
.nw-addr { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 2px 0; }
.nw-mail { overflow-wrap: anywhere; font-weight: 650; }
.nw-again { margin: 0; }
.nw-why { margin: 2px 0; }
.nw-still { display: block; color: #1f7a4d; margin-top: 2px; }
.nw-why small { display: block; color: #64748b; }
/* A list's Find / filter / Sort row wraps in the room its panel has, not the
   screen's: beside a run's checklist a panel can be 370 wide on a 1024 screen,
   and a fixed row pushed the whole page sideways (16 October 2026). */
.cr-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 6px 0 10px; }
.cr-tools > .cr-field { flex: 1 1 180px; min-width: 0; }
.cr-tools > .cr-field:last-of-type { flex-basis: 250px; }
.cr-tools > .cr-field:first-child { flex: 999 1 160px; }
.cr-tools > span:empty { display: none; }
.cr-tools > .btn { flex: 0 0 auto; }
.cr-field { display: grid; gap: 6px; font-size: 12px; font-weight: 750; color: #4b617a; }
.cr-field input, .cr-field select, .cr-field textarea { border: 1px solid #cddae7; border-radius: 9px; padding: 9px 12px; background: #fff; color: var(--cr-ink); min-width: 0; min-height: 40px; width: 100%; font: inherit; font-size: 13.5px; }
.cr-table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--cr-line); border-radius: 10px; }
.cr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cr-table th, .cr-table td { padding: 10px 10px; text-align: left; border-bottom: 1px solid var(--cr-line); vertical-align: top; }
/* Collections → Emails, by run (15 October 2026): one box per run, its edge
   orange while emails are still to go (or one can be sent again), green once done, purple for a day's
   letters made by hand. */
.em-shortcut { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: #eef6f1; border: 1px solid #b8dfc6; border-radius: 12px; padding: 14px 16px; }
.em-shortcut p { margin: 0; flex: 1; min-width: 240px; font-size: 13px; }
.em-find { display: grid; grid-template-columns: minmax(200px, 1.4fr) minmax(150px, 220px) minmax(170px, 260px); gap: 10px; margin-bottom: 14px; }
.em-run { border: 1px solid var(--cr-line); border-radius: 12px; margin-bottom: 12px; background: #fff; overflow: hidden; }
.em-run.is-left { border-left: 5px solid #e3a34a; }
.em-run.is-done { border-left: 5px solid var(--cr-green); }
.em-run.is-hand { border-left: 5px solid #8a7bd1; }
.em-run-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 14px 16px; align-items: center; }
.em-run-top > div:first-child { flex: 1 1 320px; min-width: 0; }
.em-run-name { font: 500 19px Georgia, "Times New Roman", serif; margin: 0 0 2px; color: #12243a; }
.em-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.em-stamp { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--cr-green); }
.em-back { color: var(--cr-red); overflow-wrap: anywhere; }
.em-seen, .cr-seen, .secondary.seen { color: #5b3f99; }
/* Send Again (16 October 2026): what happened before, and the address it can go to now. */
.em-before { overflow-wrap: anywhere; }
.em-again { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 6px; padding: 6px 8px;
  background: #eef6f1; border: 1px solid #b8dfc6; border-radius: 8px; }
.em-again .sub { overflow-wrap: anywhere; color: #1f5a37; }
.em-run-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.em-run-body { border-top: 1px solid var(--cr-line); background: #fafcfd; padding: 12px 16px 14px; }
.em-body-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.em-tally { margin-left: auto; }
.em-list { max-height: 440px; }
.em-list thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.em-none { margin: 12px 2px 4px; }
.em-chk { width: 36px; }
.em-chk input { width: 17px; height: 17px; cursor: pointer; }
.em-chk input:disabled { cursor: not-allowed; opacity: .35; }
.em-bar { position: sticky; bottom: 0; margin: 14px -24px -1px; padding: 14px 24px; background: #fff; border-top: 2px solid var(--cr-navy);
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; box-shadow: 0 -6px 18px #10203414; z-index: 2; }
.em-bar[hidden], .cr-warning[hidden] { display: none; }
.em-count { font-weight: 800; font-variant-numeric: tabular-nums; }
.em-note { flex: 1; min-width: 200px; }
.sn-veil { position: fixed; inset: 0; background: #0e1c2e73; display: none; align-items: center; justify-content: center; padding: 16px; z-index: 1000; }
.sn-veil.is-open { display: flex; }
.sn-dialog { background: #fff; border-radius: 14px; max-width: 540px; width: 100%; padding: 22px 24px; box-shadow: 0 20px 60px #00000040; color: #1d2a39; }
.sn-dialog h3 { font: 500 24px Georgia, "Times New Roman", serif; margin: 0 0 8px; color: #12243a; }
.sn-dialog ul { margin: 8px 0 14px 18px; padding: 0; font-size: 13.5px; line-height: 1.55; }
.sn-dialog ul.sn-who { max-height: 160px; overflow: auto; background: #f5f8fa; border-radius: 8px; padding: 8px 10px 8px 26px; margin-left: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.sn-confirm { display: flex; gap: 9px; align-items: flex-start; background: #f3f6f9; border-radius: 10px; padding: 11px 12px; cursor: pointer; font-size: 13.5px; }
.sn-confirm input { width: 17px; height: 17px; margin-top: 1px; }
.sn-said { color: #a0281c; font-weight: 600; margin: 10px 0 0; }
.sn-acts { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .em-find { grid-template-columns: 1fr; }
  .em-run-acts { justify-content: flex-start; }
  .em-tally { margin-left: 0; }
}
.cr-table th { color: #60738a; font-size: 11px; background: #fafcfe; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
.cr-table tbody tr:last-child td { border-bottom: 0; }
.cr-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-table .cr-who strong { display: block; }
.cr-table .cr-who small { display: block; color: var(--cr-muted); font-size: 11px; }
.cr-sorthead { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; font-weight: 800; cursor: pointer; }
.cr-sorthead .cr-mark { opacity: .55; margin-left: 3px; }
.cr-empty { color: var(--cr-muted); text-align: center; padding: 20px; }
.cr-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; font-size: 12px; color: var(--cr-muted); }
.cr-pager .cr-pages { display: flex; align-items: center; gap: 6px; }
.cr-batch { display: grid; grid-template-columns: minmax(160px, .9fr) minmax(0, 1.4fr) auto; align-items: center; gap: 15px; padding: 16px 0; border-bottom: 1px solid var(--cr-line); }
.cr-batch:last-child { border-bottom: 0; }
.cr-batch strong { display: block; }
.cr-files { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-why { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff4e5; border: 1px solid #f3d6ad; border-radius: 9px; padding: 7px 11px; color: #5b4423; }
.cr-why b { color: #a2621b; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; margin-right: 7px; }
/* Wraps like .cr-tools: a fixed row squeezed Add A Customer's picker to
   nothing beside the run's checklist (16 October 2026). */
.cr-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.cr-inline > .cr-field { flex: 1 1 200px; min-width: 0; }
.cr-inline > .cr-field:first-child { flex: 3 1 220px; }
.cr-inline > .btn { flex: 0 0 auto; }
.cr-log { display: grid; }
.cr-ev { display: grid; grid-template-columns: 160px minmax(0, 1fr) 150px; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--cr-line); font-size: 12.5px; }
.cr-ev:last-child { border-bottom: 0; }
.cr-ev time { color: var(--cr-muted); font-variant-numeric: tabular-nums; }
.cr-ev .cr-ev-who { color: var(--cr-muted); text-align: right; }
.cr-ev .cr-kind { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cr-blue); margin-right: 6px; }
.cr details.cr-details { border: 1px solid var(--cr-line); border-radius: 10px; background: #fff; }
.cr details.cr-details > summary { font-weight: 750; padding: 14px 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cr details.cr-details[open] > summary { border-bottom: 1px solid var(--cr-line); }
/* Reports brought in between runs, on a run's step 2 (Tyler, 15 October 2026). */
.cr .cr-between { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--cr-line); border-radius: 12px; background: #f6f9fc; }
.cr .cr-between h3 { margin: 0; }
.cr .cr-between .cr-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.cr details.cr-details > .cr-details-body { padding: 15px 17px; }
@media (max-width: 1100px) { .cr-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) { .cr-layout { grid-template-columns: 1fr; } .cr-side { position: static; } }
@media (max-width: 650px) {
  .cr-pagehead { flex-direction: column; } .cr-pagehead h1 { font-size: 29px; }
  .cr-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cr-panel-head, .cr-panel-body, .cr-panel-foot { padding: 16px; }
  .cr-batch { grid-template-columns: 1fr; }
  .cr-tools > .cr-field, .cr-inline > .cr-field { flex-basis: 100%; }
  .cr-ev { grid-template-columns: 1fr; } .cr-ev .cr-ev-who { text-align: left; }
}

/* Collections' title at the house size, as every tab's (the Lead, 14 October 2026). */
.mc .set-head h1.cr-tabs-title { font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 34px; line-height: 1.15; color: #12243a; }
@media (max-width: 650px) { .mc .set-head h1.cr-tabs-title { font-size: 29px; } }

/* Choose The Letters (Tyler's walk, 14 October 2026): a tab's count green when
   it is done, light red while something needs checking; Why on a light orange. */
.cl-tab .cl-c.is-done { background: #dcf2e6; color: #147d59; }
.cl-tab .cl-c.is-need { background: #fbe1e1; color: #a33d3d; }
.cl-whyline { background: #fff4e5; border-color: #f3d6ad; }
.cl-why { color: #5b4423; }
.cl-why b { color: #a2621b; }
.cr .cr-kind { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cr-blue); margin-right: 6px; }

/* Run Collections in Tyler's look: steps 1 and 2 in the run's own side
   checklist and panels; the steps after Start are named, not yet open. */
.cr-runlist .cr-layout > div > .cr-panel ~ .cr-panel { margin-top: 16px; }
.cr-stepnav.is-later { opacity: .55; cursor: default; }
.cr-stepnav.is-later:hover { background: none; }
.cr-runlist .drop-zone .drop { margin: 0; }
.cr-runlist .office-pick { justify-self: start; margin: 0; }

/* Held For A Look (14 October 2026): the accounts waiting for a person stand
   out in light red until each is decided. */
.cr-mini.is-need { border-color: #f0c8c8; background: #fff8f8; }
.cr-mini.is-need .cr-big { color: #a33d3d; }
.cr details.cr-held { border-color: #f0c8c8; }
.cr details.cr-held > summary { background: #fff8f8; border-radius: 10px 10px 0 0; }

/* ---- A card's groups as boxes (Tyler's Option C, 14 October 2026) ----------
   Groups with accounts are big boxes: the count, the name and how many are
   still to check — light red until checked, then green — banded in the card's
   own colour, the one open navy. Empty groups fold into one line. */
.cl-groups { padding: 12px 14px 4px; border-bottom: 1px solid var(--card-line); --acc: #94a3b8; }
.cl-acc-att { --acc: #b3261e; } .cl-acc-def { --acc: #d39a1c; } .cl-acc-term { --acc: #c2410c; }
.cl-acc-dtp { --acc: #5b3fa6; } .cl-acc-dis { --acc: #334155; } .cl-acc-evi { --acc: #7f1d1d; }
.cl-acc-pa { --acc: #1f7a4d; } .cl-acc-can { --acc: #9aa9b9; } .cl-acc-oct { --acc: #64748b; } .cl-acc-all { --acc: var(--blue); }
.cl-glabel { margin: 0 0 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #64778c; }
.cl-galldone { color: #147d59; }
.cl-gboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 10px; }
.cl-gbox { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; font: inherit; cursor: pointer;
  border: 1.5px solid #dce4ec; border-top: 4px solid var(--acc); border-radius: 12px; background: #fff; padding: 9px 12px 10px; color: #1d2a39; }
.cl-gbox b { font-size: 13.5px; }
.cl-gn { font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cl-gsub { font-size: 11.5px; color: #64778c; }
.cl-gbox.is-need { background: #fff8f8; border-color: #f2c4c4; border-top-color: var(--acc); }
.cl-gbox.is-need .cl-gn { color: #b3261e; }
.cl-gbox.is-done { background: #f6fcf9; border-color: #bfe3d0; border-top-color: var(--acc); }
.cl-gbox.is-done .cl-gn, .cl-gbox.is-done .cl-gsub { color: #147d59; }
.cl-gbox:hover { box-shadow: 0 2px 8px #14263d1a; }
.cl-gbox.is-on, .cl-gbox.is-on.is-need, .cl-gbox.is-on.is-done { background: #14263d; border-color: #14263d; border-top-color: var(--acc); color: #fff; }
.cl-gbox.is-on .cl-gn, .cl-gbox.is-on .cl-gsub { color: #fff; }
.cl-gbox:focus-visible, .cl-gpill:focus-visible { outline: 3px solid #9cc9ff; outline-offset: 2px; }
.cl-gempty { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.cl-gempty .cl-glabel { margin: 0 4px 0 0; }
.cl-gpill { border: 1.5px solid #bfe3d0; background: #f6fcf9; border-radius: 999px; padding: 4px 10px; font: 600 12px inherit; color: #4f6378; cursor: pointer; }
.cl-gpill.is-on { background: #14263d; border-color: #14263d; color: #fff; }
.cl-gpn { display: inline-grid; place-items: center; min-width: 20px; height: 18px; border-radius: 999px; background: #e4f4ec; color: #147d59; font-size: 11px; font-weight: 800; }
.cl-gfold { border: 0; background: none; color: #244c7b; font: 700 12.5px inherit; cursor: pointer; text-decoration: underline; padding: 4px; }
@media (max-width: 640px) { .cl-gboxes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .cl-gboxes { grid-template-columns: 1fr; } }

/* THE RUN PAGES USE THE WHOLE WIDTH (Tyler's practice run, 14 October 2026):
   a run's page and Run Collections spread to the menu and the right edge —
   the cards and their tables need the room — with the Collections title and
   tabs lined up with them. Every other page keeps its column. */
.page-view:has(.cr-layout) { width: 100%; }
.page-view:has(.cr-layout) .mc { max-width: none; }
.cr #run { scroll-margin-top: calc(var(--topbar-h, 60px) + 12px); }

/* Settings → Tabs: a page's box for a role without the tab is greyed — a page
   needs its tab (14 October 2026). */
td.is-off-tab input[type="checkbox"] { opacity: .35; }
td.is-off-tab::after { content: "Needs the tab"; display: block; font-size: 10.5px; color: #8a97a6; }
/* What a report did: its six tiles in one row where they fit, and the two
   held-account buttons side by side, never squeezed. */
.cr-tiles.cr-tiles-did { grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); gap: 10px; }
.cr-tiles-did .cr-mini { padding: 12px 12px; }
.cr-heldacts { display: inline-flex; gap: 6px; flex-wrap: nowrap; }
.cr-heldacts .btn { white-space: nowrap; }
/* Download Cards: the cards to put in the PDF, in a row that wraps. */
.cr-download-picks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 12px; }
.cr-download-picks .check { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
/* The run's one top line, and each print file with its Copy Link (14 October 2026). */
.cr-crumbs { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: #64778c; }
.cr-crumbs a { color: #244c7b; text-decoration: none; }
.cr-crumbs a:hover { text-decoration: underline; }
.cr #run.cr-crumbs { scroll-margin-top: calc(var(--topbar-h, 60px) + 12px); }
.cr-file { display: inline-flex; gap: 4px; align-items: center; }
.cr-copy { font-size: 12px; }
.cl-table .cl-stage .secondary { white-space: normal; }
/* A long stage ("Payment Arrangement - Current Amendment") wraps inside its
   column; the letter box's words fit at a laptop's width. */
.cl-table td.cl-stage { max-width: 132px; }
.cl-table .cl-stage .tag { width: auto; white-space: normal; }
.cl-becomes select { font-size: 12px; padding: 0 4px; }

/* ---- What's In This Property (views/property-invested.ejs) ------------------
   Over a contractor payment, to decide between more work and selling as it
   is. Its own classes only; the cards, tables and tags are the house look. */
.inv-essentials { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: -10px 0 8px;
  color: var(--muted); font-size: 14px; }
.inv-essentials span + span::before { content: "·"; margin-right: 12px; color: #b7c3cf; }
.inv-standing { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.inv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
  gap: 12px; margin-bottom: 14px; }
.inv-tile { border: 1px solid var(--card-line); border-radius: 12px; background: #fff;
  padding: 13px 15px; box-shadow: var(--card-shadow); }
.inv-tile small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; }
.inv-tile strong { display: block; margin: 4px 0 2px; font-size: 22px; font-weight: 650;
  font-variant-numeric: tabular-nums; }
.inv-tile span { color: var(--muted); font-size: 12.5px; }
.inv-gap { border-radius: 12px; padding: 12px 15px; margin: 0 0 18px; font-size: 14.5px;
  line-height: 1.5; border: 1px solid; }
.inv-gap.up { background: #e7f5ee; border-color: #bfe3cf; color: #164f33; }
.inv-gap.down { background: #fdf3dd; border-color: #f0dca0; color: #6b4d00; }
.inv-gap b, .inv-page .num { font-variant-numeric: tabular-nums; }
.inv-page td.num, .inv-page th.num { text-align: right; white-space: nowrap; }
.inv-page .primary { display: block; font-weight: 600; }
.inv-page .secondary { display: block; color: var(--muted); font-size: 12.5px; }
.inv-page tr.inv-total td { font-weight: 800; background: var(--soft); }
.inv-warn { margin: 12px 0 0; padding: 10px 13px; border-radius: 10px; background: #fdf3dd;
  color: #6b4d00; font-size: 13.5px; }
.inv-two { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 0 18px; }
/* On a phone the table is two columns — what, and how much — and when and
   where it stands go under the what, so nothing runs off the screen. */
.inv-page .inv-phone { display: none; }
@media (max-width: 640px) {
  .inv-page .inv-when, .inv-page .inv-stands { display: none; }
  .inv-page .inv-phone { display: block; }
  .inv-pairs { grid-template-columns: 1fr; gap: 2px 0; }
  .inv-pairs dd { margin-bottom: 8px; }
}
.inv-pairs { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0;
  font-size: 14.5px; }
.inv-pairs dt { color: var(--muted); }
.inv-pairs dd { margin: 0; font-weight: 600; }
.inv-pairs dd .secondary { font-weight: 400; }
.inv-links { margin: 6px 0 0; }
/* On a contractor payment: the essentials under the address, and the button. */
.place-essentials { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 2px 0 6px;
  color: var(--muted); font-size: 13.5px; }
.place-essentials span + span::before { content: "·"; margin-right: 8px; color: #b7c3cf; }
/* Each fact whole on a phone: "0.52 Acres" never splits across two lines. */
.place-essentials span, .inv-essentials span { white-space: nowrap; }

/* The number on a property's sign (views/partials/sign-number.ejs): the same
   small pill on the property page, the Inventory cards, a payment's property
   and What's In This Property. */
.sign-no { display: inline-flex; align-items: baseline; gap: 4px; border: 1px solid var(--card-line, #dbe5ec);
  border-radius: 99px; padding: 2px 9px; background: #fff; color: var(--ink-700, #41505e);
  font-size: .74rem; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.sign-no b { font-weight: 800; letter-spacing: .3px; }
.place-where .sign-no, .page-title .sign-no { margin-left: 8px; }

/* SALES (15 October 2026): All Sales and a sale's file — the house look,
   with only what is its own here. */
.sa-tabs { margin: 0 0 18px; }
.sa-stats .stat strong { font-size: 1.35rem; }
.sa-downloads { display: flex; gap: 8px; flex-wrap: wrap; }
.sa-list .sec-head { gap: 12px; flex-wrap: wrap; }
.sa-file .record-top { display: flex; gap: 8px; align-items: center; }
.sa-notes { white-space: pre-wrap; margin: 12px 0 0; color: var(--ink-700, #41505e); }
.sa-status-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
  align-items: end; }
.sa-status-form .sa-why { grid-column: span 2; }
.sa-status-go { display: flex; gap: 10px; align-items: center; grid-column: 1 / -1; }
.sa-status-go .note { margin: 0; }
/* Sales → Needs Review (16 October 2026): the open count on its tab, each problem with its fix. */
.sa-count { display: inline-block; min-width: 1.4em; padding: 0 6px; margin-left: 4px; border-radius: 999px;
  background: #e8833a; color: #fff; font-size: .78rem; font-weight: 700; text-align: center; }
.sa-checks { border-left: 4px solid #e8833a; }
.sa-checks ul { margin: 8px 0 0; padding-left: 18px; }
.sa-checks li + li { margin-top: 6px; }
.sa-review-intro { margin: 0 0 14px; }
.sa-review-area { border-left: 4px solid #e8833a; }
.sa-review-follow { border-left-color: #d9a400; }
.sa-review-list { display: grid; gap: 12px; }
.sa-review { display: grid; grid-template-columns: minmax(160px, 1fr) 3fr; gap: 14px; padding: 12px 14px;
  border: 1px solid var(--line, #dfe5ec); border-radius: 10px; background: #fff8f1; }
.sa-review-follow .sa-review { background: #fffbea; }
.sa-review-problem, .sa-review-fix { margin: 0 0 8px; }
.sa-review-fix { padding: 8px 10px; border-radius: 8px; background: #fff; }
.sa-review-sides { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 8px; }
.sa-review-sides dt { font-size: .78rem; color: var(--ink-500, #6b7a89); text-transform: uppercase; letter-spacing: .03em; }
.sa-review-sides dd { margin: 0; }
.sa-review-go { display: flex; gap: 8px; flex-wrap: wrap; }
/* Sales → Commissions (part 2, 16 October 2026): Everybody, a person's page, Who Is Kept Up With. */
.sa-year { display: flex; margin: 0 0 12px; }
.sa-year .filter { flex: 0 1 200px; }
.sa-inline { display: inline; margin: 0; }
.sa-inline select { font: inherit; padding: 2px 6px; border: 1px solid var(--card-line); border-radius: 6px; background: #fff; }
.sa-settle { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.sa-settle .sa-why { flex: 1 1 220px; }
.sa-take-off { display: flex; gap: 6px; align-items: center; }
.sa-take-off input { width: 120px; padding: 5px 8px; border: 1px solid var(--card-line); border-radius: 6px; }
tr.sa-removed td { color: var(--muted); text-decoration: line-through; }
tr.sa-removed td .secondary, tr.sa-removed td:last-child { text-decoration: none; }
.sa-people { display: grid; gap: 12px; }
.sa-person { display: grid; grid-template-columns: 3fr 1fr; gap: 14px; padding: 12px 14px;
  border: 1px solid var(--card-line); border-left: 4px solid #15784f; border-radius: 10px; background: #fff; }
.sa-person.is-off { border-left-color: var(--card-line); background: var(--soft); }
.sa-person-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; align-items: end; }
.sa-person-form textarea { width: 100%; }
.sa-person-go { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sa-join { display: grid; gap: 8px; align-content: end; }
.sa-person .check span { white-space: normal; overflow: visible; }
.sa-who-paid { border-left: 4px solid #0b78ea; }
.sa-bring-in { border-left: 4px solid var(--blue); }
.sa-bring-in .note.bad { color: var(--red-700); font-weight: 600; }
.sa-bring-in .sa-status-go .btn, .sa-preview .btn { flex: none; white-space: nowrap; }
.sa-preview { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--blue-2); }
.sa-preview h3 { margin: 0 0 6px; font-size: 1rem; }
.sa-preview p { margin: 0 0 8px; }
.sa-preview .table-wrap { margin: 8px 0 10px; background: #fff; border-radius: 8px; }
/* Sales → Reports (Sales part 5, 16 October 2026): a colour down the side of
   each report, so the four read as four; last year's columns quieter. */
.sa-showing { margin: 4px 0 8px; }
.sa-jump { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 600; }
.sa-report { border-left: 4px solid var(--blue-700); }
.sa-report-agents { border-left-color: var(--green-700); }
.sa-report-commissions { border-left-color: var(--gold-600); }
.sa-report-credit { border-left-color: #7847dd; }
.sa-figures th, .sa-figures td { white-space: nowrap; }
.sa-figures tfoot td { border-top: 2px solid var(--card-line); background: var(--soft); }
.sa-figures .sa-before { color: var(--muted); background: var(--soft); }
.sa-figures tr.sa-sub-head th { background: var(--surface-muted, var(--soft)); text-align: left; }
.sa-figures tr.sa-none td { color: var(--ink-700, #41505e); }
.sa-sub-title { margin: 18px 0 8px; font-size: 1rem; }
.sa-read { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.sa-read .btn { flex: none; white-space: nowrap; }
.sa-read .note { margin: 0; flex: 1 1 260px; }
@media (max-width: 640px) { .sa-person { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sa-review { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .sa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-status-form .sa-why { grid-column: 1 / -1; }
}
/* A phone: one box a row, so a seven-figure Sold stays on the screen (Tyler's whole-desk check, 17 October 2026). */
@media (max-width: 520px) { .sa-stats { grid-template-columns: 1fr; } }

/* ---- Certified slips: Matched / Unmatched, the accounts a slip could be, and
   See The Slip (Tyler, 16 October 2026) — on Certified Slips and a run's step 7. */
.cs-tabs { display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; margin: 4px 0 10px;
  border-radius: 10px; background: #ebf1f7; padding: 4px; }
.cs-tabs button { border: 0; border-radius: 7px; background: transparent; padding: 8px 13px; color: #52677e;
  font: inherit; font-weight: 750; cursor: pointer; }
.cs-tabs button.is-on { background: #fff; color: var(--navy); box-shadow: 0 1px 5px #152a4020; }
.cs-c { display: inline-grid; place-items: center; min-width: 22px; height: 20px; margin-left: 5px; border-radius: 999px;
  background: #eef2f6; padding: 0 6px; font-size: 11px; font-weight: 900; }
.cs-c.is-att { background: #fdecec; color: #b3261e; }
.cs-could { margin-top: 8px; border-left: 3px solid #cfe0f2; padding: 2px 0 2px 9px; }
.cs-could-head { color: #52677e; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cs-one { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; line-height: 1.35; }
.cs-one .btn.sm { margin-left: 2px; }
.cs-acts { white-space: nowrap; }
.cs-see { margin-top: 6px; white-space: nowrap; }
/* What the slip says keeps room to be read on a run's narrower page: the
   table scrolls sideways inside its box rather than crushing it a word a line. */
.cs-table td:nth-child(2) { min-width: 240px; }
.cs-preview td { background: #f5f8fb; }
.cs-preview iframe { display: block; width: 100%; max-width: 760px; height: 420px; border: 1px solid var(--card-line);
  border-radius: 8px; background: #fff; }
.cs-preview img.cs-slip { display: block; width: auto; max-width: 100%; max-height: 460px; border: 1px solid var(--card-line);
  border-radius: 8px; background: #fff; }
@media (max-width: 650px) {
  .cs-acts { white-space: normal; }
  .cs-preview iframe { height: 300px; max-width: calc(100vw - 72px); }
  .cs-preview img.cs-slip { max-width: calc(100vw - 72px); }
}

/* LOANS (17 October 2026): Loans and a loan's page — Allegiance's servicing,
   moved from AgentPortal. The house look; only the loan's own layout here. */
.ln-tabs { margin: 0 0 18px; }
.ln-stats .stat strong { font-size: 1.35rem; }
.ln-file .record-top { display: flex; gap: 8px; align-items: center; }
.ln-draft { border-left: 4px solid var(--gold-600, #bd8524); }
.ln-draft .sec-head { gap: 12px; flex-wrap: wrap; }
.ln-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ln-h3 { font-size: .95rem; margin: 16px 0 6px; }
.ln-record { border-left: 4px solid var(--blue-700, #176aa6); }
.ln-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-items: end; }
.ln-form .field { margin: 0; min-width: 0; }
.ln-form .field > span { color: var(--ink-700, #41505e); font-size: .78rem; font-weight: 700; }
.ln-form .ln-wide { grid-column: 1 / -1; }
.ln-checks { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; }
.ln-checks legend { font-size: .78rem; font-weight: 700; color: var(--ink-700, #41505e); margin-bottom: 4px; }
.ln-checks label { display: flex; gap: 8px; align-items: center; }
.ln-go { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ln-go .note { margin: 0; }
.ln-preview { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--blue-100, #eaf4fb); }
.ln-preview h3 { margin: 0 0 6px; font-size: 1rem; }
.ln-preview .table-wrap { margin: 10px 0 12px; background: var(--surface, #fff); border-radius: 10px; }
.ln-reserves { border-left: 4px solid var(--green-700, #176747); }
.ln-payments td { vertical-align: top; }
.ln-backed td { color: var(--ink-500, #71808d); }
.ln-backout summary, .ln-more summary { cursor: pointer; color: var(--blue-700, #176aa6); font-weight: 600; font-size: .85rem; margin-top: 6px; }
.ln-backout .ln-form, .ln-more .ln-form { margin-top: 10px; }
.ln-more + .ln-more { margin-top: 6px; }
label.ln-checks { display: flex; gap: 8px; align-items: center; }
/* Record Several Payments (19 October 2026): one row per payment, its split or why under it. */
.lp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-row { border: 1px solid var(--line, #dce3e8); border-radius: 12px; padding: 12px 14px; background: var(--surface, #fff); }
.lp-row.is-bad { border-color: var(--red-300, #e3a4a4); background: var(--red-50, #fff5f5); }
.lp-row.is-ask { border-color: var(--amber-300, #e6c27a); }
.lp-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; align-items: end; }
.lp-fields .lp-loan { grid-column: 1 / -1; }
.lp-said { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--blue-100, #eaf4fb); }
.lp-said p { margin: 0; }
.lp-said .lp-split { margin-top: 4px; font-size: .86rem; color: var(--ink-700, #41505e); }
.lp-why { margin: 10px 0 0; color: var(--red-700, #a12d2d); }
.lp-ask { margin: 10px 0 0; padding: 12px 14px; border: 2px solid var(--amber-400, #d9a43a); border-radius: 12px; background: var(--amber-50, #fff8e8); }
.lp-ask legend { font-weight: 800; padding: 0 6px; }
.lp-ask p { margin: 0 0 8px; }
.lp-ask .lp-ask-note { font-size: .86rem; color: var(--ink-700, #41505e); }
.lp-ask label { display: inline-flex; gap: 8px; align-items: center; margin-right: 18px; font-weight: 600; }
.lp-more { margin: 12px 0 0; }

.ln-payments th:nth-child(2), .ln-payments td:nth-child(2) { min-width: 240px; }
.ln-payments td:last-child, .ln-payments td:first-child { white-space: nowrap; }

/* Settings → Data → Bring Allegiance's Loans Into The Desk (18 October 2026). */
.lm-state .sec-head, .lm-report .sec-head { gap: 12px; flex-wrap: wrap; }
.lm-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.lm-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lm-checks li { padding-left: 22px; position: relative; }
.lm-checks li::before { content: "✕"; position: absolute; left: 0; color: var(--red-700, #b23a3a); font-weight: 700; }
.lm-checks li.ok::before { content: "✓"; color: var(--green-700, #176747); }
.lm-loan + .lm-loan { margin-top: 18px; }
.lm-loan h3 { font-size: 1rem; margin: 0 0 6px; }
.lm-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.lm-check { display: flex; gap: 8px; align-items: center; }
.lm-takeout { margin-top: 14px; }
.lm-takeout .note { margin: 0; }
.ln-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ln-emails .ln-switches { display: grid; gap: 8px; margin: 0 0 14px; }
.ln-emails .ln-switches .btn { justify-self: start; }
.ln-email-acts { margin: 0 0 14px; }
.ln-papers { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.ln-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.ln-payoff .ln-sub td { border-top: 1px solid var(--line, #dce3e8); }
.ln-payoff .ln-total td { font-size: 1.05rem; border-top: 2px solid var(--navy-900, #102b42); }

/* TAX FORMS (19 October 2026): the four steps of a January run, and Printer
   Setup. Loans part 5. */
.tf-num { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; border-radius: 50%;
  background: var(--blue-700, #176aa6); color: #fff; font-size: .8rem; vertical-align: 2px; }
.tf-step .sec-head { gap: 12px; flex-wrap: wrap; }
.tf-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.tf-card { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--card-line, #dce3e8); border-radius: 12px; cursor: pointer; }
.tf-card input { position: absolute; opacity: 0; pointer-events: none; }
.tf-card.on { border-color: var(--blue-700, #176aa6); background: var(--blue-100, #eaf4fb); }
.tf-card:focus-within { outline: 2px solid var(--blue-700, #176aa6); outline-offset: 2px; }
.tf-year .field { margin: 0; }
.tf-check { width: 36px; }
.tf-blocked td { background: #fdf6f6; }
.tf-skipped { margin-top: 12px; }
.tf-skipped summary { cursor: pointer; color: var(--blue-700, #176aa6); font-weight: 600; font-size: .85rem; }
.tf-skipped ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.tf-options { display: grid; gap: 8px; border: 0; margin: 0 0 14px; padding: 0; }
.tf-options label { display: flex; gap: 8px; align-items: flex-start; }
.tf-options .tf-in { margin-left: 24px; }
.tf-options .tf-in2 { margin-left: 48px; }
.tf-options .tf-corrected { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--card-line, #dce3e8); }
.tf-filed { border-left: 4px solid var(--green-700, #176747); }
.tf-filed-form { display: grid; gap: 10px; }
.tf-filed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tf-filed-list label { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ps-actions { margin-top: 12px; }
.ps-actions .field { margin: 0; }
.ps-boxes input { width: 90px; text-align: right; }
.ps-moved td:first-child { color: var(--blue-700, #176aa6); font-weight: 600; }
.ps-save { margin: 0 0 18px; }

/* A LOAN'S DETAILS, who is on it (19 October 2026). */
.ld-people { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.ld-people li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border: 1px solid var(--card-line, #dce3e8); border-radius: 10px; }
.ld-add { align-items: flex-end; }
.ld-add .field { margin: 0; flex: 1 1 260px; }

/* A LOAN'S PRINTOUTS (19 October 2026): the schedule, reports and history
   print as the page alone — no menu, no top bar, no buttons. */
.lp-table td, .lp-table th { white-space: nowrap; }
.lp-next td { background: var(--blue-100, #eaf4fb); font-weight: 600; }
.lp-total td { border-top: 2px solid var(--card-line, #dce3e8); }
@media print {
  .sidebar, .topbar, .page-help-row, .help-row, .lp-noprint, .ln-tools, .eyebrow, #panel { display: none !important; }
  .workspace, .workspace-body, .page-view { margin: 0 !important; padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc; break-inside: auto; }
  .table-wrap { overflow: visible !important; }
  body { background: #fff !important; }
}
.lp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; margin: 0 0 14px; }
.lp-facts dt { font-size: .75rem; font-weight: 700; color: var(--ink-700, #41505e); }
.lp-facts dd { margin: 0; overflow-wrap: anywhere; }
.lp-email { width: 100%; min-height: 720px; border: 1px solid var(--card-line, #dce3e8); border-radius: 10px; background: #f1f5f9; margin-bottom: 14px; }
.ls-words + .ls-words { margin-top: 8px; }
.ln-overview { margin-bottom: 18px; }
.ln-overview .record-facts { margin: 0; }
.ln-owed { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; max-width: 460px; }
.ln-owed li { display: flex; justify-content: space-between; gap: 12px; }
.ln-owed-total { border-top: 1px solid var(--card-line, #dce3e8); padding-top: 4px; font-weight: 700; }

/* LOANS FROM TYLER'S MOCKUP (19 October 2026): six tiles on the list, search,
   + Payment on a row; a loan's own page with its tiles and six tabs; Record A
   Transaction with how it applies beside it as it is typed. */
.ln-tiles.six { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .ln-tiles.six { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ln-tiles.six { grid-template-columns: 1fr; } }
.ln-list .sec-head { gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.ln-find { flex: 0 1 320px; margin: 0; }
.ln-find input { width: 100%; }
.ln-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ln-head .record-top { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.lr-crumb a { color: var(--blue); }
.ln-stats .stat .tag { margin-right: 6px; }
.ln-ftabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 0 18px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.ln-ftabs .mc-tab { white-space: nowrap; }
.ln-panel > .card, .ln-panel > .detail-columns { margin-bottom: 18px; }
.ln-big { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; color: var(--text); }
.ln-next { border-left: 4px solid var(--blue); }
.ln-act { margin: 14px 0 0; }
.ln-lines { list-style: none; margin: 0; padding: 0; }
.ln-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--card-line); }
.ln-lines li:last-child { border-bottom: 0; }
.ln-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0 0 18px; }
.ln-doc-form { display: contents; }
.ln-doc { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--card-line); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--card-shadow); color: var(--text); text-align: left; font: inherit; cursor: pointer; text-decoration: none; }
.ln-doc:hover { border-color: var(--blue); }
.ln-doc b { font-size: .98rem; }
.ln-doc small { color: var(--muted); font-size: .8rem; }

/* Record A Transaction. */
.lr-kinds { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.lr-kind { padding: 10px 14px; border: 1px solid var(--card-line); border-radius: 10px; background: var(--card);
  color: var(--text); font-weight: 700; text-decoration: none; }
.lr-kind.on { border-color: var(--blue); background: var(--blue-2); color: var(--blue); }
.lr-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .8fr); gap: 18px; align-items: start; }
.lr-main > .card { margin-bottom: 16px; }
.lr-side { position: sticky; top: calc(var(--topbar-h) + 14px); }
.lr-side h2 { margin: 0 0 2px; }
.lr-banner { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--blue-2); }
.lr-options { display: grid; gap: 8px; }
.lr-option { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--card-line); border-radius: 10px; cursor: pointer; }
.lr-option:has(input:checked) { border-color: var(--blue); background: var(--blue-2); }
.lr-option input { margin-top: 3px; }
.lr-option small { display: block; color: var(--muted); font-weight: 400; margin-top: 2px; }
.lr-option b { font-weight: 700; }
.lr-layout .ln-checks { margin-top: 14px; }
.lr-layout[data-apply="principal"] .lr-when-owed, .lr-layout[data-apply="escrow"] .lr-when-owed { display: none; }
.lr-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; }
.lr-foot .note { margin: 0; }
.lr-amount { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; margin-top: 10px; }
.lr-what { margin: 0 0 8px; color: var(--muted); font-weight: 600; }
.lr-said { margin: 8px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--soft); }
.lr-said.is-ok { background: var(--green-100, #e8f5ee); }
.lr-said.is-warn { background: var(--amber-50, #fff8e8); }
.lr-why { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--red-50, #fff5f5); color: var(--red-700, #a12d2d); }
.lr-wait { margin: 10px 0 0; color: var(--muted); }
.lr-lines { list-style: none; margin: 10px 0 0; padding: 0; }
.lr-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--card-line); }
.lr-lines li:last-child { border-bottom: 0; }
.lr-check { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border: 2px solid var(--amber-400, #d9a43a); border-radius: 10px; background: var(--amber-50, #fff8e8); font-weight: 600; }
.lr-record { margin-top: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lr-record .note { margin: 0; }
.is-live .lr-nojs { display: none; }
.lr-facts { display: grid; gap: 6px; margin: 12px 0; }
.lr-facts div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--card-line); padding: 6px 0; }
.lr-facts dt { color: var(--muted); }
.lr-facts dd { margin: 0; font-weight: 700; text-align: right; }
.lr-review-split { max-height: 40vh; overflow: auto; }
@media (max-width: 900px) {
  .lr-layout { grid-template-columns: minmax(0, 1fr); }
  .lr-side { position: static; }
}
.ln-list td .btn { white-space: nowrap; }